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

add play handlers to all remaining library headers

Browse Source
This commit is contained in:
jeffvli
2025-11-19 01:39:46 -08:00
parent aba8896ecf
commit dff3d0b04c
11 changed files with 45 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/features/albums/components/album-list-header.tsx
+1 -1
View File
@@ -45,5 +45,5 @@ export const AlbumListHeader = ({ title }: AlbumListHeaderProps) => {
const PlayButton = () => {
const { query } = useAlbumListFilters();
return <LibraryHeaderBar.PlayButton itemType={LibraryItem.ALBUM} query={query} />;
return <LibraryHeaderBar.PlayButton itemType={LibraryItem.ALBUM} listQuery={query} />;
};
src/renderer/features/albums/routes/album-detail-route.tsx
+6 -10
View File
@@ -6,12 +6,10 @@ 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 { 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';
import { useCurrentServer, useGeneralSettings } from '/@/renderer/store';
import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
import { LibraryItem } from '/@/shared/types/domain-types';
const AlbumDetailRoute = () => {
@@ -21,21 +19,16 @@ const AlbumDetailRoute = () => {
const { albumId } = useParams() as { albumId: string };
const server = useCurrentServer();
const detailQuery = useQuery(
albumQueries.detail({ query: { id: albumId }, serverId: server?.id }),
);
const { background: backgroundColor, colorId } = useFastAverageColor({
id: albumId,
src: detailQuery.data?.imageUrl,
srcLoaded: !detailQuery.isLoading,
});
const { addToQueueByFetch } = usePlayer();
const playButtonBehavior = usePlayButtonBehavior();
const handlePlay = () => {
if (!server?.id) return;
addToQueueByFetch(server.id, [albumId], LibraryItem.ALBUM, playButtonBehavior);
};
const backgroundUrl = detailQuery.data?.imageUrl || '';
const background = (albumBackground && `url(${backgroundUrl})`) || backgroundColor;
@@ -47,7 +40,10 @@ const AlbumDetailRoute = () => {
backgroundColor: backgroundColor || undefined,
children: (
<LibraryHeaderBar>
<LibraryHeaderBar.PlayButton onClick={handlePlay} />
<LibraryHeaderBar.PlayButton
ids={[albumId]}
itemType={LibraryItem.ALBUM}
/>
<LibraryHeaderBar.Title>
{detailQuery?.data?.name}
</LibraryHeaderBar.Title>
src/renderer/features/artists/components/album-artist-detail-top-songs-list-header.tsx
+2 -11
View File
@@ -1,13 +1,10 @@
import { useTranslation } from 'react-i18next';
import { PageHeader } from '/@/renderer/components/page-header/page-header';
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';
import { SpinnerIcon } from '/@/shared/components/spinner/spinner';
import { QueueSong } from '/@/shared/types/domain-types';
import { Play } from '/@/shared/types/types';
import { LibraryItem, QueueSong } from '/@/shared/types/domain-types';
interface AlbumArtistDetailTopSongsListHeaderProps {
data: QueueSong[];
@@ -21,17 +18,11 @@ export const AlbumArtistDetailTopSongsListHeader = ({
title,
}: AlbumArtistDetailTopSongsListHeaderProps) => {
const { t } = useTranslation();
const { addToQueueByData } = usePlayer();
const playButtonBehavior = usePlayButtonBehavior();
const handlePlay = async (playType: Play) => {
addToQueueByData(data, playType);
};
return (
<PageHeader p="1rem">
<LibraryHeaderBar>
<LibraryHeaderBar.PlayButton onClick={() => handlePlay(playButtonBehavior)} />
<LibraryHeaderBar.PlayButton itemType={LibraryItem.SONG} songs={data} />
<LibraryHeaderBar.Title>
{t('page.albumArtistDetail.topSongsFrom', {
postProcess: 'titleCase',
src/renderer/features/artists/components/album-artist-list-header.tsx
+1 -1
View File
@@ -45,5 +45,5 @@ export const AlbumArtistListHeader = ({ title }: AlbumArtistListHeaderProps) =>
const PlayButton = () => {
const { query } = useAlbumArtistListFilters();
return <LibraryHeaderBar.PlayButton itemType={LibraryItem.ALBUM_ARTIST} query={query} />;
return <LibraryHeaderBar.PlayButton itemType={LibraryItem.ALBUM_ARTIST} listQuery={query} />;
};
src/renderer/features/artists/components/artist-list-header.tsx
+1 -1
View File
@@ -45,5 +45,5 @@ export const ArtistListHeader = ({ title }: ArtistListHeaderProps) => {
const PlayButton = () => {
const { query } = useArtistListFilters();
return <LibraryHeaderBar.PlayButton itemType={LibraryItem.ARTIST} query={query} />;
return <LibraryHeaderBar.PlayButton itemType={LibraryItem.ARTIST} listQuery={query} />;
};
src/renderer/features/artists/routes/album-artist-detail-route.tsx
+5 -10
View File
@@ -6,12 +6,11 @@ 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 { 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';
import { useCurrentServer } from '/@/renderer/store';
import { useGeneralSettings, usePlayButtonBehavior } from '/@/renderer/store/settings.store';
import { useGeneralSettings } from '/@/renderer/store/settings.store';
import { LibraryItem } from '/@/shared/types/domain-types';
const AlbumArtistDetailRoute = () => {
@@ -27,8 +26,6 @@ const AlbumArtistDetailRoute = () => {
const routeId = (artistId || albumArtistId) as string;
const { addToQueueByFetch } = usePlayer();
const playButtonBehavior = usePlayButtonBehavior();
const detailQuery = useQuery(
artistsQueries.albumArtistDetail({
query: { id: routeId },
@@ -45,11 +42,6 @@ const AlbumArtistDetailRoute = () => {
const backgroundUrl = detailQuery.data?.imageUrl || '';
const background = (artistBackground && `url(${backgroundUrl})`) || backgroundColor;
const handlePlay = () => {
if (!server?.id) return;
addToQueueByFetch(server.id, [routeId], LibraryItem.ALBUM_ARTIST, playButtonBehavior);
};
return (
<AnimatedPage key={`album-artist-detail-${routeId}`}>
<NativeScrollArea
@@ -57,7 +49,10 @@ const AlbumArtistDetailRoute = () => {
backgroundColor: background,
children: (
<LibraryHeaderBar>
<LibraryHeaderBar.PlayButton onClick={handlePlay} />
<LibraryHeaderBar.PlayButton
ids={[routeId]}
itemType={LibraryItem.ALBUM_ARTIST}
/>
<LibraryHeaderBar.Title>
{detailQuery?.data?.name}
</LibraryHeaderBar.Title>
src/renderer/features/genres/components/genre-list-header.tsx
+1 -1
View File
@@ -45,5 +45,5 @@ export const GenreListHeader = ({ title }: GenreListHeaderProps) => {
const PlayButton = () => {
const { query } = useGenreListFilters();
return <LibraryHeaderBar.PlayButton itemType={LibraryItem.GENRE} query={query} />;
return <LibraryHeaderBar.PlayButton itemType={LibraryItem.GENRE} listQuery={query} />;
};
src/renderer/features/playlists/components/playlist-detail-song-list-header.tsx
+5 -4
View File
@@ -10,11 +10,11 @@ import { PlaylistDetailSongListHeaderFilters } from '/@/renderer/features/playli
import { FilterBar } from '/@/renderer/features/shared/components/filter-bar';
import { LibraryHeaderBar } from '/@/renderer/features/shared/components/library-header-bar';
import { useCurrentServer } from '/@/renderer/store';
import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
import { formatDurationString } from '/@/renderer/utils';
import { Badge } from '/@/shared/components/badge/badge';
import { SpinnerIcon } from '/@/shared/components/spinner/spinner';
import { Stack } from '/@/shared/components/stack/stack';
import { LibraryItem } from '/@/shared/types/domain-types';
import { Play } from '/@/shared/types/types';
interface PlaylistDetailHeaderProps {
@@ -37,8 +37,6 @@ export const PlaylistDetailSongListHeader = ({
playlistsQueries.detail({ query: { id: playlistId }, serverId: server?.id }),
);
const playButtonBehavior = usePlayButtonBehavior();
if (detailQuery.isLoading) return null;
const isSmartPlaylist = detailQuery?.data?.rules;
const playlistDuration = detailQuery?.data?.duration;
@@ -47,7 +45,10 @@ export const PlaylistDetailSongListHeader = ({
<Stack gap={0}>
<PageHeader>
<LibraryHeaderBar>
<LibraryHeaderBar.PlayButton onClick={() => handlePlay(playButtonBehavior)} />
<LibraryHeaderBar.PlayButton
ids={[playlistId]}
itemType={LibraryItem.PLAYLIST}
/>
<LibraryHeaderBar.Title>{detailQuery?.data?.name}</LibraryHeaderBar.Title>
{!!playlistDuration && <Badge>{formatDurationString(playlistDuration)}</Badge>}
<Badge>
src/renderer/features/playlists/components/playlist-list-header.tsx
+1 -1
View File
@@ -45,5 +45,5 @@ export const PlaylistListHeader = ({ title }: PlaylistListHeaderProps) => {
const PlayButton = () => {
const { query } = usePlaylistListFilters();
return <LibraryHeaderBar.PlayButton itemType={LibraryItem.PLAYLIST} query={query} />;
return <LibraryHeaderBar.PlayButton itemType={LibraryItem.PLAYLIST} listQuery={query} />;
};
src/renderer/features/shared/components/library-header-bar.tsx
+21 -6
View File
@@ -11,7 +11,7 @@ import { useCurrentServerId } from '/@/renderer/store';
import { Badge, BadgeProps } from '/@/shared/components/badge/badge';
import { Spinner } from '/@/shared/components/spinner/spinner';
import { TextTitle } from '/@/shared/components/text-title/text-title';
import { LibraryItem } from '/@/shared/types/domain-types';
import { LibraryItem, Song } from '/@/shared/types/domain-types';
import { Play } from '/@/shared/types/types';
interface LibraryHeaderBarProps {
@@ -24,26 +24,41 @@ export const LibraryHeaderBar = ({ children }: LibraryHeaderBarProps) => {
interface HeaderPlayButtonProps {
className?: string;
ids?: string[];
itemType: LibraryItem;
query: Record<string, any>;
listQuery?: Record<string, any>;
songs?: Song[];
}
interface TitleProps {
children: ReactNode;
}
const HeaderPlayButton = ({ className, itemType, query, ...props }: HeaderPlayButtonProps) => {
const HeaderPlayButton = ({
className,
ids,
itemType,
listQuery,
songs,
...props
}: HeaderPlayButtonProps) => {
const serverId = useCurrentServerId();
const { t } = useTranslation();
const player = usePlayer();
const handlePlay = useCallback(
(playType: Play) => {
if (!serverId) return;
player.addToQueueByListQuery(serverId, query, itemType, playType);
if (listQuery) {
player.addToQueueByListQuery(serverId, listQuery, itemType, playType);
} else if (ids) {
player.addToQueueByFetch(serverId, ids, itemType, playType);
} else if (songs) {
player.addToQueueByData(songs, playType);
}
closeAllModals();
},
[serverId, query, itemType, player],
[listQuery, ids, songs, player, serverId, itemType],
);
const openPlayTypeModal = useCallback(() => {
src/renderer/features/songs/components/song-list-header.tsx
+1 -1
View File
@@ -51,5 +51,5 @@ export const SongListHeader = ({ title }: SongListHeaderProps) => {
const PlayButton = () => {
const { query } = useSongListFilters();
return <LibraryHeaderBar.PlayButton itemType={LibraryItem.SONG} query={query} />;
return <LibraryHeaderBar.PlayButton itemType={LibraryItem.SONG} listQuery={query} />;
};