From d0aa8e81cc98a4cb58a8e7a8c431aa51f8ef2361 Mon Sep 17 00:00:00 2001 From: Michael Foiani Date: Thu, 5 May 2022 05:51:30 -0400 Subject: fix some bugs and start position. ready for demo :) --- src/client/util/RecordingApi.ts | 44 +++++++++++++++++++++++++++---------- src/client/views/nodes/VideoBox.tsx | 37 +++++++++++++++++++++++-------- 2 files changed, 60 insertions(+), 21 deletions(-) (limited to 'src') diff --git a/src/client/util/RecordingApi.ts b/src/client/util/RecordingApi.ts index fec579486..7592199eb 100644 --- a/src/client/util/RecordingApi.ts +++ b/src/client/util/RecordingApi.ts @@ -199,18 +199,19 @@ export class RecordingApi { return this.videoBox === null } - private _isPlaying = false; + 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') } - + if (this._isPlaying) { //return new Error('[recordingApi.ts] playMovements() failed: already playing') return } this._isPlaying = true; + console.log('setWatching lol') Doc.UserDoc().presentationMode = 'watching'; // TODO: consider this bug at the end of the clip on seek @@ -219,24 +220,43 @@ export class RecordingApi { const document = this.playFFView.Document const { movements } = presentation - this.timers = movements.reduce((arr: NodeJS.Timeout[], movement) => { - const { panX, panY, time } = movement + const filteredMovements = movements.filter(movement => movement.time > timeViewed * 1000) + + document._panX = filteredMovements[0].panX; + document._panY = filteredMovements[0].panY; + + this.timers = filteredMovements.map(movement => { + const { panX, panY, time } = movement const timeDiff = time - timeViewed*1000 - if (timeDiff < 0) return arr; - - // set the pan to what was stored - arr.push(setTimeout(() => { + return setTimeout(() => { document._panX = panX; document._panY = panY; if (movement === movements[movements.length - 1]) { - this._isPlaying = false; - Doc.UserDoc().presentationMode = 'none'; + // stuff for recording API + RecordingApi.Instance._isPlaying = false; } - }, timeDiff)) - return arr; + }, timeDiff) }, []) + // this.timers = movements.reduce((arr: NodeJS.Timeout[], movement) => { + // const { panX, panY, time } = movement + + // const timeDiff = time - timeViewed*1000 + // if (timeDiff < 0) return arr; + + // // set the pan to what was stored + // arr.push(setTimeout(() => { + // document._panX = panX; + // document._panY = panY; + // if (movement === movements[movements.length - 1]) { + // // stuff for recording API + // RecordingApi.Instance._isPlaying = false; + // } + // }, timeDiff)) + // return arr; + // }, []) + } // Unfinished code for tracing multiple free form views diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx index 8aecc2483..f449ae429 100644 --- a/src/client/views/nodes/VideoBox.tsx +++ b/src/client/views/nodes/VideoBox.tsx @@ -154,10 +154,10 @@ export class VideoBox extends ViewBoxAnnotatableComponent { - if (Doc.UserDoc().presentationMode === 'watching' && !this._playing) { - console.log('VideoBox : Play : presentation mode', this._playing); - return; - } + // if (Doc.UserDoc().presentationMode === 'watching' && !this._playing) { + // console.log('VideoBox : Play : presentation mode', this._playing); + // return; + // } // if presentation isn't null, call followmovements on the recording api if (this.presentation) { @@ -198,11 +198,16 @@ export class VideoBox extends ViewBoxAnnotatableComponent { if (this.presentation) { + console.log('VideoBox : Pause'); const err = RecordingApi.Instance.pauseMovements(); err && console.log(err); } @@ -347,6 +352,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent { + console.log("SEt video ref " + vref) this._videoRef = vref; if (vref) { this._videoRef!.ontimeupdate = this.updateTimecode; @@ -354,7 +360,10 @@ export class VideoBox extends ViewBoxAnnotatableComponent this._fullScreen = vref.webkitDisplayingFullscreen); this._disposers.reactionDisposer?.(); this._disposers.reactionDisposer = reaction(() => NumCast(this.layoutDoc._currentTimecode), - time => !this._playing && (vref.currentTime = time), { fireImmediately: true }); + time => { + !this._playing && (vref.currentTime = time); + console.log("vref time = " + vref.currentTime) + }, { fireImmediately: true }); } } @@ -410,9 +419,12 @@ export class VideoBox extends ViewBoxAnnotatableComponent this.Play()} + onPlay={() => { + // console.log("PLAY from CONTENT") + //this.Play() + }} onSeeked={this.updateTimecode} - onPause={() => this.Pause()} + // onPause={() => this.Pause() } onClick={e => e.preventDefault()}> Not supported. @@ -472,7 +484,11 @@ export class VideoBox extends ViewBoxAnnotatableComponent this._playing ? this.Pause() : this.Play(); + + onPlayDown = () => { + console.log("PLAY DOWN"); + this._playing ? this.Pause() : this.Play(); + } // for fullscreen button onFullDown = (e: React.PointerEvent) => { @@ -577,7 +593,10 @@ export class VideoBox extends ViewBoxAnnotatableComponent { // need to keep track of if end of clip is reached so on next play, clip restarts - if (fullPlay) this._finished = true; + if (fullPlay) { + Doc.UserDoc().presentationMode = 'none'; + this._finished = true; + } // removes from currently playing if playback has reached end of range marker else this.removeCurrentlyPlaying(); this.Pause(); -- cgit v1.2.3-70-g09d2