diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/util/RecordingApi.ts | 47 | ||||
| -rw-r--r-- | src/client/views/nodes/VideoBox.tsx | 49 |
2 files changed, 57 insertions, 39 deletions
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<ViewBoxAnnotatableProp this.layoutDoc._height = NumCast(this.layoutDoc._width) / youtubeaspect; } } - this.player && this.setPlayheadTime(0); + this.player && this.setPlayheadTime(0); + + // if presentation data exists, pass it to the recordingPi + if (this.presentation != null) { + RecordingApi.Instance.setVideoBox(this); + } } componentWillUnmount() { - this.removeCurrentlyPlaying(); - this.Pause(); - Object.keys(this._disposers).forEach(d => 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<ViewBoxAnnotatableProp // } // if presentation isn't null, call followmovements on the recording api - if (this.presentation) { - console.log("presentation isn't null") - const err = RecordingApi.Instance.playMovements(this.presentation, this.player?.currentTime || 0, this); - err && console.log(err) - } else { - console.log("presentation is null") - } + // if (this.presentation) { + // console.log("presentation isn't null") + // const err = RecordingApi.Instance.playMovements(this.presentation, this.player?.currentTime || 0, this); + // err && console.log(err) + // } else { + // console.log("presentation is null") + // } this._playing = true; const eleTime = this.player?.currentTime || 0; @@ -211,11 +221,11 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp // pauses video @action public Pause = (update: boolean = true) => { - 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<ViewBoxAnnotatableProp <video key="video" autoPlay={this._screenCapture} ref={this.setVideoRef} style={this._fullScreen ? this.fullScreenSize() : {}} onCanPlay={this.videoLoad} controls={VideoBox._nativeControls} - onPlay={() => { - // console.log("PLAY from CONTENT") - //this.Play() - }} + onPlay={() => this.Play()} onSeeked={this.updateTimecode} - // onPause={() => this.Pause() } + onPause={() => this.Pause() } onClick={e => e.preventDefault()}> <source src={field.url.href} type="video/mp4" /> Not supported. |