diff --git a/src/renderer/components/item-list/helpers/item-list-controls.ts b/src/renderer/components/item-list/helpers/item-list-controls.ts index ec70e52ec..5466b14e0 100644 --- a/src/renderer/components/item-list/helpers/item-list-controls.ts +++ b/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; }; diff --git a/src/renderer/features/albums/components/album-detail-header.tsx b/src/renderer/features/albums/components/album-detail-header.tsx index a61da54eb..a72b181e6 100644 --- a/src/renderer/features/albums/components/album-detail-header.tsx +++ b/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((_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( diff --git a/src/renderer/features/context-menu/actions/set-rating-action.tsx b/src/renderer/features/context-menu/actions/set-rating-action.tsx index 2fd9c2b0b..7fdc24c1f 100644 --- a/src/renderer/features/context-menu/actions/set-rating-action.tsx +++ b/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({ - apiClientProps: { serverId }, - query: { - id: ids, - rating, - type: itemType, - }, - }); + setRating(serverId, ids, itemType, rating); }; if (!showRatings || !isRatingSupported) { diff --git a/src/renderer/features/player/components/mobile-fullscreen-player.tsx b/src/renderer/features/player/components/mobile-fullscreen-player.tsx index adf8039d0..5ed8d9181 100644 --- a/src/renderer/features/player/components/mobile-fullscreen-player.tsx +++ b/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 { 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'; diff --git a/src/renderer/features/player/components/right-controls.tsx b/src/renderer/features/player/components/right-controls.tsx index 379f13d5d..a53f3feb4 100644 --- a/src/renderer/features/player/components/right-controls.tsx +++ b/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({ - apiClientProps: { serverId: currentSong?._serverId || '' }, - query: { - id: [currentSong.id], - rating, - type: LibraryItem.SONG, - }, - }); + setRating(currentSong._serverId, [currentSong.id], LibraryItem.SONG, rating); }; const { bindings } = useHotkeySettings(); diff --git a/src/renderer/features/player/context/player-context.tsx b/src/renderer/features/player/context/player-context.tsx index a753209a4..e96da23b2 100644 --- a/src/renderer/features/player/context/player-context.tsx +++ b/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({ 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, diff --git a/src/renderer/features/remote/hooks/use-remote.tsx b/src/renderer/features/remote/hooks/use-remote.tsx index 67854b89b..4d4d32d8d 100644 --- a/src/renderer/features/remote/hooks/use-remote.tsx +++ b/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({ - 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 diff --git a/src/renderer/features/shared/hooks/use-handle-favorite.ts b/src/renderer/features/shared/hooks/use-handle-favorite.ts deleted file mode 100644 index f385a37d1..000000000 --- a/src/renderer/features/shared/hooks/use-handle-favorite.ts +++ /dev/null @@ -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; -} - -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; -}; diff --git a/src/renderer/features/shared/hooks/use-set-favorite.ts b/src/renderer/features/shared/hooks/use-set-favorite.ts new file mode 100644 index 000000000..1d5281e35 --- /dev/null +++ b/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; +}; diff --git a/src/renderer/features/shared/hooks/use-set-rating.ts b/src/renderer/features/shared/hooks/use-set-rating.ts new file mode 100644 index 000000000..38fa31b19 --- /dev/null +++ b/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; +}; diff --git a/src/renderer/features/shared/mutations/set-rating-mutation.ts b/src/renderer/features/shared/mutations/set-rating-mutation.ts index e70bbdf1e..5a9856f5a 100644 --- a/src/renderer/features/shared/mutations/set-rating-mutation.ts +++ b/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();