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.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

(limited to 'src/client/views/nodes/AudioBox.tsx')

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" />
-- 
cgit v1.2.3-70-g09d2