From ffbd40b2a8ebdd49b4bc08b8edaf8aee699d12d3 Mon Sep 17 00:00:00 2001
From: mehekj <mehek.jethani@gmail.com>
Date: Tue, 9 Nov 2021 15:42:55 -0500
Subject: fixed playback bug and duration

---
 .../collections/CollectionStackedTimeline.tsx      | 65 +++++++++++-----------
 src/client/views/nodes/AudioBox.tsx                | 37 ++++++------
 2 files changed, 53 insertions(+), 49 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/CollectionStackedTimeline.tsx b/src/client/views/collections/CollectionStackedTimeline.tsx
index d689d7970..5352b5220 100644
--- a/src/client/views/collections/CollectionStackedTimeline.tsx
+++ b/src/client/views/collections/CollectionStackedTimeline.tsx
@@ -52,7 +52,7 @@ type PanZoomDocument = makeInterface<[]>;
 const PanZoomDocument = makeInterface();
 export type CollectionStackedTimelineProps = {
     Play: () => void;
-    Pause: () => void;
+    Pause: (timeoutClear: boolean) => void;
     playLink: (linkDoc: Doc) => void;
     playFrom: (seekTimeInSeconds: number, endTime?: number) => void;
     playing: () => boolean;
@@ -127,11 +127,6 @@ export class CollectionStackedTimeline extends CollectionSubView<
     }
 
     componentDidMount() {
-        // bcz: setting these shouldn't be necessary since they are the default values of this.clipStart and this.clipEnd.
-        //      also, setting anything on the Document in DidMount or the constructor is not good form since it means that
-        //      someone who has viewing but not edit permissions would not be able to do the assignment.
-        // this.layoutDoc.clipStart = 0;
-        // this.layoutDoc.clipEnd = this.props.rawDuration;
         document.addEventListener("keydown", this.keyEvents, true);
     }
 
@@ -232,7 +227,7 @@ export class CollectionStackedTimeline extends CollectionSubView<
         const shiftKey = e.shiftKey;
         if (rect && this.props.isContentActive()) {
             const wasPlaying = this.props.playing();
-            if (wasPlaying) this.props.Pause();
+            if (wasPlaying) this.props.Pause(true);
             var wasSelecting = this._markerEnd !== undefined;
             setupMoveUpEvents(
                 this,
@@ -358,15 +353,15 @@ export class CollectionStackedTimeline extends CollectionSubView<
 
     @action
     scrollToTime = (time: number) => {
-        console.log("rightmost visible time: " + this.toTimeline(this._scroll + this.props.PanelWidth(), this.timelineContentWidth));
-        if (this._timelineWrapper && time > this.toTimeline(this._scroll + this.props.PanelWidth(), this.timelineContentWidth)) {
-            console.log("scrolled");
-            this._scroll = Math.min(this._scroll + this.props.PanelWidth(), this.timelineContentWidth - this.props.PanelWidth());
-            smoothScrollHorizontal(100, this._timelineWrapper, this._scroll);
-        }
-        else if (this._timelineWrapper && time < this.toTimeline(this._scroll, this.timelineContentWidth)) {
-            this._scroll = time / this.timelineContentWidth * this.clipDuration;
-            smoothScrollHorizontal(100, this._timelineWrapper, this._scroll);
+        if (this._timelineWrapper) {
+            if (time > this.toTimeline(this._scroll + this.props.PanelWidth(), this.timelineContentWidth)) {
+                this._scroll = Math.min(this._scroll + this.props.PanelWidth(), this.timelineContentWidth - this.props.PanelWidth());
+                smoothScrollHorizontal(200, this._timelineWrapper, this._scroll);
+            }
+            else if (time < this.toTimeline(this._scroll, this.timelineContentWidth)) {
+                this._scroll = time / this.timelineContentWidth * this.clipDuration;
+                smoothScrollHorizontal(200, this._timelineWrapper, this._scroll);
+            }
         }
     }
 
@@ -434,20 +429,24 @@ export class CollectionStackedTimeline extends CollectionSubView<
         const seekTimeInSeconds = this.anchorStart(anchorDoc) - 0.25;
         const endTime = this.anchorEnd(anchorDoc);
         if (this.layoutDoc.autoPlayAnchors) {
-            if (this.props.playing()) this.props.Pause();
-            else this.props.playFrom(seekTimeInSeconds, endTime);
+            if (this.props.playing()) this.props.Pause(true);
+            else {
+                this.props.playFrom(seekTimeInSeconds, endTime);
+                this.scrollToTime(seekTimeInSeconds);
+            }
         } else {
             if (
                 seekTimeInSeconds < NumCast(this.layoutDoc._currentTimecode) &&
                 endTime > NumCast(this.layoutDoc._currentTimecode)
             ) {
                 if (!this.layoutDoc.autoPlayAnchors && this.props.playing()) {
-                    this.props.Pause();
+                    this.props.Pause(true);
                 } else {
                     this.props.Play();
                 }
             } else {
                 this.props.playFrom(seekTimeInSeconds, endTime);
+                this.scrollToTime(seekTimeInSeconds);
             }
         }
         return { select: true };
@@ -464,7 +463,7 @@ export class CollectionStackedTimeline extends CollectionSubView<
             seekTimeInSeconds < NumCast(this.layoutDoc._currentTimecode) + 1e-4 &&
             endTime > NumCast(this.layoutDoc._currentTimecode) - 1e-4
         ) {
-            if (this.props.playing()) this.props.Pause();
+            if (this.props.playing()) this.props.Pause(true);
             else if (this.layoutDoc.autoPlayAnchors) this.props.Play();
             else if (!this.layoutDoc.autoPlayAnchors) {
                 const rect = this._timeline?.getBoundingClientRect();
@@ -919,19 +918,19 @@ class StackedTimelineAnchor extends React.Component<StackedTimelineAnchorProps>
                 {inner.view}
                 {!inner.anchor.view ||
                     !SelectionManager.IsSelected(inner.anchor.view) ? null : (
-                        <>
-                            <div
-                                key="left"
-                                className="collectionStackedTimeline-left-resizer"
-                                onPointerDown={(e) => this.onAnchorDown(e, this.props.mark, true)}
-                            />
-                            <div
-                                key="right"
-                                className="collectionStackedTimeline-resizer"
-                                onPointerDown={(e) => this.onAnchorDown(e, this.props.mark, false)}
-                            />
-                        </>
-                    )}
+                    <>
+                        <div
+                            key="left"
+                            className="collectionStackedTimeline-left-resizer"
+                            onPointerDown={(e) => this.onAnchorDown(e, this.props.mark, true)}
+                        />
+                        <div
+                            key="right"
+                            className="collectionStackedTimeline-resizer"
+                            onPointerDown={(e) => this.onAnchorDown(e, this.props.mark, false)}
+                        />
+                    </>
+                )}
             </>
         );
     }
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" />
-- 
cgit v1.2.3-70-g09d2