chore: better ux

sandipndev · Sep 22, 2024 · b77845b · b77845b
1 parent 8888210
commit b77845b
Showing 1 changed file with 46 additions and 23 deletions.
diff --git a/frontend/app/details/[process-id]/page.tsx b/frontend/app/details/[process-id]/page.tsx
@@ -26,6 +26,8 @@ const ProcessDetail: React.FC<Props> = ({ params }) => {
   const [currentSemitone, setCurrentSemitone] = useState(0)
   const [isPlaying, setIsPlaying] = useState(false)
   const [currentTime, setCurrentTime] = useState(0)
+  const [seekTime, setSeekTime] = useState(0)
+  const [isSeeking, setIsSeeking] = useState(false)
   const audioRefs = useRef<{ [key: number]: HTMLAudioElement }>({})
 
   // Preload all audio files once data is available
@@ -38,33 +40,44 @@ const ProcessDetail: React.FC<Props> = ({ params }) => {
 
       semitoneShifts.forEach((semitone) => {
         const semitoneLabel = semitone >= 0 ? `+${semitone}` : `${semitone}`
-        const fileName = `${processId}_${semitoneLabel}_ST.mp3`
+        const fileName =
+          semitone === 0 ? `${processId}.mp3` : `${processId}_${semitoneLabel}_ST.mp3`
         const fileUrl = `/media/${fileName}`
 
-        if (semitone === 0) {
-          const audio = new Audio(`/media/${processId}.mp3`)
-          audioRefs.current[semitone] = audio
-        } else {
-          const audio = new Audio(fileUrl)
-          audioRefs.current[semitone] = audio
-        }
+        const audio = new Audio(fileUrl)
+        audioRefs.current[semitone] = audio
       })
 
-      setPreloadingAudio(true)
+      setPreloadingAudio(false)
     }
-  }, [data, processId, setPreloadingAudio])
+  }, [data, processId])
 
   // Update currentTime when the audio is playing
   useEffect(() => {
     const audio = audioRefs.current[currentSemitone]
     if (audio) {
-      const updateTime = () => setCurrentTime(audio.currentTime)
+      const updateTime = () => {
+        setCurrentTime(audio.currentTime)
+        if (!isSeeking) {
+          setSeekTime(audio.currentTime)
+        }
+      }
+
+      const handleEnded = () => {
+        setIsPlaying(false)
+        setCurrentTime(0)
+        setSeekTime(0)
+        audio.currentTime = 0
+      }
+
       audio.addEventListener("timeupdate", updateTime)
+      audio.addEventListener("ended", handleEnded)
       return () => {
         audio.removeEventListener("timeupdate", updateTime)
+        audio.removeEventListener("ended", handleEnded)
       }
     }
-  }, [currentSemitone])
+  }, [currentSemitone, isSeeking])
 
   // Handle play/pause functionality
   const handlePlayPause = () => {
@@ -92,6 +105,7 @@ const ProcessDetail: React.FC<Props> = ({ params }) => {
       prevAudio.pause()
       const time = prevAudio.currentTime
       setCurrentTime(time)
+      setSeekTime(time)
 
       nextAudio.currentTime = time
       if (isPlaying) {
@@ -101,6 +115,22 @@ const ProcessDetail: React.FC<Props> = ({ params }) => {
     }
   }
 
+  // Handle seeking in the audio
+  const handleSeekChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const time = parseFloat(e.target.value)
+    setSeekTime(time)
+    setIsSeeking(true)
+  }
+
+  const handleSeekEnd = () => {
+    const audio = audioRefs.current[currentSemitone]
+    if (audio) {
+      audio.currentTime = seekTime
+      setCurrentTime(seekTime)
+    }
+    setIsSeeking(false)
+  }
+
   useEffect(() => {
     const audioRefsCurrent = audioRefs.current
     return () => {
@@ -111,15 +141,6 @@ const ProcessDetail: React.FC<Props> = ({ params }) => {
     }
   }, [])
 
-  const handleSeek = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const audio = audioRefs.current[currentSemitone]
-    if (audio) {
-      const time = parseFloat(e.target.value)
-      audio.currentTime = time
-      setCurrentTime(time)
-    }
-  }
-
   const handleDownload = () => {
     const semitoneLabel =
       currentSemitone >= 0 ? `+${currentSemitone}` : `${currentSemitone}`
@@ -157,7 +178,7 @@ const ProcessDetail: React.FC<Props> = ({ params }) => {
     )
 
   const playingAudio = audioRefs.current[currentSemitone]
-  const playTime = (playingAudio && playingAudio.currentTime) || 0
+  const playTime = (playingAudio && playingAudio.currentTime) || seekTime
   const duration = (playingAudio && playingAudio.duration) || 0
 
   return (
@@ -202,7 +223,9 @@ const ProcessDetail: React.FC<Props> = ({ params }) => {
             min="0"
             max={duration}
             value={playTime}
-            onChange={handleSeek}
+            onChange={handleSeekChange}
+            onMouseUp={handleSeekEnd}
+            onTouchEnd={handleSeekEnd}
             className="w-full range-input"
           />
           <div className="flex justify-between text-sm">