From ddf9027daa7f7d5bc86a9e5f9762db5c23940335 Mon Sep 17 00:00:00 2001
From: Travis Ralston <travisr@matrix.org>
Date: Thu, 13 May 2021 22:35:43 -0600
Subject: [PATCH] Improve progress bar progression for smaller voice messages

Instead of chunking the thing, we'll improve our precision and clock accuracy. Clock accuracy is improved by flagging the "load time" of the clip in the context, which can be about 500ms (or more) off the context's start line. The precision is just a number in the PlaybackWaveform component.
---
 src/components/views/voice_messages/PlaybackWaveform.tsx | 4 ++--
 src/voice/Playback.ts                                    | 1 +
 src/voice/PlaybackClock.ts                               | 9 +++++++++
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/views/voice_messages/PlaybackWaveform.tsx b/src/components/views/voice_messages/PlaybackWaveform.tsx
index 123af5dfa5..2e9f163f5e 100644
--- a/src/components/views/voice_messages/PlaybackWaveform.tsx
+++ b/src/components/views/voice_messages/PlaybackWaveform.tsx
@@ -57,8 +57,8 @@ export default class PlaybackWaveform extends React.PureComponent<IProps, IState
     };
 
     private onTimeUpdate = (time: number[]) => {
-        // Track percentages to very coarse precision, otherwise 0.002 ends up highlighting a bar.
-        const progress = Number(percentageOf(time[0], 0, time[1]).toFixed(1));
+        // Track percentages to a general precision to avoid over-waking the component.
+        const progress = Number(percentageOf(time[0], 0, time[1]).toFixed(3));
         this.setState({progress});
     };
 
diff --git a/src/voice/Playback.ts b/src/voice/Playback.ts
index 5488ed6b84..34031205c5 100644
--- a/src/voice/Playback.ts
+++ b/src/voice/Playback.ts
@@ -126,6 +126,7 @@ export class Playback extends EventEmitter implements IDestroyable {
         this.waveformObservable.update(this.resampledWaveform);
 
         this.emit(PlaybackState.Stopped); // signal that we're not decoding anymore
+        this.clock.flagLoadTime(); // must happen first because setting the duration fires a clock update
         this.clock.durationSeconds = this.audioBuf.duration;
     }
 
diff --git a/src/voice/PlaybackClock.ts b/src/voice/PlaybackClock.ts
index 06d6381691..d6d36e861f 100644
--- a/src/voice/PlaybackClock.ts
+++ b/src/voice/PlaybackClock.ts
@@ -54,6 +54,15 @@ export class PlaybackClock implements IDestroyable {
         }
     };
 
+    /**
+     * Mark the time in the audio context where the clip starts/has been loaded.
+     * This is to ensure the clock isn't skewed into thinking it is ~0.5s into
+     * a clip when the duration is set.
+     */
+    public flagLoadTime() {
+        this.clipStart = this.context.currentTime;
+    }
+
     public flagStart() {
         if (this.stopped) {
             this.clipStart = this.context.currentTime;