replace remaining legacy playqueue add functions

src/renderer/features/player/components/center-controls.tsx

@@ -7,7 +7,6 @@ import { PlayButton, PlayerButton } from '/@/renderer/features/player/components
 import { PlayerbarSlider } from '/@/renderer/features/player/components/playerbar-slider';
 import { openShuffleAllModal } from '/@/renderer/features/player/components/shuffle-all-modal';
 import { usePlayer } from '/@/renderer/features/player/context/player-context';
-import { usePlayQueueAdd } from '/@/renderer/features/player/hooks/use-playqueue-add';
 import {
     usePlayerRepeat,
     usePlayerShuffle,
@@ -39,8 +38,6 @@ export const CenterControls = () => {
         toggleShuffle,
     } = usePlayer();
 
-    const handlePlayQueueAdd = usePlayQueueAdd();
-
     return (
         <>
             <div className={styles.controlsContainer}>
@@ -170,7 +167,6 @@ export const CenterControls = () => {
                         icon={<Icon fill="default" icon="mediaRandom" size={buttonSize} />}
                         onClick={() =>
                             openShuffleAllModal({
-                                handlePlayQueueAdd,
                                 queryClient,
                             })
                         }

src/renderer/features/player/components/full-screen-player-image.tsx

@@ -8,7 +8,7 @@ import styles from './full-screen-player-image.module.css';
 
 import { useFastAverageColor } from '/@/renderer/hooks';
 import { AppRoute } from '/@/renderer/router/routes';
-import { usePlayerData, usePlayerStore } from '/@/renderer/store';
+import { subscribeCurrentTrack, usePlayerData, usePlayerStoreBase } from '/@/renderer/store';
 import { useSettingsStore } from '/@/renderer/store/settings.store';
 import { Badge } from '/@/shared/components/badge/badge';
 import { Center } from '/@/shared/components/center/center';
@@ -18,7 +18,6 @@ import { Icon } from '/@/shared/components/icon/icon';
 import { Stack } from '/@/shared/components/stack/stack';
 import { Text } from '/@/shared/components/text/text';
 import { useSetState } from '/@/shared/hooks/use-set-state';
-import { PlayerData, QueueSong } from '/@/shared/types/domain-types';
 
 const imageVariants: Variants = {
     closed: {
@@ -91,22 +90,27 @@ export const FullScreenPlayerImage = () => {
 
     const albumArtRes = useSettingsStore((store) => store.general.albumArtRes);
 
-    const { queue } = usePlayerData();
-    const currentSong = queue.current;
+    const { currentSong, nextSong } = usePlayerData();
     const { background } = useFastAverageColor({
         algorithm: 'dominant',
-        src: queue.current?.imageUrl,
+        src: currentSong?.imageUrl,
         srcLoaded: true,
     });
     const imageKey = `image-${background}`;
     const [imageState, setImageState] = useSetState({
-        bottomImage: scaleImageUrl(mainImageDimensions.idealSize, queue.next?.imageUrl),
+        bottomImage: scaleImageUrl(mainImageDimensions.idealSize, nextSong?.imageUrl),
         current: 0,
-        topImage: scaleImageUrl(mainImageDimensions.idealSize, queue.current?.imageUrl),
+        topImage: scaleImageUrl(mainImageDimensions.idealSize, currentSong?.imageUrl),
     });
 
     const updateImageSize = useCallback(() => {
         if (mainImageRef.current) {
+            const state = usePlayerStoreBase.getState();
+            const playerData = state.getQueue();
+            const currentIndex = state.player.index;
+            const current = playerData.items[currentIndex];
+            const next = playerData.items[currentIndex + 1];
+
             setMainImageDimensions({
                 idealSize:
                     albumArtRes ||
@@ -114,46 +118,54 @@ export const FullScreenPlayerImage = () => {
             });
 
             setImageState({
-                bottomImage: scaleImageUrl(mainImageDimensions.idealSize, queue.next?.imageUrl),
+                bottomImage: scaleImageUrl(mainImageDimensions.idealSize, next?.imageUrl),
                 current: 0,
-                topImage: scaleImageUrl(mainImageDimensions.idealSize, queue.current?.imageUrl),
+                topImage: scaleImageUrl(mainImageDimensions.idealSize, current?.imageUrl),
             });
         }
-    }, [mainImageDimensions.idealSize, queue, setImageState, albumArtRes]);
+    }, [mainImageDimensions.idealSize, setImageState, albumArtRes]);
 
     useLayoutEffect(() => {
         updateImageSize();
     }, [updateImageSize]);
 
+    // Use ref to track current image state to avoid recreating subscription
+    const imageStateRef = useRef(imageState);
     useEffect(() => {
-        const unsubSongChange = usePlayerStore.subscribe(
-            (state) => [state.current.song, state.actions.getPlayerData().queue],
-            (state) => {
-                const isTop = imageState.current === 0;
-                const queue = state[1] as PlayerData['queue'];
+        imageStateRef.current = imageState;
+    }, [imageState]);
 
-                const currentImageUrl = scaleImageUrl(
-                    mainImageDimensions.idealSize,
-                    queue.current?.imageUrl,
-                );
-                const nextImageUrl = scaleImageUrl(
-                    mainImageDimensions.idealSize,
-                    queue.next?.imageUrl,
-                );
+    useEffect(() => {
+        const unsubSongChange = subscribeCurrentTrack(({ index, song }, prev) => {
+            // Only update if the song actually changed
+            if (song?._uniqueId === prev.song?._uniqueId) {
+                return;
+            }
 
-                setImageState({
-                    bottomImage: isTop ? currentImageUrl : nextImageUrl,
-                    current: isTop ? 1 : 0,
-                    topImage: isTop ? nextImageUrl : currentImageUrl,
-                });
-            },
-            { equalityFn: (a, b) => (a[0] as QueueSong)?.id === (b[0] as QueueSong)?.id },
-        );
+            // Use ref to get current state without causing dependency issues
+            const isTop = imageStateRef.current.current === 0;
+            const state = usePlayerStoreBase.getState();
+            const queue = state.getQueue();
+            const currentSong = queue.items[index];
+            const nextSong = queue.items[index + 1];
+
+            const currentImageUrl = scaleImageUrl(
+                mainImageDimensions.idealSize,
+                currentSong?.imageUrl,
+            );
+            const nextImageUrl = scaleImageUrl(mainImageDimensions.idealSize, nextSong?.imageUrl);
+
+            setImageState({
+                bottomImage: isTop ? currentImageUrl : nextImageUrl,
+                current: isTop ? 1 : 0,
+                topImage: isTop ? nextImageUrl : currentImageUrl,
+            });
+        });
 
         return () => {
             unsubSongChange();
         };
-    }, [imageState, mainImageDimensions.idealSize, queue, setImageState]);
+    }, [mainImageDimensions.idealSize, setImageState]);
 
     return (
         <Flex

src/renderer/features/player/components/shuffle-all-modal.tsx

@@ -10,6 +10,7 @@ import { createWithEqualityFn } from 'zustand/traditional';
 import i18n from '/@/i18n/i18n';
 import { api } from '/@/renderer/api';
 import { queryKeys } from '/@/renderer/api/query-keys';
+import { usePlayer } from '/@/renderer/features/player/context/player-context';
 import { useAuthStore } from '/@/renderer/store';
 import { Button } from '/@/shared/components/button/button';
 import { Checkbox } from '/@/shared/components/checkbox/checkbox';
@@ -22,14 +23,13 @@ import { Stack } from '/@/shared/components/stack/stack';
 import {
     GenreListResponse,
     GenreListSort,
-    MusicFolderListResponse,
     Played,
     RandomSongListQuery,
     ServerListItem,
     ServerType,
     SortOrder,
 } from '/@/shared/types/domain-types';
-import { Play, PlayQueueAddOptions } from '/@/shared/types/types';
+import { Play } from '/@/shared/types/types';
 
 interface ShuffleAllSlice extends RandomSongListQuery {
     actions: {
@@ -74,19 +74,12 @@ export const useShuffleAllStoreActions = () => useShuffleAllStore((state) => sta
 
 interface ShuffleAllModalProps {
     genres: GenreListResponse | undefined;
-    handlePlayQueueAdd: ((options: PlayQueueAddOptions) => void) | undefined;
-    musicFolders: MusicFolderListResponse | undefined;
     queryClient: QueryClient;
     server: null | ServerListItem;
 }
 
-export const ShuffleAllModal = ({
-    genres,
-    handlePlayQueueAdd,
-    musicFolders,
-    queryClient,
-    server,
-}: ShuffleAllModalProps) => {
+export const ShuffleAllModal = ({ genres, queryClient, server }: ShuffleAllModalProps) => {
+    const { addToQueueByData } = usePlayer();
     const { t } = useTranslation();
     const { enableMaxYear, enableMinYear, genre, limit, maxYear, minYear, musicFolderId, played } =
         useShuffleAllStore();
@@ -114,10 +107,7 @@ export const ShuffleAllModal = ({
             staleTime: 0,
         });
 
-        handlePlayQueueAdd?.({
-            byData: res?.items || [],
-            playType,
-        });
+        addToQueueByData(res?.items || [], playType);
 
         closeAllModals();
     };
@@ -137,14 +127,6 @@ export const ShuffleAllModal = ({
         });
     }, [genres, server?.type]);
 
-    const musicFolderData = useMemo(() => {
-        if (!musicFolders) return [];
-        return musicFolders.items.map((musicFolder) => ({
-            label: musicFolder.name,
-            value: String(musicFolder.id),
-        }));
-    }, [musicFolders]);
-
     return (
         <Stack gap="md">
             <NumberInput
@@ -193,15 +175,6 @@ export const ShuffleAllModal = ({
                 onChange={(e) => setStore({ genre: e || '' })}
                 value={genre}
             />
-            <Select
-                clearable
-                data={musicFolderData}
-                label="Music folder"
-                onChange={(e) => {
-                    setStore({ musicFolderId: e ? String(e) : '' });
-                }}
-                value={musicFolderId}
-            />
             {server?.type === ServerType.JELLYFIN && (
                 <Select
                     clearable
@@ -247,9 +220,7 @@ export const ShuffleAllModal = ({
     );
 };
 
-export const openShuffleAllModal = async (
-    props: Pick<ShuffleAllModalProps, 'handlePlayQueueAdd' | 'queryClient'>,
-) => {
+export const openShuffleAllModal = async (props: Pick<ShuffleAllModalProps, 'queryClient'>) => {
     const server = useAuthStore.getState().currentServer;
 
     const genres = await props.queryClient.fetchQuery({
@@ -270,28 +241,8 @@ export const openShuffleAllModal = async (
         staleTime: 1000 * 60 * 60 * 4,
     });
 
-    const musicFolders = await props.queryClient.fetchQuery({
-        gcTime: 1000 * 60 * 5,
-        queryFn: ({ signal }) =>
-            api.controller.getMusicFolderList({
-                apiClientProps: {
-                    serverId: server?.id || '',
-                    signal,
-                },
-            }),
-        queryKey: queryKeys.musicFolders.list(server?.id),
-        staleTime: 1000 * 60 * 60 * 4,
-    });
-
     openModal({
-        children: (
-            <ShuffleAllModal
-                genres={genres}
-                musicFolders={musicFolders}
-                server={server}
-                {...props}
-            />
-        ),
+        children: <ShuffleAllModal genres={genres} server={server} {...props} />,
         size: 'sm',
         title: i18n.t('player.playRandom', { postProcess: 'sentenceCase' }) as string,
     });