Cool_Tools/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2024-11-20 06:27:09 +01:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Merge pull request #519 from kgarner7/related-similar-songs

Browse Source 
[enhancement]: Make related tab on full screen player useful
This commit is contained in:
Jeff 2024-03-04 05:29:27 -08:00 committed by GitHub
commit 742cef3d81
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
13 changed files with 262 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/renderer/api/controller.ts
View File

@ -52,6 +52,8 @@ import type {
ServerInfoArgs,
StructuredLyricsArgs,
StructuredLyric,
SimilarSongsArgs,
Song,
ServerType,
} from '/@/renderer/api/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: ndController.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,

9
src/renderer/api/jellyfin/jellyfin-api.ts
View File

@ -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',

30
src/renderer/api/jellyfin/jellyfin-controller.ts
View File

@ -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';
@ -970,6 +972,33 @@ const getServerInfo = async (args: ServerInfoArgs): Promise<ServerInfo> => {
};
};
const getSimilarSongs = async (args: SimilarSongsArgs): Promise<Song[]> => {
const { apiClientProps, query } = args;
const res = await jfApiClient(apiClientProps).getSimilarSongs({
params: {
itemId: query.songId,
},
query: {
Fields: 'Genres, DateCreated, MediaSources, ParentId',
Limit: query.count,
UserId: apiClientProps.server?.userId || undefined,
},
});
if (res.status !== 200) {
throw new Error('Failed to get similar songs');
}
return res.body.Items.reduce<Song[]>((acc, song) => {
if (song.Id !== query.songId) {
acc.push(jfNormalize.song(song, apiClientProps.server, ''));
}
return acc;
}, []);
};
export const jfController = {
addToPlaylist,
authenticate,
@ -990,6 +1019,7 @@ export const jfController = {
getPlaylistSongList,
getRandomSongList,
getServerInfo,
getSimilarSongs,
getSongDetail,
getSongList,
getTopSongList,

12
src/renderer/api/jellyfin/jellyfin-types.ts
View File

@ -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 enum JellyfinExtensions {
SONG_LYRICS = 'songLyrics',
}
@ -698,6 +708,7 @@ export const jfType = {
scrobble: scrobbleParameters,
search: searchParameters,
similarArtistList: similarArtistListParameters,
similarSongs: similarSongsParameters,
songList: songListParameters,
updatePlaylist: updatePlaylistParameters,
},
@ -723,6 +734,7 @@ export const jfType = {
scrobble,
search,
serverInfo,
similarSongs,
song,
songList,
topSongsList,

5
src/renderer/api/query-keys.ts
View File

@ -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) => {

8
src/renderer/api/subsonic/subsonic-api.ts
View File

@ -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',

30
src/renderer/api/subsonic/subsonic-controller.ts
View File

@ -25,6 +25,8 @@ import {
ServerInfoArgs,
StructuredLyricsArgs,
StructuredLyric,
SimilarSongsArgs,
Song,
} from '/@/renderer/api/types';
import { randomString } from '/@/renderer/utils';
import { ServerFeatures } from '/@/renderer/api/features.types';
@ -454,6 +456,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.songId,
},
});
if (res.status !== 200) {
throw new Error('Failed to get similar songs');
}
if (!res.body.similarSongs) {
return [];
}
return res.body.similarSongs.song.reduce<Song[]>((acc, song) => {
if (song.id !== query.songId) {
acc.push(ssNormalize.song(song, apiClientProps.server, ''));
}
return acc;
}, []);
};
export const ssController = {
authenticate,
createFavorite,
@ -461,6 +490,7 @@ export const ssController = {
getMusicFolderList,
getRandomSongList,
getServerInfo,
getSimilarSongs,
getStructuredLyrics,
getTopSongList,
removeFavorite,

16
src/renderer/api/subsonic/subsonic-types.ts
View File

@ -247,12 +247,26 @@ 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),
})
.optional(),
});
export enum SubsonicExtensions {
FORM_POST = 'formPost',
SONG_LYRICS = 'songLyrics',
TRANSCODE_OFFSET = 'transcodeOffset',
}
export const ssType = {
_parameters: {
albumList: albumListParameters,
@ -264,6 +278,7 @@ export const ssType = {
scrobble: scrobbleParameters,
search3: search3Parameters,
setRating: setRatingParameters,
similarSongs: similarSongsParameters,
structuredLyrics: structuredLyricsParameters,
topSongsList: topSongsListParameters,
},
@ -284,6 +299,7 @@ export const ssType = {
search3,
serverInfo,
setRating,
similarSongs,
song,
structuredLyrics,
topSongsList,

9
src/renderer/api/types.ts
View File

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

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

@ -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;
@ -121,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}

13
src/renderer/features/player/components/full-screen-similar-songs.tsx Normal file
View File

@ -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 currentSong?.id ? (
<SimilarSongsList
fullScreen
song={currentSong}
/>
) : null;
};

82
src/renderer/features/similar-songs/components/similar-songs-list.tsx Normal file
View File

@ -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, songId: song.id },
serverId: song?.serverId,
});
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>
);
};

25
src/renderer/features/similar-songs/queries/similar-song-queries.tsx Normal file
View File

@ -0,0 +1,25 @@
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<SimilarSongsQuery>) => {
const { options, query, serverId } = args || {};
const server = getServerById(serverId);
return useQuery({
enabled: !!server,
queryFn: ({ signal }) => {
if (!server) throw new Error('Server not found');
return api.controller.getSimilarSongs({
apiClientProps: { server, signal },
query: { count: query.count ?? 50, songId: query.songId },
});
},
queryKey: queryKeys.albumArtists.detail(server?.id || '', query),
...options,
});
};