Album radio (#1759)

* added album radio feature

---------

Co-authored-by: jeffvli <jeffvictorli@gmail.com>

src/renderer/features/albums/components/album-detail-header.tsx

@@ -1,10 +1,11 @@
-import { useQuery } from '@tanstack/react-query';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { forwardRef, Fragment, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link, useParams } from 'react-router';
 
 import styles from './album-detail-header.module.css';
 
+import { queryKeys } from '/@/renderer/api/query-keys';
 import { albumQueries } from '/@/renderer/features/albums/api/album-api';
 import { JoinedArtists } from '/@/renderer/features/albums/components/joined-artists';
 import { ContextMenuController } from '/@/renderer/features/context-menu/context-menu-controller';
@@ -15,9 +16,10 @@ import {
 } from '/@/renderer/features/shared/components/library-header';
 import { useSetFavorite } from '/@/renderer/features/shared/hooks/use-set-favorite';
 import { useSetRating } from '/@/renderer/features/shared/hooks/use-set-rating';
+import { songsQueries } from '/@/renderer/features/songs/api/songs-api';
 import { AppRoute } from '/@/renderer/router/routes';
 import { useCurrentServer, useShowRatings } from '/@/renderer/store';
-import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
+import { useArtistRadioCount, usePlayButtonBehavior } from '/@/renderer/store/settings.store';
 import { formatDateAbsoluteUTC, formatDurationString } from '/@/renderer/utils';
 import { normalizeReleaseTypes } from '/@/renderer/utils/normalize-release-types';
 import { Group } from '/@/shared/components/group/group';
@@ -32,6 +34,8 @@ export const AlbumDetailHeader = forwardRef<HTMLDivElement>((_props, ref) => {
     const { t } = useTranslation();
     const server = useCurrentServer();
     const showRatings = useShowRatings();
+    const queryClient = useQueryClient();
+    const albumRadioCount = useArtistRadioCount();
     const detailQuery = useQuery(
         albumQueries.detail({ query: { id: albumId }, serverId: server?.id }),
     );
@@ -41,7 +45,7 @@ export const AlbumDetailHeader = forwardRef<HTMLDivElement>((_props, ref) => {
         (detailQuery?.data?._serverType === ServerType.NAVIDROME ||
             detailQuery?.data?._serverType === ServerType.SUBSONIC);
 
-    const { addToQueueByFetch } = usePlayer();
+    const { addToQueueByData, addToQueueByFetch } = usePlayer();
     const playButtonBehavior = usePlayButtonBehavior();
 
     const setRating = useSetRating();
@@ -92,6 +96,28 @@ export const AlbumDetailHeader = forwardRef<HTMLDivElement>((_props, ref) => {
         });
     };
 
+    const handleAlbumRadio = async () => {
+        if (!server?.id || !albumId) return;
+
+        try {
+            const albumRadioSongs = await queryClient.fetchQuery({
+                ...songsQueries.albumRadio({
+                    query: {
+                        albumId: albumId,
+                        count: albumRadioCount,
+                    },
+                    serverId: server.id,
+                }),
+                queryKey: queryKeys.player.fetch({ albumId: albumId }),
+            });
+            if (albumRadioSongs && albumRadioSongs.length > 0) {
+                addToQueueByData(albumRadioSongs, Play.NOW);
+            }
+        } catch (error) {
+            console.error('Failed to load album radio:', error);
+        }
+    };
+
     const releaseYear = detailQuery?.data?.releaseYear;
     const releaseDate = detailQuery?.data?.releaseDate;
 
@@ -249,6 +275,7 @@ export const AlbumDetailHeader = forwardRef<HTMLDivElement>((_props, ref) => {
                     </Group>
                     <LibraryHeaderMenu
                         favorite={detailQuery?.data?.userFavorite}
+                        onAlbumRadio={handleAlbumRadio}
                         onFavorite={handleFavorite}
                         onMore={handleMoreOptions}
                         onPlay={(type) => handlePlay(type)}

src/renderer/features/context-menu/actions/play-album-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 { useArtistRadioCount, useCurrentServerId, usePlayButtonBehavior } from '/@/renderer/store';
+import { ContextMenu } from '/@/shared/components/context-menu/context-menu';
+import { Album } from '/@/shared/types/domain-types';
+import { Play } from '/@/shared/types/types';
+
+interface PlayAlbumRadioActionProps {
+    album: Album;
+    disabled?: boolean;
+}
+
+export const PlayAlbumRadioAction = ({ album, disabled }: PlayAlbumRadioActionProps) => {
+    const albumRadioCount = useArtistRadioCount(); // Reuse the same setting for album radio
+    const { t } = useTranslation();
+    const player = usePlayer();
+    const serverId = useCurrentServerId();
+    const queryClient = useQueryClient();
+    const playButtonBehavior = usePlayButtonBehavior();
+
+    const handlePlayAlbumRadio = useCallback(
+        async (playType: Play) => {
+            if (!serverId || !album) return;
+
+            try {
+                const albumRadioSongs = await queryClient.fetchQuery({
+                    ...songsQueries.albumRadio({
+                        query: {
+                            albumId: album.id,
+                            count: albumRadioCount,
+                        },
+                        serverId: serverId,
+                    }),
+                    queryKey: queryKeys.player.fetch({ albumId: album.id }),
+                });
+                if (albumRadioSongs && albumRadioSongs.length > 0) {
+                    player.addToQueueByData(albumRadioSongs, playType);
+                }
+            } catch (error) {
+                console.error('Failed to load album radio:', error);
+            }
+        },
+        [album, albumRadioCount, player, queryClient, serverId],
+    );
+
+    const handlePlayAlbumRadioNow = useCallback(() => {
+        handlePlayAlbumRadio(Play.NOW);
+    }, [handlePlayAlbumRadio]);
+
+    const handlePlayAlbumRadioNext = useCallback(() => {
+        handlePlayAlbumRadio(Play.NEXT);
+    }, [handlePlayAlbumRadio]);
+
+    const handlePlayAlbumRadioLast = useCallback(() => {
+        handlePlayAlbumRadio(Play.LAST);
+    }, [handlePlayAlbumRadio]);
+
+    const defaultPlayAlbumRadioAction = useCallback(() => {
+        handlePlayAlbumRadio(playButtonBehavior);
+    }, [handlePlayAlbumRadio, playButtonBehavior]);
+
+    return (
+        <ContextMenu.Submenu>
+            <ContextMenu.SubmenuTarget>
+                <ContextMenu.Item
+                    disabled={disabled}
+                    leftIcon="radio"
+                    onSelect={defaultPlayAlbumRadioAction}
+                    rightIcon="arrowRightS"
+                >
+                    {t('player.albumRadio', { postProcess: 'sentenceCase' })}
+                </ContextMenu.Item>
+            </ContextMenu.SubmenuTarget>
+            <ContextMenu.SubmenuContent>
+                <ContextMenu.Item leftIcon="mediaPlay" onSelect={handlePlayAlbumRadioNow}>
+                    {t('player.play', { postProcess: 'sentenceCase' })}
+                </ContextMenu.Item>
+                <ContextMenu.Item leftIcon="mediaPlayNext" onSelect={handlePlayAlbumRadioNext}>
+                    {t('player.addNext', { postProcess: 'sentenceCase' })}
+                </ContextMenu.Item>
+                <ContextMenu.Item leftIcon="mediaPlayLast" onSelect={handlePlayAlbumRadioLast}>
+                    {t('player.addLast', { postProcess: 'sentenceCase' })}
+                </ContextMenu.Item>
+            </ContextMenu.SubmenuContent>
+        </ContextMenu.Submenu>
+    );
+};

src/renderer/features/context-menu/menus/album-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 { PlayAlbumRadioAction } from '/@/renderer/features/context-menu/actions/play-album-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 AlbumContextMenu = ({ items, type }: AlbumContextMenuProps) => {
             bottomStickyContent={<ContextMenuPreview items={items} itemType={type} />}
         >
             <PlayAction ids={ids} itemType={LibraryItem.ALBUM} />
+            <PlayAlbumRadioAction album={items[0]} disabled={items.length > 1} />
             <ContextMenu.Divider />
             <AddToPlaylistAction items={ids} itemType={LibraryItem.ALBUM} />
             <ContextMenu.Divider />

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

@@ -287,6 +287,7 @@ export const calculateTitleSize = (title: string) => {
 
 interface LibraryHeaderMenuProps {
     favorite?: boolean;
+    onAlbumRadio?: () => void;
     onArtistRadio?: () => void;
     onFavorite?: (e: React.MouseEvent<HTMLButtonElement>) => void;
     onMore?: (e: React.MouseEvent<HTMLButtonElement>) => void;
@@ -298,6 +299,7 @@ interface LibraryHeaderMenuProps {
 
 export const LibraryHeaderMenu = ({
     favorite,
+    onAlbumRadio,
     onArtistRadio,
     onFavorite,
     onMore,
@@ -349,8 +351,26 @@ export const LibraryHeaderMenu = ({
                 {onPlay && (
                     <PlayLastTextButton {...handlePlayLast.handlers} {...handlePlayLast.props} />
                 )}
+                {onAlbumRadio && (
+                    <Button
+                        disabled={isPlayerFetching}
+                        leftSection={
+                            isPlayerFetching ? (
+                                <Spinner color="white" />
+                            ) : (
+                                <Icon icon="radio" size="lg" />
+                            )
+                        }
+                        onClick={onAlbumRadio}
+                        size="md"
+                        variant="transparent"
+                    >
+                        {t('player.albumRadio', { postProcess: 'sentenceCase' })}
+                    </Button>
+                )}
                 {onArtistRadio && (
                     <Button
+                        disabled={isPlayerFetching}
                         leftSection={
                             isPlayerFetching ? (
                                 <Spinner color="white" />

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

@@ -6,6 +6,7 @@ import { queryKeys } from '/@/renderer/api/query-keys';
 import { getOptimizedListCount } from '/@/renderer/api/utils-list-count';
 import { QueryHookArgs } from '/@/renderer/lib/react-query';
 import {
+    AlbumRadioQuery,
     ArtistRadioQuery,
     GetQueueQuery,
     ListCountQuery,
@@ -15,6 +16,21 @@ import {
 } from '/@/shared/types/domain-types';
 
 export const songsQueries = {
+    albumRadio: (args: QueryHookArgs<AlbumRadioQuery>) => {
+        return queryOptions({
+            queryFn: ({ signal }) => {
+                return api.controller.getAlbumRadio({
+                    apiClientProps: { serverId: args.serverId, signal },
+                    query: {
+                        albumId: args.query.albumId,
+                        count: args.query.count ?? 20,
+                    },
+                });
+            },
+            queryKey: queryKeys.songs.albumRadio(args.serverId, args.query),
+            ...args.options,
+        });
+    },
     artistRadio: (args: QueryHookArgs<ArtistRadioQuery>) => {
         return queryOptions({
             queryFn: ({ signal }) => {