From 1f94d6b33f81b1b2e6140f58f4de749eb4e74478 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Mon, 8 Nov 2021 11:07:05 -0500
Subject: fixed vertical height of timeline for video.  fixed initial display
 of timeline by not  assigning clipEnd in DidMount

---
 src/client/views/nodes/AudioBox.scss | 5 +++--
 src/client/views/nodes/AudioBox.tsx  | 7 ++++---
 src/client/views/nodes/VideoBox.tsx  | 9 +++++----
 3 files changed, 12 insertions(+), 9 deletions(-)

(limited to 'src/client/views/nodes')

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 = () => {
-- 
cgit v1.2.3-70-g09d2