Include lyric simplification, restore clear button

- merges lyric simplification
- restores metadata/clear

src/renderer/api/types.ts

@@ -1036,6 +1036,18 @@ export type InternetProviderLyricResponse = {
   source: string;
 };
 
+export type SynchronizedLyricMetadata = {
+  lyrics: SynchronizedLyricsArray;
+  remote: boolean;
+} & Omit<InternetProviderLyricResponse, 'lyrics'>;
+
+export type UnsyhchronizedLyricMetadata = {
+  lyrics: string;
+  remote: boolean;
+} & Omit<InternetProviderLyricResponse, 'lyrics'>;
+
+export type FullLyricsMetadata = SynchronizedLyricMetadata | UnsyhchronizedLyricMetadata;
+
 export type LyricOverride = Omit<InternetProviderLyricResponse, 'lyrics'>;
 
 export const instanceOfCancellationError = (error: any) => {

src/renderer/features/lyrics/lyric-skip.tsx

@@ -6,10 +6,10 @@ const LyricClearButton = styled(Button)`
   position: absolute;
   right: 10px;
   z-index: 999;
-  top: 7vh;
+  bottom: 6vh;
 
   @media (max-width: 768px) {
-    top: 5vh;
+    bottom: 3vh;
   }
 `;
 
@@ -22,7 +22,7 @@ export const LyricSkip = ({ onClick }: LyricSkipProps) => {
     <LyricClearButton
       leftIcon={<RiCloseFill />}
       size="xl"
-      tooltip={{ label: 'Remove incorrect lyrics', position: 'bottom' }}
+      tooltip={{ label: 'Remove incorrect lyrics', position: 'top' }}
       variant="default"
       onClick={onClick}
     >

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>

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

@@ -1,9 +1,10 @@
-import { useQuery } from '@tanstack/react-query';
+import { UseQueryResult, useQuery } from '@tanstack/react-query';
 import {
   LyricsQuery,
   QueueSong,
   SynchronizedLyricsArray,
   InternetProviderLyricResponse,
+  FullLyricsMetadata,
 } from '/@/renderer/api/types';
 import { QueryHookArgs } from '/@/renderer/lib/react-query';
 import { getServerById, useLyricsSettings } from '/@/renderer/store';
@@ -37,7 +38,9 @@ const formatLyrics = (lyrics: string) => {
   return formattedLyrics;
 };
 
-export const useServerLyrics = (args: QueryHookArgs<LyricsQuery>) => {
+export const useServerLyrics = (
+  args: QueryHookArgs<LyricsQuery>,
+): UseQueryResult<string | null> => {
   const { query, serverId } = args;
   const server = getServerById(serverId);
 
@@ -55,7 +58,10 @@ export const useServerLyrics = (args: QueryHookArgs<LyricsQuery>) => {
   });
 };
 
-export const useSongLyrics = (args: QueryHookArgs<LyricsQuery>, song: QueueSong | undefined) => {
+export const useSongLyrics = (
+  args: QueryHookArgs<LyricsQuery>,
+  song: QueueSong | undefined,
+): UseQueryResult<FullLyricsMetadata> => {
   const { query } = args;
   const { fetch } = useLyricsSettings();
   const server = getServerById(song?.serverId);
@@ -73,6 +79,7 @@ export const useSongLyrics = (args: QueryHookArgs<LyricsQuery>, song: QueueSong
           artist: song.artists?.[0]?.name,
           lyrics: formatLyrics(song.lyrics),
           name: song.name,
+          remote: false,
           source: server?.name ?? 'music server',
         };
       }
@@ -88,6 +95,7 @@ export const useSongLyrics = (args: QueryHookArgs<LyricsQuery>, song: QueueSong
             artist: song.artists?.[0]?.name,
             lyrics: jfLyrics,
             name: song.name,
+            remote: false,
             source: server?.name ?? 'music server',
           };
         }
@@ -101,6 +109,7 @@ export const useSongLyrics = (args: QueryHookArgs<LyricsQuery>, song: QueueSong
           return {
             ...remoteLyricsResult,
             lyrics: formatLyrics(remoteLyricsResult.lyrics),
+            remote: true,
           };
         }
       }

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

@@ -10,7 +10,7 @@ import { PlaybackType, PlayerStatus } from '/@/renderer/types';
 import { LyricLine } from '/@/renderer/features/lyrics/lyric-line';
 import isElectron from 'is-electron';
 import { PlayersRef } from '/@/renderer/features/player/ref/players-ref';
-import { LyricOverride, SynchronizedLyricsArray } from '/@/renderer/api/types';
+import { FullLyricsMetadata, SynchronizedLyricsArray } from '/@/renderer/api/types';
 import styled from 'styled-components';
 import { LyricSkip } from '/@/renderer/features/lyrics/lyric-skip';
 
@@ -20,17 +20,17 @@ const SynchronizedLyricsContainer = styled.div`
   padding: 5rem 0;
 `;
 
-interface SynchronizedLyricsProps {
+interface SynchronizedLyricsProps extends Omit<FullLyricsMetadata, 'lyrics'> {
   lyrics: SynchronizedLyricsArray;
   onRemoveLyric: () => void;
-  override: LyricOverride | null;
-  source: string | null;
 }
 
 export const SynchronizedLyrics = ({
+  artist,
   lyrics,
+  name,
   onRemoveLyric,
-  override,
+  remote,
   source,
 }: SynchronizedLyricsProps) => {
   const playersRef = PlayersRef;
@@ -275,11 +275,11 @@ export const SynchronizedLyrics = ({
           text={`Lyrics provided by ${source}`}
         />
       )}
-      {override && (
+      {remote && (
         <>
           <LyricLine
             className="lyric-credit"
-            text={`(Matched as ${override.name} by ${override.artist})`}
+            text={`(Matched as ${artist} by ${name})`}
           />
           <LyricSkip onClick={removeLyric} />
         </>

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

@@ -1,14 +1,12 @@
 import { useMemo } from 'react';
 import styled from 'styled-components';
 import { LyricLine } from '/@/renderer/features/lyrics/lyric-line';
-import { LyricOverride } from '/@/renderer/api/types';
+import { FullLyricsMetadata } from '/@/renderer/api/types';
 import { LyricSkip } from '/@/renderer/features/lyrics/lyric-skip';
 
-interface UnsynchronizedLyricsProps {
+interface UnsynchronizedLyricsProps extends Omit<FullLyricsMetadata, 'lyrics'> {
   lyrics: string;
   onRemoveLyric: () => void;
-  override: LyricOverride | null;
-  source: string | null;
 }
 
 const UnsynchronizedLyricsContainer = styled.div`
@@ -16,9 +14,11 @@ const UnsynchronizedLyricsContainer = styled.div`
 `;
 
 export const UnsynchronizedLyrics = ({
-  onRemoveLyric,
+  artist,
   lyrics,
-  override,
+  name,
+  onRemoveLyric,
+  remote,
   source,
 }: UnsynchronizedLyricsProps) => {
   const lines = useMemo(() => {
@@ -33,11 +33,11 @@ export const UnsynchronizedLyrics = ({
           text={`Lyrics provided by ${source}`}
         />
       )}
-      {override && (
+      {remote && (
         <>
           <LyricLine
             className="lyric-credit"
-            text={`(Matched as ${override.name} by ${override.artist})`}
+            text={`(Matched as ${artist} by ${name})`}
           />
           <LyricSkip onClick={onRemoveLyric} />
         </>