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>

src/renderer/features/artists/components/album-artist-detail-header.tsx

@@ -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)}

src/renderer/features/context-menu/actions/play-artist-radio-action.tsx

@@ -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>
+    );
+};

src/renderer/features/context-menu/actions/play-track-radio-action.tsx

@@ -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>
+    );
+};

src/renderer/features/context-menu/menus/album-artist-context-menu.tsx

@@ -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 />

src/renderer/features/context-menu/menus/artist-context-menu.tsx

@@ -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 />

src/renderer/features/context-menu/menus/playlist-song-context-menu.tsx

@@ -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 />

src/renderer/features/context-menu/menus/queue-context-menu.tsx

@@ -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} />

src/renderer/features/context-menu/menus/song-context-menu.tsx

@@ -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 />

src/renderer/features/settings/components/general/control-settings.tsx

@@ -207,6 +207,34 @@ export const ControlSettings = () => {
             isHidden: false,
             title: t('setting.followCurrentSong', { postProcess: 'sentenceCase' }),
         },
+        {
+            control: (
+                <NumberInput
+                    defaultValue={settings.artistRadioCount}
+                    max={200}
+                    min={10}
+                    onBlur={(e) => {
+                        if (!e) return;
+                        const newVal = e.currentTarget.value
+                            ? Math.min(Math.max(Number(e.currentTarget.value), 10), 100)
+                            : settings.artistRadioCount;
+                        setSettings({
+                            general: {
+                                ...settings,
+                                artistRadioCount: newVal,
+                            },
+                        });
+                    }}
+                    width={75}
+                />
+            ),
+            description: t('setting.artistRadioCount', {
+                context: 'description',
+                postProcess: 'sentenceCase',
+            }),
+            isHidden: false,
+            title: t('setting.artistRadioCount', { postProcess: 'sentenceCase' }),
+        },
         {
             control: (
                 <Slider

src/renderer/features/shared/components/library-header.tsx

@@ -6,6 +6,7 @@ import { Link } from 'react-router';
 
 import styles from './library-header.module.css';
 
+import { useIsPlayerFetching } from '/@/renderer/features/player/context/player-context';
 import {
     PlayLastTextButton,
     PlayNextTextButton,
@@ -17,10 +18,13 @@ import { useIsMutatingCreateFavorite } from '/@/renderer/features/shared/mutatio
 import { useIsMutatingDeleteFavorite } from '/@/renderer/features/shared/mutations/delete-favorite-mutation';
 import { useIsMutatingRating } from '/@/renderer/features/shared/mutations/set-rating-mutation';
 import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
+import { Button } from '/@/shared/components/button/button';
 import { Center } from '/@/shared/components/center/center';
 import { Group } from '/@/shared/components/group/group';
+import { Icon } from '/@/shared/components/icon/icon';
 import { Image } from '/@/shared/components/image/image';
 import { Rating } from '/@/shared/components/rating/rating';
+import { Spinner } from '/@/shared/components/spinner/spinner';
 import { Text } from '/@/shared/components/text/text';
 import { LibraryItem } from '/@/shared/types/domain-types';
 import { Play } from '/@/shared/types/types';
@@ -176,6 +180,7 @@ const calculateTitleSize = (title: string) => {
 
 interface LibraryHeaderMenuProps {
     favorite?: boolean;
+    onArtistRadio: () => void;
     onFavorite?: (e: React.MouseEvent<HTMLButtonElement>) => void;
     onMore?: (e: React.MouseEvent<HTMLButtonElement>) => void;
     onPlay?: (type: Play) => void;
@@ -186,16 +191,19 @@ interface LibraryHeaderMenuProps {
 
 export const LibraryHeaderMenu = ({
     favorite,
+    onArtistRadio,
     onFavorite,
     onMore,
     onPlay,
     onRating,
     rating,
 }: LibraryHeaderMenuProps) => {
+    const { t } = useTranslation();
     const isMutatingRating = useIsMutatingRating();
     const isMutatingCreateFavorite = useIsMutatingCreateFavorite();
     const isMutatingDeleteFavorite = useIsMutatingDeleteFavorite();
     const isMutatingFavorite = isMutatingCreateFavorite || isMutatingDeleteFavorite;
+    const isPlayerFetching = useIsPlayerFetching();
 
     const handlePlayNow = usePlayButtonClick({
         onClick: () => {
@@ -234,6 +242,22 @@ export const LibraryHeaderMenu = ({
                 {onPlay && (
                     <PlayLastTextButton {...handlePlayLast.handlers} {...handlePlayLast.props} />
                 )}
+                {onArtistRadio && (
+                    <Button
+                        leftSection={
+                            isPlayerFetching ? (
+                                <Spinner color="white" />
+                            ) : (
+                                <Icon icon="radio" size="lg" />
+                            )
+                        }
+                        onClick={onArtistRadio}
+                        size="md"
+                        variant="transparent"
+                    >
+                        {t('player.artistRadio', { postProcess: 'sentenceCase' })}
+                    </Button>
+                )}
             </Group>
             <Group gap="sm" wrap="nowrap">
                 {onRating && (

src/renderer/features/songs/api/songs-api.ts

@@ -5,6 +5,7 @@ import { controller } from '/@/renderer/api/controller';
 import { queryKeys } from '/@/renderer/api/query-keys';
 import { QueryHookArgs } from '/@/renderer/lib/react-query';
 import {
+    ArtistRadioQuery,
     GetQueueQuery,
     ListCountQuery,
     RandomSongListQuery,
@@ -13,6 +14,21 @@ import {
 } from '/@/shared/types/domain-types';
 
 export const songsQueries = {
+    artistRadio: (args: QueryHookArgs<ArtistRadioQuery>) => {
+        return queryOptions({
+            queryFn: ({ signal }) => {
+                return api.controller.getArtistRadio({
+                    apiClientProps: { serverId: args.serverId, signal },
+                    query: {
+                        artistId: args.query.artistId,
+                        count: args.query.count ?? 20,
+                    },
+                });
+            },
+            queryKey: queryKeys.songs.artistRadio(args.serverId, args.query),
+            ...args.options,
+        });
+    },
     getQueue: (args: QueryHookArgs<GetQueueQuery>) => {
         return queryOptions({
             queryFn: ({ signal }) => {