Load streams only for the currently playing track

nukeop · Oct 16, 2022 · 51db070 · 51db070
1 parent d635500
commit 51db070
Show file tree

Hide file tree

Showing 5 changed files with 97 additions and 39 deletions.
diff --git a/packages/app/app/actions/actionTypes.ts b/packages/app/app/actions/actionTypes.ts
@@ -169,4 +169,5 @@ export enum Queue {
   STREAM_FAILED = 'STREAM_FAILED',
   CHANGE_TRACK_STREAM = 'CHANGE_TRACK_STREAM',
   ADD_NEW_STREAM  = 'ADD_NEW_STREAM',
+  SET_TRACK_LOADING = 'SET_TRACK_LOADING',
 }
diff --git a/packages/app/app/actions/queue.ts b/packages/app/app/actions/queue.ts
@@ -109,14 +109,17 @@ export const clearQueue = createStandardAction(Queue.CLEAR_QUEUE)();
 export const nextSongAction = createStandardAction(Queue.NEXT_TRACK)();
 export const previousSongAction = createStandardAction(Queue.PREVIOUS_TRACK)();
 export const selectSong = createStandardAction(Queue.SELECT_TRACK)<number>();
+export const setTrackLoading = createStandardAction(Queue.SET_TRACK_LOADING)<number>();
 export const playNext = (item: QueueItem) => addToQueue(item, true);
 
 export const addToQueue =
   (item: QueueItem, asNextItem = false) =>
     async (dispatch, getState) => {
       const { local }: RootState = getState();
-      item = safeAddUuid(item);
-      item.loading = !item.local;
+      item = {
+        ...safeAddUuid(item),
+        loading: false
+      };
 
       const {
         connectivity
@@ -129,45 +132,51 @@ export const addToQueue =
         isAbleToAdd &&
           dispatch(!asNextItem ? addQueueItem(item) : playNextItem(item));
       }
+    };
 
-      if (!item.local && isAbleToAdd) {
-        const selectedStreamProvider = getSelectedStreamProvider(getState);
-        try {
-          const streamData = await getTrackStream(
-            item,
-            selectedStreamProvider
-          );
-
-          if (streamData === undefined) {
-            dispatch(removeFromQueue(item));
-          } else {
-            dispatch(
-              updateQueueItem({
-                ...item,
-                loading: false,
-                error: false,
-                stream: streamData
-              })
-            );
-          }
-        } catch (e) {
-          logger.error(
-            `An error has occurred when searching for a stream with ${selectedStreamProvider.sourceName} for "${item.artist} - ${item.name}."`
-          );
-          logger.error(e);
-          dispatch(
-            updateQueueItem({
-              ...item,
-              loading: false,
-              error: {
-                message: `An error has occurred when searching for a stream with ${selectedStreamProvider.sourceName}.`,
-                details: e.message
-              }
-            })
-          );
-        }
+export const findStreamForCurrentTrack = () => async (dispatch, getState) => {
+  const {queue}: RootState = getState();
+
+  const currentTrack = queue.queueItems[queue.currentSong];
+  if (!currentTrack.local && !currentTrack.stream) {
+    dispatch(setTrackLoading(queue.currentSong));
+    const selectedStreamProvider = getSelectedStreamProvider(getState);
+    try {
+      const streamData = await getTrackStream(
+        currentTrack,
+        selectedStreamProvider
+      );
+
+      if (streamData === undefined) {
+        dispatch(removeFromQueue(currentTrack));
+      } else {
+        dispatch(
+          updateQueueItem({
+            ...currentTrack,
+            loading: false,
+            error: false,
+            stream: streamData
+          })
+        );
       }
-    };
+    } catch (e) {
+      logger.error(
+        `An error has occurred when searching for a stream with ${selectedStreamProvider.sourceName} for "${currentTrack.artist} - ${currentTrack.name}."`
+      );
+      logger.error(e);
+      dispatch(
+        updateQueueItem({
+          ...currentTrack,
+          loading: false,
+          error: {
+            message: `An error has occurred when searching for a stream with ${selectedStreamProvider.sourceName}.`,
+            details: e.message
+          }
+        })
+      );
+    }
+  }
+};
 
 export function playTrack(streamProviders, item: QueueItem) {
   return (dispatch) => {

diff --git a/packages/app/app/containers/AlbumViewContainer/AlbumViewContainer.test.tsx b/packages/app/app/containers/AlbumViewContainer/AlbumViewContainer.test.tsx
@@ -186,6 +186,33 @@ describe('Album view container', () => {
     ]);
   });
 
+  it('should load the stream source only for the current track in the queue', async () => {
+    const { component, store } = mountComponent();
+    await waitFor(() => component.getByTestId('more-button').click());
+    await waitFor(() => component.getByText(/Add album to queue/i).click());
+    const state = store.getState();
+
+    expect(state?.queue?.queueItems[1].stream).toBeUndefined();
+    expect(state?.queue?.queueItems[2].stream).toBeUndefined();
+    expect(state?.queue?.queueItems).toEqual([
+      expect.objectContaining({
+        artist: 'test artist',
+        name: 'test track 1',
+        stream: {
+          'data': 'test-stream-data'
+        }
+      }),
+      expect.objectContaining({
+        artist: 'test artist',
+        name: 'test track 2'
+      }),
+      expect.objectContaining({
+        artist: 'test artist',
+        name: 'test track 3'
+      })
+    ]);
+  });
+
   it('should add album to downloads after clicking the button', async () => {
     const { component, store } = mountComponent();
     await waitFor(() => component.getByTestId('more-button').click());

diff --git a/packages/app/app/containers/SoundContainer/index.js b/packages/app/app/containers/SoundContainer/index.js
@@ -19,6 +19,7 @@ import * as Autoradio from './autoradio';
 import VisualizerContainer from '../../containers/VisualizerContainer';
 import globals from '../../globals';
 import HlsPlayer from '../../components/HLSPlayer';
+import { isEmpty } from 'lodash';
 
 const lastfm = new rest.LastFmApi(globals.lastfmApiKey, globals.lastfmApiSecret);
 
@@ -158,6 +159,13 @@ class SoundContainer extends React.Component {
     this.props.actions.rerollTrack(currentTrack);
   }
 
+  componentDidUpdate() {
+    const currentSong = this.props.queue.queueItems[this.props.queue.currentSong];
+    if (isEmpty(currentSong?.stream)) {
+      this.props.actions.findStreamForCurrentTrack();
+    }
+  }
+
   shouldComponentUpdate(nextProps) {
     const currentSong = nextProps.queue.queueItems[nextProps.queue.currentSong];
 

diff --git a/packages/app/app/reducers/queue.ts b/packages/app/app/reducers/queue.ts
@@ -211,6 +211,19 @@ export default function QueueReducer(state = defaultState, action) {
     return reduceSelectStreamProviders(state);
   case Queue.CHANGE_TRACK_STREAM:
     return reduceChangeTrackStream(state, action);
+  case Queue.SET_TRACK_LOADING:
+    return {
+      ...state,
+      queueItems: state.queueItems.map((item, idx) => {
+        if (idx === state.currentSong) {
+          return {
+            ...item,
+            loading: true
+          };
+        }
+        return item;
+      })
+    };
   default:
     return state;
   }