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>
2026-06-23 12:27:59 +02:00 · 2025-12-24 05:46:19 +01:00
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>
+    );
+};