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 buttons for each list page header

Browse Source
This commit is contained in:
jeffvli
2025-11-18 21:30:48 -08:00
parent bc13c7b176
commit 71bea66ab7
6 changed files with 57 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/features/albums/components/album-list-header.tsx
+9 -1
View File
@@ -3,11 +3,13 @@ import { useTranslation } from 'react-i18next';
import { PageHeader } from '/@/renderer/components/page-header/page-header';
import { useListContext } from '/@/renderer/context/list-context';
import { AlbumListHeaderFilters } from '/@/renderer/features/albums/components/album-list-header-filters';
import { useAlbumListFilters } from '/@/renderer/features/albums/hooks/use-album-list-filters';
import { FilterBar } from '/@/renderer/features/shared/components/filter-bar';
import { LibraryHeaderBar } from '/@/renderer/features/shared/components/library-header-bar';
import { ListSearchInput } from '/@/renderer/features/shared/components/list-search-input';
import { Group } from '/@/shared/components/group/group';
import { Stack } from '/@/shared/components/stack/stack';
import { LibraryItem } from '/@/shared/types/domain-types';
interface AlbumListHeaderProps {
title?: string;
@@ -23,7 +25,7 @@ export const AlbumListHeader = ({ title }: AlbumListHeaderProps) => {
<Stack gap={0}>
<PageHeader backgroundColor="var(--theme-colors-background)">
<LibraryHeaderBar>
<LibraryHeaderBar.PlayButton />
<PlayButton />
<LibraryHeaderBar.Title>{pageTitle}</LibraryHeaderBar.Title>
<LibraryHeaderBar.Badge isLoading={!itemCount}>
{itemCount}
@@ -39,3 +41,9 @@ export const AlbumListHeader = ({ title }: AlbumListHeaderProps) => {
</Stack>
);
};
const PlayButton = () => {
const { query } = useAlbumListFilters();
return <LibraryHeaderBar.PlayButton itemType={LibraryItem.ALBUM} query={query} />;
};
src/renderer/features/artists/components/album-artist-list-header.tsx
+9 -1
View File
@@ -3,11 +3,13 @@ import { useTranslation } from 'react-i18next';
import { PageHeader } from '/@/renderer/components/page-header/page-header';
import { useListContext } from '/@/renderer/context/list-context';
import { AlbumArtistListHeaderFilters } from '/@/renderer/features/artists/components/album-artist-list-header-filters';
import { useAlbumArtistListFilters } from '/@/renderer/features/artists/hooks/use-album-artist-list-filters';
import { FilterBar } from '/@/renderer/features/shared/components/filter-bar';
import { LibraryHeaderBar } from '/@/renderer/features/shared/components/library-header-bar';
import { ListSearchInput } from '/@/renderer/features/shared/components/list-search-input';
import { Group } from '/@/shared/components/group/group';
import { Stack } from '/@/shared/components/stack/stack';
import { LibraryItem } from '/@/shared/types/domain-types';
interface AlbumArtistListHeaderProps {
title?: string;
@@ -23,7 +25,7 @@ export const AlbumArtistListHeader = ({ title }: AlbumArtistListHeaderProps) =>
<Stack gap={0}>
<PageHeader backgroundColor="var(--theme-colors-background)">
<LibraryHeaderBar>
<LibraryHeaderBar.PlayButton />
<PlayButton />
<LibraryHeaderBar.Title>{pageTitle}</LibraryHeaderBar.Title>
<LibraryHeaderBar.Badge isLoading={!itemCount}>
{itemCount}
@@ -39,3 +41,9 @@ export const AlbumArtistListHeader = ({ title }: AlbumArtistListHeaderProps) =>
</Stack>
);
};
const PlayButton = () => {
const { query } = useAlbumArtistListFilters();
return <LibraryHeaderBar.PlayButton itemType={LibraryItem.ALBUM_ARTIST} query={query} />;
};
src/renderer/features/artists/components/artist-list-header.tsx
+12 -2
View File
@@ -3,11 +3,13 @@ import { useTranslation } from 'react-i18next';
import { PageHeader } from '/@/renderer/components/page-header/page-header';
import { useListContext } from '/@/renderer/context/list-context';
import { ArtistListHeaderFilters } from '/@/renderer/features/artists/components/artist-list-header-filters';
import { useArtistListFilters } from '/@/renderer/features/artists/hooks/use-artist-list-filters';
import { FilterBar } from '/@/renderer/features/shared/components/filter-bar';
import { LibraryHeaderBar } from '/@/renderer/features/shared/components/library-header-bar';
import { ListSearchInput } from '/@/renderer/features/shared/components/list-search-input';
import { Group } from '/@/shared/components/group/group';
import { Stack } from '/@/shared/components/stack/stack';
import { LibraryItem } from '/@/shared/types/domain-types';
interface ArtistListHeaderProps {
title?: string;
@@ -23,9 +25,11 @@ export const ArtistListHeader = ({ title }: ArtistListHeaderProps) => {
<Stack gap={0}>
<PageHeader backgroundColor="var(--theme-colors-background)">
<LibraryHeaderBar>
<LibraryHeaderBar.PlayButton />
<PlayButton />
<LibraryHeaderBar.Title>{pageTitle}</LibraryHeaderBar.Title>
<LibraryHeaderBar.Badge isLoading={!itemCount}>{itemCount}</LibraryHeaderBar.Badge>
<LibraryHeaderBar.Badge isLoading={!itemCount}>
{itemCount}
</LibraryHeaderBar.Badge>
</LibraryHeaderBar>
<Group>
<ListSearchInput />
@@ -37,3 +41,9 @@ export const ArtistListHeader = ({ title }: ArtistListHeaderProps) => {
</Stack>
);
};
const PlayButton = () => {
const { query } = useArtistListFilters();
return <LibraryHeaderBar.PlayButton itemType={LibraryItem.ARTIST} query={query} />;
};
src/renderer/features/genres/components/genre-list-header.tsx
+9 -1
View File
@@ -3,11 +3,13 @@ import { useTranslation } from 'react-i18next';
import { PageHeader } from '/@/renderer/components/page-header/page-header';
import { useListContext } from '/@/renderer/context/list-context';
import { GenreListHeaderFilters } from '/@/renderer/features/genres/components/genre-list-header-filters';
import { useGenreListFilters } from '/@/renderer/features/genres/hooks/use-genre-list-filters';
import { FilterBar } from '/@/renderer/features/shared/components/filter-bar';
import { LibraryHeaderBar } from '/@/renderer/features/shared/components/library-header-bar';
import { ListSearchInput } from '/@/renderer/features/shared/components/list-search-input';
import { Group } from '/@/shared/components/group/group';
import { Stack } from '/@/shared/components/stack/stack';
import { LibraryItem } from '/@/shared/types/domain-types';
interface GenreListHeaderProps {
title?: string;
@@ -23,7 +25,7 @@ export const GenreListHeader = ({ title }: GenreListHeaderProps) => {
<Stack gap={0}>
<PageHeader backgroundColor="var(--theme-colors-background)">
<LibraryHeaderBar>
<LibraryHeaderBar.PlayButton />
<PlayButton />
<LibraryHeaderBar.Title>{pageTitle}</LibraryHeaderBar.Title>
<LibraryHeaderBar.Badge isLoading={!itemCount}>
{itemCount}
@@ -39,3 +41,9 @@ export const GenreListHeader = ({ title }: GenreListHeaderProps) => {
</Stack>
);
};
const PlayButton = () => {
const { query } = useGenreListFilters();
return <LibraryHeaderBar.PlayButton itemType={LibraryItem.GENRE} query={query} />;
};
src/renderer/features/playlists/components/playlist-list-header.tsx
+9 -1
View File
@@ -3,11 +3,13 @@ import { useTranslation } from 'react-i18next';
import { PageHeader } from '/@/renderer/components/page-header/page-header';
import { useListContext } from '/@/renderer/context/list-context';
import { PlaylistListHeaderFilters } from '/@/renderer/features/playlists/components/playlist-list-header-filters';
import { usePlaylistListFilters } from '/@/renderer/features/playlists/hooks/use-playlist-list-filters';
import { FilterBar } from '/@/renderer/features/shared/components/filter-bar';
import { LibraryHeaderBar } from '/@/renderer/features/shared/components/library-header-bar';
import { ListSearchInput } from '/@/renderer/features/shared/components/list-search-input';
import { Group } from '/@/shared/components/group/group';
import { Stack } from '/@/shared/components/stack/stack';
import { LibraryItem } from '/@/shared/types/domain-types';
interface PlaylistListHeaderProps {
title?: string;
@@ -23,7 +25,7 @@ export const PlaylistListHeader = ({ title }: PlaylistListHeaderProps) => {
<Stack gap={0}>
<PageHeader backgroundColor="var(--theme-colors-background)">
<LibraryHeaderBar>
<LibraryHeaderBar.PlayButton />
<PlayButton />
<LibraryHeaderBar.Title>{pageTitle}</LibraryHeaderBar.Title>
<LibraryHeaderBar.Badge isLoading={!itemCount}>
{itemCount}
@@ -39,3 +41,9 @@ export const PlaylistListHeader = ({ title }: PlaylistListHeaderProps) => {
</Stack>
);
};
const PlayButton = () => {
const { query } = usePlaylistListFilters();
return <LibraryHeaderBar.PlayButton itemType={LibraryItem.PLAYLIST} query={query} />;
};
src/renderer/features/songs/components/song-list-header.tsx
+9 -1
View File
@@ -6,9 +6,11 @@ import { FilterBar } from '/@/renderer/features/shared/components/filter-bar';
import { LibraryHeaderBar } from '/@/renderer/features/shared/components/library-header-bar';
import { ListSearchInput } from '/@/renderer/features/shared/components/list-search-input';
import { SongListHeaderFilters } from '/@/renderer/features/songs/components/song-list-header-filters';
import { useSongListFilters } from '/@/renderer/features/songs/hooks/use-song-list-filters';
import { Flex } from '/@/shared/components/flex/flex';
import { Group } from '/@/shared/components/group/group';
import { Stack } from '/@/shared/components/stack/stack';
import { LibraryItem } from '/@/shared/types/domain-types';
interface SongListHeaderProps {
genreId?: string;
@@ -26,7 +28,7 @@ export const SongListHeader = ({ title }: SongListHeaderProps) => {
<PageHeader>
<Flex justify="space-between" w="100%">
<LibraryHeaderBar>
<LibraryHeaderBar.PlayButton onClick={() => {}} />
<PlayButton />
<LibraryHeaderBar.Title>{pageTitle}</LibraryHeaderBar.Title>
<LibraryHeaderBar.Badge
isLoading={itemCount === null || itemCount === undefined}
@@ -45,3 +47,9 @@ export const SongListHeader = ({ title }: SongListHeaderProps) => {
</Stack>
);
};
const PlayButton = () => {
const { query } = useSongListFilters();
return <LibraryHeaderBar.PlayButton itemType={LibraryItem.SONG} query={query} />;
};