Wrap queue handler in callback

src/renderer/features/player/hooks/use-playqueue-handler.ts

@@ -1,3 +1,4 @@
+import { useCallback } from 'react';
 import { useQueryClient } from '@tanstack/react-query';
 import { api } from '@/renderer/api';
 import { queryKeys } from '@/renderer/api/query-keys';
@@ -20,64 +21,75 @@ export const usePlayQueueHandler = () => {
   const addToQueue = usePlayerStore((state) => state.addToQueue);
   const playerType = useSettingsStore((state) => state.player.type);
 
-  const handlePlayQueueAdd = async (options: PlayQueueAddOptions) => {
+  const handlePlayQueueAdd = useCallback(
-    if (options.byData) {
+    async (options: PlayQueueAddOptions) => {
-      // dispatchSongsToQueue(options.byData, options.play);
+      if (options.byData) {
-    }
+        // dispatchSongsToQueue(options.byData, options.play);
-
-    if (options.byItemType) {
-      const deviceId = localStorage.getItem('device_id');
-
-      if (!deviceId || !options.byItemType.id) return;
-
-      let songs = null;
-      if (options.byItemType.type === LibraryItem.ALBUM) {
-        const albumDetail = await queryClient.fetchQuery(
-          queryKeys.albums.detail(options.byItemType.id),
-          async () =>
-            api.albums.getAlbumDetail({
-              albumId: options.byItemType!.id,
-              serverId,
-            })
-        );
-
-        songs = albumDetail.data.songs;
       }
 
-      if (!songs) return;
+      if (options.byItemType) {
+        const deviceId = localStorage.getItem('device_id');
 
-      // * Adds server token
+        if (!deviceId || !options.byItemType.id) return;
-      if (serverToken) {
-        songs = songs.map((song) => {
-          return {
-            ...song,
-            imageUrl:
-              song.imageUrl && isImageTokenRequired
-                ? `${song.imageUrl}${serverToken}`
-                : song.imageUrl,
-            streamUrl: `${song.streamUrl}${serverToken}`,
-          };
-        });
-      }
 
-      const playerData = addToQueue(songs, options.play);
+        let songs = null;
+        if (options.byItemType.type === LibraryItem.ALBUM) {
+          const albumDetail = await queryClient.fetchQuery(
+            queryKeys.albums.detail(options.byItemType.id),
+            async () =>
+              api.albums.getAlbumDetail({
+                albumId: options.byItemType!.id,
+                serverId,
+              })
+          );
 
-      if (options.play === Play.NEXT || options.play === Play.LAST) {
+          songs = albumDetail.data.songs;
-        if (playerType === PlaybackType.LOCAL) {
-          mpvPlayer.setQueueNext(playerData);
-        }
-      }
-
-      if (options.play === Play.NOW) {
-        if (playerType === PlaybackType.LOCAL) {
-          mpvPlayer.setQueue(playerData);
-          mpvPlayer.play();
         }
 
-        play();
+        if (!songs) return;
+
+        // * Adds server token
+        if (serverToken) {
+          songs = songs.map((song) => {
+            return {
+              ...song,
+              imageUrl:
+                song.imageUrl && isImageTokenRequired
+                  ? `${song.imageUrl}${serverToken}`
+                  : song.imageUrl,
+              streamUrl: `${song.streamUrl}${serverToken}`,
+            };
+          });
+        }
+
+        const playerData = addToQueue(songs, options.play);
+
+        if (options.play === Play.NEXT || options.play === Play.LAST) {
+          if (playerType === PlaybackType.LOCAL) {
+            mpvPlayer.setQueueNext(playerData);
+          }
+        }
+
+        if (options.play === Play.NOW) {
+          if (playerType === PlaybackType.LOCAL) {
+            mpvPlayer.setQueue(playerData);
+            mpvPlayer.play();
+          }
+
+          play();
+        }
       }
-    }
+    },
-  };
+    [
+      addToQueue,
+      isImageTokenRequired,
+      play,
+      playerType,
+      queryClient,
+      serverId,
+      serverToken,
+    ]
+  );
 
   return handlePlayQueueAdd;
 };