From afcd366bc9274a655432561a241dc44c20b54b58 Mon Sep 17 00:00:00 2001
From: Martin Turoci <martin.turoci@h2o.ai>
Date: Wed, 9 Aug 2023 14:25:59 +0200
Subject: [PATCH] fix: Attempt to make Safari skip to time smoother. #1601

---
 ui/src/audio_annotator.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/ui/src/audio_annotator.tsx b/ui/src/audio_annotator.tsx
index e0c6a83e6e0..86ea26d1818 100644
--- a/ui/src/audio_annotator.tsx
+++ b/ui/src/audio_annotator.tsx
@@ -99,6 +99,7 @@ export const XAudioAnnotator = ({ model }: { model: AudioAnnotator }) => {
     [errMsg, setErrMsg] = React.useState(''),
     audioRef = React.useRef<HTMLAudioElement>(null),
     audioContextRef = React.useRef<AudioContext>(),
+    skipNextDurationOffsetRef = React.useRef(false),
     gainNodeRef = React.useRef<GainNode>(),
     fetchedAudioUrlRef = React.useRef<S>(),
     activateTag = (tagName: S) => () => setActiveTag(tagName),
@@ -146,6 +147,7 @@ export const XAudioAnnotator = ({ model }: { model: AudioAnnotator }) => {
     updateTrack = (audioEl: HTMLAudioElement) => {
       // We need higher frequency than HTMLAudioELEMENT's onTimeUpdate provides.
       window.requestAnimationFrame(() => {
+        skipNextDurationOffsetRef.current = false
         setCurrentTime(audioEl.currentTime)
         setIsPlaying(isPlaying => {
           if (isPlaying) updateTrack(audioEl)
@@ -167,7 +169,10 @@ export const XAudioAnnotator = ({ model }: { model: AudioAnnotator }) => {
       }
     },
     onAudioEnded = () => setIsPlaying(false),
-    onTrackChange = (value: F, _range?: [F, F]) => skipToTime(value)(),
+    onTrackChange = (value: F, _range?: [F, F]) => {
+      skipNextDurationOffsetRef.current = true
+      skipToTime(value)()
+    },
     onVolumeChange = (v: F) => {
       if (gainNodeRef.current) gainNodeRef.current.gain.value = v
       setVolumeIcon(v === 0 ? 'VolumeDisabled' : (v < 0.3 ? 'Volume1' : (v < 0.75 ? 'Volume2' : 'Volume3')))
@@ -238,7 +243,7 @@ export const XAudioAnnotator = ({ model }: { model: AudioAnnotator }) => {
               styles={{ root: { minWidth: 180 }, slideBox: { padding: 0 } }}
               // HACK: React doesn't allow for skipping batch updates in 3rd party components. 
               // Add a small offset to sync canvas and slider tracks.
-              value={currentTime + (isPlaying ? 0.05 : 0)}
+              value={currentTime + (isPlaying && !skipNextDurationOffsetRef.current ? 0.05 : 0)}
               max={duration}
               step={0.01}
               onChange={onTrackChange}