diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/views/nodes/AudioBox.tsx | 30 |
1 files changed, 15 insertions, 15 deletions
diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index 538d7d5cb..bde1a3d72 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -76,9 +76,11 @@ export class AudioBox extends ViewBoxAnnotatableComponent< @observable _paused: boolean = false; @observable _trimming: boolean = false; @observable _trimStart: number = NumCast(this.layoutDoc.clipStart); - @observable _trimEnd: number = NumCast(this.layoutDoc.clipEnd, this.duration); + @observable _trimEnd: number | undefined = Cast(this.layoutDoc.clipEnd, "number"); @computed get trimStart() { return this._trimming ? this._trimStart : NumCast(this.layoutDoc.clipStart); } - @computed get trimEnd() { return this._trimming ? this._trimEnd : NumCast(this.layoutDoc.clipEnd, this.duration); } + @computed get trimEnd() { + return this._trimming && this._trimEnd !== undefined ? this._trimEnd : NumCast(this.layoutDoc.clipEnd, this.duration); + } @computed get mediaState(): | undefined @@ -132,13 +134,6 @@ export class AudioBox extends ViewBoxAnnotatableComponent< constructor(props: Readonly<ViewBoxAnnotatableProps & FieldViewProps>) { super(props); AudioBox.Instance = this; - - if (this.duration === undefined) { - runInAction( - () => - (this.Document[this.fieldKey + "-duration"] = this.Document.duration) - ); - } } getLinkData(l: Doc) { @@ -229,11 +224,6 @@ export class AudioBox extends ViewBoxAnnotatableComponent< timecodeChanged = () => { const htmlEle = this._ele; if (this.mediaState !== "recording" && htmlEle) { - htmlEle.duration && - htmlEle.duration !== Infinity && - runInAction( - () => (this.dataDoc[this.fieldKey + "-duration"] = htmlEle.duration) - ); this.links .map((l) => this.getLinkData(l)) .forEach(({ la1, la2, linkTime }) => { @@ -320,6 +310,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent< const [{ result }] = await Networking.UploadFilesToServer(e.data); if (!(result instanceof Error)) { this.props.Document[this.props.fieldKey] = new AudioField(result.accessPaths.agnostic.client); + if (this._trimEnd === undefined) this._trimEnd = this.duration; } }; this._recordStart = new Date().getTime(); @@ -438,7 +429,16 @@ export class AudioBox extends ViewBoxAnnotatableComponent< // returns the html audio element @computed get audio() { - return <audio ref={this.setRef} className={`audiobox-control${this.props.isContentActive() ? "-interactive" : ""}`}> + return <audio ref={this.setRef} + onLoadedData={action(e => { + const duration = this._ele?.duration; + if (duration && duration !== Infinity) { + runInAction( + () => this.dataDoc[this.fieldKey + "-duration"] = duration + ); + } + })} + className={`audiobox-control${this.props.isContentActive() ? "-interactive" : ""}`}> <source src={this.path} type="audio/mpeg" /> Not supported. </audio>; |