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/i18n/locales/en.json

@@ -597,6 +597,7 @@
         "addNext": "next",
         "addLastShuffled": "last (shuffled)",
         "addNextShuffled": "next (shuffled)",
+        "artistRadio": "artist radio",
         "holdToShuffle": "hold to shuffle",
         "favorite": "favorite",
         "lyrics": "lyrics",
@@ -632,6 +633,7 @@
         "skip_forward": "skip forwards",
         "stop": "stop",
         "toggleFullscreenPlayer": "toggle fullscreen player",
+        "trackRadio": "track radio",
         "unfavorite": "unfavorite",
         "pause": "pause",
         "viewQueue": "view queue"
@@ -863,6 +865,8 @@
         "playButtonBehavior_optionPlay": "$t(player.play)",
         "playButtonBehavior_optionPlayShuffled": "$t(player.shuffle)",
         "playButtonBehavior": "play button behavior",
+        "artistRadioCount_description": "sets the number of songs to fetch for artist radio and track radio",
+        "artistRadioCount": "artist/track radio count",
         "imageResolution": "image resolution",
         "imageResolution_description": "the resolution for the images used around the app. using a value of 0 will default to the native image resolution",
         "imageResolution_optionTable": "table",

src/renderer/api/controller.ts

@@ -320,6 +320,20 @@ export const controller: GeneralController = {
             query: mergeMusicFolderId(args.query, server),
         });
     },
+    getArtistRadio(args) {
+        const server = getServerById(args.apiClientProps.serverId);
+
+        if (!server) {
+            throw new Error(
+                `${i18n.t('error.apiRouteError', { postProcess: 'sentenceCase' })}: getArtistRadio`,
+            );
+        }
+
+        return apiController(
+            'getArtistRadio',
+            server.type,
+        )?.({ ...args, apiClientProps: { ...args.apiClientProps, server } });
+    },
     getDownloadUrl(args) {
         const server = getServerById(args.apiClientProps.serverId);
 

src/renderer/api/jellyfin/jellyfin-controller.ts

@@ -426,6 +426,27 @@ export const JellyfinController: InternalControllerEndpoint = {
             apiClientProps,
             query: { ...query, limit: 1, startIndex: 0 },
         }).then((result) => result!.totalRecordCount!),
+    getArtistRadio: async (args) => {
+        const { apiClientProps, query } = args;
+
+        // For Jellyfin, use instant mix for artist radio
+        const res = await jfApiClient(apiClientProps).getInstantMix({
+            params: {
+                itemId: query.artistId,
+            },
+            query: {
+                Fields: 'Genres, DateCreated, MediaSources, ParentId',
+                Limit: query.count,
+                UserId: apiClientProps.server?.userId || undefined,
+            },
+        });
+
+        if (res.status !== 200) {
+            throw new Error('Failed to get artist radio songs');
+        }
+
+        return res.body.Items.map((song) => jfNormalize.song(song, apiClientProps.server));
+    },
     getDownloadUrl: (args) => {
         const { apiClientProps, query } = args;
 

src/renderer/api/navidrome/navidrome-controller.ts

@@ -401,6 +401,32 @@ export const NavidromeController: InternalControllerEndpoint = {
             apiClientProps,
             query: { ...query, limit: 1, startIndex: 0 },
         }).then((result) => result!.totalRecordCount!),
+    getArtistRadio: async (args) => {
+        const { apiClientProps, query } = args;
+
+        // Use getSimilarSongs2 API for artist radio
+        const res = await ssApiClient({
+            ...apiClientProps,
+            silent: true,
+        }).getSimilarSongs2({
+            query: {
+                count: query.count,
+                id: query.artistId,
+            },
+        });
+
+        if (res.status !== 200) {
+            throw new Error('Failed to get artist radio songs');
+        }
+
+        if (!res.body.similarSongs2?.song) {
+            return [];
+        }
+
+        return res.body.similarSongs2.song.map((song) =>
+            ssNormalize.song(song, apiClientProps.server),
+        );
+    },
     getDownloadUrl: SubsonicController.getDownloadUrl,
     getFolder: SubsonicController.getFolder,
     getGenreList: async (args) => {

src/renderer/api/query-keys.ts

@@ -4,6 +4,7 @@ import type {
     AlbumDetailQuery,
     AlbumListQuery,
     ArtistListQuery,
+    ArtistRadioQuery,
     FolderQuery,
     GenreListQuery,
     LyricSearchQuery,
@@ -340,6 +341,10 @@ export const queryKeys: Record<
         root: (serverId: string) => [serverId] as const,
     },
     songs: {
+        artistRadio: (serverId: string, query?: ArtistRadioQuery) => {
+            if (query) return [serverId, 'songs', 'artistRadio', query] as const;
+            return [serverId, 'songs', 'artistRadio'] as const;
+        },
         count: (serverId: string, query?: SongListQuery) => {
             const { filter, pagination } = splitPaginatedQuery(query);
             if (query && pagination) {

src/renderer/api/subsonic/subsonic-api.ts

@@ -201,6 +201,14 @@ export const contract = c.router({
             200: ssType._response.similarSongs,
         },
     },
+    getSimilarSongs2: {
+        method: 'GET',
+        path: 'getSimilarSongs2',
+        query: ssType._parameters.similarSongs2,
+        responses: {
+            200: ssType._response.similarSongs2,
+        },
+    },
     getSong: {
         method: 'GET',
         path: 'getSong.view',

src/renderer/api/subsonic/subsonic-controller.ts

@@ -682,6 +682,28 @@ export const SubsonicController: InternalControllerEndpoint = {
             ...args,
             query: { ...args.query, startIndex: 0 },
         }).then((res) => res!.totalRecordCount!),
+    getArtistRadio: async (args) => {
+        const { apiClientProps, query } = args;
+
+        const res = await ssApiClient(apiClientProps).getSimilarSongs2({
+            query: {
+                count: query.count,
+                id: query.artistId,
+            },
+        });
+
+        if (res.status !== 200) {
+            throw new Error('Failed to get artist radio songs');
+        }
+
+        if (!res.body.similarSongs2?.song) {
+            return [];
+        }
+
+        return res.body.similarSongs2.song.map((song) =>
+            ssNormalize.song(song, apiClientProps.server),
+        );
+    },
     getDownloadUrl: (args) => {
         const { apiClientProps, query } = args;
 
@@ -880,6 +902,7 @@ export const SubsonicController: InternalControllerEndpoint = {
             totalRecordCount: res.body.musicFolders.musicFolder.length,
         };
     },
+
     getPlaylistDetail: async (args) => {
         const { apiClientProps, query } = args;
 
@@ -895,7 +918,6 @@ export const SubsonicController: InternalControllerEndpoint = {
 
         return ssNormalize.playlist(res.body.playlist, apiClientProps.server);
     },
-
     getPlaylistList: async ({ apiClientProps, query }) => {
         const sortOrder = query.sortOrder.toLowerCase() as 'asc' | 'desc';
 

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 }) => {

src/renderer/store/settings.store.ts

@@ -229,6 +229,7 @@ export const GeneralSettingsSchema = z.object({
     artistBackground: z.boolean(),
     artistBackgroundBlur: z.number(),
     artistItems: z.array(SortableItemSchema(ArtistItemSchema)),
+    artistRadioCount: z.number(),
     buttonSize: z.number(),
     disabledContextMenu: z.record(z.string(), z.boolean()),
     externalLinks: z.boolean(),
@@ -723,6 +724,7 @@ const initialState: SettingsState = {
         artistBackground: false,
         artistBackgroundBlur: 3,
         artistItems,
+        artistRadioCount: 20,
         buttonSize: 15,
         disabledContextMenu: {},
         externalLinks: true,

src/shared/api/subsonic/subsonic-types.ts

@@ -354,6 +354,19 @@ const similarSongs = z.object({
         .optional(),
 });
 
+const similarSongs2Parameters = z.object({
+    count: z.number().optional(),
+    id: z.string(),
+});
+
+const similarSongs2 = z.object({
+    similarSongs2: z
+        .object({
+            song: z.array(song),
+        })
+        .optional(),
+});
+
 export enum SubsonicExtensions {
     FORM_POST = 'formPost',
     INDEX_BASED_QUEUE = 'indexBasedQueue',
@@ -724,6 +737,7 @@ export const ssType = {
         search3: search3Parameters,
         setRating: setRatingParameters,
         similarSongs: similarSongsParameters,
+        similarSongs2: similarSongs2Parameters,
         structuredLyrics: structuredLyricsParameters,
         topSongsList: topSongsListParameters,
         updateInternetRadioStation: updateInternetRadioStationParameters,
@@ -775,6 +789,7 @@ export const ssType = {
         serverInfo,
         setRating,
         similarSongs,
+        similarSongs2,
         song,
         structuredLyrics,
         topSongsList,

src/shared/types/domain-types.ts

@@ -1313,6 +1313,15 @@ export enum LyricSource {
     NETEASE = 'NetEase',
 }
 
+export type ArtistRadioArgs = BaseEndpointArgs & {
+    query: ArtistRadioQuery;
+};
+
+export type ArtistRadioQuery = {
+    artistId: string;
+    count?: number;
+};
+
 export type ControllerEndpoint = {
     addToPlaylist: (args: AddToPlaylistArgs) => Promise<AddToPlaylistResponse>;
     authenticate: (
@@ -1338,6 +1347,7 @@ export type ControllerEndpoint = {
     getAlbumListCount: (args: AlbumListCountArgs) => Promise<number>;
     getArtistList: (args: ArtistListArgs) => Promise<ArtistListResponse>;
     getArtistListCount: (args: ArtistListCountArgs) => Promise<number>;
+    getArtistRadio: (args: ArtistRadioArgs) => Promise<Song[]>;
     getDownloadUrl: (args: DownloadArgs) => string;
     getFolder: (args: FolderArgs) => Promise<FolderResponse>;
     getGenreList: (args: GenreListArgs) => Promise<GenreListResponse>;
@@ -1458,6 +1468,7 @@ export type InternalControllerEndpoint = {
     // getArtistInfo?: (args: any) => void;
     getArtistList: (args: ReplaceApiClientProps<ArtistListArgs>) => Promise<ArtistListResponse>;
     getArtistListCount: (args: ReplaceApiClientProps<ArtistListCountArgs>) => Promise<number>;
+    getArtistRadio: (args: ReplaceApiClientProps<ArtistRadioArgs>) => Promise<Song[]>;
     getDownloadUrl: (args: ReplaceApiClientProps<DownloadArgs>) => string;
     getFolder: (args: ReplaceApiClientProps<FolderArgs>) => Promise<FolderResponse>;
     getGenreList: (args: ReplaceApiClientProps<GenreListArgs>) => Promise<GenreListResponse>;