add play handlers to all remaining library headers

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
@@ -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',
@@ -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} />;
};
@@ -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} />;
};
@@ -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>