1 files changed, 11 insertions, 13 deletions
diff --git a/src/client/views/AudioWaveform.tsx b/src/client/views/AudioWaveform.tsx
index 7d83ea3dc..f7b117130 100644
--- a/src/client/views/AudioWaveform.tsx
+++ b/src/client/views/AudioWaveform.tsx
@@ -32,27 +32,25 @@ export class AudioWaveform extends React.Component<AudioWaveformProps> {
 
     @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); }
+    audioBucketField = (start: number, end: number) => { return "audioBuckets/" + start.toFixed(2).replace(".", "_") + "/" + end.toFixed(2).replace(".", "_"); }
     @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],
-            (range) => {
-                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);
-                    }
+        this._disposer = reaction(() => ({ clipStart: this.clipStart, clipEnd: this.clipEnd, fieldKey: this.audioBucketField(this.clipStart, this.clipEnd) }),
+            ({ clipStart, clipEnd, fieldKey }) => {
+                if (!this.props.layoutDoc[fieldKey]) {
+                    // setting these values here serves as a "lock" to prevent multiple attempts to create the waveform at nerly the same time.
+                    this.props.layoutDoc[fieldKey] = new List<number>(numberRange(AudioWaveform.NUMBER_OF_BUCKETS));
+                    setTimeout(() => this.createWaveformBuckets(fieldKey, clipStart, clipEnd));
                 }
             }, { fireImmediately: true });
 
     }
 
     // decodes the audio file into peaks for generating the waveform
-    createWaveformBuckets = async () => {
+    createWaveformBuckets = async (fieldKey: string, clipStart: number, clipEnd: number) => {
         axios({ url: this.props.mediaPath, responseType: "arraybuffer" }).then(
             (response) => {
                 const context = new window.AudioContext();
@@ -60,8 +58,8 @@ export class AudioWaveform extends React.Component<AudioWaveformProps> {
                     response.data,
                     action((buffer) => {
                         const rawDecodedAudioData = buffer.getChannelData(0);
-                        const startInd = this.clipStart / this.props.rawDuration;
-                        const endInd = this.clipEnd / this.props.rawDuration;
+                        const startInd = clipStart / this.props.rawDuration;
+                        const endInd = clipEnd / this.props.rawDuration;
                         const decodedAudioData = rawDecodedAudioData.slice(Math.floor(startInd * rawDecodedAudioData.length), Math.floor(endInd * rawDecodedAudioData.length));
 
                         const bucketDataSize = Math.floor(
@@ -78,7 +76,7 @@ export class AudioWaveform extends React.Component<AudioWaveformProps> {
                                     0
                                 ) / 2
                         );
-                        this.props.layoutDoc[this.audioBucketField(this.clipStart, this.clipEnd)] = new List<number>(bucketList);
+                        this.props.layoutDoc[fieldKey] = new List<number>(bucketList);
                     })
                 );
             }