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
@@ -0,0 +1,92 @@
import { useQueryClient } from '@tanstack/react-query';
import { useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { queryKeys } from '/@/renderer/api/query-keys';
import { usePlayer } from '/@/renderer/features/player/context/player-context';
import { songsQueries } from '/@/renderer/features/songs/api/songs-api';
import { useCurrentServerId, useGeneralSettings, usePlayButtonBehavior } from '/@/renderer/store';
import { ContextMenu } from '/@/shared/components/context-menu/context-menu';
import { AlbumArtist, Artist } from '/@/shared/types/domain-types';
import { Play } from '/@/shared/types/types';
interface PlayArtistRadioActionProps {
artist: AlbumArtist | Artist;
disabled?: boolean;
}
export const PlayArtistRadioAction = ({ artist, disabled }: PlayArtistRadioActionProps) => {
const { artistRadioCount } = useGeneralSettings();
const { t } = useTranslation();
const player = usePlayer();
const serverId = useCurrentServerId();
const queryClient = useQueryClient();
const playButtonBehavior = usePlayButtonBehavior();
const handlePlayArtistRadio = useCallback(
async (playType: Play) => {
if (!serverId || !artist) return;
try {
const artistRadioSongs = await queryClient.fetchQuery({
...songsQueries.artistRadio({
query: {
artistId: artist.id,
count: artistRadioCount,
},
serverId: serverId,
}),
queryKey: queryKeys.player.fetch({ artistId: artist.id }),
});
if (artistRadioSongs && artistRadioSongs.length > 0) {
player.addToQueueByData(artistRadioSongs, playType);
}
} catch (error) {
console.error('Failed to load track radio:', error);
}
},
[artist, artistRadioCount, player, queryClient, serverId],
);
const handlePlayArtistRadioNow = useCallback(() => {
handlePlayArtistRadio(Play.NOW);
}, [handlePlayArtistRadio]);
const handlePlayArtistRadioNext = useCallback(() => {
handlePlayArtistRadio(Play.NEXT);
}, [handlePlayArtistRadio]);
const handlePlayArtistRadioLast = useCallback(() => {
handlePlayArtistRadio(Play.LAST);
}, [handlePlayArtistRadio]);
const defaultPlayArtistRadioAction = useCallback(() => {
handlePlayArtistRadio(playButtonBehavior);
}, [handlePlayArtistRadio, playButtonBehavior]);
return (
<ContextMenu.Submenu>
<ContextMenu.SubmenuTarget>
<ContextMenu.Item
disabled={disabled}
leftIcon="radio"
onSelect={defaultPlayArtistRadioAction}
rightIcon="arrowRightS"
>
{t('player.artistRadio', { postProcess: 'sentenceCase' })}
</ContextMenu.Item>
</ContextMenu.SubmenuTarget>
<ContextMenu.SubmenuContent>
<ContextMenu.Item leftIcon="mediaPlay" onSelect={handlePlayArtistRadioNow}>
{t('player.play', { postProcess: 'sentenceCase' })}
</ContextMenu.Item>
<ContextMenu.Item leftIcon="mediaPlayNext" onSelect={handlePlayArtistRadioNext}>
{t('player.addNext', { postProcess: 'sentenceCase' })}
</ContextMenu.Item>
<ContextMenu.Item leftIcon="mediaPlayLast" onSelect={handlePlayArtistRadioLast}>
{t('player.addLast', { postProcess: 'sentenceCase' })}
</ContextMenu.Item>
</ContextMenu.SubmenuContent>
</ContextMenu.Submenu>
);
};
@@ -0,0 +1,91 @@
import { useQueryClient } from '@tanstack/react-query';
import { useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { queryKeys } from '/@/renderer/api/query-keys';
import { usePlayer } from '/@/renderer/features/player/context/player-context';
import { songsQueries } from '/@/renderer/features/songs/api/songs-api';
import { useCurrentServerId, usePlayButtonBehavior } from '/@/renderer/store';
import { ContextMenu } from '/@/shared/components/context-menu/context-menu';
import { Song } from '/@/shared/types/domain-types';
import { Play } from '/@/shared/types/types';
interface PlayTrackRadioActionProps {
disabled?: boolean;
song: Song;
}
export const PlayTrackRadioAction = ({ disabled, song }: PlayTrackRadioActionProps) => {
const { t } = useTranslation();
const player = usePlayer();
const serverId = useCurrentServerId();
const queryClient = useQueryClient();
const playButtonBehavior = usePlayButtonBehavior();
const handlePlayTrackRadio = useCallback(
async (playType: Play) => {
if (!serverId || !song) return;
try {
const similarSongs = await queryClient.fetchQuery({
...songsQueries.similar({
query: {
songId: song.id,
},
serverId,
}),
queryKey: queryKeys.player.fetch({ similarSongs: song.id }),
});
if (similarSongs && similarSongs.length > 0) {
player.addToQueueByData(similarSongs, playType);
}
} catch (error) {
console.error('Failed to load track radio:', error);
}
},
[player, queryClient, serverId, song],
);
const handlePlayTrackRadioNow = useCallback(() => {
handlePlayTrackRadio(Play.NOW);
}, [handlePlayTrackRadio]);
const handlePlayTrackRadioNext = useCallback(() => {
handlePlayTrackRadio(Play.NEXT);
}, [handlePlayTrackRadio]);
const handlePlayTrackRadioLast = useCallback(() => {
handlePlayTrackRadio(Play.LAST);
}, [handlePlayTrackRadio]);
const defaultPlayTrackRadioAction = useCallback(() => {
handlePlayTrackRadio(playButtonBehavior);
}, [handlePlayTrackRadio, playButtonBehavior]);
return (
<ContextMenu.Submenu>
<ContextMenu.SubmenuTarget>
<ContextMenu.Item
disabled={disabled}
leftIcon="radio"
onSelect={defaultPlayTrackRadioAction}
rightIcon="arrowRightS"
>
{t('player.trackRadio', { postProcess: 'sentenceCase' })}
</ContextMenu.Item>
</ContextMenu.SubmenuTarget>
<ContextMenu.SubmenuContent>
<ContextMenu.Item leftIcon="mediaPlay" onSelect={handlePlayTrackRadioNow}>
{t('player.play', { postProcess: 'sentenceCase' })}
</ContextMenu.Item>
<ContextMenu.Item leftIcon="mediaPlayNext" onSelect={handlePlayTrackRadioNext}>
{t('player.addNext', { postProcess: 'sentenceCase' })}
</ContextMenu.Item>
<ContextMenu.Item leftIcon="mediaPlayLast" onSelect={handlePlayTrackRadioLast}>
{t('player.addLast', { postProcess: 'sentenceCase' })}
</ContextMenu.Item>
</ContextMenu.SubmenuContent>
</ContextMenu.Submenu>
);
};
@@ -5,6 +5,7 @@ import { DownloadAction } from '/@/renderer/features/context-menu/actions/downlo
import { GetInfoAction } from '/@/renderer/features/context-menu/actions/get-info-action';
import { GoToAction } from '/@/renderer/features/context-menu/actions/go-to-action';
import { PlayAction } from '/@/renderer/features/context-menu/actions/play-action';
import { PlayArtistRadioAction } from '/@/renderer/features/context-menu/actions/play-artist-radio-action';
import { SetFavoriteAction } from '/@/renderer/features/context-menu/actions/set-favorite-action';
import { SetRatingAction } from '/@/renderer/features/context-menu/actions/set-rating-action';
import { ShareAction } from '/@/renderer/features/context-menu/actions/share-action';
@@ -28,6 +29,7 @@ export const AlbumArtistContextMenu = ({ items, type }: AlbumArtistContextMenuPr
bottomStickyContent={<ContextMenuPreview items={items} itemType={type} />}
>
<PlayAction ids={ids} itemType={LibraryItem.ALBUM_ARTIST} />
<PlayArtistRadioAction artist={items[0]} disabled={items.length > 1} />
<ContextMenu.Divider />
<AddToPlaylistAction items={ids} itemType={LibraryItem.ALBUM_ARTIST} />
<ContextMenu.Divider />
@@ -5,6 +5,7 @@ import { DownloadAction } from '/@/renderer/features/context-menu/actions/downlo
import { GetInfoAction } from '/@/renderer/features/context-menu/actions/get-info-action';
import { GoToAction } from '/@/renderer/features/context-menu/actions/go-to-action';
import { PlayAction } from '/@/renderer/features/context-menu/actions/play-action';
import { PlayArtistRadioAction } from '/@/renderer/features/context-menu/actions/play-artist-radio-action';
import { SetFavoriteAction } from '/@/renderer/features/context-menu/actions/set-favorite-action';
import { SetRatingAction } from '/@/renderer/features/context-menu/actions/set-rating-action';
import { ShareAction } from '/@/renderer/features/context-menu/actions/share-action';
@@ -28,6 +29,7 @@ export const ArtistContextMenu = ({ items, type }: ArtistContextMenuProps) => {
bottomStickyContent={<ContextMenuPreview items={items} itemType={type} />}
>
<PlayAction ids={ids} itemType={LibraryItem.ARTIST} />
<PlayArtistRadioAction artist={items[0]} disabled={items.length > 1} />
<ContextMenu.Divider />
<AddToPlaylistAction items={ids} itemType={LibraryItem.ARTIST} />
<ContextMenu.Divider />
@@ -5,6 +5,7 @@ import { DownloadAction } from '/@/renderer/features/context-menu/actions/downlo
import { GetInfoAction } from '/@/renderer/features/context-menu/actions/get-info-action';
import { GoToAction } from '/@/renderer/features/context-menu/actions/go-to-action';
import { PlayAction } from '/@/renderer/features/context-menu/actions/play-action';
import { PlayTrackRadioAction } from '/@/renderer/features/context-menu/actions/play-track-radio-action';
import { RemoveFromPlaylistAction } from '/@/renderer/features/context-menu/actions/remove-from-playlist-action';
import { SetFavoriteAction } from '/@/renderer/features/context-menu/actions/set-favorite-action';
import { SetRatingAction } from '/@/renderer/features/context-menu/actions/set-rating-action';
@@ -29,6 +30,7 @@ export const PlaylistSongContextMenu = ({ items, type }: PlaylistSongContextMenu
bottomStickyContent={<ContextMenuPreview items={items} itemType={type} />}
>
<PlayAction ids={ids} itemType={type} songs={items} />
<PlayTrackRadioAction disabled={items.length > 1} song={items[0]} />
<ContextMenu.Divider />
<RemoveFromPlaylistAction items={items} />
<ContextMenu.Divider />
@@ -5,6 +5,7 @@ import { DownloadAction } from '/@/renderer/features/context-menu/actions/downlo
import { GetInfoAction } from '/@/renderer/features/context-menu/actions/get-info-action';
import { GoToAction } from '/@/renderer/features/context-menu/actions/go-to-action';
import { MoveQueueItemsAction } from '/@/renderer/features/context-menu/actions/move-queue-items-action';
import { PlayTrackRadioAction } from '/@/renderer/features/context-menu/actions/play-track-radio-action';
import { RemoveFromQueueAction } from '/@/renderer/features/context-menu/actions/remove-from-queue-action';
import { SetFavoriteAction } from '/@/renderer/features/context-menu/actions/set-favorite-action';
import { SetRatingAction } from '/@/renderer/features/context-menu/actions/set-rating-action';
@@ -33,6 +34,8 @@ export const QueueContextMenu = ({ items }: QueueContextMenuProps) => {
<MoveQueueItemsAction items={items} />
<ShuffleItemsAction items={items} />
<ContextMenu.Divider />
<PlayTrackRadioAction disabled={items.length > 1} song={items[0]} />
<ContextMenu.Divider />
<AddToPlaylistAction items={ids} itemType={LibraryItem.SONG} />
<ContextMenu.Divider />
<SetFavoriteAction ids={ids} itemType={LibraryItem.SONG} />
@@ -5,6 +5,7 @@ import { DownloadAction } from '/@/renderer/features/context-menu/actions/downlo
import { GetInfoAction } from '/@/renderer/features/context-menu/actions/get-info-action';
import { GoToAction } from '/@/renderer/features/context-menu/actions/go-to-action';
import { PlayAction } from '/@/renderer/features/context-menu/actions/play-action';
import { PlayTrackRadioAction } from '/@/renderer/features/context-menu/actions/play-track-radio-action';
import { SetFavoriteAction } from '/@/renderer/features/context-menu/actions/set-favorite-action';
import { SetRatingAction } from '/@/renderer/features/context-menu/actions/set-rating-action';
import { ShareAction } from '/@/renderer/features/context-menu/actions/share-action';
@@ -28,6 +29,7 @@ export const SongContextMenu = ({ items, type }: SongContextMenuProps) => {
bottomStickyContent={<ContextMenuPreview items={items} itemType={type} />}
>
<PlayAction ids={ids} itemType={LibraryItem.SONG} songs={items} />
<PlayTrackRadioAction disabled={items.length > 1} song={items[0]} />
<ContextMenu.Divider />
<AddToPlaylistAction items={ids} itemType={LibraryItem.SONG} />
<ContextMenu.Divider />