1 files changed, 14 insertions, 11 deletions
diff --git a/src/client/views/AudioWaveform.tsx b/src/client/views/AudioWaveform.tsx
index 1e676e1f0..7d83ea3dc 100644
--- a/src/client/views/AudioWaveform.tsx
+++ b/src/client/views/AudioWaveform.tsx
@@ -17,6 +17,8 @@ export interface AudioWaveformProps {
     mediaPath: string;
     layoutDoc: Doc;
     trimming: boolean;
+    clipStart: number;
+    clipEnd: number;
     PanelHeight: () => number;
 }
 
@@ -28,20 +30,22 @@ export class AudioWaveform extends React.Component<AudioWaveformProps> {
         return Math.max(50, this.props.PanelHeight());
     }
 
-    @computed get clipStart() { return NumCast(this.props.layoutDoc.clipStart); }
-    @computed get clipEnd() { return NumCast(this.props.layoutDoc.clipEnd, this.props.rawDuration); }
-    @computed get audioBuckets() { return Cast(this.props.layoutDoc.audioBuckets, listSpec("number"), []); }
-    @computed get audioBucketRange() { return Cast(this.props.layoutDoc.audioBucketRange, listSpec("number"), [-1, -1]); }
+    @computed get clipStart() { return this.props.clipStart; }
+    @computed get clipEnd() { return this.props.clipEnd; }
+    audioBucketField = (start: number, end: number) => { return "audioBuckets-" + start.toFixed(2) + "-" + end.toFixed(2); }
+    @computed get audioBuckets() { return Cast(this.props.layoutDoc[this.audioBucketField(this.clipStart, this.clipEnd)], listSpec("number"), []); }
     componentWillUnmount() {
         this._disposer?.();
     }
     componentDidMount() {
-        this._disposer = reaction(() => [this.clipStart, this.clipEnd, this.audioBuckets.length, ...this.audioBucketRange],
+        this._disposer = reaction(() => [this.clipStart, this.clipEnd, this.audioBuckets.length],
             (range) => {
-                if (range[2] !== AudioWaveform.NUMBER_OF_BUCKETS || range[3] !== range[0] || range[4] !== range[1]) {
-                    this.props.layoutDoc.audioBucketRange = new List<number>([range[0], range[1]]); // setting these values here serves as a "lock" to prevent multiple attempts to create the waveform at nearly the same time.
-                    this.props.layoutDoc.audioBuckets = new List<number>(numberRange(AudioWaveform.NUMBER_OF_BUCKETS));
-                    setTimeout(this.createWaveformBuckets);
+                if (range[2] !== AudioWaveform.NUMBER_OF_BUCKETS) {
+                    if (!this.props.layoutDoc[this.audioBucketField(range[0], range[1])]) {
+                        // setting these values here serves as a "lock" to prevent multiple attempts to create the waveform at nerly the same time.
+                        this.props.layoutDoc[this.audioBucketField(range[0], range[1])] = new List<number>(numberRange(AudioWaveform.NUMBER_OF_BUCKETS));
+                        setTimeout(this.createWaveformBuckets);
+                    }
                 }
             }, { fireImmediately: true });
 
@@ -74,8 +78,7 @@ export class AudioWaveform extends React.Component<AudioWaveformProps> {
                                     0
                                 ) / 2
                         );
-                        this.props.layoutDoc.audioBucketRange = new List<number>([this.clipStart, this.clipEnd]);
-                        this.props.layoutDoc.audioBuckets = new List<number>(bucketList);
+                        this.props.layoutDoc[this.audioBucketField(this.clipStart, this.clipEnd)] = new List<number>(bucketList);
                     })
                 );
             }