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

replace remaining legacy playqueue add functions

Browse Source
This commit is contained in:
jeffvli
2025-11-18 17:05:20 -08:00
parent ef78196d1e
commit e986557d87
15 changed files with 171 additions and 227 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/feature-carousel/feature-carousel.tsx
+10 -10
View File
@@ -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?.({
byItemType: {
id: [currentItem.id],
type: LibraryItem.ALBUM,
},
addToQueueByFetch(
server.id,
[currentItem.id],
LibraryItem.ALBUM,
playType,
});
);
}}
variant="outline"
>
src/renderer/features/albums/components/album-detail-content.tsx
+25 -6
View File
@@ -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) => {
if (!detailQuery?.data) return;
}}
onClick={handleMoreOptions}
size="lg"
variant="transparent"
/>
src/renderer/features/albums/components/album-detail-header.tsx
+18 -11
View File
@@ -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({
apiClientProps: { serverId: detailQuery.data._serverId },
query: {
id: [detailQuery.data.id],
rating,
type: LibraryItem.ALBUM,
},
});
if (detailQuery.data.userRating === rating) {
return setRating(
detailQuery.data._serverId,
[detailQuery.data.id],
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
+4 -9
View File
@@ -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?.({
byItemType: {
id: [albumId],
type: LibraryItem.ALBUM,
},
playType: playButtonBehavior,
});
if (!server?.id) return;
addToQueueByFetch(server.id, [albumId], LibraryItem.ALBUM, playButtonBehavior);
};
const backgroundUrl = detailQuery.data?.imageUrl || '';
src/renderer/features/albums/routes/dummy-album-detail-route.tsx
+4 -9
View File
@@ -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?.({
byItemType: {
id: [albumId],
type: LibraryItem.SONG,
},
playType: playButtonBehavior,
});
if (!server?.id) return;
addToQueueByFetch(server.id, [albumId], LibraryItem.SONG, playButtonBehavior);
};
const metadataItems = [
src/renderer/features/artists/components/album-artist-detail-content.tsx
+25 -38
View File
@@ -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 handlePlayQueueAdd = usePlayQueueAdd();
const { ref } = useContainerQuery();
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?.({
byItemType: {
id: [routeId],
type: albumArtistId ? LibraryItem.ALBUM_ARTIST : LibraryItem.ARTIST,
},
playType: playType || playButtonBehavior,
});
if (!server?.id) return;
addToQueueByFetch(
server.id,
[routeId],
albumArtistId ? LibraryItem.ALBUM_ARTIST : LibraryItem.ARTIST,
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) {
deleteFavoriteMutation.mutate({
apiClientProps: { serverId: detailQuery.data._serverId },
query: {
id: [detailQuery.data.id],
type: LibraryItem.ALBUM_ARTIST,
},
});
} else {
createFavoriteMutation.mutate({
apiClientProps: { serverId: detailQuery.data._serverId },
query: {
id: [detailQuery.data.id],
type: LibraryItem.ALBUM_ARTIST,
},
});
}
const handleMoreOptions = (e: React.MouseEvent<HTMLButtonElement>) => {
if (!detailQuery?.data) return;
ContextMenuController.call({
cmd: { items: [detailQuery.data], type: LibraryItem.ALBUM_ARTIST },
event: e,
});
};
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) => {
if (!detailQuery?.data) return;
}}
onClick={handleMoreOptions}
size="lg"
variant="transparent"
/>
src/renderer/features/artists/components/album-artist-detail-header.tsx
+18 -12
View File
@@ -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({
apiClientProps: { serverId: detailQuery?.data.serverId },
query: {
item: [detailQuery.data],
rating,
},
});
if (detailQuery.data.userRating === rating) {
return setRating(
detailQuery.data._serverId,
[detailQuery.data.id],
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={
detailQuery?.isFetching || updateRatingMutation.isPending
}
readOnly={detailQuery?.isFetching}
value={detailQuery?.data?.userRating || 0}
/>
</>
src/renderer/features/artists/components/album-artist-detail-top-songs-list-header.tsx
+3 -6
View File
@@ -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?.({
byData: data,
playType,
});
addToQueueByData(data, playType);
};
return (
src/renderer/features/artists/routes/album-artist-detail-route.tsx
+4 -9
View File
@@ -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?.({
byItemType: {
id: [routeId],
type: LibraryItem.ALBUM_ARTIST,
},
playType: playButtonBehavior,
});
if (!server?.id) return;
addToQueueByFetch(server.id, [routeId], LibraryItem.ALBUM_ARTIST, playButtonBehavior);
};
return (
src/renderer/features/player/components/center-controls.tsx
-4
View File
@@ -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
+44 -32
View File
@@ -8,7 +8,7 @@ import styles from './full-screen-player-image.module.css';
import { useFastAverageColor } from '/@/renderer/hooks';
import { AppRoute } from '/@/renderer/router/routes';
import { usePlayerData, usePlayerStore } from '/@/renderer/store';
import { subscribeCurrentTrack, usePlayerData, usePlayerStoreBase } from '/@/renderer/store';
import { useSettingsStore } from '/@/renderer/store/settings.store';
import { Badge } from '/@/shared/components/badge/badge';
import { Center } from '/@/shared/components/center/center';
@@ -18,7 +18,6 @@ import { Icon } from '/@/shared/components/icon/icon';
import { Stack } from '/@/shared/components/stack/stack';
import { Text } from '/@/shared/components/text/text';
import { useSetState } from '/@/shared/hooks/use-set-state';
import { PlayerData, QueueSong } from '/@/shared/types/domain-types';
const imageVariants: Variants = {
closed: {
@@ -91,22 +90,27 @@ export const FullScreenPlayerImage = () => {
const albumArtRes = useSettingsStore((store) => store.general.albumArtRes);
const { queue } = usePlayerData();
const currentSong = queue.current;
const { currentSong, nextSong } = usePlayerData();
const { background } = useFastAverageColor({
algorithm: 'dominant',
src: queue.current?.imageUrl,
src: currentSong?.imageUrl,
srcLoaded: true,
});
const imageKey = `image-${background}`;
const [imageState, setImageState] = useSetState({
bottomImage: scaleImageUrl(mainImageDimensions.idealSize, queue.next?.imageUrl),
bottomImage: scaleImageUrl(mainImageDimensions.idealSize, nextSong?.imageUrl),
current: 0,
topImage: scaleImageUrl(mainImageDimensions.idealSize, queue.current?.imageUrl),
topImage: scaleImageUrl(mainImageDimensions.idealSize, currentSong?.imageUrl),
});
const updateImageSize = useCallback(() => {
if (mainImageRef.current) {
const state = usePlayerStoreBase.getState();
const playerData = state.getQueue();
const currentIndex = state.player.index;
const current = playerData.items[currentIndex];
const next = playerData.items[currentIndex + 1];
setMainImageDimensions({
idealSize:
albumArtRes ||
@@ -114,46 +118,54 @@ export const FullScreenPlayerImage = () => {
});
setImageState({
bottomImage: scaleImageUrl(mainImageDimensions.idealSize, queue.next?.imageUrl),
bottomImage: scaleImageUrl(mainImageDimensions.idealSize, next?.imageUrl),
current: 0,
topImage: scaleImageUrl(mainImageDimensions.idealSize, queue.current?.imageUrl),
topImage: scaleImageUrl(mainImageDimensions.idealSize, current?.imageUrl),
});
}
}, [mainImageDimensions.idealSize, queue, setImageState, albumArtRes]);
}, [mainImageDimensions.idealSize, setImageState, albumArtRes]);
useLayoutEffect(() => {
updateImageSize();
}, [updateImageSize]);
// Use ref to track current image state to avoid recreating subscription
const imageStateRef = useRef(imageState);
useEffect(() => {
const unsubSongChange = usePlayerStore.subscribe(
(state) => [state.current.song, state.actions.getPlayerData().queue],
(state) => {
const isTop = imageState.current === 0;
const queue = state[1] as PlayerData['queue'];
imageStateRef.current = imageState;
}, [imageState]);
const currentImageUrl = scaleImageUrl(
mainImageDimensions.idealSize,
queue.current?.imageUrl,
);
const nextImageUrl = scaleImageUrl(
mainImageDimensions.idealSize,
queue.next?.imageUrl,
);
useEffect(() => {
const unsubSongChange = subscribeCurrentTrack(({ index, song }, prev) => {
// Only update if the song actually changed
if (song?._uniqueId === prev.song?._uniqueId) {
return;
}
setImageState({
bottomImage: isTop ? currentImageUrl : nextImageUrl,
current: isTop ? 1 : 0,
topImage: isTop ? nextImageUrl : currentImageUrl,
});
},
{ equalityFn: (a, b) => (a[0] as QueueSong)?.id === (b[0] as QueueSong)?.id },
);
// Use ref to get current state without causing dependency issues
const isTop = imageStateRef.current.current === 0;
const state = usePlayerStoreBase.getState();
const queue = state.getQueue();
const currentSong = queue.items[index];
const nextSong = queue.items[index + 1];
const currentImageUrl = scaleImageUrl(
mainImageDimensions.idealSize,
currentSong?.imageUrl,
);
const nextImageUrl = scaleImageUrl(mainImageDimensions.idealSize, nextSong?.imageUrl);
setImageState({
bottomImage: isTop ? currentImageUrl : nextImageUrl,
current: isTop ? 1 : 0,
topImage: isTop ? nextImageUrl : currentImageUrl,
});
});
return () => {
unsubSongChange();
};
}, [imageState, mainImageDimensions.idealSize, queue, setImageState]);
}, [mainImageDimensions.idealSize, setImageState]);
return (
<Flex
src/renderer/features/player/components/shuffle-all-modal.tsx
+7 -56
View File
@@ -10,6 +10,7 @@ import { createWithEqualityFn } from 'zustand/traditional';
import i18n from '/@/i18n/i18n';
import { api } from '/@/renderer/api';
import { queryKeys } from '/@/renderer/api/query-keys';
import { usePlayer } from '/@/renderer/features/player/context/player-context';
import { useAuthStore } from '/@/renderer/store';
import { Button } from '/@/shared/components/button/button';
import { Checkbox } from '/@/shared/components/checkbox/checkbox';
@@ -22,14 +23,13 @@ import { Stack } from '/@/shared/components/stack/stack';
import {
GenreListResponse,
GenreListSort,
MusicFolderListResponse,
Played,
RandomSongListQuery,
ServerListItem,
ServerType,
SortOrder,
} from '/@/shared/types/domain-types';
import { Play, PlayQueueAddOptions } from '/@/shared/types/types';
import { Play } from '/@/shared/types/types';
interface ShuffleAllSlice extends RandomSongListQuery {
actions: {
@@ -74,19 +74,12 @@ export const useShuffleAllStoreActions = () => useShuffleAllStore((state) => sta
interface ShuffleAllModalProps {
genres: GenreListResponse | undefined;
handlePlayQueueAdd: ((options: PlayQueueAddOptions) => void) | undefined;
musicFolders: MusicFolderListResponse | undefined;
queryClient: QueryClient;
server: null | ServerListItem;
}
export const ShuffleAllModal = ({
genres,
handlePlayQueueAdd,
musicFolders,
queryClient,
server,
}: ShuffleAllModalProps) => {
export const ShuffleAllModal = ({ genres, queryClient, server }: ShuffleAllModalProps) => {
const { addToQueueByData } = usePlayer();
const { t } = useTranslation();
const { enableMaxYear, enableMinYear, genre, limit, maxYear, minYear, musicFolderId, played } =
useShuffleAllStore();
@@ -114,10 +107,7 @@ export const ShuffleAllModal = ({
staleTime: 0,
});
handlePlayQueueAdd?.({
byData: res?.items || [],
playType,
});
addToQueueByData(res?.items || [], playType);
closeAllModals();
};
@@ -137,14 +127,6 @@ export const ShuffleAllModal = ({
});
}, [genres, server?.type]);
const musicFolderData = useMemo(() => {
if (!musicFolders) return [];
return musicFolders.items.map((musicFolder) => ({
label: musicFolder.name,
value: String(musicFolder.id),
}));
}, [musicFolders]);
return (
<Stack gap="md">
<NumberInput
@@ -193,15 +175,6 @@ export const ShuffleAllModal = ({
onChange={(e) => setStore({ genre: e || '' })}
value={genre}
/>
<Select
clearable
data={musicFolderData}
label="Music folder"
onChange={(e) => {
setStore({ musicFolderId: e ? String(e) : '' });
}}
value={musicFolderId}
/>
{server?.type === ServerType.JELLYFIN && (
<Select
clearable
@@ -247,9 +220,7 @@ export const ShuffleAllModal = ({
);
};
export const openShuffleAllModal = async (
props: Pick<ShuffleAllModalProps, 'handlePlayQueueAdd' | 'queryClient'>,
) => {
export const openShuffleAllModal = async (props: Pick<ShuffleAllModalProps, 'queryClient'>) => {
const server = useAuthStore.getState().currentServer;
const genres = await props.queryClient.fetchQuery({
@@ -270,28 +241,8 @@ export const openShuffleAllModal = async (
staleTime: 1000 * 60 * 60 * 4,
});
const musicFolders = await props.queryClient.fetchQuery({
gcTime: 1000 * 60 * 5,
queryFn: ({ signal }) =>
api.controller.getMusicFolderList({
apiClientProps: {
serverId: server?.id || '',
signal,
},
}),
queryKey: queryKeys.musicFolders.list(server?.id),
staleTime: 1000 * 60 * 60 * 4,
});
openModal({
children: (
<ShuffleAllModal
genres={genres}
musicFolders={musicFolders}
server={server}
{...props}
/>
),
children: <ShuffleAllModal genres={genres} server={server} {...props} />,
size: 'sm',
title: i18n.t('player.playRandom', { postProcess: 'sentenceCase' }) as string,
});
src/renderer/features/player/hooks/use-playqueue-add.ts
-8
View File
@@ -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
+1 -6
View File
@@ -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
+8 -11
View File
@@ -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?.({
byItemType: {
id: [id],
type: itemType,
},
playType,
});
if (!server?.id) return;
addToQueueByFetch(server.id, [id], itemType, playType);
},
[handlePlayQueueAdd, itemType],
[addToQueueByFetch, itemType, server?.id],
);
const [isHovered, setIsHovered] = useState(false);