diff options
Diffstat (limited to 'src/client/views/nodes')
| -rw-r--r-- | src/client/views/nodes/AudioBox.scss | 5 | ||||
| -rw-r--r-- | src/client/views/nodes/AudioBox.tsx | 7 | ||||
| -rw-r--r-- | src/client/views/nodes/VideoBox.tsx | 9 |
3 files changed, 12 insertions, 9 deletions
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 = () => { |