From 74ab4e212a4b0fffdba2e81e6a0b0fbbef968cc7 Mon Sep 17 00:00:00 2001
From: angel <sillyangel3@gmail.com>
Date: Thu, 19 Jun 2025 22:35:45 +0000
Subject: [PATCH] feat: add lyric click functionality to jump to specific time
 in audio playback

---
 app/components/FullScreenPlayer.tsx | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/app/components/FullScreenPlayer.tsx b/app/components/FullScreenPlayer.tsx
index 4284fc2..248711f 100644
--- a/app/components/FullScreenPlayer.tsx
+++ b/app/components/FullScreenPlayer.tsx
@@ -242,6 +242,20 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
     setVolume(newVolume);
   };
 
+  const handleLyricClick = (time: number) => {
+    const mainAudio = document.querySelector('audio') as HTMLAudioElement;
+    if (!mainAudio) return;
+
+    mainAudio.currentTime = time;
+    setCurrentTime(time);
+    
+    // Update progress bar as well
+    if (duration > 0) {
+      const newProgress = (time / duration) * 100;
+      setProgress(newProgress);
+    }
+  };
+
   const formatTime = (seconds: number) => {
     if (!seconds || isNaN(seconds)) return '0:00';
     const mins = Math.floor(seconds / 60);
@@ -412,7 +426,8 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
                       <div
                         key={index}
                         data-lyric-index={index}
-                        className={`text-sm lg:text-base leading-relaxed transition-all duration-300 break-words ${
+                        onClick={() => handleLyricClick(line.time)}
+                        className={`text-sm lg:text-base leading-relaxed transition-all duration-300 break-words cursor-pointer hover:text-foreground hover:scale-102 ${
                           index === currentLyricIndex
                             ? 'text-foreground font-semibold text-lg lg:text-xl scale-105'
                             : index < currentLyricIndex
@@ -426,6 +441,7 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
                           paddingBottom: '8px',
                           paddingLeft: '9px'
                         }}
+                        title={`Click to jump to ${formatTime(line.time)}`}
                       >
                         {line.text || '♪'}
                       </div>