diff options
Diffstat (limited to 'src/client/views/nodes/AudioBox.tsx')
| -rw-r--r-- | src/client/views/nodes/AudioBox.tsx | 32 |
1 files changed, 19 insertions, 13 deletions
diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index acd025fbd..67c8902f9 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -38,7 +38,7 @@ enum media_state { } @observer export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps & FieldViewProps, AudioDocument>(AudioDocument) { - @observable public static CurrentlyPlaying: AudioBox[]; + @observable public static CurrentlyPlaying: Doc[]; public static LayoutString(fieldKey: string) { return FieldView.LayoutString(AudioBox, fieldKey); } public static SetScrubTime = action((timeInMillisFrom1970: number) => { @@ -63,6 +63,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp _stream: MediaStream | undefined; _play: any = null; + @observable _finished: boolean = false; @observable _volume: number = 1; @observable _muted: boolean = false; @observable _paused: boolean = false; @@ -157,11 +158,10 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp if (!AudioBox.CurrentlyPlaying) { AudioBox.CurrentlyPlaying = []; } - if (AudioBox.CurrentlyPlaying.indexOf(this) == -1) { - AudioBox.CurrentlyPlaying.push(this); + if (AudioBox.CurrentlyPlaying.indexOf(this.Document) == -1) { + AudioBox.CurrentlyPlaying.push(this.Document); } - fullPlay = endTime ? fullPlay : true; clearTimeout(this._play); // abort any previous clip ending if (Number.isNaN(this._ele?.duration)) { // audio element isn't loaded yet... wait 1/2 second and try again setTimeout(() => this.playFrom(seekTimeInSeconds, endTime), 500); @@ -175,14 +175,14 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp this.mediaState = media_state.Playing; this._play = setTimeout( () => { - this.Pause(false); - if (fullPlay) this.setPlayheadTime(this.timeline!.trimStart); + if (fullPlay) this._finished = true; // removes from currently playing if playback has reached end of range marker else this.removeCurrentlyPlaying(); + this.Pause(); }, (end - start) * 1000); } else { - this.Pause(false); + this.Pause(); } } } @@ -190,7 +190,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp // removes from currently playing display @action removeCurrentlyPlaying = () => { - AudioBox.CurrentlyPlaying.splice(AudioBox.CurrentlyPlaying.indexOf(this), 1); + AudioBox.CurrentlyPlaying.splice(AudioBox.CurrentlyPlaying.indexOf(this.Document), 1); } // update the recording time @@ -277,20 +277,26 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp // for play button Play = (e?: any) => { + 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; + let start = eleTime >= this.timeline.trimEnd || eleTime <= this.timeline.trimStart ? this.timeline.trimStart : eleTime; + if (this._finished) { + this._finished = false; + start = this.timeline.trimStart; + } this.playFrom(start, this.timeline.trimEnd, true); - e?.stopPropagation?.(); } } // pause play back @action - Pause = (timeoutClear: boolean = true) => { + Pause = () => { this._ele?.pause(); this.mediaState = media_state.Paused; - if (timeoutClear) clearTimeout(this._play); // prevents jump back to beginning when manually paused + if (!this._finished) clearTimeout(this._play); + AudioBox.CurrentlyPlaying.splice(AudioBox.CurrentlyPlaying.indexOf(this.Document), 1); } // creates a text document for dictation @@ -318,7 +324,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(false)); + e?.addEventListener("ended", () => { this._finished = true; this.Pause() }); this._ele = e; } |