From ea865f44b1b086d5b5517cf21bdbe72053e3701d Mon Sep 17 00:00:00 2001
From: Gelaechter <30231932+gelaechter@users.noreply.github.com>
Date: Wed, 3 Jul 2024 08:24:31 +0000
Subject: [PATCH] Allow jumping to lyrics (#656)

---
 src/renderer/features/lyrics/lyric-line.tsx          | 4 ++++
 src/renderer/features/lyrics/synchronized-lyrics.tsx | 5 ++++-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/renderer/features/lyrics/lyric-line.tsx b/src/renderer/features/lyrics/lyric-line.tsx
index 8bd9c438..76f6eaac 100644
--- a/src/renderer/features/lyrics/lyric-line.tsx
+++ b/src/renderer/features/lyrics/lyric-line.tsx
@@ -26,6 +26,10 @@ const StyledText = styled(TextTitle)<TitleProps & { $alignment: string; $fontSiz
     &.unsynchronized {
         opacity: 1;
     }
+
+    &.synchronized {
+        cursor: pointer;
+    }
 `;
 
 export const LyricLine = ({ text, alignment, fontSize, ...props }: LyricLineProps) => {
diff --git a/src/renderer/features/lyrics/synchronized-lyrics.tsx b/src/renderer/features/lyrics/synchronized-lyrics.tsx
index 19cba8c4..095f4540 100644
--- a/src/renderer/features/lyrics/synchronized-lyrics.tsx
+++ b/src/renderer/features/lyrics/synchronized-lyrics.tsx
@@ -12,6 +12,7 @@ import isElectron from 'is-electron';
 import { PlayersRef } from '/@/renderer/features/player/ref/players-ref';
 import { FullLyricsMetadata, SynchronizedLyricsArray } from '/@/renderer/api/types';
 import styled from 'styled-components';
+import { useCenterControls } from '/@/renderer/features/player/hooks/use-center-controls';
 
 const mpvPlayer = isElectron() ? window.electron.mpvPlayer : null;
 
@@ -62,6 +63,7 @@ export const SynchronizedLyrics = ({
     const playbackType = usePlaybackType();
     const now = useCurrentTime();
     const settings = useLyricsSettings();
+    const centerControls = useCenterControls({ playersRef });
 
     const seeked = useSeeked();
 
@@ -331,7 +333,7 @@ export const SynchronizedLyrics = ({
                     text={`"${name} by ${artist}"`}
                 />
             )}
-            {lyrics.map(([, text], idx) => (
+            {lyrics.map(([time, text], idx) => (
                 <LyricLine
                     key={idx}
                     alignment={settings.alignment}
@@ -339,6 +341,7 @@ export const SynchronizedLyrics = ({
                     fontSize={settings.fontSize}
                     id={`lyric-${idx}`}
                     text={text}
+                    onClick={() => centerControls.handleSeekSlider(time / 1000)}
                 />
             ))}
         </SynchronizedLyricsContainer>