[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;