fix: Attempt to make Safari skip to time smoother. #1601

h2oai · Aug 10, 2023 · 26bc2f1 · 26bc2f1
1 parent a9e2d3f
commit 26bc2f1
Showing 1 changed file with 7 additions and 2 deletions.
diff --git 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}