Merge pull request #484 from kgarner7/fix-structured-lyrics
[bugfix/enhancement]: Support Navidrome structured lyrics
This commit is contained in:
commit
83d5fee442
17 changed files with 366 additions and 55 deletions
|
@ -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,
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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,
|
||||
},
|
||||
};
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
@ -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 });
|
||||
|
|
35
src/renderer/hooks/use-server-version.ts
Normal file
35
src/renderer/hooks/use-server-version.ts
Normal 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]);
|
||||
};
|
|
@ -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 {
|
||||
|
|
Reference in a new issue