Merge pull request #484 from kgarner7/fix-structured-lyrics

[bugfix/enhancement]: Support Navidrome structured lyrics
This commit is contained in:
Jeff 2024-02-13 16:17:24 -08:00 committed by GitHub
commit 83d5fee442
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
17 changed files with 366 additions and 55 deletions

View file

@ -48,6 +48,10 @@ import type {
SearchResponse,
LyricsArgs,
LyricsResponse,
ServerInfo,
ServerInfoArgs,
StructuredLyricsArgs,
StructuredLyric,
} from '/@/renderer/api/types';
import { ServerType } from '/@/renderer/types';
import { DeletePlaylistResponse, RandomSongListArgs } from './types';
@ -85,8 +89,10 @@ export type ControllerEndpoint = Partial<{
getPlaylistList: (args: PlaylistListArgs) => Promise<PlaylistListResponse>;
getPlaylistSongList: (args: PlaylistSongListArgs) => Promise<SongListResponse>;
getRandomSongList: (args: RandomSongListArgs) => Promise<SongListResponse>;
getServerInfo: (args: ServerInfoArgs) => Promise<ServerInfo>;
getSongDetail: (args: SongDetailArgs) => Promise<SongDetailResponse>;
getSongList: (args: SongListArgs) => Promise<SongListResponse>;
getStructuredLyrics: (args: StructuredLyricsArgs) => Promise<StructuredLyric[]>;
getTopSongs: (args: TopSongListArgs) => Promise<TopSongListResponse>;
getUserList: (args: UserListArgs) => Promise<UserListResponse>;
removeFromPlaylist: (args: RemoveFromPlaylistArgs) => Promise<RemoveFromPlaylistResponse>;
@ -129,8 +135,10 @@ const endpoints: ApiController = {
getPlaylistList: jfController.getPlaylistList,
getPlaylistSongList: jfController.getPlaylistSongList,
getRandomSongList: jfController.getRandomSongList,
getServerInfo: jfController.getServerInfo,
getSongDetail: jfController.getSongDetail,
getSongList: jfController.getSongList,
getStructuredLyrics: undefined,
getTopSongs: jfController.getTopSongList,
getUserList: undefined,
removeFromPlaylist: jfController.removeFromPlaylist,
@ -165,8 +173,10 @@ const endpoints: ApiController = {
getPlaylistList: ndController.getPlaylistList,
getPlaylistSongList: ndController.getPlaylistSongList,
getRandomSongList: ssController.getRandomSongList,
getServerInfo: ssController.getServerInfo,
getSongDetail: ndController.getSongDetail,
getSongList: ndController.getSongList,
getStructuredLyrics: ssController.getStructuredLyrics,
getTopSongs: ssController.getTopSongList,
getUserList: ndController.getUserList,
removeFromPlaylist: ndController.removeFromPlaylist,
@ -198,8 +208,10 @@ const endpoints: ApiController = {
getMusicFolderList: ssController.getMusicFolderList,
getPlaylistDetail: undefined,
getPlaylistList: undefined,
getServerInfo: ssController.getServerInfo,
getSongDetail: undefined,
getSongList: undefined,
getStructuredLyrics: ssController.getStructuredLyrics,
getTopSongs: ssController.getTopSongList,
getUserList: undefined,
scrobble: ssController.scrobble,
@ -481,6 +493,24 @@ const getLyrics = async (args: LyricsArgs) => {
)?.(args);
};
const getServerInfo = async (args: ServerInfoArgs) => {
return (
apiController(
'getServerInfo',
args.apiClientProps.server?.type,
) as ControllerEndpoint['getServerInfo']
)?.(args);
};
const getStructuredLyrics = async (args: StructuredLyricsArgs) => {
return (
apiController(
'getStructuredLyrics',
args.apiClientProps.server?.type,
) as ControllerEndpoint['getStructuredLyrics']
)?.(args);
};
export const controller = {
addToPlaylist,
authenticate,
@ -500,8 +530,10 @@ export const controller = {
getPlaylistList,
getPlaylistSongList,
getRandomSongList,
getServerInfo,
getSongDetail,
getSongList,
getStructuredLyrics,
getTopSongList,
getUserList,
removeFromPlaylist,

View file

@ -150,6 +150,14 @@ export const contract = c.router({
400: jfType._response.error,
},
},
getServerInfo: {
method: 'GET',
path: 'system/info',
responses: {
200: jfType._response.serverInfo,
400: jfType._response.error,
},
},
getSimilarArtistList: {
method: 'GET',
path: 'artists/:id/similar',

View file

@ -49,6 +49,8 @@ import {
genreListSortMap,
SongDetailArgs,
SongDetailResponse,
ServerInfo,
ServerInfoArgs,
} from '/@/renderer/api/types';
import { jfApiClient } from '/@/renderer/api/jellyfin/jellyfin-api';
import { jfNormalize } from './jellyfin-normalize';
@ -946,6 +948,18 @@ const getSongDetail = async (args: SongDetailArgs): Promise<SongDetailResponse>
return jfNormalize.song(res.body, apiClientProps.server, '');
};
const getServerInfo = async (args: ServerInfoArgs): Promise<ServerInfo> => {
const { apiClientProps } = args;
const res = await jfApiClient(apiClientProps).getServerInfo();
if (res.status !== 200) {
throw new Error('Failed to get server info');
}
return { id: apiClientProps.server?.id, version: res.body.Version };
};
export const jfController = {
addToPlaylist,
authenticate,
@ -965,6 +979,7 @@ export const jfController = {
getPlaylistList,
getPlaylistSongList,
getRandomSongList,
getServerInfo,
getSongDetail,
getSongList,
getTopSongList,

View file

@ -661,6 +661,10 @@ const lyrics = z.object({
Lyrics: z.array(lyricText),
});
const serverInfo = z.object({
Version: z.string(),
});
export const jfType = {
_enum: {
albumArtistList: albumArtistListSort,
@ -714,6 +718,7 @@ export const jfType = {
removeFromPlaylist,
scrobble,
search,
serverInfo,
song,
songList,
topSongsList,

View file

@ -50,6 +50,21 @@ export const contract = c.router({
200: ssType._response.randomSongList,
},
},
getServerInfo: {
method: 'GET',
path: 'getOpenSubsonicExtensions.view',
responses: {
200: ssType._response.serverInfo,
},
},
getStructuredLyrics: {
method: 'GET',
path: 'getLyricsBySongId.view',
query: ssType._parameters.structuredLyrics,
responses: {
200: ssType._response.structuredLyrics,
},
},
getTopSongsList: {
method: 'GET',
path: 'getTopSongs.view',
@ -58,6 +73,13 @@ export const contract = c.router({
200: ssType._response.topSongsList,
},
},
ping: {
method: 'GET',
path: 'ping.view',
responses: {
200: ssType._response.ping,
},
},
removeFavorite: {
method: 'GET',
path: 'unstar.view',

View file

@ -21,6 +21,10 @@ import {
SearchResponse,
RandomSongListResponse,
RandomSongListArgs,
ServerInfo,
ServerInfoArgs,
StructuredLyricsArgs,
StructuredLyric,
} from '/@/renderer/api/types';
import { randomString } from '/@/renderer/utils';
@ -368,12 +372,86 @@ const getRandomSongList = async (args: RandomSongListArgs): Promise<RandomSongLi
};
};
const getServerInfo = async (args: ServerInfoArgs): Promise<ServerInfo> => {
const { apiClientProps } = args;
const ping = await ssApiClient(apiClientProps).ping();
if (ping.status !== 200) {
throw new Error('Failed to ping server');
}
if (!ping.body.openSubsonic || !ping.body.serverVersion) {
return { version: ping.body.version };
}
const res = await ssApiClient(apiClientProps).getServerInfo();
if (res.status !== 200) {
throw new Error('Failed to get server extensions');
}
const features: Record<string, number[]> = {};
for (const extension of res.body.openSubsonicExtensions) {
features[extension.name] = extension.versions;
}
return { features, id: apiClientProps.server?.id, version: ping.body.serverVersion };
};
export const getStructuredLyrics = async (
args: StructuredLyricsArgs,
): Promise<StructuredLyric[]> => {
const { query, apiClientProps } = args;
const res = await ssApiClient(apiClientProps).getStructuredLyrics({
query: {
id: query.songId,
},
});
if (res.status !== 200) {
throw new Error('Failed to get structured lyrics');
}
const lyrics = res.body.lyricsList?.structuredLyrics;
if (!lyrics) {
return [];
}
return lyrics.map((lyric) => {
const baseLyric = {
artist: lyric.displayArtist || '',
lang: lyric.lang,
name: lyric.displayTitle || '',
remote: false,
source: apiClientProps.server?.name || 'music server',
};
if (lyric.synced) {
return {
...baseLyric,
lyrics: lyric.line.map((line) => [line.start!, line.value]),
synced: true,
};
}
return {
...baseLyric,
lyrics: lyric.line.map((line) => [line.value]).join('\n'),
synced: false,
};
});
};
export const ssController = {
authenticate,
createFavorite,
getArtistInfo,
getMusicFolderList,
getRandomSongList,
getServerInfo,
getStructuredLyrics,
getTopSongList,
removeFavorite,
scrobble,

View file

@ -206,6 +206,47 @@ const randomSongList = z.object({
}),
});
const ping = z.object({
openSubsonic: z.boolean().optional(),
serverVersion: z.string().optional(),
version: z.string(),
});
const extension = z.object({
name: z.string(),
versions: z.number().array(),
});
const serverInfo = z.object({
openSubsonicExtensions: z.array(extension),
});
const structuredLyricsParameters = z.object({
id: z.string(),
});
const lyricLine = z.object({
start: z.number().optional(),
value: z.string(),
});
const structuredLyric = z.object({
displayArtist: z.string().optional(),
displayTitle: z.string().optional(),
lang: z.string(),
line: z.array(lyricLine),
offset: z.number().optional(),
synced: z.boolean(),
});
const structuredLyrics = z.object({
lyricsList: z
.object({
structuredLyrics: z.array(structuredLyric).optional(),
})
.optional(),
});
export const ssType = {
_parameters: {
albumList: albumListParameters,
@ -217,6 +258,7 @@ export const ssType = {
scrobble: scrobbleParameters,
search3: search3Parameters,
setRating: setRatingParameters,
structuredLyrics: structuredLyricsParameters,
topSongsList: topSongsListParameters,
},
_response: {
@ -229,12 +271,15 @@ export const ssType = {
baseResponse,
createFavorite,
musicFolderList,
ping,
randomSongList,
removeFavorite,
scrobble,
search3,
serverInfo,
setRating,
song,
structuredLyrics,
topSongsList,
},
};

View file

@ -1097,17 +1097,11 @@ export type InternetProviderLyricSearchResponse = {
source: LyricSource;
};
export type SynchronizedLyricMetadata = {
lyrics: SynchronizedLyricsArray;
export type FullLyricsMetadata = {
lyrics: LyricsResponse;
remote: boolean;
} & Omit<InternetProviderLyricResponse, 'lyrics'>;
export type UnsynchronizedLyricMetadata = {
lyrics: string;
remote: boolean;
} & Omit<InternetProviderLyricResponse, 'lyrics'>;
export type FullLyricsMetadata = SynchronizedLyricMetadata | UnsynchronizedLyricMetadata;
source: string;
} & Omit<InternetProviderLyricResponse, 'id' | 'lyrics' | 'source'>;
export type LyricOverride = Omit<InternetProviderLyricResponse, 'lyrics'>;
@ -1144,3 +1138,35 @@ export type FontData = {
postscriptName: string;
style: string;
};
export type ServerInfoArgs = BaseEndpointArgs;
export enum SubsonicExtensions {
FORM_POST = 'formPost',
SONG_LYRICS = 'songLyrics',
TRANSCODE_OFFSET = 'transcodeOffset',
}
export type ServerInfo = {
features?: Record<string, number[]>;
id?: string;
version: string;
};
export type StructuredLyricsArgs = {
query: LyricsQuery;
} & BaseEndpointArgs;
export type StructuredUnsyncedLyric = {
lyrics: string;
synced: false;
} & Omit<FullLyricsMetadata, 'lyrics'>;
export type StructuredSyncedLyric = {
lyrics: SynchronizedLyricsArray;
synced: true;
} & Omit<FullLyricsMetadata, 'lyrics'>;
export type StructuredLyric = {
lang: string;
} & (StructuredUnsyncedLyric | StructuredSyncedLyric);

View file

@ -27,6 +27,7 @@ import { FontType, PlaybackType, PlayerStatus } from '/@/renderer/types';
import '@ag-grid-community/styles/ag-grid.css';
import { useDiscordRpc } from '/@/renderer/features/discord-rpc/use-discord-rpc';
import i18n from '/@/i18n/i18n';
import { useServerVersion } from '/@/renderer/hooks/use-server-version';
ModuleRegistry.registerModules([ClientSideRowModelModule, InfiniteRowModelModule]);
@ -49,6 +50,7 @@ export const App = () => {
const remoteSettings = useRemoteSettings();
const textStyleRef = useRef<HTMLStyleElement>();
useDiscordRpc();
useServerVersion();
useEffect(() => {
if (type === FontType.SYSTEM && system) {

View file

@ -1,4 +1,4 @@
import { Box, Group } from '@mantine/core';
import { Box, Center, Group, Select, SelectItem } from '@mantine/core';
import isElectron from 'is-electron';
import { useTranslation } from 'react-i18next';
import { RiAddFill, RiSubtractFill } from 'react-icons/ri';
@ -13,15 +13,22 @@ import {
} from '/@/renderer/store';
interface LyricsActionsProps {
index: number;
languages: SelectItem[];
onRemoveLyric: () => void;
onResetLyric: () => void;
onSearchOverride: (params: LyricsOverride) => void;
setIndex: (idx: number) => void;
}
export const LyricsActions = ({
index,
languages,
onRemoveLyric,
onResetLyric,
onSearchOverride,
setIndex,
}: LyricsActionsProps) => {
const { t } = useTranslation();
const currentSong = useCurrentSong();
@ -42,6 +49,18 @@ export const LyricsActions = ({
return (
<Box style={{ position: 'relative', width: '100%' }}>
{languages.length > 1 && (
<Center>
<Select
clearable={false}
data={languages}
style={{ bottom: 30, position: 'absolute' }}
value={index.toString()}
onChange={(value) => setIndex(parseInt(value!, 10))}
/>
</Center>
)}
<Group position="center">
{isDesktop && sources.length ? (
<Button

View file

@ -1,21 +1,19 @@
import { useCallback, useEffect, useState } from 'react';
import { useCallback, useEffect, useMemo, useState } from 'react';
import { Center, Group } from '@mantine/core';
import { AnimatePresence, motion } from 'framer-motion';
import { ErrorBoundary } from 'react-error-boundary';
import { RiInformationFill } from 'react-icons/ri';
import styled from 'styled-components';
import { useSongLyricsByRemoteId, useSongLyricsBySong } from './queries/lyric-query';
import { SynchronizedLyrics } from './synchronized-lyrics';
import { SynchronizedLyrics, SynchronizedLyricsProps } from './synchronized-lyrics';
import { Spinner, TextTitle } from '/@/renderer/components';
import { ErrorFallback } from '/@/renderer/features/action-required';
import { UnsynchronizedLyrics } from '/@/renderer/features/lyrics/unsynchronized-lyrics';
import { useCurrentSong, usePlayerStore } from '/@/renderer/store';
import {
FullLyricsMetadata,
LyricsOverride,
SynchronizedLyricMetadata,
UnsynchronizedLyricMetadata,
} from '/@/renderer/api/types';
UnsynchronizedLyrics,
UnsynchronizedLyricsProps,
} from '/@/renderer/features/lyrics/unsynchronized-lyrics';
import { useCurrentSong, usePlayerStore } from '/@/renderer/store';
import { FullLyricsMetadata, LyricSource, LyricsOverride } from '/@/renderer/api/types';
import { LyricsActions } from '/@/renderer/features/lyrics/lyrics-actions';
import { queryKeys } from '/@/renderer/api/query-keys';
import { queryClient } from '/@/renderer/lib/react-query';
@ -84,17 +82,9 @@ const ScrollContainer = styled(motion.div)`
}
`;
function isSynchronized(
data: Partial<FullLyricsMetadata> | undefined,
): data is SynchronizedLyricMetadata {
// Type magic. The only difference between Synchronized and Unsynchhronized is
// the datatype of lyrics. This makes Typescript happier later...
if (!data) return false;
return Array.isArray(data.lyrics);
}
export const Lyrics = () => {
const currentSong = useCurrentSong();
const [index, setIndex] = useState(0);
const { data, isInitialLoading } = useSongLyricsBySong(
{
@ -139,7 +129,7 @@ export const Lyrics = () => {
},
query: {
remoteSongId: override?.id,
remoteSource: override?.source,
remoteSource: override?.source as LyricSource | undefined,
song: currentSong,
},
serverId: currentSong?.serverId,
@ -150,6 +140,7 @@ export const Lyrics = () => {
(state) => state.current.song,
() => {
setOverride(undefined);
setIndex(0);
},
{ equalityFn: (a, b) => a?.id === b?.id },
);
@ -159,16 +150,29 @@ export const Lyrics = () => {
};
}, []);
const [lyrics, synced] = useMemo(() => {
if (Array.isArray(data)) {
if (data.length > 0) {
const selectedLyric = data[Math.min(index, data.length)];
return [selectedLyric, selectedLyric.synced];
}
} else if (data?.lyrics) {
return [data, Array.isArray(data.lyrics)];
}
return [undefined, false];
}, [data, index]);
const languages = useMemo(() => {
if (Array.isArray(data)) {
return data.map((lyric, idx) => ({ label: lyric.lang, value: idx.toString() }));
}
return [];
}, [data]);
const isLoadingLyrics = isInitialLoading || isOverrideLoading;
const hasNoLyrics = !data?.lyrics;
const lyricsMetadata:
| Partial<SynchronizedLyricMetadata>
| Partial<UnsynchronizedLyricMetadata>
| undefined = data;
const isSynchronizedLyrics = isSynchronized(lyricsMetadata);
const hasNoLyrics = !lyrics;
return (
<ErrorBoundary FallbackComponent={ErrorFallback}>
@ -198,11 +202,11 @@ export const Lyrics = () => {
initial={{ opacity: 0 }}
transition={{ duration: 0.5 }}
>
{isSynchronizedLyrics ? (
<SynchronizedLyrics {...lyricsMetadata} />
{synced ? (
<SynchronizedLyrics {...(lyrics as SynchronizedLyricsProps)} />
) : (
<UnsynchronizedLyrics
{...(lyricsMetadata as UnsynchronizedLyricMetadata)}
{...(lyrics as UnsynchronizedLyricsProps)}
/>
)}
</ScrollContainer>
@ -211,6 +215,9 @@ export const Lyrics = () => {
)}
<ActionsContainer>
<LyricsActions
index={index}
languages={languages}
setIndex={setIndex}
onRemoveLyric={handleOnRemoveLyric}
onResetLyric={handleOnResetLyric}
onSearchOverride={handleOnSearchOverride}

View file

@ -6,6 +6,8 @@ import {
InternetProviderLyricResponse,
FullLyricsMetadata,
LyricGetQuery,
SubsonicExtensions,
StructuredLyric,
} from '/@/renderer/api/types';
import { QueryHookArgs } from '/@/renderer/lib/react-query';
import { getServerById, useLyricsSettings } from '/@/renderer/store';
@ -80,7 +82,7 @@ export const useServerLyrics = (
export const useSongLyricsBySong = (
args: QueryHookArgs<LyricsQuery>,
song: QueueSong | undefined,
): UseQueryResult<FullLyricsMetadata> => {
): UseQueryResult<FullLyricsMetadata | StructuredLyric[]> => {
const { query } = args;
const { fetch } = useLyricsSettings();
const server = getServerById(song?.serverId);
@ -89,20 +91,10 @@ export const useSongLyricsBySong = (
cacheTime: Infinity,
enabled: !!song && !!server,
onError: () => {},
queryFn: async ({ signal }) => {
queryFn: async ({ signal }): Promise<FullLyricsMetadata | StructuredLyric[] | null> => {
if (!server) throw new Error('Server not found');
if (!song) return null;
if (song.lyrics) {
return {
artist: song.artists?.[0]?.name,
lyrics: formatLyrics(song.lyrics),
name: song.name,
remote: false,
source: server?.name ?? 'music server',
};
}
if (server.type === ServerType.JELLYFIN) {
const jfLyrics = await api.controller
.getLyrics({
@ -120,6 +112,25 @@ export const useSongLyricsBySong = (
source: server?.name ?? 'music server',
};
}
} else if (server.features && SubsonicExtensions.SONG_LYRICS in server.features) {
const subsonicLyrics = await api.controller
.getStructuredLyrics({
apiClientProps: { server, signal },
query: { songId: song.id },
})
.catch(console.error);
if (subsonicLyrics) {
return subsonicLyrics;
}
} else if (song.lyrics) {
return {
artist: song.artists?.[0]?.name,
lyrics: formatLyrics(song.lyrics),
name: song.name,
remote: false,
source: server?.name ?? 'music server',
};
}
if (fetch) {

View file

@ -46,7 +46,7 @@ const SynchronizedLyricsContainer = styled.div<{ $gap: number }>`
}
`;
interface SynchronizedLyricsProps extends Omit<FullLyricsMetadata, 'lyrics'> {
export interface SynchronizedLyricsProps extends Omit<FullLyricsMetadata, 'lyrics'> {
lyrics: SynchronizedLyricsArray;
}

View file

@ -4,7 +4,7 @@ import { LyricLine } from '/@/renderer/features/lyrics/lyric-line';
import { FullLyricsMetadata } from '/@/renderer/api/types';
import { useLyricsSettings } from '/@/renderer/store';
interface UnsynchronizedLyricsProps extends Omit<FullLyricsMetadata, 'lyrics'> {
export interface UnsynchronizedLyricsProps extends Omit<FullLyricsMetadata, 'lyrics'> {
lyrics: string;
}

View file

@ -12,6 +12,8 @@ import { useAuthStoreActions } from '/@/renderer/store';
import { ServerListItem, ServerType } from '/@/renderer/types';
import { api } from '/@/renderer/api';
import i18n from '/@/i18n/i18n';
import { queryClient } from '/@/renderer/lib/react-query';
import { queryKeys } from '/@/renderer/api/query-keys';
const localSettings = isElectron() ? window.electron.localSettings : null;
@ -111,6 +113,8 @@ export const EditServerForm = ({ isUpdate, password, server, onCancel }: EditSer
localSettings.passwordRemove(server.id);
}
}
queryClient.invalidateQueries({ queryKey: queryKeys.server.root(server.id) });
} catch (err: any) {
setIsLoading(false);
return toast.error({ message: err?.message });

View file

@ -0,0 +1,35 @@
import { useEffect } from 'react';
import { useAuthStoreActions, useCurrentServer } from '/@/renderer/store';
import { useQuery } from '@tanstack/react-query';
import { queryKeys } from '/@/renderer/api/query-keys';
import { controller } from '/@/renderer/api/controller';
export const useServerVersion = () => {
const { updateServer } = useAuthStoreActions();
const server = useCurrentServer();
const serverInfo = useQuery({
enabled: !!server,
queryFn: async ({ signal }) => {
return controller.getServerInfo({
apiClientProps: {
server,
signal,
},
});
},
queryKey: queryKeys.server.root(server?.id),
});
useEffect(() => {
if (server && server.id === serverInfo.data?.id) {
const { version, features } = serverInfo.data;
if (version !== server.version) {
updateServer(server.id, {
features,
version,
});
}
}
}, [server, serverInfo.data, updateServer]);
};

View file

@ -62,6 +62,7 @@ export enum ServerType {
export type ServerListItem = {
credential: string;
features?: Record<string, number[]>;
id: string;
name: string;
ndCredential?: string;
@ -70,6 +71,7 @@ export type ServerListItem = {
url: string;
userId: string | null;
username: string;
version?: string;
};
export enum PlayerStatus {