vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-07 04:20:12 +02:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
jeffvli
2026-01-21 01:57:47 -08:00
parent 0492b867aa
commit dbfb547af9
11 changed files with 81 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/item-list/helpers/item-list-controls.ts
+7 -3
View File
@@ -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
+6 -1
View File
@@ -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
+3 -10
View File
@@ -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({
apiClientProps: { serverId },
query: {
id: ids,
rating,
type: itemType,
},
});
setRating(serverId, ids, itemType, rating);
};
if (!showRatings || !isRatingSupported) {
src/renderer/features/player/components/mobile-fullscreen-player.tsx
+8 -33
View File
@@ -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 { useDeleteFavorite } from '/@/renderer/features/shared/mutations/delete-favorite-mutation';
import { useSetRating } from '/@/renderer/features/shared/mutations/set-rating-mutation';
import { useSetFavorite } from '/@/renderer/features/shared/hooks/use-set-favorite';
import { useSetRating } from '/@/renderer/features/shared/hooks/use-set-rating';
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 removeFromFavoritesMutation = useDeleteFavorite({});
const updateRatingMutation = useSetRating({});
const setFavorite = useSetFavorite();
const setRating = useSetRating();
const [isPageHovered, setIsPageHovered] = useState(false);
@@ -414,25 +412,9 @@ export const MobileFullscreenPlayer = () => {
const song = currentSongData;
if (!song?.id) return;
if (song.userFavorite) {
removeFromFavoritesMutation.mutate({
apiClientProps: { serverId: song?._serverId || '' },
query: {
id: [song.id],
type: LibraryItem.SONG,
},
});
} else {
addToFavoritesMutation.mutate({
apiClientProps: { serverId: song?._serverId || '' },
query: {
id: [song.id],
type: LibraryItem.SONG,
},
});
}
setFavorite(song._serverId, [song.id], LibraryItem.SONG, !song.userFavorite);
},
[currentSongData, addToFavoritesMutation, removeFromFavoritesMutation],
[currentSongData, setFavorite],
);
const handleToggleLyrics = useCallback(() => {
@@ -443,16 +425,9 @@ export const MobileFullscreenPlayer = () => {
(rating: number) => {
if (!currentSong?.id) return;
updateRatingMutation.mutate({
apiClientProps: { serverId: currentSong?._serverId || '' },
query: {
id: [currentSong.id],
rating,
type: LibraryItem.SONG,
},
});
setRating(currentSong._serverId, [currentSong.id], LibraryItem.SONG, rating);
},
[currentSong, updateRatingMutation],
[currentSong, setRating],
);
const isPlayerState = activeTab !== 'queue' && activeTab !== 'lyrics';
src/renderer/features/player/components/right-controls.tsx
+3 -10
View File
@@ -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({
apiClientProps: { serverId: currentSong?._serverId || '' },
query: {
id: [currentSong.id],
rating,
type: LibraryItem.SONG,
},
});
setRating(currentSong._serverId, [currentSong.id], LibraryItem.SONG, rating);
};
const { bindings } = useHotkeySettings();
src/renderer/features/player/context/player-context.tsx
-48
View File
@@ -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
+4 -11
View File
@@ -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({
apiClientProps: { serverId: data.serverId },
query: {
id: [data.id],
rating: data.rating,
type: LibraryItem.SONG,
},
});
setRating(data.serverId, [data.id], LibraryItem.SONG, data.rating);
},
);
@@ -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
-57
View File
@@ -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
+29
View File
@@ -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
+20
View File
@@ -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
+1 -1
View File
@@ -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();