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

[bugfix/enhancement]: Support Navidrome structured lyrics

src/renderer/features/lyrics/lyrics-actions.tsx

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

src/renderer/features/lyrics/lyrics.tsx

@@ -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}

src/renderer/features/lyrics/queries/lyric-query.ts

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

src/renderer/features/lyrics/synchronized-lyrics.tsx

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

src/renderer/features/lyrics/unsynchronized-lyrics.tsx

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