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

add header to playlist page

Browse Source
This commit is contained in:
jeffvli
2025-12-10 22:36:57 -08:00
parent bea5bd7857
commit a778f4c715
4 changed files with 87 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/features/playlists/components/playlist-detail-song-list-header.tsx
+56 -22
View File
@@ -4,15 +4,23 @@ import { useLocation, useParams } from 'react-router';
import { PageHeader } from '/@/renderer/components/page-header/page-header';
import { useListContext } from '/@/renderer/context/list-context';
import { usePlayer } from '/@/renderer/features/player/context/player-context';
import { playlistsQueries } from '/@/renderer/features/playlists/api/playlists-api';
import { PlaylistDetailSongListHeaderFilters } from '/@/renderer/features/playlists/components/playlist-detail-song-list-header-filters';
import { FilterBar } from '/@/renderer/features/shared/components/filter-bar';
import {
LibraryHeader,
LibraryHeaderMenu,
} from '/@/renderer/features/shared/components/library-header';
import { LibraryHeaderBar } from '/@/renderer/features/shared/components/library-header-bar';
import { ListSearchInput } from '/@/renderer/features/shared/components/list-search-input';
import { AppRoute } from '/@/renderer/router/routes';
import { useCurrentServer } from '/@/renderer/store';
import { formatDurationString } from '/@/renderer/utils';
import { Stack } from '/@/shared/components/stack/stack';
import { useLocalStorage } from '/@/shared/hooks/use-local-storage';
import { LibraryItem, Song } from '/@/shared/types/domain-types';
import { Play } from '/@/shared/types/types';
interface PlaylistDetailSongListHeaderProps {
isSmartPlaylist?: boolean;
@@ -37,31 +45,57 @@ export const PlaylistDetailSongListHeader = ({
const playlistDuration = detailQuery?.data?.duration;
const [collapsed] = useLocalStorage<boolean>({
defaultValue: false,
key: 'playlist-header-collapsed',
});
const player = usePlayer();
const handlePlay = (type?: Play) => {
player.addToQueueByData(listData as Song[], type || Play.NOW);
};
return (
<Stack gap={0}>
<PageHeader>
<LibraryHeaderBar ignoreMaxWidth>
<LibraryHeaderBar.PlayButton
itemType={LibraryItem.PLAYLIST}
songs={listData as Song[]}
/>
<LibraryHeaderBar.Title>{detailQuery?.data?.name}</LibraryHeaderBar.Title>
{isSmartPlaylist && (
<LibraryHeaderBar.Badge>{t('entity.smartPlaylist')}</LibraryHeaderBar.Badge>
)}
{!!playlistDuration && (
<LibraryHeaderBar.Badge>
{formatDurationString(playlistDuration)}
{collapsed ? (
<PageHeader>
<LibraryHeaderBar ignoreMaxWidth>
<LibraryHeaderBar.PlayButton
itemType={LibraryItem.PLAYLIST}
songs={listData as Song[]}
/>
<LibraryHeaderBar.Title>{detailQuery?.data?.name}</LibraryHeaderBar.Title>
{isSmartPlaylist && (
<LibraryHeaderBar.Badge>
{t('entity.smartPlaylist')}
</LibraryHeaderBar.Badge>
)}
{!!playlistDuration && (
<LibraryHeaderBar.Badge>
{formatDurationString(playlistDuration)}
</LibraryHeaderBar.Badge>
)}
<LibraryHeaderBar.Badge
isLoading={itemCount === null || itemCount === undefined}
>
{itemCount}
</LibraryHeaderBar.Badge>
)}
<LibraryHeaderBar.Badge
isLoading={itemCount === null || itemCount === undefined}
>
{itemCount}
</LibraryHeaderBar.Badge>
</LibraryHeaderBar>
<ListSearchInput />
</PageHeader>
</LibraryHeaderBar>
<ListSearchInput />
</PageHeader>
) : (
<LibraryHeader
imageUrl={detailQuery?.data?.imageUrl}
item={{ route: AppRoute.PLAYLISTS, type: LibraryItem.PLAYLIST }}
title={detailQuery?.data?.name}
>
<LibraryHeaderMenu
onPlay={() => handlePlay(Play.NOW)}
onShuffle={() => handlePlay(Play.SHUFFLE)}
/>
</LibraryHeader>
)}
<FilterBar>
<PlaylistDetailSongListHeaderFilters isSmartPlaylist={isSmartPlaylist} />
</FilterBar>