mirror of
https://github.com/jeffvli/feishin.git
synced 2026-05-15 04:51:06 +02:00
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:
@@ -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 />
|
||||
|
||||
Reference in New Issue
Block a user