[enhancement]: Make related tab on full screen player useful

Resolves #50. Adds a new set of components for fetching similar songs
from the current playing song. For Jellyfin, use the `/items/{itemId}/similar`
endpoint (may not work well for small libraries), and for Navidrome/Subsonic
use `getSimilarSongs`. _In theory_, this component can be used to get similar
songs anywhere.

src/renderer/api/controller.ts

@@ -52,6 +52,8 @@ import type {
     ServerInfoArgs,
     StructuredLyricsArgs,
     StructuredLyric,
+    SimilarSongsArgs,
+    Song,
 } from '/@/renderer/api/types';
 import { ServerType } from '/@/renderer/types';
 import { DeletePlaylistResponse, RandomSongListArgs } from './types';
@@ -90,6 +92,7 @@ export type ControllerEndpoint = Partial<{
     getPlaylistSongList: (args: PlaylistSongListArgs) => Promise<SongListResponse>;
     getRandomSongList: (args: RandomSongListArgs) => Promise<SongListResponse>;
     getServerInfo: (args: ServerInfoArgs) => Promise<ServerInfo>;
+    getSimilarSongs: (args: SimilarSongsArgs) => Promise<Song[]>;
     getSongDetail: (args: SongDetailArgs) => Promise<SongDetailResponse>;
     getSongList: (args: SongListArgs) => Promise<SongListResponse>;
     getStructuredLyrics: (args: StructuredLyricsArgs) => Promise<StructuredLyric[]>;
@@ -136,6 +139,7 @@ const endpoints: ApiController = {
         getPlaylistSongList: jfController.getPlaylistSongList,
         getRandomSongList: jfController.getRandomSongList,
         getServerInfo: jfController.getServerInfo,
+        getSimilarSongs: jfController.getSimilarSongs,
         getSongDetail: jfController.getSongDetail,
         getSongList: jfController.getSongList,
         getStructuredLyrics: undefined,
@@ -174,6 +178,7 @@ const endpoints: ApiController = {
         getPlaylistSongList: ndController.getPlaylistSongList,
         getRandomSongList: ssController.getRandomSongList,
         getServerInfo: ssController.getServerInfo,
+        getSimilarSongs: ssController.getSimilarSongs,
         getSongDetail: ndController.getSongDetail,
         getSongList: ndController.getSongList,
         getStructuredLyrics: ssController.getStructuredLyrics,
@@ -209,6 +214,7 @@ const endpoints: ApiController = {
         getPlaylistDetail: undefined,
         getPlaylistList: undefined,
         getServerInfo: ssController.getServerInfo,
+        getSimilarSongs: ssController.getSimilarSongs,
         getSongDetail: undefined,
         getSongList: undefined,
         getStructuredLyrics: ssController.getStructuredLyrics,
@@ -511,6 +517,15 @@ const getStructuredLyrics = async (args: StructuredLyricsArgs) => {
     )?.(args);
 };
 
+const getSimilarSongs = async (args: SimilarSongsArgs) => {
+    return (
+        apiController(
+            'getSimilarSongs',
+            args.apiClientProps.server?.type,
+        ) as ControllerEndpoint['getSimilarSongs']
+    )?.(args);
+};
+
 export const controller = {
     addToPlaylist,
     authenticate,
@@ -531,6 +546,7 @@ export const controller = {
     getPlaylistSongList,
     getRandomSongList,
     getServerInfo,
+    getSimilarSongs,
     getSongDetail,
     getSongList,
     getStructuredLyrics,

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

@@ -167,6 +167,15 @@ export const contract = c.router({
             400: jfType._response.error,
         },
     },
+    getSimilarSongs: {
+        method: 'GET',
+        path: 'items/:itemId/similar',
+        query: jfType._parameters.similarSongs,
+        responses: {
+            200: jfType._response.similarSongs,
+            400: jfType._response.error,
+        },
+    },
     getSongDetail: {
         method: 'GET',
         path: 'users/:userId/items/:id',

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

@@ -51,6 +51,8 @@ import {
     SongDetailResponse,
     ServerInfo,
     ServerInfoArgs,
+    SimilarSongsArgs,
+    Song,
 } from '/@/renderer/api/types';
 import { jfApiClient } from '/@/renderer/api/jellyfin/jellyfin-api';
 import { jfNormalize } from './jellyfin-normalize';
@@ -960,6 +962,27 @@ const getServerInfo = async (args: ServerInfoArgs): Promise<ServerInfo> => {
     return { id: apiClientProps.server?.id, version: res.body.Version };
 };
 
+const getSimilarSongs = async (args: SimilarSongsArgs): Promise<Song[]> => {
+    const { apiClientProps, query } = args;
+
+    const res = await jfApiClient(apiClientProps).getSimilarSongs({
+        params: {
+            itemId: query.song.id,
+        },
+        query: {
+            Fields: 'Genres, DateCreated, MediaSources, ParentId',
+            Limit: query.count,
+            UserId: apiClientProps.server?.userId || undefined,
+        },
+    });
+
+    if (res.status !== 200) {
+        throw new Error('Failed to get music folder list');
+    }
+
+    return res.body.Items.map((song) => jfNormalize.song(song, apiClientProps.server, ''));
+};
+
 export const jfController = {
     addToPlaylist,
     authenticate,
@@ -980,6 +1003,7 @@ export const jfController = {
     getPlaylistSongList,
     getRandomSongList,
     getServerInfo,
+    getSimilarSongs,
     getSongDetail,
     getSongList,
     getTopSongList,

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

@@ -665,6 +665,16 @@ const serverInfo = z.object({
     Version: z.string(),
 });
 
+const similarSongsParameters = z.object({
+    Fields: z.string().optional(),
+    Limit: z.number().optional(),
+    UserId: z.string().optional(),
+});
+
+const similarSongs = pagination.extend({
+    Items: z.array(song),
+});
+
 export const jfType = {
     _enum: {
         albumArtistList: albumArtistListSort,
@@ -694,6 +704,7 @@ export const jfType = {
         scrobble: scrobbleParameters,
         search: searchParameters,
         similarArtistList: similarArtistListParameters,
+        similarSongs: similarSongsParameters,
         songList: songListParameters,
         updatePlaylist: updatePlaylistParameters,
     },
@@ -719,6 +730,7 @@ export const jfType = {
         scrobble,
         search,
         serverInfo,
+        similarSongs,
         song,
         songList,
         topSongsList,

src/renderer/api/query-keys.ts

@@ -18,6 +18,7 @@ import type {
     LyricsQuery,
     LyricSearchQuery,
     GenreListQuery,
+    SimilarSongsQuery,
 } from './types';
 
 export const splitPaginatedQuery = (key: any) => {
@@ -239,6 +240,10 @@ export const queryKeys: Record<
             return [serverId, 'songs', 'randomSongList'] as const;
         },
         root: (serverId: string) => [serverId, 'songs'] as const,
+        similar: (serverId: string, query?: SimilarSongsQuery) => {
+            if (query) return [serverId, 'song', 'similar', query] as const;
+            return [serverId, 'song', 'similar'] as const;
+        },
     },
     users: {
         list: (serverId: string, query?: UserListQuery) => {

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

@@ -57,6 +57,14 @@ export const contract = c.router({
             200: ssType._response.serverInfo,
         },
     },
+    getSimilarSongs: {
+        method: 'GET',
+        path: 'getSimilarSongs',
+        query: ssType._parameters.similarSongs,
+        responses: {
+            200: ssType._response.similarSongs,
+        },
+    },
     getStructuredLyrics: {
         method: 'GET',
         path: 'getLyricsBySongId.view',

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

@@ -25,6 +25,8 @@ import {
     ServerInfoArgs,
     StructuredLyricsArgs,
     StructuredLyric,
+    SimilarSongsArgs,
+    Song,
 } from '/@/renderer/api/types';
 import { randomString } from '/@/renderer/utils';
 
@@ -444,6 +446,25 @@ export const getStructuredLyrics = async (
     });
 };
 
+const getSimilarSongs = async (args: SimilarSongsArgs): Promise<Song[]> => {
+    const { apiClientProps, query } = args;
+
+    const res = await ssApiClient(apiClientProps).getSimilarSongs({
+        query: {
+            count: query.count,
+            id: query.song.id,
+        },
+    });
+
+    if (res.status !== 200) {
+        throw new Error('Failed to get music folder list');
+    }
+
+    return res.body.similarSongs.song.map((song) =>
+        ssNormalize.song(song, apiClientProps.server, ''),
+    );
+};
+
 export const ssController = {
     authenticate,
     createFavorite,
@@ -451,6 +472,7 @@ export const ssController = {
     getMusicFolderList,
     getRandomSongList,
     getServerInfo,
+    getSimilarSongs,
     getStructuredLyrics,
     getTopSongList,
     removeFavorite,

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

@@ -247,6 +247,17 @@ const structuredLyrics = z.object({
         .optional(),
 });
 
+const similarSongsParameters = z.object({
+    count: z.number().optional(),
+    id: z.string(),
+});
+
+const similarSongs = z.object({
+    similarSongs: z.object({
+        song: z.array(song),
+    }),
+});
+
 export const ssType = {
     _parameters: {
         albumList: albumListParameters,
@@ -258,6 +269,7 @@ export const ssType = {
         scrobble: scrobbleParameters,
         search3: search3Parameters,
         setRating: setRatingParameters,
+        similarSongs: similarSongsParameters,
         structuredLyrics: structuredLyricsParameters,
         topSongsList: topSongsListParameters,
     },
@@ -278,6 +290,7 @@ export const ssType = {
         search3,
         serverInfo,
         setRating,
+        similarSongs,
         song,
         structuredLyrics,
         topSongsList,

src/renderer/api/types.ts

@@ -1170,3 +1170,12 @@ export type StructuredSyncedLyric = {
 export type StructuredLyric = {
     lang: string;
 } & (StructuredUnsyncedLyric | StructuredSyncedLyric);
+
+export type SimilarSongsQuery = {
+    count?: number;
+    song: Song;
+};
+
+export type SimilarSongsArgs = {
+    query: SimilarSongsQuery;
+} & BaseEndpointArgs;

src/renderer/features/player/components/full-screen-player-queue.tsx

@@ -1,16 +1,17 @@
-import { Group, Center } from '@mantine/core';
+import { Group } from '@mantine/core';
 import { motion } from 'framer-motion';
 import { useTranslation } from 'react-i18next';
 import { HiOutlineQueueList } from 'react-icons/hi2';
-import { RiFileMusicLine, RiFileTextLine, RiInformationFill } from 'react-icons/ri';
+import { RiFileMusicLine, RiFileTextLine } from 'react-icons/ri';
 import styled from 'styled-components';
-import { Button, TextTitle } from '/@/renderer/components';
+import { Button } from '/@/renderer/components';
 import { PlayQueue } from '/@/renderer/features/now-playing';
 import {
     useFullScreenPlayerStore,
     useFullScreenPlayerStoreActions,
 } from '/@/renderer/store/full-screen-player.store';
 import { Lyrics } from '/@/renderer/features/lyrics/lyrics';
+import { FullScreenSimilarSongs } from '/@/renderer/features/player/components/full-screen-similar-songs';
 
 const QueueContainer = styled.div`
     position: relative;
@@ -82,8 +83,6 @@ export const FullScreenPlayerQueue = () => {
         },
     ];
 
-    console.log('opacity', opacity);
-
     return (
         <GridContainer
             className="full-screen-player-queue-container"
@@ -123,17 +122,9 @@ export const FullScreenPlayerQueue = () => {
                     <PlayQueue type="fullScreen" />
                 </QueueContainer>
             ) : activeTab === 'related' ? (
-                <Center>
+                <QueueContainer>
-                    <Group>
+                    <FullScreenSimilarSongs />
-                        <RiInformationFill size="2rem" />
+                </QueueContainer>
-                        <TextTitle
-                            order={3}
-                            weight={700}
-                        >
-                            {t('common.comingSoon', { postProcess: 'upperCase' })}
-                        </TextTitle>
-                    </Group>
-                </Center>
             ) : activeTab === 'lyrics' ? (
                 <Lyrics />
             ) : null}

src/renderer/features/player/components/full-screen-similar-songs.tsx

@@ -0,0 +1,13 @@
+import { SimilarSongsList } from '/@/renderer/features/similar-songs/components/similar-songs-list';
+import { useCurrentSong } from '/@/renderer/store';
+
+export const FullScreenSimilarSongs = () => {
+    const currentSong = useCurrentSong();
+
+    return (
+        <SimilarSongsList
+            fullScreen
+            song={currentSong}
+        />
+    );
+};

src/renderer/features/similar-songs/components/similar-songs-list.tsx

@@ -0,0 +1,82 @@
+import { ErrorBoundary } from 'react-error-boundary';
+import { VirtualGridAutoSizerContainer } from '/@/renderer/components/virtual-grid';
+import { VirtualTable, getColumnDefs } from '/@/renderer/components/virtual-table';
+import { ErrorFallback } from '/@/renderer/features/action-required';
+import { useSimilarSongs } from '/@/renderer/features/similar-songs/queries/similar-song-queries';
+import { usePlayButtonBehavior, useTableSettings } from '/@/renderer/store';
+import { useMemo, useRef } from 'react';
+import { AgGridReact } from '@ag-grid-community/react';
+import { LibraryItem, Song } from '/@/renderer/api/types';
+import { useHandleTableContextMenu } from '/@/renderer/features/context-menu';
+import { SONG_CONTEXT_MENU_ITEMS } from '/@/renderer/features/context-menu/context-menu-items';
+import { Spinner } from '/@/renderer/components';
+import { RowDoubleClickedEvent } from '@ag-grid-community/core';
+import { useHandlePlayQueueAdd } from '/@/renderer/features/player/hooks/use-handle-playqueue-add';
+
+export type SimilarSongsListProps = {
+    count?: number;
+    fullScreen?: boolean;
+    song?: Song;
+};
+
+export const SimilarSongsList = ({ count, fullScreen, song }: SimilarSongsListProps) => {
+    const tableRef = useRef<AgGridReact<Song> | null>(null);
+    const tableConfig = useTableSettings(fullScreen ? 'fullScreen' : 'songs');
+    const handlePlayQueueAdd = useHandlePlayQueueAdd();
+    const playButtonBehavior = usePlayButtonBehavior();
+
+    const songQuery = useSimilarSongs({
+        options: {
+            cacheTime: 1000 * 60 * 2,
+            staleTime: 1000 * 60 * 1,
+        },
+        query: { count, song },
+        serverId: undefined,
+    });
+
+    const columnDefs = useMemo(
+        () => getColumnDefs(tableConfig.columns, false, 'generic'),
+        [tableConfig.columns],
+    );
+
+    const onCellContextMenu = useHandleTableContextMenu(LibraryItem.SONG, SONG_CONTEXT_MENU_ITEMS);
+
+    const handleRowDoubleClick = (e: RowDoubleClickedEvent<Song>) => {
+        if (!e.data || !songQuery.data) return;
+
+        handlePlayQueueAdd?.({
+            byData: songQuery.data,
+            initialSongId: e.data.id,
+            playType: playButtonBehavior,
+        });
+    };
+
+    return songQuery.isLoading ? (
+        <Spinner
+            container
+            size={25}
+        />
+    ) : (
+        <ErrorBoundary FallbackComponent={ErrorFallback}>
+            <VirtualGridAutoSizerContainer>
+                <VirtualTable
+                    ref={tableRef}
+                    autoFitColumns={tableConfig.autoFit}
+                    columnDefs={columnDefs}
+                    context={{
+                        count,
+                        onCellContextMenu,
+                        song,
+                    }}
+                    deselectOnClickOutside={fullScreen}
+                    getRowId={(data) => data.data.uniqueId}
+                    rowBuffer={50}
+                    rowData={songQuery.data}
+                    rowHeight={tableConfig.rowHeight || 40}
+                    onCellContextMenu={onCellContextMenu}
+                    onCellDoubleClicked={handleRowDoubleClick}
+                />
+            </VirtualGridAutoSizerContainer>
+        </ErrorBoundary>
+    );
+};

src/renderer/features/similar-songs/queries/similar-song-queries.tsx

@@ -0,0 +1,26 @@
+import { useQuery } from '@tanstack/react-query';
+import { SimilarSongsQuery } from '/@/renderer/api/types';
+import { QueryHookArgs } from '/@/renderer/lib/react-query';
+import { getServerById } from '/@/renderer/store';
+import { queryKeys } from '/@/renderer/api/query-keys';
+import { api } from '/@/renderer/api';
+
+export const useSimilarSongs = (args: QueryHookArgs<Partial<SimilarSongsQuery>>) => {
+    const { options, query } = args || {};
+    const server = getServerById(query.song?.serverId);
+
+    return useQuery({
+        enabled: !!server?.id && !!query.song,
+        queryFn: ({ signal }) => {
+            if (!server) throw new Error('Server not found');
+            if (!query.song) return undefined;
+
+            return api.controller.getSimilarSongs({
+                apiClientProps: { server, signal },
+                query: { count: query.count ?? 50, song: query.song },
+            });
+        },
+        queryKey: queryKeys.albumArtists.detail(server?.id || '', query),
+        ...options,
+    });
+};

src/renderer/features/songs/queries/song-list-query.ts

@@ -10,6 +10,7 @@ export const useSongList = (args: QueryHookArgs<SongListQuery>, imageSize?: numb
     const server = getServerById(serverId);
 
     return useQuery({
+        cacheTime: 1000 * 60,
         enabled: !!server?.id,
         queryFn: ({ signal }) => {
             if (!server) throw new Error('Server not found');