replace remaining legacy playqueue add functions

src/renderer/components/feature-carousel/feature-carousel.tsx

@@ -8,10 +8,10 @@ import { generatePath, Link } from 'react-router';
 
 import styles from './feature-carousel.module.css';
 
-import { usePlayQueueAdd } from '/@/renderer/features/player/hooks/use-playqueue-add';
+import { usePlayer } from '/@/renderer/features/player/context/player-context';
 import { PlayButton } from '/@/renderer/features/shared/components/play-button';
 import { AppRoute } from '/@/renderer/router/routes';
-import { usePlayButtonBehavior } from '/@/renderer/store';
+import { useCurrentServer, usePlayButtonBehavior } from '/@/renderer/store';
 import { Badge } from '/@/shared/components/badge/badge';
 import { Button } from '/@/shared/components/button/button';
 import { Group } from '/@/shared/components/group/group';
@@ -43,7 +43,8 @@ interface FeatureCarouselProps {
 
 export const FeatureCarousel = ({ data }: FeatureCarouselProps) => {
     const { t } = useTranslation();
-    const handlePlayQueueAdd = usePlayQueueAdd();
+    const { addToQueueByFetch } = usePlayer();
+    const server = useCurrentServer();
     const [itemIndex, setItemIndex] = useState(0);
     const [direction, setDirection] = useState(0);
     const playType = usePlayButtonBehavior();
@@ -131,15 +132,14 @@ export const FeatureCarousel = ({ data }: FeatureCarouselProps) => {
                                             onClick={(e) => {
                                                 e.preventDefault();
                                                 e.stopPropagation();
-                                                if (!currentItem) return;
+                                                if (!currentItem || !server?.id) return;
 
-                                                handlePlayQueueAdd?.({
+                                                addToQueueByFetch(
-                                                    byItemType: {
+                                                    server.id,
-                                                        id: [currentItem.id],
+                                                    [currentItem.id],
-                                                        type: LibraryItem.ALBUM,
+                                                    LibraryItem.ALBUM,
-                                                    },
                                                     playType,
-                                                });
+                                                );
                                             }}
                                             variant="outline"
                                         >

src/renderer/features/albums/components/album-detail-content.tsx

@@ -12,6 +12,8 @@ import { ItemTableList } from '/@/renderer/components/item-list/item-table-list/
 import { ItemTableListColumn } from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
 import { albumQueries } from '/@/renderer/features/albums/api/album-api';
 import { AlbumInfiniteCarousel } from '/@/renderer/features/albums/components/album-infinite-carousel';
+import { ContextMenuController } from '/@/renderer/features/context-menu/context-menu-controller';
+import { usePlayer } from '/@/renderer/features/player/context/player-context';
 import { LibraryBackgroundOverlay } from '/@/renderer/features/shared/components/library-background-overlay';
 import { ListConfigMenu } from '/@/renderer/features/shared/components/list-config-menu';
 import { PlayButton } from '/@/renderer/features/shared/components/play-button';
@@ -33,7 +35,7 @@ import { Spoiler } from '/@/shared/components/spoiler/spoiler';
 import { Stack } from '/@/shared/components/stack/stack';
 import { Text } from '/@/shared/components/text/text';
 import { AlbumListSort, LibraryItem, Song, SortOrder } from '/@/shared/types/domain-types';
-import { ItemListKey, ListDisplayType, Play } from '/@/shared/types/types';
+import { ItemListKey, ListDisplayType } from '/@/shared/types/types';
 
 interface AlbumDetailContentProps {
     background?: string;
@@ -89,10 +91,29 @@ export const AlbumDetailContent = ({ background }: AlbumDetailContentProps) => {
     ];
     const playButtonBehavior = usePlayButtonBehavior();
 
-    const handlePlay = async (playType?: Play) => {};
+    const { addToQueueByFetch, setFavorite } = usePlayer();
+
+    const handlePlay = () => {
+        if (!server?.id) return;
+        addToQueueByFetch(server.id, [albumId], LibraryItem.ALBUM, playButtonBehavior);
+    };
 
     const handleFavorite = () => {
         if (!detailQuery?.data) return;
+        setFavorite(
+            detailQuery.data._serverId,
+            [detailQuery.data.id],
+            LibraryItem.ALBUM,
+            !detailQuery.data.userFavorite,
+        );
+    };
+
+    const handleMoreOptions = (e: React.MouseEvent<HTMLButtonElement>) => {
+        if (!detailQuery?.data) return;
+        ContextMenuController.call({
+            cmd: { items: [detailQuery.data], type: LibraryItem.ALBUM },
+            event: e,
+        });
     };
 
     const showGenres = detailQuery?.data?.genres ? detailQuery?.data?.genres.length !== 0 : false;
@@ -107,7 +128,7 @@ export const AlbumDetailContent = ({ background }: AlbumDetailContentProps) => {
                 <section>
                     <Group gap="sm" justify="space-between">
                         <Group>
-                            <PlayButton onClick={() => handlePlay(playButtonBehavior)} />
+                            <PlayButton onClick={handlePlay} />
                             <Group gap="xs">
                                 <ActionIcon
                                     icon="favorite"
@@ -122,9 +143,7 @@ export const AlbumDetailContent = ({ background }: AlbumDetailContentProps) => {
                                 />
                                 <ActionIcon
                                     icon="ellipsisHorizontal"
-                                    onClick={(e) => {
+                                    onClick={handleMoreOptions}
-                                        if (!detailQuery?.data) return;
-                                    }}
                                     size="lg"
                                     variant="transparent"
                                 />

src/renderer/features/albums/components/album-detail-header.tsx

@@ -4,8 +4,8 @@ import { useTranslation } from 'react-i18next';
 import { generatePath, Link, useParams } from 'react-router';
 
 import { albumQueries } from '/@/renderer/features/albums/api/album-api';
+import { usePlayer } from '/@/renderer/features/player/context/player-context';
 import { LibraryHeader } from '/@/renderer/features/shared/components/library-header';
-import { useSetRating } from '/@/renderer/features/shared/mutations/set-rating-mutation';
 import { AppRoute } from '/@/renderer/router/routes';
 import { useCurrentServer } from '/@/renderer/store';
 import { formatDateAbsoluteUTC, formatDurationString, titleCase } from '/@/renderer/utils';
@@ -95,19 +95,26 @@ export const AlbumDetailHeader = forwardRef<HTMLDivElement, AlbumDetailHeaderPro
             });
         }
 
-        const updateRatingMutation = useSetRating({});
+        const { setRating } = usePlayer();
 
         const handleUpdateRating = (rating: number) => {
             if (!detailQuery?.data) return;
 
-            updateRatingMutation.mutate({
+            if (detailQuery.data.userRating === rating) {
-                apiClientProps: { serverId: detailQuery.data._serverId },
+                return setRating(
-                query: {
+                    detailQuery.data._serverId,
-                    id: [detailQuery.data.id],
+                    [detailQuery.data.id],
-                    rating,
+                    LibraryItem.ALBUM,
-                    type: LibraryItem.ALBUM,
+                    0,
-                },
+                );
-            });
+            }
+
+            return setRating(
+                detailQuery.data._serverId,
+                [detailQuery.data.id],
+                LibraryItem.ALBUM,
+                rating,
+            );
         };
 
         return (
@@ -130,7 +137,7 @@ export const AlbumDetailHeader = forwardRef<HTMLDivElement, AlbumDetailHeaderPro
                         {showRating && (
                             <Rating
                                 onChange={handleUpdateRating}
-                                readOnly={detailQuery?.isFetching || updateRatingMutation.isPending}
+                                readOnly={detailQuery?.isFetching}
                                 value={detailQuery?.data?.userRating || 0}
                             />
                         )}

src/renderer/features/albums/routes/album-detail-route.tsx

@@ -6,7 +6,7 @@ import { NativeScrollArea } from '/@/renderer/components/native-scroll-area/nati
 import { albumQueries } from '/@/renderer/features/albums/api/album-api';
 import { AlbumDetailContent } from '/@/renderer/features/albums/components/album-detail-content';
 import { AlbumDetailHeader } from '/@/renderer/features/albums/components/album-detail-header';
-import { usePlayQueueAdd } from '/@/renderer/features/player/hooks/use-playqueue-add';
+import { usePlayer } from '/@/renderer/features/player/context/player-context';
 import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page';
 import { LibraryHeaderBar } from '/@/renderer/features/shared/components/library-header-bar';
 import { useFastAverageColor } from '/@/renderer/hooks';
@@ -29,17 +29,12 @@ const AlbumDetailRoute = () => {
         src: detailQuery.data?.imageUrl,
         srcLoaded: !detailQuery.isLoading,
     });
-    const handlePlayQueueAdd = usePlayQueueAdd();
+    const { addToQueueByFetch } = usePlayer();
     const playButtonBehavior = usePlayButtonBehavior();
 
     const handlePlay = () => {
-        handlePlayQueueAdd?.({
+        if (!server?.id) return;
-            byItemType: {
+        addToQueueByFetch(server.id, [albumId], LibraryItem.ALBUM, playButtonBehavior);
-                id: [albumId],
-                type: LibraryItem.ALBUM,
-            },
-            playType: playButtonBehavior,
-        });
     };
 
     const backgroundUrl = detailQuery.data?.imageUrl || '';

src/renderer/features/albums/routes/dummy-album-detail-route.tsx

@@ -8,7 +8,7 @@ import styles from './dummy-album-detail-route.module.css';
 
 import { api } from '/@/renderer/api';
 import { queryKeys } from '/@/renderer/api/query-keys';
-import { usePlayQueueAdd } from '/@/renderer/features/player/hooks/use-playqueue-add';
+import { usePlayer } from '/@/renderer/features/player/context/player-context';
 import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page';
 import { LibraryHeader } from '/@/renderer/features/shared/components/library-header';
 import { PlayButton } from '/@/renderer/features/shared/components/play-button';
@@ -53,7 +53,7 @@ const DummyAlbumDetailRoute = () => {
         src: detailQuery.data?.imageUrl,
         srcLoaded: !detailQuery.isLoading,
     });
-    const handlePlayQueueAdd = usePlayQueueAdd();
+    const { addToQueueByFetch } = usePlayer();
     const playButtonBehavior = usePlayButtonBehavior();
 
     const createFavoriteMutation = useCreateFavorite({});
@@ -96,13 +96,8 @@ const DummyAlbumDetailRoute = () => {
     const comment = detailQuery?.data?.comment;
 
     const handlePlay = () => {
-        handlePlayQueueAdd?.({
+        if (!server?.id) return;
-            byItemType: {
+        addToQueueByFetch(server.id, [albumId], LibraryItem.SONG, playButtonBehavior);
-                id: [albumId],
-                type: LibraryItem.SONG,
-            },
-            playType: playButtonBehavior,
-        });
     };
 
     const metadataItems = [

src/renderer/features/artists/components/album-artist-detail-content.tsx

@@ -8,11 +8,10 @@ import styles from './album-artist-detail-content.module.css';
 import { AlbumInfiniteCarousel } from '/@/renderer/features/albums/components/album-infinite-carousel';
 import { artistsQueries } from '/@/renderer/features/artists/api/artists-api';
 import { AlbumArtistGridCarousel } from '/@/renderer/features/artists/components/album-artist-grid-carousel';
-import { usePlayQueueAdd } from '/@/renderer/features/player/hooks/use-playqueue-add';
+import { ContextMenuController } from '/@/renderer/features/context-menu/context-menu-controller';
+import { usePlayer } from '/@/renderer/features/player/context/player-context';
 import { LibraryBackgroundOverlay } from '/@/renderer/features/shared/components/library-background-overlay';
 import { PlayButton } from '/@/renderer/features/shared/components/play-button';
-import { useCreateFavorite } from '/@/renderer/features/shared/mutations/create-favorite-mutation';
-import { useDeleteFavorite } from '/@/renderer/features/shared/mutations/delete-favorite-mutation';
 import { useContainerQuery } from '/@/renderer/hooks';
 import { useGenreRoute } from '/@/renderer/hooks/use-genre-route';
 import { AppRoute } from '/@/renderer/router/routes';
@@ -48,8 +47,8 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten
         artistId?: string;
     };
     const routeId = (artistId || albumArtistId) as string;
-    const { ref, ...cq } = useContainerQuery();
+    const { ref } = useContainerQuery();
-    const handlePlayQueueAdd = usePlayQueueAdd();
+    const { addToQueueByFetch, setFavorite } = usePlayer();
     const server = useCurrentServer();
     const genrePath = useGenreRoute();
 
@@ -183,38 +182,31 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten
     const playButtonBehavior = usePlayButtonBehavior();
 
     const handlePlay = async (playType?: Play) => {
-        handlePlayQueueAdd?.({
+        if (!server?.id) return;
-            byItemType: {
+        addToQueueByFetch(
-                id: [routeId],
+            server.id,
-                type: albumArtistId ? LibraryItem.ALBUM_ARTIST : LibraryItem.ARTIST,
+            [routeId],
-            },
+            albumArtistId ? LibraryItem.ALBUM_ARTIST : LibraryItem.ARTIST,
-            playType: playType || playButtonBehavior,
+            playType || playButtonBehavior,
-        });
+        );
     };
 
-    const createFavoriteMutation = useCreateFavorite({});
-    const deleteFavoriteMutation = useDeleteFavorite({});
-
     const handleFavorite = () => {
         if (!detailQuery?.data) return;
+        setFavorite(
+            detailQuery.data._serverId,
+            [detailQuery.data.id],
+            LibraryItem.ALBUM_ARTIST,
+            !detailQuery.data.userFavorite,
+        );
+    };
 
-        if (detailQuery.data.userFavorite) {
+    const handleMoreOptions = (e: React.MouseEvent<HTMLButtonElement>) => {
-            deleteFavoriteMutation.mutate({
+        if (!detailQuery?.data) return;
-                apiClientProps: { serverId: detailQuery.data._serverId },
+        ContextMenuController.call({
-                query: {
+            cmd: { items: [detailQuery.data], type: LibraryItem.ALBUM_ARTIST },
-                    id: [detailQuery.data.id],
+            event: e,
-                    type: LibraryItem.ALBUM_ARTIST,
+        });
-                },
-            });
-        } else {
-            createFavoriteMutation.mutate({
-                apiClientProps: { serverId: detailQuery.data._serverId },
-                query: {
-                    id: [detailQuery.data.id],
-                    type: LibraryItem.ALBUM_ARTIST,
-                },
-            });
-        }
     };
 
     const albumCount = detailQuery?.data?.albumCount;
@@ -251,18 +243,13 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten
                             iconProps={{
                                 fill: detailQuery?.data?.userFavorite ? 'primary' : undefined,
                             }}
-                            loading={
-                                createFavoriteMutation.isPending || deleteFavoriteMutation.isPending
-                            }
                             onClick={handleFavorite}
                             size="lg"
                             variant="transparent"
                         />
                         <ActionIcon
                             icon="ellipsisHorizontal"
-                            onClick={(e) => {
+                            onClick={handleMoreOptions}
-                                if (!detailQuery?.data) return;
-                            }}
                             size="lg"
                             variant="transparent"
                         />

src/renderer/features/artists/components/album-artist-detail-header.tsx

@@ -4,8 +4,8 @@ import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router';
 
 import { artistsQueries } from '/@/renderer/features/artists/api/artists-api';
+import { usePlayer } from '/@/renderer/features/player/context/player-context';
 import { LibraryHeader } from '/@/renderer/features/shared/components/library-header';
-import { useSetRating } from '/@/renderer/features/shared/mutations/set-rating-mutation';
 import { AppRoute } from '/@/renderer/router/routes';
 import { useCurrentServer } from '/@/renderer/store';
 import { formatDurationString } from '/@/renderer/utils';
@@ -65,18 +65,26 @@ export const AlbumArtistDetailHeader = forwardRef(
             },
         ];
 
-        const updateRatingMutation = useSetRating({});
+        const { setRating } = usePlayer();
 
         const handleUpdateRating = (rating: number) => {
             if (!detailQuery?.data) return;
 
-            updateRatingMutation.mutate({
+            if (detailQuery.data.userRating === rating) {
-                apiClientProps: { serverId: detailQuery?.data.serverId },
+                return setRating(
-                query: {
+                    detailQuery.data._serverId,
-                    item: [detailQuery.data],
+                    [detailQuery.data.id],
-                    rating,
+                    LibraryItem.ALBUM_ARTIST,
-                },
+                    0,
-            });
+                );
+            }
+
+            return setRating(
+                detailQuery.data._serverId,
+                [detailQuery.data.id],
+                LibraryItem.ALBUM_ARTIST,
+                rating,
+            );
         };
 
         const showRating = detailQuery?.data?._serverType === ServerType.NAVIDROME;
@@ -104,9 +112,7 @@ export const AlbumArtistDetailHeader = forwardRef(
                                 <Text isNoSelect>•</Text>
                                 <Rating
                                     onChange={handleUpdateRating}
-                                    readOnly={
+                                    readOnly={detailQuery?.isFetching}
-                                        detailQuery?.isFetching || updateRatingMutation.isPending
-                                    }
                                     value={detailQuery?.data?.userRating || 0}
                                 />
                             </>

src/renderer/features/artists/components/album-artist-detail-top-songs-list-header.tsx

@@ -1,7 +1,7 @@
 import { useTranslation } from 'react-i18next';
 
 import { PageHeader } from '/@/renderer/components/page-header/page-header';
-import { usePlayQueueAdd } from '/@/renderer/features/player/hooks/use-playqueue-add';
+import { usePlayer } from '/@/renderer/features/player/context/player-context';
 import { LibraryHeaderBar } from '/@/renderer/features/shared/components/library-header-bar';
 import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
 import { Badge } from '/@/shared/components/badge/badge';
@@ -21,14 +21,11 @@ export const AlbumArtistDetailTopSongsListHeader = ({
     title,
 }: AlbumArtistDetailTopSongsListHeaderProps) => {
     const { t } = useTranslation();
-    const handlePlayQueueAdd = usePlayQueueAdd();
+    const { addToQueueByData } = usePlayer();
     const playButtonBehavior = usePlayButtonBehavior();
 
     const handlePlay = async (playType: Play) => {
-        handlePlayQueueAdd?.({
+        addToQueueByData(data, playType);
-            byData: data,
-            playType,
-        });
     };
 
     return (

src/renderer/features/artists/routes/album-artist-detail-route.tsx

@@ -6,7 +6,7 @@ import { NativeScrollArea } from '/@/renderer/components/native-scroll-area/nati
 import { artistsQueries } from '/@/renderer/features/artists/api/artists-api';
 import { AlbumArtistDetailContent } from '/@/renderer/features/artists/components/album-artist-detail-content';
 import { AlbumArtistDetailHeader } from '/@/renderer/features/artists/components/album-artist-detail-header';
-import { usePlayQueueAdd } from '/@/renderer/features/player/hooks/use-playqueue-add';
+import { usePlayer } from '/@/renderer/features/player/context/player-context';
 import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page';
 import { LibraryHeaderBar } from '/@/renderer/features/shared/components/library-header-bar';
 import { useFastAverageColor } from '/@/renderer/hooks';
@@ -27,7 +27,7 @@ const AlbumArtistDetailRoute = () => {
 
     const routeId = (artistId || albumArtistId) as string;
 
-    const handlePlayQueueAdd = usePlayQueueAdd();
+    const { addToQueueByFetch } = usePlayer();
     const playButtonBehavior = usePlayButtonBehavior();
     const detailQuery = useQuery(
         artistsQueries.albumArtistDetail({
@@ -46,13 +46,8 @@ const AlbumArtistDetailRoute = () => {
     const background = (artistBackground && `url(${backgroundUrl})`) || backgroundColor;
 
     const handlePlay = () => {
-        handlePlayQueueAdd?.({
+        if (!server?.id) return;
-            byItemType: {
+        addToQueueByFetch(server.id, [routeId], LibraryItem.ALBUM_ARTIST, playButtonBehavior);
-                id: [routeId],
-                type: LibraryItem.ALBUM_ARTIST,
-            },
-            playType: playButtonBehavior,
-        });
     };
 
     return (

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, nextSong } = usePlayerData();
-    const currentSong = queue.current;
     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(
+        imageStateRef.current = imageState;
-            (state) => [state.current.song, state.actions.getPlayerData().queue],
+    }, [imageState]);
-            (state) => {
-                const isTop = imageState.current === 0;
-                const queue = state[1] as PlayerData['queue'];
 
-                const currentImageUrl = scaleImageUrl(
+    useEffect(() => {
-                    mainImageDimensions.idealSize,
+        const unsubSongChange = subscribeCurrentTrack(({ index, song }, prev) => {
-                    queue.current?.imageUrl,
+            // Only update if the song actually changed
-                );
+            if (song?._uniqueId === prev.song?._uniqueId) {
-                const nextImageUrl = scaleImageUrl(
+                return;
-                    mainImageDimensions.idealSize,
+            }
-                    queue.next?.imageUrl,
-                );
 
-                setImageState({
+            // Use ref to get current state without causing dependency issues
-                    bottomImage: isTop ? currentImageUrl : nextImageUrl,
+            const isTop = imageStateRef.current.current === 0;
-                    current: isTop ? 1 : 0,
+            const state = usePlayerStoreBase.getState();
-                    topImage: isTop ? nextImageUrl : currentImageUrl,
+            const queue = state.getQueue();
-                });
+            const currentSong = queue.items[index];
-            },
+            const nextSong = queue.items[index + 1];
-            { equalityFn: (a, b) => (a[0] as QueueSong)?.id === (b[0] as QueueSong)?.id },
+
-        );
+            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 = ({
+export const ShuffleAllModal = ({ genres, queryClient, server }: ShuffleAllModalProps) => {
-    genres,
+    const { addToQueueByData } = usePlayer();
-    handlePlayQueueAdd,
-    musicFolders,
-    queryClient,
-    server,
-}: ShuffleAllModalProps) => {
     const { t } = useTranslation();
     const { enableMaxYear, enableMinYear, genre, limit, maxYear, minYear, musicFolderId, played } =
         useShuffleAllStore();
@@ -114,10 +107,7 @@ export const ShuffleAllModal = ({
             staleTime: 0,
         });
 
-        handlePlayQueueAdd?.({
+        addToQueueByData(res?.items || [], playType);
-            byData: 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 (
+export const openShuffleAllModal = async (props: Pick<ShuffleAllModalProps, 'queryClient'>) => {
-    props: Pick<ShuffleAllModalProps, 'handlePlayQueueAdd' | '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: (
+        children: <ShuffleAllModal genres={genres} server={server} {...props} />,
-            <ShuffleAllModal
-                genres={genres}
-                musicFolders={musicFolders}
-                server={server}
-                {...props}
-            />
-        ),
         size: 'sm',
         title: i18n.t('player.playRandom', { postProcess: 'sentenceCase' }) as string,
     });

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

@@ -1,8 +0,0 @@
-import { useContext } from 'react';
-
-import { PlayQueueHandlerContext } from '/@/renderer/features/player/context/play-queue-handler-context';
-
-export const usePlayQueueAdd = () => {
-    const { handlePlayQueueAdd } = useContext(PlayQueueHandlerContext);
-    return handlePlayQueueAdd;
-};

src/renderer/features/search/components/command-palette.tsx

@@ -3,7 +3,7 @@ import { Fragment, useCallback, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { generatePath, useNavigate } from 'react-router';
 
-import { usePlayQueueAdd } from '/@/renderer/features/player/hooks/use-playqueue-add';
+import { usePlayer } from '/@/renderer/features/player/context/player-context';
 import { searchQueries } from '/@/renderer/features/search/api/search-api';
 import { Command, CommandPalettePages } from '/@/renderer/features/search/components/command';
 import { CommandItemSelectable } from '/@/renderer/features/search/components/command-item-selectable';
@@ -70,8 +70,6 @@ export const CommandPalette = ({ modalProps }: CommandPaletteProps) => {
     const showArtistGroup = isHome && Boolean(query && data && data?.albumArtists?.length > 0);
     const showTrackGroup = isHome && Boolean(query && data && data?.songs?.length > 0);
 
-    const handlePlayQueueAdd = usePlayQueueAdd();
-
     return (
         <Modal
             {...modalProps}
@@ -169,7 +167,6 @@ export const CommandPalette = ({ modalProps }: CommandPaletteProps) => {
                                 >
                                     {({ isHighlighted }) => (
                                         <LibraryCommandItem
-                                            handlePlayQueueAdd={handlePlayQueueAdd}
                                             id={album.id}
                                             imageUrl={album.imageUrl}
                                             isHighlighted={isHighlighted}
@@ -203,7 +200,6 @@ export const CommandPalette = ({ modalProps }: CommandPaletteProps) => {
                                     {({ isHighlighted }) => (
                                         <LibraryCommandItem
                                             disabled={artist?.albumCount === 0}
-                                            handlePlayQueueAdd={handlePlayQueueAdd}
                                             id={artist.id}
                                             imageUrl={artist.imageUrl}
                                             isHighlighted={isHighlighted}
@@ -241,7 +237,6 @@ export const CommandPalette = ({ modalProps }: CommandPaletteProps) => {
                                 >
                                     {({ isHighlighted }) => (
                                         <LibraryCommandItem
-                                            handlePlayQueueAdd={handlePlayQueueAdd}
                                             id={song.id}
                                             imageUrl={song.imageUrl}
                                             isHighlighted={isHighlighted}

src/renderer/features/search/components/library-command-item.tsx

@@ -3,17 +3,18 @@ import { useTranslation } from 'react-i18next';
 
 import styles from './library-command-item.module.css';
 
+import { usePlayer } from '/@/renderer/features/player/context/player-context';
+import { useCurrentServer } from '/@/renderer/store';
 import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
 import { Flex } from '/@/shared/components/flex/flex';
 import { Group } from '/@/shared/components/group/group';
 import { Image } from '/@/shared/components/image/image';
 import { Text } from '/@/shared/components/text/text';
 import { LibraryItem } from '/@/shared/types/domain-types';
-import { Play, PlayQueueAddOptions } from '/@/shared/types/types';
+import { Play } from '/@/shared/types/types';
 
 interface LibraryCommandItemProps {
     disabled?: boolean;
-    handlePlayQueueAdd?: (options: PlayQueueAddOptions) => void;
     id: string;
     imageUrl: null | string;
     isHighlighted?: boolean;
@@ -24,7 +25,6 @@ interface LibraryCommandItemProps {
 
 export const LibraryCommandItem = ({
     disabled,
-    handlePlayQueueAdd,
     id,
     imageUrl,
     isHighlighted,
@@ -33,20 +33,17 @@ export const LibraryCommandItem = ({
     title,
 }: LibraryCommandItemProps) => {
     const { t } = useTranslation();
+    const { addToQueueByFetch } = usePlayer();
+    const server = useCurrentServer();
 
     const handlePlay = useCallback(
         (e: SyntheticEvent, id: string, playType: Play) => {
             e.stopPropagation();
             e.preventDefault();
-            handlePlayQueueAdd?.({
+            if (!server?.id) return;
-                byItemType: {
+            addToQueueByFetch(server.id, [id], itemType, playType);
-                    id: [id],
-                    type: itemType,
-                },
-                playType,
-            });
         },
-        [handlePlayQueueAdd, itemType],
+        [addToQueueByFetch, itemType, server?.id],
     );
 
     const [isHovered, setIsHovered] = useState(false);