fixed vertical height of timeline for video. fixed initial display of timeline by not assigning clipEnd in DidMount

6 files changed, 33 insertions, 27 deletions

diff --git a/src/client/views/collections/CollectionStackedTimeline.scss b/src/client/views/collections/CollectionStackedTimeline.scss
index fce105a44..36aa36978 100644
--- a/src/client/views/collections/CollectionStackedTimeline.scss
+++ b/src/client/views/collections/CollectionStackedTimeline.scss
@@ -1,7 +1,7 @@
 @import "../global/globalCssVariables.scss";
 
 .timeline-container {
-    height: calc(100% - 50px);
+    height: 100%;
     overflow-x: auto;
     overflow-y: hidden;
     border: none;
diff --git a/src/client/views/collections/CollectionStackedTimeline.tsx b/src/client/views/collections/CollectionStackedTimeline.tsx
index ced8a68e8..f5c3676e8 100644
--- a/src/client/views/collections/CollectionStackedTimeline.tsx
+++ b/src/client/views/collections/CollectionStackedTimeline.tsx
@@ -127,8 +127,11 @@ export class CollectionStackedTimeline extends CollectionSubView<
     }
 
     componentDidMount() {
-        this.layoutDoc.clipStart = 0;
-        this.layoutDoc.clipEnd = this.props.rawDuration;
+        // 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);
     }
 
@@ -915,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/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx
index 9f24d60d8..6e1d9b067 100644
--- a/src/client/views/collections/TabDocView.tsx
+++ b/src/client/views/collections/TabDocView.tsx
@@ -220,8 +220,8 @@ export class TabDocView extends React.Component<TabDocViewProps> {
             if (!pinProps?.audioRange && duration !== undefined) {
                 pinDoc.mediaStart = "manual";
                 pinDoc.mediaStop = "manual";
-                pinDoc.presStartTime = doc.clipStart;
-                pinDoc.presEndTime = doc.clipEnd;
+                pinDoc.presStartTime = NumCast(doc.clipStart);
+                pinDoc.presEndTime = NumCast(doc.clipEnd, duration);
             }
             //save position
             if (pinProps?.setPosition || pinDoc.isInkMask) {
diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss
index 458d607a5..681a6b022 100644
--- a/src/client/views/nodes/AudioBox.scss
+++ b/src/client/views/nodes/AudioBox.scss
@@ -180,13 +180,14 @@
 
     .audiobox-playback {
         width: 100%;
-        height: calc(100% - 50px);
+        height: 100%;
         background: $white;
 
         .audiobox-timeline {
-            height: 100%;
+            height: calc(100% - 50px);
             width: 100%;
             background: $white;
+            position: absolute;
         }
 
         .audiobox-timeline > div {
diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx
index b51908e20..62958a80b 100644
--- a/src/client/views/nodes/AudioBox.tsx
+++ b/src/client/views/nodes/AudioBox.tsx
@@ -64,8 +64,9 @@ 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
     @computed get recordingStart() { return DateCast(this.dataDoc[this.fieldKey + "-recordingStart"])?.date.getTime(); }
-    @computed get rawDuration() { return NumCast(this.dataDoc[`${this.fieldKey}-duration`]); }
+    // @computed get rawDuration() { return NumCast(this.dataDoc[`${this.fieldKey}-duration`]); } // bcz: shouldn't be needed since it's computed from audio element
     @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; }
@@ -490,7 +491,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
                     />
                 </div>
                 <div className="timecode-duration">
-                    {this.timeline && formatTime(Math.round(NumCast(this.timeline?.clipDuration)))}
+                    {this.timeline && formatTime(Math.round(this.timeline.clipDuration))}
                 </div>
             </div>
 
@@ -537,7 +538,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._ele?.duration)
+                (this.dataDoc[this.fieldKey + "-duration"] = this.rawDuration = this._ele.duration)
             )}
         >
             <source src={this.path} type="audio/mpeg" />
diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx
index c22dbab5c..ec6519abd 100644
--- a/src/client/views/nodes/VideoBox.tsx
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -79,7 +79,8 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
 
     @computed get links() { return DocListCast(this.dataDoc.links); }
     @computed get heightPercent() { return NumCast(this.layoutDoc._timelineHeightPercent, 100); }
-    @computed get rawDuration() { return NumCast(this.dataDoc[this.fieldKey + "-duration"]); }
+    // @computed get rawDuration() { return NumCast(this.dataDoc[this.fieldKey + "-duration"]); }
+    @observable rawDuration: number = 0;
 
     @computed get youtubeVideoId() {
         const field = Cast(this.dataDoc[this.props.fieldKey], VideoField);
@@ -234,15 +235,15 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
         return CollectionStackedTimeline.createAnchor(this.rootDoc, this.dataDoc, this.annotationKey, "_timecodeToShow"/* videoStart */, "_timecodeToHide" /* videoEnd */, timecode ? timecode : undefined, undefined, marquee) || this.rootDoc;
     }
 
-    videoLoad = () => {
+    videoLoad = action(() => {
         const aspect = this.player!.videoWidth / this.player!.videoHeight;
         Doc.SetNativeWidth(this.dataDoc, this.player!.videoWidth);
         Doc.SetNativeHeight(this.dataDoc, this.player!.videoHeight);
         this.layoutDoc._height = (this.layoutDoc._width || 0) / aspect;
         if (Number.isFinite(this.player!.duration)) {
-            this.dataDoc[this.fieldKey + "-duration"] = this.player!.duration;
+            this.rawDuration = this.player!.duration;
         }
-    }
+    })
 
     @action
     updateTimecode = () => {