Skip to content

Commit

Permalink
[enhancement]: Make related tab on full screen player useful
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
kgarner7 committed Feb 19, 2024
1 parent 74075fc commit 025124c
Show file tree
Hide file tree
Showing 14 changed files with 247 additions and 16 deletions.
16 changes: 16 additions & 0 deletions src/renderer/api/controller.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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[]>;
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -209,6 +214,7 @@ const endpoints: ApiController = {
getPlaylistDetail: undefined,
getPlaylistList: undefined,
getServerInfo: ssController.getServerInfo,
getSimilarSongs: ssController.getSimilarSongs,
getSongDetail: undefined,
getSongList: undefined,
getStructuredLyrics: ssController.getStructuredLyrics,
Expand Down Expand Up @@ -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,
Expand All @@ -531,6 +546,7 @@ export const controller = {
getPlaylistSongList,
getRandomSongList,
getServerInfo,
getSimilarSongs,
getSongDetail,
getSongList,
getStructuredLyrics,
Expand Down
9 changes: 9 additions & 0 deletions src/renderer/api/jellyfin/jellyfin-api.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
24 changes: 24 additions & 0 deletions src/renderer/api/jellyfin/jellyfin-controller.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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,
Expand All @@ -980,6 +1003,7 @@ export const jfController = {
getPlaylistSongList,
getRandomSongList,
getServerInfo,
getSimilarSongs,
getSongDetail,
getSongList,
getTopSongList,
Expand Down
12 changes: 12 additions & 0 deletions src/renderer/api/jellyfin/jellyfin-types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -694,6 +704,7 @@ export const jfType = {
scrobble: scrobbleParameters,
search: searchParameters,
similarArtistList: similarArtistListParameters,
similarSongs: similarSongsParameters,
songList: songListParameters,
updatePlaylist: updatePlaylistParameters,
},
Expand All @@ -719,6 +730,7 @@ export const jfType = {
scrobble,
search,
serverInfo,
similarSongs,
song,
songList,
topSongsList,
Expand Down
5 changes: 5 additions & 0 deletions src/renderer/api/query-keys.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import type {
LyricsQuery,
LyricSearchQuery,
GenreListQuery,
SimilarSongsQuery,
} from './types';

export const splitPaginatedQuery = (key: any) => {
Expand Down Expand Up @@ -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) => {
Expand Down
8 changes: 8 additions & 0 deletions src/renderer/api/subsonic/subsonic-api.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
22 changes: 22 additions & 0 deletions src/renderer/api/subsonic/subsonic-controller.ts
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,8 @@ import {
ServerInfoArgs,
StructuredLyricsArgs,
StructuredLyric,
SimilarSongsArgs,
Song,
} from '/@/renderer/api/types';
import { randomString } from '/@/renderer/utils';

Expand Down Expand Up @@ -444,13 +446,33 @@ 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,
getArtistInfo,
getMusicFolderList,
getRandomSongList,
getServerInfo,
getSimilarSongs,
getStructuredLyrics,
getTopSongList,
removeFavorite,
Expand Down
13 changes: 13 additions & 0 deletions src/renderer/api/subsonic/subsonic-types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -258,6 +269,7 @@ export const ssType = {
scrobble: scrobbleParameters,
search3: search3Parameters,
setRating: setRatingParameters,
similarSongs: similarSongsParameters,
structuredLyrics: structuredLyricsParameters,
topSongsList: topSongsListParameters,
},
Expand All @@ -278,6 +290,7 @@ export const ssType = {
search3,
serverInfo,
setRating,
similarSongs,
song,
structuredLyrics,
topSongsList,
Expand Down
9 changes: 9 additions & 0 deletions src/renderer/api/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -82,8 +83,6 @@ export const FullScreenPlayerQueue = () => {
},
];

console.log('opacity', opacity);

return (
<GridContainer
className="full-screen-player-queue-container"
Expand Down Expand Up @@ -123,17 +122,9 @@ export const FullScreenPlayerQueue = () => {
<PlayQueue type="fullScreen" />
</QueueContainer>
) : activeTab === 'related' ? (
<Center>
<Group>
<RiInformationFill size="2rem" />
<TextTitle
order={3}
weight={700}
>
{t('common.comingSoon', { postProcess: 'upperCase' })}
</TextTitle>
</Group>
</Center>
<QueueContainer>
<FullScreenSimilarSongs />
</QueueContainer>
) : activeTab === 'lyrics' ? (
<Lyrics />
) : null}
Expand Down
Original file line number Diff line number Diff line change
@@ -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}
/>
);
};
Loading

0 comments on commit 025124c

Please sign in to comment.