Add queueId to QueueItems

Author: nukeop

packages/app/app/actions/queue.ts

@@ -46,12 +46,22 @@ const localTrackToQueueItem = (track: LocalTrack, local: LocalLibraryState): Que
 };
 
 
-export const toQueueItem = (track: Track): QueueItem => ({
-  ...track,
-  artist: isString(track.artist) ? track.artist : track.artist.name,
-  name: track.title ? track.title : track.name,
-  streams: track.streams ?? []
-});
+export const toQueueItem = (track: Track): QueueItem => {
+  const queueItem: QueueItem = {
+    ...track,
+    artist: isString(track.artist) ? track.artist : track.artist.name,
+    name: track.title ? track.title : track.name,
+    streams: track.streams ?? []
+  };
+
+  safeAddUuid(queueItem);
+
+  if (!queueItem.queueId) {
+    queueItem.queueId = v4();
+  }
+
+  return queueItem;
+};
 
 // Exported to facilitate testing.
 export const getSelectedStreamProvider = (getState) => {
@@ -122,6 +132,7 @@ export const addToQueue =
       const { local }: RootState = getState();
       item = {
         ...safeAddUuid(item),
+        queueId: v4(),
         streams: item.local ? item.streams : [],
         loading: false
       };
@@ -140,7 +151,8 @@ export const addToQueue =
     };
 
 export const selectNewStream = (index: number, streamId: string) => async (dispatch, getState) => {
-  const track = queueSelector(getState()).queueItems[index];
+  const getLatestTrack = () => queueSelector(getState()).queueItems[index];
+  let track = getLatestTrack();
   const selectedStreamProvider: StreamProviderPlugin = getSelectedStreamProvider(getState);
 
   const oldStreamData = track.streams.find(stream => stream.id === streamId);
@@ -149,6 +161,7 @@ export const selectNewStream = (index: number, streamId: string) => async (dispa
   if (!streamData) {
     dispatch(removeFromQueue(index));
   } else {
+    track = getLatestTrack();
     dispatch(
       updateQueueItem({
         ...track,
@@ -211,8 +224,8 @@ const resolveStreams = async (
 };
 
 export const findStreamsForTrack = (index: number) => async (dispatch, getState) => {
-  const {queue, settings}: RootState = getState();
-  const track = queue.queueItems[index];
+  const getLatestTrack = () => queueSelector(getState()).queueItems[index];
+  let track = getLatestTrack();
 
   if (!track || track.local || !trackHasNoFirstStream(track)) {
     return;
@@ -232,15 +245,18 @@ export const findStreamsForTrack = (index: number) => async (dispatch, getState)
       return;
     }
 
+    const settings = getState().settings;
     streamData = await verifyStreamWithService(track, streamData, selectedStreamProvider, settings);
 
     const firstStream = streamData[0];
     if (!firstStream?.stream) {
       const remainingStreams = streamData.slice(1);
+      track = getLatestTrack();
       removeFirstStream(track, index, remainingStreams, dispatch);
       return;
     }
 
+    track = getLatestTrack();
     dispatch(updateQueueItem({
       ...track,
       loading: false,
@@ -253,6 +269,7 @@ export const findStreamsForTrack = (index: number) => async (dispatch, getState)
     );
     logger.error(e);
 
+    track = getLatestTrack();
     dispatch(updateQueueItem({
       ...track,
       loading: false,

packages/app/app/containers/DashboardContainer/index.tsx

@@ -17,7 +17,6 @@ const DashboardContainer: React.FC = () => {
 
   const dashboard = useSelector(dashboardSelector);
   const isConnected = useSelector(connectivity);
-  const settings = useSelector(settingsSelector);
 
   const loadTopTags = () => dispatch(DashboardActions.loadTopTags());
   const loadTopTracks = () => dispatch(DashboardActions.loadTopTracks());

packages/app/app/index.tsx

@@ -12,6 +12,7 @@ import { Provider } from 'react-redux';
 import { I18nextProvider } from 'react-i18next';
 import { getOption, setOption } from '@nuclear/core';
 import i18n, { setupI18n } from '@nuclear/i18n';
+import { setTimeout, setInterval } from 'timers';
 
 import App from './App';
 import configureStore from './store/configureStore';
@@ -22,8 +23,8 @@ const store = configureStore({});
 /* 
 * The `setTimeout` and `setInterval` functions are overridden to use the Node.js timers module. This is necessary because the default browser implementations of `setTimeout` and `setInterval` will not work correctly with unidici, so we use the Node versions.
 */
-window.setTimeout = ((handler: TimerHandler, timeout?: number, ...args: any[]) => require('timers').setTimeout(handler, timeout, ...args)) as typeof setTimeout;
-window.setInterval = ((handler: TimerHandler, timeout?: number, ...args: any[]) => require('timers').setInterval(handler, timeout, ...args)) as typeof setInterval;
+window.setTimeout = ((handler: TimerHandler, timeout?: number, ...args: any[]) => setTimeout(handler, timeout, ...args)) as typeof setTimeout;
+window.setInterval = ((handler: TimerHandler, timeout?: number, ...args: any[]) => setInterval(handler, timeout, ...args)) as typeof setInterval;
 
 i18n.on('languageChanged', lng => setOption('language', lng));
 

packages/app/app/reducers/queue.ts

@@ -18,6 +18,7 @@ export type TrackStream = {
 
 export type QueueItem = {
   uuid?: string;
+  queueId?: string;
   loading?: boolean;
   error?:
     | boolean
@@ -116,7 +117,7 @@ function reduceSelectStreamProviders(state) {
 
 const reduceUpdateQueueItem = (state, action) => {
   const { item } = action.payload;
-  const itemIndex = _.findIndex(state.queueItems, { uuid: item.uuid });
+  const itemIndex = _.findIndex(state.queueItems, { queueId: item.queueId });
   const queueClone = _.cloneDeep(state.queueItems);
   queueClone[itemIndex] = item;
 
@@ -138,7 +139,6 @@ const reduceAddPlayNextItem = (state, action) => {
 };
 
 export default function QueueReducer(state = defaultState, action): QueueStore {
-  logger.log('QueueReducer', action);
   switch (action.type) {
   case Queue.ADD_QUEUE_ITEM:
     return {