Include lyric simplification, restore clear button

- merges lyric simplification
- restores metadata/clear

src/renderer/features/lyrics/lyrics.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react';
 import { Center, Group } from '@mantine/core';
 import { AnimatePresence, motion } from 'framer-motion';
 import { ErrorBoundary } from 'react-error-boundary';
@@ -9,6 +10,7 @@ import { ScrollArea, Spinner, TextTitle } from '/@/renderer/components';
 import { ErrorFallback } from '/@/renderer/features/action-required';
 import { UnsynchronizedLyrics } from '/@/renderer/features/lyrics/unsynchronized-lyrics';
 import { getServerById, useCurrentSong } from '/@/renderer/store';
+import { FullLyricsMetadata, SynchronizedLyricMetadata } from '/@/renderer/api/types';
 
 const LyricsScrollContainer = styled(motion(ScrollArea))`
   z-index: 1;
@@ -36,10 +38,18 @@ const LyricsScrollContainer = styled(motion(ScrollArea))`
   }
 `;
 
+function isSynchronized(data: FullLyricsMetadata): data is SynchronizedLyricMetadata {
+  // Type magic. The only difference between Synchronized and Unsynchhronized is
+  // the datatype of lyrics. This makes Typescript happier later...
+  return Array.isArray(data.lyrics);
+}
+
 export const Lyrics = () => {
   const currentSong = useCurrentSong();
   const currentServer = getServerById(currentSong?.serverId);
 
+  const [clear, setClear] = useState(false);
+
   const { data, isLoading } = useSongLyrics(
     {
       query: { songId: currentSong?.id || '' },
@@ -48,6 +58,11 @@ export const Lyrics = () => {
     currentSong,
   );
 
+  useEffect(() => {
+    // We want to reset the clear flag whenever a song changes
+    setClear(false);
+  }, [currentSong]);
+
   return (
     <ErrorBoundary FallbackComponent={ErrorFallback}>
       {isLoading ? (
@@ -55,7 +70,7 @@ export const Lyrics = () => {
           container
           size={25}
         />
-      ) : !data?.lyrics ? (
+      ) : !data?.lyrics || clear ? (
         <Center>
           <Group>
             <RiInformationFill size="2rem" />
@@ -74,19 +89,15 @@ export const Lyrics = () => {
             initial={{ opacity: 0 }}
             transition={{ duration: 0.5 }}
           >
-            {Array.isArray(data.lyrics) ? (
+            {isSynchronized(data) ? (
               <SynchronizedLyrics
-                lyrics={data.lyrics}
-                override={null}
-                source={data.source}
-                onRemoveLyric={() => {}}
+                {...data}
+                onRemoveLyric={() => setClear(true)}
               />
             ) : (
               <UnsynchronizedLyrics
-                lyrics={data.lyrics}
-                override={null}
-                source={data.source}
-                onRemoveLyric={() => {}}
+                {...data}
+                onRemoveLyric={() => setClear(true)}
               />
             )}
           </LyricsScrollContainer>