From 57cf1f2417858c203e1018d08e1626b1094ae68d Mon Sep 17 00:00:00 2001 From: Michael Foiani Date: Tue, 14 Jun 2022 21:47:41 -0400 Subject: change to using mobx to see when videoBox is paused or played --- src/client/util/RecordingApi.ts | 47 +++++++++++++++++++++-------------- src/client/views/nodes/VideoBox.tsx | 49 +++++++++++++++++++++---------------- 2 files changed, 57 insertions(+), 39 deletions(-) (limited to 'src') diff --git a/src/client/util/RecordingApi.ts b/src/client/util/RecordingApi.ts index 4bbaa9a79..48ea12fd9 100644 --- a/src/client/util/RecordingApi.ts +++ b/src/client/util/RecordingApi.ts @@ -61,7 +61,7 @@ export class RecordingApi { this.tabChangeDisposeFunc = null; // for now, set playFFView - this.playFFView = null; + // this.playFFView = null; this.timers = null; } @@ -232,19 +232,11 @@ export class RecordingApi { // TODO: extract this into different class with pause and resume recording // TODO: store the FFview with the movements - private playFFView: CollectionFreeFormView | null; - private timers: NodeJS.Timeout[] | null; - - public setPlayFFView = (view: CollectionFreeFormView): void => { - this.playFFView = view - } + private timers: NodeJS.Timeout[] | null; // pausing movements will dispose all timers that are planned to replay the movements // play movemvents will recreate them when the user resumes the presentation public pauseMovements = (): undefined | Error => { - if (this.playFFView === null) { - // return new Error('[recordingApi.ts] pauseMovements() failed: no view') - } if (!this._isPlaying) { //return new Error('[recordingApi.ts] pauseMovements() failed: not playing') @@ -257,21 +249,41 @@ export class RecordingApi { // this.videoBox = null; } - private videoBox: VideoBox | null = null; + private videoBoxDisposeFunc: IReactionDisposer | null = null; + + setVideoBox = (videoBox: VideoBox) => { + console.log('setVideoBox', videoBox); + if (this.videoBoxDisposeFunc !== null) { console.warn('setVideoBox on already videoBox'); this.videoBoxDisposeFunc(); } + this.videoBoxDisposeFunc = + reaction(() => ({ playing: videoBox._playing, timeViewed: videoBox.player?.currentTime || 0 }), + ({ playing, timeViewed }) => + playing ? this.playMovements(videoBox.presentation, timeViewed) : this.pauseMovements() + ); + } + + removeVideoBox = () => { + if (this.videoBoxDisposeFunc == null) { console.warn('removeVideoBox on null videoBox'); return; } + this.videoBoxDisposeFunc(); + } + // by calling pause on the VideoBox, the pauseMovements will be called - public pauseVideoAndMovements = (): boolean => { - this.videoBox?.Pause() + public pauseVideoAndMovements = () => { + // this.videoBox?.Pause() this.pauseMovements() - return this.videoBox == null + // return this.videoBox == null } + + public _isPlaying = false; public playMovements = (presentation: Presentation, timeViewed: number = 0, videoBox?: VideoBox): undefined | Error => { - if (presentation.movements === null) {å //|| this.playFFView === null) { - return new Error('[recordingApi.ts] followMovements() failed: no presentation data or no view') + console.log('playMovements', presentation, timeViewed, videoBox); + + if (presentation.movements === null) { //|| this.playFFView === null) { + return new Error('[recordingApi.ts] followMovements() failed: no presentation data') } if (this._isPlaying) return; @@ -279,13 +291,12 @@ export class RecordingApi { Doc.UserDoc().presentationMode = 'watching'; // TODO: consider this bug at the end of the clip on seek - this.videoBox = videoBox || null; + // this.videoBox = videoBox || null; // only get the movements that are remaining in the video time left const filteredMovements = presentation.movements.filter(movement => movement.time > timeViewed * 1000) // helper to replay a movement - const document = this.playFFView let preScale = -1; const zoomAndPan = (movement: Movement, document: CollectionFreeFormView) => { const { panX, panY, scale } = movement; diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx index cf3282d2f..ed9bcf29b 100644 --- a/src/client/views/nodes/VideoBox.tsx +++ b/src/client/views/nodes/VideoBox.tsx @@ -144,13 +144,23 @@ export class VideoBox extends ViewBoxAnnotatableComponent this._disposers[d]?.()); + this.removeCurrentlyPlaying(); + this.Pause(); + Object.keys(this._disposers).forEach(d => this._disposers[d]?.()); + + // dispose the recordingApi's observer + if (this.presentation != null) { + RecordingApi.Instance.removeVideoBox(); + } } @@ -162,13 +172,13 @@ export class VideoBox extends ViewBoxAnnotatableComponent { - if (this.presentation) { - console.log('VideoBox : Pause'); - const err = RecordingApi.Instance.pauseMovements(); - err && console.log(err); - } + // if (this.presentation) { + // console.log('VideoBox : Pause'); + // const err = RecordingApi.Instance.pauseMovements(); + // err && console.log(err); + // } this._playing = false; this.removeCurrentlyPlaying(); @@ -437,12 +447,9 @@ export class VideoBox extends ViewBoxAnnotatableComponent { - // console.log("PLAY from CONTENT") - //this.Play() - }} + onPlay={() => this.Play()} onSeeked={this.updateTimecode} - // onPause={() => this.Pause() } + onPause={() => this.Pause() } onClick={e => e.preventDefault()}> Not supported. -- cgit v1.2.3-70-g09d2