Disable uncached pieces while offline

src/components/app/pieces-tab/index.jsx

@@ -27,6 +27,8 @@ const PiecesTabComponent = ({
   sorting,
   changeSorting,
   visiblePieceIds,
+  isOnline,
+  cachedPieceIds,
 }) => {
   let isValidSinglePiece = false;
   let filteredPieces;
@@ -57,6 +59,11 @@ const PiecesTabComponent = ({
 
   const currentSorting = sortings[sorting.key];
 
+  const isPieceDisabled = piece =>
+    !isSupported ||
+    isRecordingGenerationInProgress ||
+    (!isOnline && !cachedPieceIds.has(piece.id));
+
   return (
     <div className="pieces-tab">
       <div className="filter-bar">
@@ -127,13 +134,12 @@ const PiecesTabComponent = ({
               playTime={playTime[piece.id]}
               isSelected={selectedPieceId === piece.id}
               isPlaying={isPlaying}
-              isDisabled={!isSupported || isRecordingGenerationInProgress}
+              isDisabled={isPieceDisabled(piece)}
               isLoading={isLoading}
               onPieceClick={onPieceClick}
               onPlayClick={onPlayClick}
               onStopClick={onStopClick}
               changeFilter={clearAndChangeFilter}
-              isRecording={isRecordingGenerationInProgress}
             />
           ))}
         </div>

src/components/app/pieces-tab/piece/index.jsx

@@ -22,17 +22,14 @@ const Piece = ({
   isSelected,
   isPlaying,
   isLoading,
-  isRecording,
-  isDisabled,
   onPieceClick,
   onPlayClick,
   onStopClick,
   changeFilter,
+  isDisabled = false,
 }) => {
   const handlePieceClick = () => {
-    if (isRecording || isDisabled) {
-      onPieceClick(piece);
-    } else {
+    if (!isDisabled) {
       if (!isSelected) {
         onPieceClick(piece);
       }
@@ -46,8 +43,7 @@ const Piece = ({
   let primaryTitle = `Select ${piece.title}`;
   if (isDisabled) {
     centerButtonTitle = 'This piece is not currently available';
-  } else if (isRecording) {
-    centerButtonTitle = 'Playback is disabled while recordings are generated';
+    primaryTitle = centerButtonTitle;
   } else if (isPlaying) {
     centerButtonTitle = 'Stop';
     primaryTitle = `${piece.title} is playing`;
@@ -88,16 +84,19 @@ const Piece = ({
               : handlePieceClick
           }
           title={centerButtonTitle}
-          isDisabled={isRecording || isDisabled}
+          isDisabled={isDisabled}
         />
         <MoreButton className="piece__btns__btn" pieceId={piece.id} />
       </div>
       <div className="piece__info">
         <div className="piece__info__title">
           <LinkButton
-            className="piece__info__title__btn"
+            className={classNames('piece__info__title__btn', {
+              'piece__info__title__btn--is-disabled': isDisabled,
+            })}
             onClick={handlePieceClick}
             title={primaryTitle}
+            isDisabled={isDisabled}
           >
             {piece.title}
           </LinkButton>
@@ -137,13 +136,12 @@ Piece.propTypes = {
   playTime: propTypes.number,
   isSelected: propTypes.bool.isRequired,
   isPlaying: propTypes.bool.isRequired,
-  isDisabled: propTypes.bool.isRequired,
   isLoading: propTypes.bool.isRequired,
-  isRecording: propTypes.bool.isRequired,
   onPieceClick: propTypes.func.isRequired,
   onPlayClick: propTypes.func.isRequired,
   onStopClick: propTypes.func.isRequired,
   changeFilter: propTypes.func.isRequired,
+  isDisabled: propTypes.bool,
 };
 
 export default Piece;

src/components/app/pieces-tab/piece/piece.scss

@@ -89,6 +89,16 @@ $pieceWidth: 12em;
             color: $primaryHoverColor;
           }
         }
+
+        &--is-disabled {
+          color: $primaryHoverColor;
+
+          @include hoverStyle(#{&}) {
+            &:hover {
+              text-decoration: none;
+            }
+          }
+        }
       }
     }
 

src/components/shared/link-button/index.jsx

@@ -3,10 +3,18 @@ import propTypes from 'prop-types';
 import classNames from 'classnames';
 import './link-button.scss';
 
-const LinkButton = ({ onClick, title, children, className = '' }) => (
+const LinkButton = ({
+  onClick,
+  title,
+  children,
+  isDisabled = false,
+  className = '',
+}) => (
   <button
     type="button"
-    className={classNames('link-btn', className)}
+    className={classNames('link-btn', className, {
+      'link-btn--is-disabled': isDisabled,
+    })}
     title={title}
     onClick={onClick}
   >
@@ -21,6 +29,7 @@ LinkButton.propTypes = {
     propTypes.arrayOf(propTypes.node),
     propTypes.node,
   ]),
+  isDisabled: propTypes.bool,
   className: propTypes.string,
 };
 

src/components/shared/link-button/link-button.scss

@@ -10,6 +10,17 @@
   font: inherit;
   color: $secondaryColor;
 
+  &--is-disabled {
+    cursor: not-allowed;
+    color: $secondaryActiveColor;
+
+    @include hoverStyle(#{&}) {
+      &:hover {
+        text-decoration: none;
+      }
+    }
+  }
+
   &:focus {
     outline: none;
   }

src/containers/pieces-tab.container.js

@@ -19,6 +19,8 @@ const mapStateToProps = ({
   filter,
   sorting,
   visiblePieceIds,
+  isOnline,
+  cachedPieceIds,
 }) => ({
   selectedPieceId,
   isPlaying,
@@ -27,6 +29,8 @@ const mapStateToProps = ({
   filter,
   sorting,
   visiblePieceIds,
+  isOnline,
+  cachedPieceIds,
   isLoading: loadingPieceBuildId !== '',
   isRecordingGenerationInProgress: isRecordingGenerationInProgress(
     generatedRecordings

src/store/actions/creators/mark-piece-build-loaded.creator.js

@@ -1,6 +1,6 @@
 import MARK_PIECE_BUILD_LOADED from '../types/mark-piece-build-loaded.type';
 
-export default buildId => ({
+export default ({ performanceId, piece }) => ({
   type: MARK_PIECE_BUILD_LOADED,
-  payload: buildId,
+  payload: { performanceId, pieceId: piece.id },
 });

src/store/index.js

@@ -14,6 +14,7 @@ import notificationsMiddleware from './middleware/notifications.middleware';
 import STATE_STORAGE_KEY from './middleware/local-storage.middleware/key';
 import getOnlineStatus from './get-online-status';
 import pieces from '../pieces/index';
+import { version } from '../../package.json';
 
 const MOBILE_VOLUME_PCT = 95;
 
@@ -51,6 +52,10 @@ const initialState = Object.assign({}, storedState, {
   timer: Object.assign({}, storedState.timer, { remainingMS: 0 }),
   favorites: new Set(storedState.favorites),
   isInstallable: false,
+  cachedPieceIds:
+    storedState.version === version
+      ? new Set(storedState.cachedPieceIds)
+      : new Set(),
 });
 
 if (isMobile) {

src/store/middleware/local-storage.middleware/index.js

@@ -1,7 +1,12 @@
 import KEY from './key';
 
 const stringify = state =>
-  JSON.stringify(Object.assign({}, state, { favorites: [...state.favorites] }));
+  JSON.stringify(
+    Object.assign({}, state, {
+      favorites: [...state.favorites],
+      cachedPieceIds: [...state.cachedPieceIds],
+    })
+  );
 
 const localStorageMiddleware = store => next => action => {
   const previousStateString = stringify(store.getState());

src/store/middleware/pieces.middleware/make-play-piece.js

@@ -51,7 +51,7 @@ const makePlayPiece = (store, performances) => {
           piecePerformance.isLoaded = true;
           isPerformanceBuilding = false;
           const { selectedPieceId, isPlaying } = store.getState();
-          store.dispatch(markPieceBuildLoaded(piecePerformance.performanceId));
+          store.dispatch(markPieceBuildLoaded(piecePerformance));
           if (
             lastBuildId === piecePerformance.performanceId &&
             selectedPieceId === piece.id &&

src/store/reducers/cached-piece-ids.reducer.js

@@ -0,0 +1,8 @@
+import MARK_PIECE_BUILD_LOADED from '../actions/types/mark-piece-build-loaded.type';
+
+const cachedPieceIdsReducer = (state = new Set(), action) =>
+  action.type === MARK_PIECE_BUILD_LOADED
+    ? new Set([...state, action.payload.pieceId])
+    : state;
+
+export default cachedPieceIdsReducer;

src/store/reducers/loading-piece-build-id.reducer.js

@@ -6,7 +6,7 @@ const loadingPieceBuildIdReducer = (state = '', action) => {
     return action.payload;
   } else if (
     action.type === MARK_PIECE_BUILD_LOADED &&
-    state === action.payload
+    state === action.payload.performanceId
   ) {
     return '';
   }

src/store/reducers/root.reducer.js

@@ -20,6 +20,7 @@ import filter from './filter.reducer';
 import sorting from './sorting.reducer';
 import visiblePieceIds from './visible-piece-ids.reducer';
 import isInstallable from './is-installable.reducer';
+import cachedPieceIds from './cached-piece-ids.reducer';
 
 const combinedReducer = combineReducers({
   isMuted,
@@ -42,6 +43,7 @@ const combinedReducer = combineReducers({
   filter,
   sorting,
   isInstallable,
+  cachedPieceIds,
 });
 
 const rootReducer = (state = {}, action) => {