Merge pull request #214 from generative-music/develop

v1.38.0
generativefm · Dec 7, 2020 · fd4367b · fd4367b
2 parents 42f2925 + fd405fe
commit fd4367b
Show file tree

Hide file tree

Showing 39 changed files with 704 additions and 922 deletions.
diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
@@ -9,6 +9,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 (none)
 
+## [1.35.0] - 2020-07-11
+
+### Added
+
+- Feature analytics tracking
+
 ## [1.34.0] - 2020-07-05
 
 ### Added
@@ -740,7 +746,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Sound files will no longer be fetched and cached during service worker installation. They'll be cached once they are fetched for the first time. This significantly reduces cache usage since only one audio format is used per client.
 
-[unreleased]: https://github.com/generative-music/generative.fm/compare/v1.34.0...HEAD
+[unreleased]: https://github.com/generative-music/generative.fm/compare/v1.35.0...HEAD
+[1.35.0]: https://github.com/generative-music/generative.fm/compare/v1.34.0...v1.35.0
 [1.34.0]: https://github.com/generative-music/generative.fm/compare/v1.33.1...v1.34.0
 [1.33.1]: https://github.com/generative-music/generative.fm/compare/v1.33.0...v1.33.1
 [1.33.0]: https://github.com/generative-music/generative.fm/compare/v1.32.0...v1.33.0

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "generative.fm",
-  "version": "1.34.0",
+  "version": "1.38.0",
   "description": "A platform for playing generative music in the browser",
   "main": "index.js",
   "scripts": {
@@ -65,10 +65,11 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.29",
     "@fortawesome/free-solid-svg-icons": "^5.13.1",
     "@fortawesome/react-fontawesome": "^0.1.11",
-    "@generative-music/pieces-alex-bainter": "^3.4.0",
-    "@generative-music/samples-alex-bainter": "^1.1.0",
+    "@generative-music/pieces-alex-bainter": "^4.3.1",
+    "@generative-music/samples-alex-bainter": "^2.3.0",
     "@generative-music/visualizer": "^2.3.5",
-    "@generative-music/web-provider": "^1.1.0",
+    "@generative-music/web-library": "^0.2.1",
+    "@generative-music/web-provider": "^2.0.4",
     "audiobuffer-to-wav": "^1.0.0",
     "classnames": "^2.2.6",
     "clone": "^2.1.2",
@@ -81,7 +82,7 @@
     "react-tiny-popover": "3.4.1",
     "redux": "^4.0.5",
     "svg.js": "^2.7.1",
-    "tone": "^13.8.25",
+    "tone": "^14.7.58",
     "uuid": "^3.4.0"
   }
 }
diff --git a/piece-loader.js b/piece-loader.js
@@ -5,10 +5,10 @@ const DEFAULT_VISUALIZATION_TYPE = 'squareCut';
 const pieceLoader = source => {
   const pieceManifest = JSON.parse(source);
   const output = `import image from '${pieceManifest.image}';
-  import makePiece from '${pieceManifest.makePiece}';
+  import activate from '${pieceManifest.makePiece}';
   export default {
     image,
-    makePiece,
+    activate,
     title: '${pieceManifest.title}',
     id: '${pieceManifest.artistId}-${pieceManifest.id}',
     artist: '${pieceManifest.artistId}',

diff --git a/src/components/app/about-tab/index.jsx b/src/components/app/about-tab/index.jsx
@@ -1,16 +1,10 @@
 import React, { useEffect } from 'react';
 import propTypes from 'prop-types';
-import { applyUpdate } from 'offline-plugin/runtime';
 import patronImage from '@images/patron.png';
 import Credits from './credits';
 import './about.scss';
 
-const handleUpdateClick = e => {
-  e.preventDefault();
-  applyUpdate();
-};
-
-const AboutTabComponent = ({ version, isUpdateAvailable, isOnline }) => {
+const AboutTabComponent = ({ version }) => {
   useEffect(() => {
     if (window.twttr) {
       window.twttr.ready(twttr => {
@@ -20,14 +14,6 @@ const AboutTabComponent = ({ version, isUpdateAvailable, isOnline }) => {
   }, [window.twttr]);
   return (
     <div className="about-tab centered-tab">
-      {isUpdateAvailable && isOnline && (
-        <p className="update-alert">
-          <a href="/" onClick={handleUpdateClick}>
-            <span className="update-alert__dot" />
-            New Version Available
-          </a>
-        </p>
-      )}
       <p>
         This site is a collection of generative music pieces which can be
         listened to. The term &quot;generative music&quot; describes music which
@@ -71,7 +57,7 @@ const AboutTabComponent = ({ version, isUpdateAvailable, isOnline }) => {
       </p>
       <p>
         If you enjoy this project, consider supporting it:
-        <div className="support-methods">
+        <span className="support-methods">
           <a
             href="https://www.patreon.com/bePatron?u=2484731"
             target="_blank"
@@ -80,14 +66,13 @@ const AboutTabComponent = ({ version, isUpdateAvailable, isOnline }) => {
             Patreon
           </a>
           <a
-            href="https://paypal.me/alexbainter"
+            href="https://alexbainter.com/tip"
             target="_blank"
             rel="noreferrer noopener"
           >
-            PayPal
+            PayPal, Bandcamp, Crypto, etc
           </a>
-          <span>BTC: 3DMb8BQVTtfVv59pMLmZmHr6xSoJsb3P4Z</span>
-        </div>
+        </span>
       </p>
       <p>{`v${version}`}</p>
       <p>
@@ -117,8 +102,6 @@ const AboutTabComponent = ({ version, isUpdateAvailable, isOnline }) => {
 
 AboutTabComponent.propTypes = {
   version: propTypes.string,
-  isUpdateAvailable: propTypes.bool,
-  isOnline: propTypes.bool,
 };
 
 export default AboutTabComponent;
diff --git a/src/components/app/app.scss b/src/components/app/app.scss
@@ -8,6 +8,8 @@
 
   a {
     color: $secondaryColor;
+    text-decoration: none;
+    border-bottom: 1px solid $secondaryColor;
   }
 
   &__content {
@@ -22,6 +24,7 @@
     position: fixed;
     bottom: 0;
     left: 0;
+    box-shadow: 0 -4px 4px rgba(0, 0, 0, 0.25);
   }
 
   .centered-tab {

diff --git a/src/components/app/controls/control-button/control-button.scss b/src/components/app/controls/control-button/control-button.scss
@@ -11,6 +11,10 @@
   cursor: pointer;
   margin: 0.25rem;
   color: $primaryColor;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: color 200ms;
 
   @include hoverStyle(#{&}) {
     &:hover {
@@ -37,6 +41,8 @@
   &--is-primary {
     border: 1px solid $primaryColor;
     border-radius: 50%;
+    display: flex;
+    transition: border-color 200ms;
 
     @include hoverStyle(#{&}) {
       &:hover {
@@ -82,19 +88,16 @@
     left: 50%;
     transform: translate(-50%, -50%);
     margin-bottom: 0.8rem;
+    transition: background-color 200ms;
   }
 
   & > .svg-inline--fa {
-    position: absolute;
-    top: 50%;
-    left: 50%;
     font-size: 1.5em;
-    transform: translate(-50%, -50%);
   }
 
   // Optically center the "play" icon
   & > .fa-play {
-    transform: translate(-37%, -50%);
+    transform: translateX(14%);
   }
 }
 

diff --git a/src/components/app/controls/controls.scss b/src/components/app/controls/controls.scss
@@ -4,10 +4,9 @@
 $sideControlWidth: 33%;
 
 .controls {
-  background: $backgroundColor;
+  background: #1e1e1e;
   height: $controlsHeight;
   width: 100%;
-  border-top: 1px solid $secondaryColor;
   display: flex;
   justify-content: space-between;
   align-items: center;

diff --git a/src/components/app/controls/main-controls/timer-config/index.jsx b/src/components/app/controls/main-controls/timer-config/index.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useMemo } from 'react';
+import React, { useState, useMemo, useCallback } from 'react';
 import propTypes from 'prop-types';
 import TextButton from '@components/shared/text-button';
 import './timer-config.scss';
@@ -15,6 +15,10 @@ const StartTimerContent = ({ lastDurationsMS, startTimer }) => {
     startTimer(durationMS);
   };
 
+  const handleDurationInputChange = useCallback(event => {
+    setCustomDuration(event.target.value);
+  }, []);
+
   return (
     <div>
       <ul className="timer-box__durations">
@@ -34,7 +38,7 @@ const StartTimerContent = ({ lastDurationsMS, startTimer }) => {
         size={3}
         className="timer-box__input"
         value={customDuration}
-        onChange={event => setCustomDuration(event.target.value)}
+        onChange={handleDurationInputChange}
         title="Timer duration in minutes"
       />
       minutes
@@ -64,6 +68,9 @@ const ADD_MS = [1 * 60 * 1000, 3 * 60 * 1000, 5 * 60 * 1000];
 const InProgressContent = ({ remainingMS, updateTimer, cancelTimer }) => {
   const remainingMinutes = Math.round(remainingMS / 60 / 1000);
   const remainingSeconds = Math.round(remainingMS / 1000);
+
+  const handleCancelClick = useCallback(() => cancelTimer(), [cancelTimer]);
+
   return (
     <div>
       <span className="timer-box__time">
@@ -77,15 +84,15 @@ const InProgressContent = ({ remainingMS, updateTimer, cancelTimer }) => {
             <button
               type="button"
               className="timer-box__durations__item__btn"
-              onClick={() => updateTimer(addMS)}
+              onClick={() => updateTimer(addMS, true)}
               title={`Add ${addMS / 60000} minutes to timer`}
             >{`+ ${addMS / 60 / 1000} minutes`}</button>
           </li>
         ))}
       </ul>
       <TextButton
         className="timer-box__btn"
-        onClick={() => cancelTimer()}
+        onClick={handleCancelClick}
         title="Cancel timer and resume endless playback"
       >
         Cancel Timer

diff --git a/src/components/app/controls/main-controls/timer-config/timer-config.scss b/src/components/app/controls/main-controls/timer-config/timer-config.scss
@@ -2,11 +2,12 @@
 @import '_mixins';
 
 .timer-box {
-  border: 1px solid $secondaryColor;
-  background-color: $backgroundColor;
+  background-color: #252525;
   color: $primaryColor;
   padding: 1em;
   text-align: center;
+  border-radius: 6px;
+  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
 
   &__title {
     margin-top: 0;
@@ -20,17 +21,18 @@
   }
 
   &__btn {
+    transition: background-color 200ms;
     &:hover {
-      background: $primaryHoverColor;
+      background-color: $primaryHoverColor;
     }
 
     &:active {
-      background: $primaryActiveColor;
+      background-color: $primaryActiveColor;
     }
 
     &:disabled {
       &:hover {
-        background: $primaryActiveColor;
+        background-color: $primaryActiveColor;
       }
     }
   }
@@ -55,6 +57,7 @@
         cursor: pointer;
         font-size: 1em;
         color: $primaryColor;
+        transition: background-color 200ms;
 
         // no need for @include hoverStyle since clicking
         // will hide these

diff --git a/src/components/app/index.jsx b/src/components/app/index.jsx
@@ -12,9 +12,15 @@ import HelpTabComponent from './help-tab';
 import TitleNavContainer from '@containers/title-nav.container';
 import AboutTabContainer from '@containers/about-tab.container';
 import PiecesTabContainer from '@containers/pieces-tab.container';
-import RecordTabContainer from '@containers/record-tab.container';
 import './app.scss';
 
+const RecordRedirect = () => {
+  useEffect(() => {
+    window.location = 'https://record.generative.fm';
+  });
+  return null;
+};
+
 const AppComponent = () => {
   const [isHoverEnabled, setIsHoverEnabled] = useState(!isMobile);
   useEffect(() => {
@@ -43,15 +49,13 @@ const AppComponent = () => {
       <div className={classNames('app', { 'has-hover': isHoverEnabled })}>
         <div className="app__content">
           <div>
-            <nav>
-              <TitleNavContainer />
-            </nav>
+            <TitleNavContainer />
             <main>
               <Switch>
                 <Route exact path="/" component={PiecesTabContainer} />
                 <Route exact path="/about" component={AboutTabContainer} />
                 <Route exact path="/help" component={HelpTabComponent} />
-                <Route exact path="/record" component={RecordTabContainer} />
+                <Route exact path="/record" component={RecordRedirect} />
                 <Route
                   path="/music/:pieceId"
                   render={({ match, history }) => (

diff --git a/src/components/app/pieces-tab/index.jsx b/src/components/app/pieces-tab/index.jsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import propTypes from 'prop-types';
 import { Redirect } from 'react-router';
 import pieces from '@pieces';
-import provider from '@pieces/provider';
+import library from '@pieces/library';
 import piecesById from '@pieces/by-id';
 import LinkButton from '@components/shared/link-button';
 import PieceFilter from './piece-filter';
@@ -72,7 +72,7 @@ const PiecesTabComponent = ({
     if (!isOnline) {
       Promise.all(
         pieces.map(({ id, sampleNames }) =>
-          provider.canProvide(sampleNames).then(result => [id, result])
+          library.canProvide(sampleNames).then(result => [id, result])
         )
       ).then(results => {
         setIsPieceCachedMap(new Map(results));

diff --git a/src/components/app/pieces-tab/piece/piece.scss b/src/components/app/pieces-tab/piece/piece.scss
@@ -34,7 +34,7 @@ $pieceWidth: 12em;
   overflow: hidden;
   width: $pieceWidth;
   margin: 0 1em 2.5em;
-  transition: box-shadow 150ms;
+  transition: filter 200ms;
 
   &--is-disabled {
     .piece__image {
@@ -46,18 +46,20 @@ $pieceWidth: 12em;
     width: $pieceWidth;
     height: $pieceWidth;
     position: relative;
-    background-color: #eee;
     cursor: pointer;
     transition: filter 150ms;
+    border-radius: 6px;
+    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
 
     @include hoverStyle(#{&}) {
       &:hover {
-        filter: invert(0.25);
+        filter: brightness(33%);
       }
     }
 
     & > img {
       max-width: 100%;
+      border-radius: 6px;
     }
 
     &__is-playing-indicator {