feat: add artist radio and track radio (in context menu) (#1437)

* Add API support for artist radio and track radio features

* Add translation strings and settings UI for artist radio count

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: jeffvli <jeffvictorli@gmail.com>
This commit is contained in:
farfromrefuge
2025-12-24 05:46:19 +01:00
committed by GitHub
parent dcb84dd442
commit a322717e0e
22 changed files with 18700 additions and 4 deletions
@@ -1,10 +1,11 @@
import { useQuery } from '@tanstack/react-query';
import { useQuery, useQueryClient } from '@tanstack/react-query';
import { forwardRef, Fragment, Ref } from 'react';
import { useTranslation } from 'react-i18next';
import { useParams } from 'react-router';
import styles from './album-artist-detail-header.module.css';
import { queryKeys } from '/@/renderer/api/query-keys';
import { useItemImageUrl } from '/@/renderer/components/item-image/item-image';
import { artistsQueries } from '/@/renderer/features/artists/api/artists-api';
import { ContextMenuController } from '/@/renderer/features/context-menu/context-menu-controller';
@@ -13,8 +14,9 @@ import {
LibraryHeader,
LibraryHeaderMenu,
} from '/@/renderer/features/shared/components/library-header';
import { songsQueries } from '/@/renderer/features/songs/api/songs-api';
import { AppRoute } from '/@/renderer/router/routes';
import { useCurrentServer } from '/@/renderer/store';
import { useCurrentServer, useGeneralSettings } from '/@/renderer/store';
import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
import { formatDurationString } from '/@/renderer/utils';
import { Group } from '/@/shared/components/group/group';
@@ -24,6 +26,7 @@ import { LibraryItem, ServerType } from '/@/shared/types/domain-types';
import { Play } from '/@/shared/types/types';
export const AlbumArtistDetailHeader = forwardRef((_props, ref: Ref<HTMLDivElement>) => {
const { artistRadioCount } = useGeneralSettings();
const { albumArtistId, artistId } = useParams() as {
albumArtistId?: string;
artistId?: string;
@@ -64,8 +67,31 @@ export const AlbumArtistDetailHeader = forwardRef((_props, ref: Ref<HTMLDivEleme
},
];
const { addToQueueByFetch, setFavorite, setRating } = usePlayer();
const { addToQueueByData, addToQueueByFetch, setFavorite, setRating } = usePlayer();
const playButtonBehavior = usePlayButtonBehavior();
const queryClient = useQueryClient();
const handleArtistRadio = async () => {
if (!server?.id || !routeId) return;
try {
const artistRadioSongs = await queryClient.fetchQuery({
...songsQueries.artistRadio({
query: {
artistId: routeId,
count: artistRadioCount,
},
serverId: server.id,
}),
queryKey: queryKeys.player.fetch({ artistId: routeId }),
});
if (artistRadioSongs && artistRadioSongs.length > 0) {
addToQueueByData(artistRadioSongs, Play.NOW);
}
} catch (error) {
console.error('Failed to load artist radio:', error);
}
};
const handlePlay = (type?: Play) => {
if (!server?.id || !routeId) return;
@@ -143,6 +169,7 @@ export const AlbumArtistDetailHeader = forwardRef((_props, ref: Ref<HTMLDivEleme
</Group>
<LibraryHeaderMenu
favorite={detailQuery?.data?.userFavorite}
onArtistRadio={handleArtistRadio}
onFavorite={handleFavorite}
onMore={handleMoreOptions}
onPlay={(type) => handlePlay(type)}