Refactor stream lookup error handling and remove redundant locked state

Author: nukeop

packages/app/app/actions/queue.test.ts

@@ -39,7 +39,7 @@ describe('Queue actions tests', () => {
       });
 
       const dispatchOperation = jest.fn();
-      const findStreamsForTrackOperation = QueueOperations.findStreamsForTrack(trackIndex);
+      const findStreamsForTrackOperation = QueueOperations.findStreamsForTrack(trackIndex, 'stream lookup error');
       findStreamsForTrackOperation(dispatchOperation, stateResolver)
         .then(() => {
           // The track without streams should have been removed from the queue.

packages/app/app/actions/queue.ts

@@ -233,7 +233,7 @@ const resolveStreams = async (
   return resolveSourceUrlForTheFirstStream(streamData, selectedStreamProvider);
 };
 
-export const findStreamsForTrack = (index: number) => async (dispatch, getState) => {
+export const findStreamsForTrack = (index: number, streamLookupErrorMessage: string) => async (dispatch, getState) => {
   const getLatestTrack = () => queueSelector(getState()).queueItems[index];
   let track = getLatestTrack();
 
@@ -284,7 +284,7 @@ export const findStreamsForTrack = (index: number) => async (dispatch, getState)
       ...track,
       loading: false,
       error: {
-        message: 'Stream lookup error.',
+        message: streamLookupErrorMessage,
         details: e.message
       }
     }));

packages/app/app/components/PlayQueue/QueueItemClone/index.tsx

@@ -37,9 +37,6 @@ export const QueueItemClone: (props: QueueItemCloneProps) => DraggableChildrenFn
       onRemove={onRemoveTrack(rubric.source.index)}
       onReload={onReloadTrack(rubric.source.index)}
       duration={formatTrackDuration(queue.queueItems[rubric.source.index])}
-      strings={{
-        locked: t('locked')
-      }}
     />
   </div>;
 };

packages/app/app/components/PlayQueue/index.tsx

@@ -180,9 +180,6 @@ const PlayQueue: React.FC<PlayQueueProps> = ({
                     onSelect={onSelectTrack(index)}
                     onRemove={onRemoveTrack(index)}
                     onReload={onReloadTrack(index)}
-                    strings={{
-                      locked: t('locked')
-                    }}
                   />
                 }
                 isQueueItemCompact={data.settings.compactQueueBar as boolean}

packages/app/app/containers/PlayQueueContainer/__snapshots__/PlayQueueContainer.test.tsx.snap

@@ -578,7 +578,7 @@ exports[`Play Queue container should display tracks in the queue 1`] = `
               data-testid="queue-popup-trigger-uuid1"
             >
               <div
-                class="nuclear queue_item current_song"
+                class="nuclear queue_item current_track"
               >
                 <div
                   class="thumbnail"

packages/app/app/containers/PlayerBarContainer/hooks.ts

@@ -252,6 +252,7 @@ export const useVolumeControlsProps = () => {
 export const useStreamLookup = () => {
   const dispatch = useDispatch();
   const queue = useSelector(queueSelector);
+  const { t } = useTranslation('queue');
 
   useEffect(() => {
     if (!shouldSearchForStreams(queue)) {
@@ -269,7 +270,7 @@ export const useStreamLookup = () => {
       !currentTrack.loading &&
       queueActions.trackHasNoFirstStream(currentTrack)
     ) {
-      dispatch(queueActions.findStreamsForTrack(queue.currentTrack));
+      dispatch(queueActions.findStreamsForTrack(queue.currentTrack, t('stream-lookup-error')));
       return;
     }
 
@@ -282,7 +283,7 @@ export const useStreamLookup = () => {
       );
 
       if (nextTrackWithNoStream !== -1) {
-        dispatch(queueActions.findStreamsForTrack(nextTrackWithNoStream));
+        dispatch(queueActions.findStreamsForTrack(nextTrackWithNoStream, t('stream-lookup-error')));
       }
     }
   }, [queue.currentTrack, queue.queueItems]);
@@ -291,6 +292,8 @@ export const useStreamLookup = () => {
 export const shouldSearchForStreams = (queue: QueueStore): boolean => {
   return queue.queueItems.length > 0 && !queue.queueItems.every(item => 
     item.local || 
+    item.loading ||
+    item.error ||
     (item.streams?.[0]?.stream)
   );
 };

packages/i18n/src/locales/en.json

@@ -258,7 +258,7 @@
     },
     "create-playlist-dialog-title": "Input playlist name:",
     "play-now": "Play now",
-    "locked": "Stream lookup failed. Click to start over."
+    "stream-lookup-error": "Stream lookup error. Click to retry."
   },
   "search": {
     "album": "Album",

packages/ui/lib/components/QueueItem/index.tsx

@@ -12,10 +12,6 @@ import { getThumbnail, getTrackArtist, getTrackTitle } from '../../utils';
 import { Track } from '../../types';
 import Img from 'react-image';
 
-type QueueItemStrings = {
-  locked: string
-}
-
 export type QueueItemProps = {
   isCurrent: boolean;
   isCompact: boolean;
@@ -24,7 +20,6 @@ export type QueueItemProps = {
   onSelect: () => void;
   onRemove: () => void;
   onReload: () => void;
-  strings: QueueItemStrings;
 };
 
 const isErrorWithMessage = (error: Track['error']): error is { message: string; details: string } => {
@@ -38,8 +33,7 @@ export const QueueItem: React.FC<QueueItemProps> = ({
   duration,
   onRemove,
   onSelect,
-  onReload,
-  strings
+  onReload
 }) => {
   return (
     <div
@@ -51,6 +45,7 @@ export const QueueItem: React.FC<QueueItemProps> = ({
         { [`${styles.compact}`]: isCompact }
       )}
       onDoubleClick={onSelect}
+      onClick={track. error && onReload}
     >
       <div className={styles.thumbnail}>
         {
@@ -108,15 +103,6 @@ export const QueueItem: React.FC<QueueItemProps> = ({
           <div className={styles.error_message}>{track.error && track.error.message}</div>
         </div>
       }
-
-      {
-        !isCompact &&
-        <div className={styles.error_overlay}>
-          <div className={styles.error_message}>
-            {strings.locked}
-          </div>
-        </div>
-      }
     </div>
   );
 };

packages/ui/lib/components/QueueItem/styles.scss

@@ -79,11 +79,6 @@
     background: rgba(common.$red, 0.8);
   }
 
-  &.locked {
-    cursor: pointer;
-    background: rgba(common.$white, 0.3);
-  }
-
   &.compact {
     width: auto;
     height: auto;

packages/ui/stories/components/queueItem.stories.tsx

@@ -26,9 +26,6 @@ const commonProps = {
   },
   onReload: () => {
     alert('Item reloaded');
-  },
-  strings: {
-    locked: 'Stream lookup failed. Click to start over.'
   }
 };