fixed playback bug and duration

1 files changed, 21 insertions, 16 deletions

diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx
index 62958a80b..6850c2f6c 100644
--- a/src/client/views/nodes/AudioBox.tsx
+++ b/src/client/views/nodes/AudioBox.tsx
@@ -64,9 +64,12 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
     @observable _volume: number = 1;
     @observable _muted: boolean = false;
     @observable _paused: boolean = false;
-    @observable rawDuration: number = 0; // computed from the length of the audio element when loaded
+    // @observable rawDuration: number = 0; // computed from the length of the audio element when loaded
     @computed get recordingStart() { return DateCast(this.dataDoc[this.fieldKey + "-recordingStart"])?.date.getTime(); }
-    // @computed get rawDuration() { return NumCast(this.dataDoc[`${this.fieldKey}-duration`]); } // bcz: shouldn't be needed since it's computed from audio element
+    @computed get rawDuration() { return NumCast(this.dataDoc[`${this.fieldKey}-duration`]); } // bcz: shouldn't be needed since it's computed from audio element
+    // mehek: not 100% sure but i think due to the order in which things are loaded this is necessary ^^
+    // if you get rid of it and set the value to 0 the timeline and waveform will set their bounds incorrectly
+
     @computed get links() { return DocListCast(this.dataDoc.links); }
     @computed get pauseTime() { return this._pauseEnd - this._pauseStart; } // total time paused to update the correct time
     @computed get mediaState() { return this.layoutDoc.mediaState as media_state; }
@@ -140,7 +143,6 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
                     }
                 });
             this.layoutDoc._currentTimecode = this._ele.currentTime;
-            console.log("current time: " + this.layoutDoc._currentTimecode);
             this.timeline?.scrollToTime(NumCast(this.layoutDoc._currentTimecode));
         }
     }
@@ -161,7 +163,8 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
                 this.mediaState = media_state.Playing;
                 this._play = setTimeout(
                     () => {
-                        this.setPlayheadTime(this.timeline!.trimStart);
+                        this.Pause();
+                        if (fullPlay) this.setPlayheadTime(this.timeline!.trimStart);
                     },
                     (end - start) * 1000);
             } else {
@@ -254,18 +257,20 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
 
     // for play button
     Play = (e?: any) => {
-        const eleTime = this._ele?.currentTime || 0;
-        const start = eleTime === this.timeline?.trimEnd ? this.timeline.trimStart : eleTime;
-        this.playFrom(start, undefined);
-        e?.stopPropagation?.();
+        if (this.timeline && this._ele) {
+            const eleTime = this._ele.currentTime;
+            const start = eleTime >= this.timeline.trimEnd || eleTime <= this.timeline.trimStart ? this.timeline.trimStart : eleTime;
+            this.playFrom(start, this.timeline.trimEnd, true);
+            e?.stopPropagation?.();
+        }
     }
 
     // pause play back
     @action
-    Pause = () => {
+    Pause = (timeoutClear: boolean = false) => {
         this._ele?.pause();
         this.mediaState = media_state.Paused;
-        clearTimeout(this._play); // stops clip from jumping back to beginning
+        if (timeoutClear) clearTimeout(this._play); // prevents jump back to beginning when manually paused
     }
 
     // creates a text document for dictation
@@ -293,7 +298,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
     // ref for updating time
     setRef = (e: HTMLAudioElement | null) => {
         e?.addEventListener("timeupdate", this.timecodeChanged);
-        e?.addEventListener("ended", this.Pause);
+        e?.addEventListener("ended", () => this.Pause());
         this._ele = e;
     }
 
@@ -354,13 +359,13 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
 
     @undoBatch
     finishTrim = () => { // hides trim controls and displays new clip
-        this.Pause();
+        this.Pause(true);
         this.setPlayheadTime(Math.max(Math.min(this.timeline?.trimEnd || 0, this._ele!.currentTime), this.timeline?.trimStart || 0));
         this.timeline?.StopTrimming();
     }
 
     startTrim = (scope: TrimScope) => {
-        this.Pause();
+        this.Pause(true);
         this.timeline?.StartTrimming(scope);
     }
 
@@ -370,7 +375,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
             if (doubleTap) {
                 this.startTrim(TrimScope.All);
             } else if (this.timeline) {
-                this.Pause();
+                this.Pause(true);
                 this.timeline.IsTrimming !== TrimScope.None ? this.finishTrim() : this.startTrim(TrimScope.Clip);
             }
         }));
@@ -446,7 +451,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
                 <div className="controls-left">
                     <div className="audiobox-button"
                         title={this.mediaState === media_state.Paused ? "play" : "pause"}
-                        onPointerDown={this.mediaState === media_state.Paused ? this.Play : this.Pause}>
+                        onPointerDown={this.mediaState === media_state.Paused ? this.Play : (e) => { e.stopPropagation(); this.Pause(true); }}>
                         <FontAwesomeIcon icon={this.mediaState === media_state.Paused ? "play" : "pause"} size={"1x"} />
                     </div>
 
@@ -538,7 +543,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
             className={`audiobox-control${this.props.isContentActive() ? "-interactive" : ""}`}
             onLoadedData={action(e =>
                 (this._ele?.duration && this._ele?.duration !== Infinity) &&
-                (this.dataDoc[this.fieldKey + "-duration"] = this.rawDuration = this._ele.duration)
+                (this.dataDoc[this.fieldKey + "-duration"] = this._ele.duration)
             )}
         >
             <source src={this.path} type="audio/mpeg" />