diff options
Diffstat (limited to 'src/client/views/nodes/AudioBox.tsx')
| -rw-r--r-- | src/client/views/nodes/AudioBox.tsx | 37 |
1 files changed, 21 insertions, 16 deletions
diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index 62958a80b..6850c2f6c 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -64,9 +64,12 @@ 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 + // @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`]); } // bcz: shouldn't be needed since it's computed from audio element + @computed get rawDuration() { return NumCast(this.dataDoc[`${this.fieldKey}-duration`]); } // bcz: shouldn't be needed since it's computed from audio element + // mehek: not 100% sure but i think due to the order in which things are loaded this is necessary ^^ + // if you get rid of it and set the value to 0 the timeline and waveform will set their bounds incorrectly + @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; } @@ -140,7 +143,6 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp } }); this.layoutDoc._currentTimecode = this._ele.currentTime; - console.log("current time: " + this.layoutDoc._currentTimecode); this.timeline?.scrollToTime(NumCast(this.layoutDoc._currentTimecode)); } } @@ -161,7 +163,8 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp this.mediaState = media_state.Playing; this._play = setTimeout( () => { - this.setPlayheadTime(this.timeline!.trimStart); + this.Pause(); + if (fullPlay) this.setPlayheadTime(this.timeline!.trimStart); }, (end - start) * 1000); } else { @@ -254,18 +257,20 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp // for play button Play = (e?: any) => { - const eleTime = this._ele?.currentTime || 0; - const start = eleTime === this.timeline?.trimEnd ? this.timeline.trimStart : eleTime; - this.playFrom(start, undefined); - e?.stopPropagation?.(); + if (this.timeline && this._ele) { + const eleTime = this._ele.currentTime; + const start = eleTime >= this.timeline.trimEnd || eleTime <= this.timeline.trimStart ? this.timeline.trimStart : eleTime; + this.playFrom(start, this.timeline.trimEnd, true); + e?.stopPropagation?.(); + } } // pause play back @action - Pause = () => { + Pause = (timeoutClear: boolean = false) => { this._ele?.pause(); this.mediaState = media_state.Paused; - clearTimeout(this._play); // stops clip from jumping back to beginning + if (timeoutClear) clearTimeout(this._play); // prevents jump back to beginning when manually paused } // creates a text document for dictation @@ -293,7 +298,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp // ref for updating time setRef = (e: HTMLAudioElement | null) => { e?.addEventListener("timeupdate", this.timecodeChanged); - e?.addEventListener("ended", this.Pause); + e?.addEventListener("ended", () => this.Pause()); this._ele = e; } @@ -354,13 +359,13 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp @undoBatch finishTrim = () => { // hides trim controls and displays new clip - this.Pause(); + this.Pause(true); this.setPlayheadTime(Math.max(Math.min(this.timeline?.trimEnd || 0, this._ele!.currentTime), this.timeline?.trimStart || 0)); this.timeline?.StopTrimming(); } startTrim = (scope: TrimScope) => { - this.Pause(); + this.Pause(true); this.timeline?.StartTrimming(scope); } @@ -370,7 +375,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp if (doubleTap) { this.startTrim(TrimScope.All); } else if (this.timeline) { - this.Pause(); + this.Pause(true); this.timeline.IsTrimming !== TrimScope.None ? this.finishTrim() : this.startTrim(TrimScope.Clip); } })); @@ -446,7 +451,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp <div className="controls-left"> <div className="audiobox-button" title={this.mediaState === media_state.Paused ? "play" : "pause"} - onPointerDown={this.mediaState === media_state.Paused ? this.Play : this.Pause}> + onPointerDown={this.mediaState === media_state.Paused ? this.Play : (e) => { e.stopPropagation(); this.Pause(true); }}> <FontAwesomeIcon icon={this.mediaState === media_state.Paused ? "play" : "pause"} size={"1x"} /> </div> @@ -538,7 +543,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.rawDuration = this._ele.duration) + (this.dataDoc[this.fieldKey + "-duration"] = this._ele.duration) )} > <source src={this.path} type="audio/mpeg" /> |