remove favorite/rating handlers from PlayerContext to prevent rerenders from consumers

src/renderer/components/item-list/helpers/item-list-controls.ts

@@ -6,6 +6,8 @@ import { ItemListStateItemWithRequiredProperties } from '/@/renderer/components/
 import { DefaultItemControlProps, ItemControls } from '/@/renderer/components/item-list/types';
 import { ContextMenuController } from '/@/renderer/features/context-menu/context-menu-controller';
 import { usePlayer } from '/@/renderer/features/player/context/player-context';
+import { useSetFavorite } from '/@/renderer/features/shared/hooks/use-set-favorite';
+import { useSetRating } from '/@/renderer/features/shared/hooks/use-set-rating';
 import { LibraryItem, QueueSong, Song } from '/@/shared/types/domain-types';
 import { Play, TableColumn } from '/@/shared/types/types';
 
@@ -33,6 +35,8 @@ export const useDefaultItemListControls = (args?: UseDefaultItemListControlsArgs
     const player = usePlayer();
     const navigate = useNavigate();
     const navigateRef = useRef(navigate);
+    const setFavorite = useSetFavorite();
+    const setRating = useSetRating();
 
     useEffect(() => {
         navigateRef.current = navigate;
@@ -301,7 +305,7 @@ export const useDefaultItemListControls = (args?: UseDefaultItemListControlsArgs
                     return;
                 }
 
-                player.setFavorite(item._serverId, [item.id], apiItemType, favorite);
+                setFavorite(item._serverId, [item.id], apiItemType, favorite);
             },
 
             onMore: ({ event, internalState, item, itemType }: DefaultItemControlProps) => {
@@ -398,12 +402,12 @@ export const useDefaultItemListControls = (args?: UseDefaultItemListControlsArgs
                     newRating = 0;
                 }
 
-                player.setRating(item._serverId, [item.id], apiItemType, newRating);
+                setRating(item._serverId, [item.id], apiItemType, newRating);
             },
 
             ...overrides,
         };
-    }, [onColumnReordered, onColumnResized, overrides, player]);
+    }, [overrides, onColumnReordered, onColumnResized, player, setFavorite, setRating]);
 
     return controls;
 };

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

@@ -13,6 +13,8 @@ import {
     LibraryHeader,
     LibraryHeaderMenu,
 } from '/@/renderer/features/shared/components/library-header';
+import { useSetFavorite } from '/@/renderer/features/shared/hooks/use-set-favorite';
+import { useSetRating } from '/@/renderer/features/shared/hooks/use-set-rating';
 import { AppRoute } from '/@/renderer/router/routes';
 import { useCurrentServer, useShowRatings } from '/@/renderer/store';
 import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
@@ -39,9 +41,12 @@ export const AlbumDetailHeader = forwardRef<HTMLDivElement>((_props, ref) => {
         (detailQuery?.data?._serverType === ServerType.NAVIDROME ||
             detailQuery?.data?._serverType === ServerType.SUBSONIC);
 
-    const { addToQueueByFetch, setFavorite, setRating } = usePlayer();
+    const { addToQueueByFetch } = usePlayer();
     const playButtonBehavior = usePlayButtonBehavior();
 
+    const setRating = useSetRating();
+    const setFavorite = useSetFavorite();
+
     const handleFavorite = () => {
         if (!detailQuery?.data) return;
         setFavorite(

src/renderer/features/context-menu/actions/set-rating-action.tsx

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { useSetRating } from '/@/renderer/features/shared/mutations/set-rating-mutation';
+import { useSetRating } from '/@/renderer/features/shared/hooks/use-set-rating';
 import { useCurrentServer, useCurrentServerId, useShowRatings } from '/@/renderer/store';
 import { ContextMenu } from '/@/shared/components/context-menu/context-menu';
 import { Rating } from '/@/shared/components/rating/rating';
@@ -19,21 +19,14 @@ export const SetRatingAction = ({ ids, itemType }: SetRatingActionProps) => {
     const serverId = useCurrentServerId();
     const showRatings = useShowRatings();
 
-    const setRatingMutation = useSetRating({});
+    const setRating = useSetRating();
 
     const isRatingSupported = useMemo(() => {
         return server?.type === ServerType.NAVIDROME || server?.type === ServerType.SUBSONIC;
     }, [server?.type]);
 
     const onRating = (rating: number) => {
-        setRatingMutation.mutate({
+        setRating(serverId, ids, itemType, rating);
-            apiClientProps: { serverId },
-            query: {
-                id: ids,
-                rating,
-                type: itemType,
-            },
-        });
     };
 
     if (!showRatings || !isRatingSupported) {

src/renderer/features/player/components/mobile-fullscreen-player.tsx

@@ -24,9 +24,8 @@ import { MobileFullscreenPlayerControls } from '/@/renderer/features/player/comp
 import { MobileFullscreenPlayerHeader } from '/@/renderer/features/player/components/mobile-fullscreen-player-header';
 import { MobileFullscreenPlayerMetadata } from '/@/renderer/features/player/components/mobile-fullscreen-player-metadata';
 import { MobileFullscreenPlayerProgress } from '/@/renderer/features/player/components/mobile-fullscreen-player-progress';
-import { useCreateFavorite } from '/@/renderer/features/shared/mutations/create-favorite-mutation';
+import { useSetFavorite } from '/@/renderer/features/shared/hooks/use-set-favorite';
-import { useDeleteFavorite } from '/@/renderer/features/shared/mutations/delete-favorite-mutation';
+import { useSetRating } from '/@/renderer/features/shared/hooks/use-set-rating';
-import { useSetRating } from '/@/renderer/features/shared/mutations/set-rating-mutation';
 import { useFastAverageColor } from '/@/renderer/hooks';
 import {
     useCurrentServer,
@@ -377,9 +376,8 @@ export const MobileFullscreenPlayer = () => {
     const currentSong = usePlayerSong();
     const { currentSong: currentSongData } = usePlayerData();
     const server = useCurrentServer();
-    const addToFavoritesMutation = useCreateFavorite({});
+    const setFavorite = useSetFavorite();
-    const removeFromFavoritesMutation = useDeleteFavorite({});
+    const setRating = useSetRating();
-    const updateRatingMutation = useSetRating({});
 
     const [isPageHovered, setIsPageHovered] = useState(false);
 
@@ -414,25 +412,9 @@ export const MobileFullscreenPlayer = () => {
             const song = currentSongData;
             if (!song?.id) return;
 
-            if (song.userFavorite) {
+            setFavorite(song._serverId, [song.id], LibraryItem.SONG, !song.userFavorite);
-                removeFromFavoritesMutation.mutate({
-                    apiClientProps: { serverId: song?._serverId || '' },
-                    query: {
-                        id: [song.id],
-                        type: LibraryItem.SONG,
         },
-                });
+        [currentSongData, setFavorite],
-            } else {
-                addToFavoritesMutation.mutate({
-                    apiClientProps: { serverId: song?._serverId || '' },
-                    query: {
-                        id: [song.id],
-                        type: LibraryItem.SONG,
-                    },
-                });
-            }
-        },
-        [currentSongData, addToFavoritesMutation, removeFromFavoritesMutation],
     );
 
     const handleToggleLyrics = useCallback(() => {
@@ -443,16 +425,9 @@ export const MobileFullscreenPlayer = () => {
         (rating: number) => {
             if (!currentSong?.id) return;
 
-            updateRatingMutation.mutate({
+            setRating(currentSong._serverId, [currentSong.id], LibraryItem.SONG, rating);
-                apiClientProps: { serverId: currentSong?._serverId || '' },
-                query: {
-                    id: [currentSong.id],
-                    rating,
-                    type: LibraryItem.SONG,
         },
-            });
+        [currentSong, setRating],
-        },
-        [currentSong, updateRatingMutation],
     );
 
     const isPlayerState = activeTab !== 'queue' && activeTab !== 'lyrics';

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

@@ -6,9 +6,9 @@ import { PopoverPlayQueue } from '/@/renderer/features/now-playing/components/po
 import { PlayerConfig } from '/@/renderer/features/player/components/player-config';
 import { CustomPlayerbarSlider } from '/@/renderer/features/player/components/playerbar-slider';
 import { usePlayer } from '/@/renderer/features/player/context/player-context';
+import { useSetRating } from '/@/renderer/features/shared/hooks/use-set-rating';
 import { useCreateFavorite } from '/@/renderer/features/shared/mutations/create-favorite-mutation';
 import { useDeleteFavorite } from '/@/renderer/features/shared/mutations/delete-favorite-mutation';
-import { useSetRating } from '/@/renderer/features/shared/mutations/set-rating-mutation';
 import {
     useAppStoreActions,
     useAutoDJSettings,
@@ -324,7 +324,7 @@ const useFavoritePreviousSongHotkeys = ({
 const RatingButton = () => {
     const server = useCurrentServer();
     const currentSong = usePlayerSong();
-    const updateRatingMutation = useSetRating({});
+    const setRating = useSetRating();
 
     const isSongDefined = Boolean(currentSong?.id);
     const showRating =
@@ -334,14 +334,7 @@ const RatingButton = () => {
     const handleUpdateRating = (rating: number) => {
         if (!currentSong) return;
 
-        updateRatingMutation.mutate({
+        setRating(currentSong._serverId, [currentSong.id], LibraryItem.SONG, rating);
-            apiClientProps: { serverId: currentSong?._serverId || '' },
-            query: {
-                id: [currentSong.id],
-                rating,
-                type: LibraryItem.SONG,
-            },
-        });
     };
 
     const { bindings } = useHotkeySettings();

src/renderer/features/player/context/player-context.tsx

@@ -16,9 +16,6 @@ import {
     getSongsByFolder,
 } from '/@/renderer/features/player/utils';
 import { playlistsQueries } from '/@/renderer/features/playlists/api/playlists-api';
-import { useCreateFavorite } from '/@/renderer/features/shared/mutations/create-favorite-mutation';
-import { useDeleteFavorite } from '/@/renderer/features/shared/mutations/delete-favorite-mutation';
-import { useSetRating } from '/@/renderer/features/shared/mutations/set-rating-mutation';
 import { songsQueries } from '/@/renderer/features/songs/api/songs-api';
 import { AddToQueueType, usePlayerActions, useSettingsStore } from '/@/renderer/store';
 import { LogCategory, logFn } from '/@/renderer/utils/logger';
@@ -74,14 +71,7 @@ export interface PlayerContext {
     moveSelectedToBottom: (items: QueueSong[]) => void;
     moveSelectedToNext: (items: QueueSong[]) => void;
     moveSelectedToTop: (items: QueueSong[]) => void;
-    setFavorite: (
-        serverId: string,
-        id: string[],
-        itemType: LibraryItem,
-        isFavorite: boolean,
-    ) => void;
     setQueue: (data: Song[], index?: number, position?: number) => void;
-    setRating: (serverId: string, id: string[], itemType: LibraryItem, rating: number) => void;
     setRepeat: (repeat: PlayerRepeat) => void;
     setShuffle: (shuffle: PlayerShuffle) => void;
     setSpeed: (speed: number) => void;
@@ -116,9 +106,7 @@ export const PlayerContext = createContext<PlayerContext>({
     moveSelectedToBottom: () => {},
     moveSelectedToNext: () => {},
     moveSelectedToTop: () => {},
-    setFavorite: () => {},
     setQueue: () => {},
-    setRating: () => {},
     setRepeat: () => {},
     setShuffle: () => {},
     setSpeed: () => {},
@@ -816,38 +804,6 @@ export const PlayerProvider = ({ children }: { children: React.ReactNode }) => {
         storeActions.toggleShuffle();
     }, [storeActions]);
 
-    const createFavoriteMutation = useCreateFavorite({});
-    const deleteFavoriteMutation = useDeleteFavorite({});
-
-    const setFavorite = useCallback(
-        (serverId: string, id: string[], itemType: LibraryItem, isFavorite: boolean) => {
-            if (isFavorite) {
-                createFavoriteMutation.mutate({
-                    apiClientProps: { serverId },
-                    query: { id, type: itemType },
-                });
-            } else {
-                deleteFavoriteMutation.mutate({
-                    apiClientProps: { serverId },
-                    query: { id, type: itemType },
-                });
-            }
-        },
-        [createFavoriteMutation, deleteFavoriteMutation],
-    );
-
-    const setRatingMutation = useSetRating({});
-
-    const setRating = useCallback(
-        (serverId: string, id: string[], itemType: LibraryItem, rating: number) => {
-            setRatingMutation.mutate({
-                apiClientProps: { serverId },
-                query: { id, rating, type: itemType },
-            });
-        },
-        [setRatingMutation],
-    );
-
     const contextValue: PlayerContext = useMemo(
         () => ({
             addToQueueByData,
@@ -872,9 +828,7 @@ export const PlayerProvider = ({ children }: { children: React.ReactNode }) => {
             moveSelectedToBottom,
             moveSelectedToNext,
             moveSelectedToTop,
-            setFavorite,
             setQueue,
-            setRating,
             setRepeat,
             setShuffle,
             setSpeed,
@@ -908,9 +862,7 @@ export const PlayerProvider = ({ children }: { children: React.ReactNode }) => {
             moveSelectedToBottom,
             moveSelectedToNext,
             moveSelectedToTop,
-            setFavorite,
             setQueue,
-            setRating,
             setRepeat,
             setShuffle,
             setSpeed,

src/renderer/features/remote/hooks/use-remote.tsx

@@ -3,9 +3,9 @@ import { useEffect, useRef } from 'react';
 
 import { getItemImageUrl } from '/@/renderer/components/item-image/item-image';
 import { usePlayerEvents } from '/@/renderer/features/player/audio-player/hooks/use-player-events';
+import { useSetRating } from '/@/renderer/features/shared/hooks/use-set-rating';
 import { useCreateFavorite } from '/@/renderer/features/shared/mutations/create-favorite-mutation';
 import { useDeleteFavorite } from '/@/renderer/features/shared/mutations/delete-favorite-mutation';
-import { useSetRating } from '/@/renderer/features/shared/mutations/set-rating-mutation';
 import { usePlayerActions, usePlayerStore, useRemoteSettings } from '/@/renderer/store';
 import { LogCategory, logFn } from '/@/renderer/utils/logger';
 import { logMsg } from '/@/renderer/utils/logger-message';
@@ -21,7 +21,7 @@ export const useRemote = () => {
     const player = usePlayerStore();
 
     const remoteSettings = useRemoteSettings();
-    const updateRatingMutation = useSetRating({});
+    const setRating = useSetRating();
     const addToFavoritesMutation = useCreateFavorite({});
     const removeFromFavoritesMutation = useDeleteFavorite({});
 
@@ -88,14 +88,7 @@ export const useRemote = () => {
                     category: LogCategory.REMOTE,
                     meta: { id: data.id, rating: data.rating, serverId: data.serverId },
                 });
-                updateRatingMutation.mutate({
+                setRating(data.serverId, [data.id], LibraryItem.SONG, data.rating);
-                    apiClientProps: { serverId: data.serverId },
-                    query: {
-                        id: [data.id],
-                        rating: data.rating,
-                        type: LibraryItem.SONG,
-                    },
-                });
             },
         );
 
@@ -140,7 +133,7 @@ export const useRemote = () => {
         player,
         removeFromFavoritesMutation,
         setVolume,
-        updateRatingMutation,
+        setRating,
     ]);
 
     // Send initial song if one is already playing

src/renderer/features/shared/hooks/use-handle-favorite.ts

@@ -1,57 +0,0 @@
-import { MutableRefObject, useCallback } from 'react';
-
-import { VirtualInfiniteGridRef } from '/@/renderer/components/virtual-grid/virtual-infinite-grid';
-import { useCreateFavorite } from '/@/renderer/features/shared/mutations/create-favorite-mutation';
-import { useDeleteFavorite } from '/@/renderer/features/shared/mutations/delete-favorite-mutation';
-import { useCurrentServerId } from '/@/renderer/store';
-import { LibraryItem } from '/@/shared/types/domain-types';
-
-interface HandleFavoriteProps {
-    gridRef: MutableRefObject<null | VirtualInfiniteGridRef>;
-}
-
-export const useHandleFavorite = ({ gridRef }: HandleFavoriteProps) => {
-    const createFavoriteMutation = useCreateFavorite({});
-    const deleteFavoriteMutation = useDeleteFavorite({});
-    const serverId = useCurrentServerId();
-
-    const handleFavorite = useCallback(
-        async (options: { id: string[]; isFavorite: boolean; itemType: LibraryItem }) => {
-            const { id, isFavorite, itemType } = options;
-            try {
-                if (isFavorite) {
-                    await deleteFavoriteMutation.mutateAsync({
-                        apiClientProps: { serverId },
-                        query: {
-                            id,
-                            type: itemType,
-                        },
-                    });
-                } else {
-                    await createFavoriteMutation.mutateAsync({
-                        apiClientProps: { serverId },
-                        query: {
-                            id,
-                            type: itemType,
-                        },
-                    });
-                }
-
-                const idSet = new Set(id);
-                gridRef.current?.updateItemData((data) =>
-                    idSet.has(data.id)
-                        ? {
-                              ...data,
-                              userFavorite: !isFavorite,
-                          }
-                        : data,
-                );
-            } catch (error) {
-                console.error(error);
-            }
-        },
-        [createFavoriteMutation, deleteFavoriteMutation, gridRef, serverId],
-    );
-
-    return handleFavorite;
-};

src/renderer/features/shared/hooks/use-set-favorite.ts

@@ -0,0 +1,29 @@
+import { useCallback } from 'react';
+
+import { useCreateFavorite } from '/@/renderer/features/shared/mutations/create-favorite-mutation';
+import { useDeleteFavorite } from '/@/renderer/features/shared/mutations/delete-favorite-mutation';
+import { LibraryItem } from '/@/shared/types/domain-types';
+
+export const useSetFavorite = () => {
+    const createFavoriteMutation = useCreateFavorite({});
+    const deleteFavoriteMutation = useDeleteFavorite({});
+
+    const setFavorite = useCallback(
+        (serverId: string, id: string[], itemType: LibraryItem, isFavorite: boolean) => {
+            if (isFavorite) {
+                createFavoriteMutation.mutate({
+                    apiClientProps: { serverId },
+                    query: { id, type: itemType },
+                });
+            } else {
+                deleteFavoriteMutation.mutate({
+                    apiClientProps: { serverId },
+                    query: { id, type: itemType },
+                });
+            }
+        },
+        [createFavoriteMutation, deleteFavoriteMutation],
+    );
+
+    return setFavorite;
+};

src/renderer/features/shared/hooks/use-set-rating.ts

@@ -0,0 +1,20 @@
+import { useCallback } from 'react';
+
+import { useSetRatingMutation } from '/@/renderer/features/shared/mutations/set-rating-mutation';
+import { LibraryItem } from '/@/shared/types/domain-types';
+
+export const useSetRating = () => {
+    const setRatingMutation = useSetRatingMutation({});
+
+    const setRating = useCallback(
+        (serverId: string, id: string[], itemType: LibraryItem, rating: number) => {
+            setRatingMutation.mutate({
+                apiClientProps: { serverId },
+                query: { id, rating, type: itemType },
+            });
+        },
+        [setRatingMutation],
+    );
+
+    return setRating;
+};

src/renderer/features/shared/mutations/set-rating-mutation.ts

@@ -15,7 +15,7 @@ import { RatingResponse, SetRatingArgs } from '/@/shared/types/domain-types';
 
 const setRatingMutationKey = ['set-rating'];
 
-export const useSetRating = (args: MutationHookArgs) => {
+export const useSetRatingMutation = (args: MutationHookArgs) => {
     const { options } = args || {};
     const queryClient = useQueryClient();
     const { t } = useTranslation();