diff options
Diffstat (limited to 'src/client/util/ReplayMovements.ts')
| -rw-r--r-- | src/client/util/ReplayMovements.ts | 104 |
1 files changed, 58 insertions, 46 deletions
diff --git a/src/client/util/ReplayMovements.ts b/src/client/util/ReplayMovements.ts index 86bc4c5de..d5bffc5e2 100644 --- a/src/client/util/ReplayMovements.ts +++ b/src/client/util/ReplayMovements.ts @@ -1,22 +1,24 @@ -import { CollectionFreeFormView } from "../views/collections/collectionFreeForm"; -import { IReactionDisposer, observable, observe, reaction } from "mobx"; -import { Doc } from "../../fields/Doc"; -import { VideoBox } from "../views/nodes/VideoBox"; -import { DocumentManager } from "./DocumentManager"; -import { CollectionDockingView } from "../views/collections/CollectionDockingView"; -import { DocServer } from "../DocServer"; -import { Movement, Presentation } from "./TrackMovements"; +import { CollectionFreeFormView } from '../views/collections/collectionFreeForm'; +import { IReactionDisposer, observable, observe, reaction } from 'mobx'; +import { Doc } from '../../fields/Doc'; +import { VideoBox } from '../views/nodes/VideoBox'; +import { DocumentManager } from './DocumentManager'; +import { CollectionDockingView } from '../views/collections/CollectionDockingView'; +import { DocServer } from '../DocServer'; +import { Movement, Presentation } from './TrackMovements'; +import { OpenWhereMod } from '../views/nodes/DocumentView'; export class ReplayMovements { - private timers: NodeJS.Timeout[] | null; + private timers: NodeJS.Timeout[] | null; private videoBoxDisposeFunc: IReactionDisposer | null; private videoBox: VideoBox | null; private isPlaying: boolean; - // create static instance and getter for global use @observable static _instance: ReplayMovements; - static get Instance(): ReplayMovements { return ReplayMovements._instance } + static get Instance(): ReplayMovements { + return ReplayMovements._instance; + } constructor() { // init the global instance ReplayMovements._instance = this; @@ -37,20 +39,27 @@ export class ReplayMovements { } Doc.UserDoc().presentationMode = 'none'; - this.isPlaying = false + this.isPlaying = false; // TODO: set userdoc presentMode to browsing - this.timers?.map(timer => clearTimeout(timer)) - } + this.timers?.map(timer => clearTimeout(timer)); + }; setVideoBox = async (videoBox: VideoBox) => { // console.info('setVideoBox', videoBox); - if (this.videoBox !== null) { console.warn('setVideoBox on already videoBox'); } - if (this.videoBoxDisposeFunc !== null) { console.warn('setVideoBox on already videoBox dispose func'); this.videoBoxDisposeFunc(); } - + if (this.videoBox !== null) { + console.warn('setVideoBox on already videoBox'); + } + if (this.videoBoxDisposeFunc !== null) { + console.warn('setVideoBox on already videoBox dispose func'); + this.videoBoxDisposeFunc(); + } const { presentation } = videoBox; - if (presentation == null) { console.warn('setVideoBox on null videoBox presentation'); return; } - + if (presentation == null) { + console.warn('setVideoBox on null videoBox presentation'); + return; + } + let docIdtoDoc: Map<string, Doc> = new Map(); try { docIdtoDoc = await this.loadPresentation(presentation); @@ -59,29 +68,30 @@ export class ReplayMovements { throw 'error loading docs from server'; } - - this.videoBoxDisposeFunc = - reaction(() => ({ playing: videoBox._playing, timeViewed: videoBox.player?.currentTime || 0 }), - ({ playing, timeViewed }) => - playing ? this.playMovements(presentation, docIdtoDoc, timeViewed) : this.pauseMovements() - ); + this.videoBoxDisposeFunc = reaction( + () => ({ playing: videoBox._playing, timeViewed: videoBox.player?.currentTime || 0 }), + ({ playing, timeViewed }) => (playing ? this.playMovements(presentation, docIdtoDoc, timeViewed) : this.pauseMovements()) + ); this.videoBox = videoBox; - } + }; removeVideoBox = () => { - if (this.videoBoxDisposeFunc == null) { console.warn('removeVideoBox on null videoBox'); return; } + if (this.videoBoxDisposeFunc == null) { + console.warn('removeVideoBox on null videoBox'); + return; + } this.videoBoxDisposeFunc(); this.videoBox = null; this.videoBoxDisposeFunc = null; - } + }; // should be called from interacting with the screen pauseFromInteraction = () => { this.videoBox?.Pause(); this.pauseMovements(); - } + }; loadPresentation = async (presentation: Presentation) => { const { movements } = presentation; @@ -91,7 +101,7 @@ export class ReplayMovements { // generate a set of all unique docIds const docIds = new Set<string>(); - for (const {docId} of movements) { + for (const { docId } of movements) { if (!docIds.has(docId)) docIds.add(docId); } @@ -107,27 +117,29 @@ export class ReplayMovements { // console.info('loadPresentation refFields', refFields, docIdtoDoc); return docIdtoDoc; - } + }; // returns undefined if the docView isn't open on the screen getCollectionFFView = (docId: string) => { const isInView = DocumentManager.Instance.getDocumentViewById(docId); - if (isInView) { return isInView.ComponentView as CollectionFreeFormView; } - } + if (isInView) { + return isInView.ComponentView as CollectionFreeFormView; + } + }; // will open the doc in a tab then return the CollectionFFView that holds it openTab = (docId: string, docIdtoDoc: Map<string, Doc>) => { const doc = docIdtoDoc.get(docId); if (doc == undefined) { - console.error(`docIdtoDoc did not contain docId ${docId}`) + console.error(`docIdtoDoc did not contain docId ${docId}`); return undefined; } // console.log('openTab', docId, doc); - CollectionDockingView.AddSplit(doc, 'right'); + CollectionDockingView.AddSplit(doc, OpenWhereMod.right); const docView = DocumentManager.Instance.getDocumentView(doc); // BUG - this returns undefined if the doc is already open return docView?.ComponentView as CollectionFreeFormView; - } + }; // helper to replay a movement zoomAndPan = (movement: Movement, document: CollectionFreeFormView) => { @@ -135,7 +147,7 @@ export class ReplayMovements { scale !== 0 && document.zoomSmoothlyAboutPt([panX, panY], scale, 0); document.Document._panX = panX; document.Document._panY = panY; - } + }; getFirstMovements = (movements: Movement[]): Map<string, Movement> => { if (movements === null) return new Map(); @@ -146,18 +158,19 @@ export class ReplayMovements { if (!docIdtoFirstMove.has(docId)) docIdtoFirstMove.set(docId, move); } return docIdtoFirstMove; - } + }; endPlayingPresentation = () => { this.isPlaying = false; Doc.UserDoc().presentationMode = 'none'; - } + }; public playMovements = (presentation: Presentation, docIdtoDoc: Map<string, Doc>, timeViewed: number = 0) => { // console.info('playMovements', presentation, timeViewed, docIdtoDoc); - if (presentation.movements === null || presentation.movements.length === 0) { //|| this.playFFView === null) { - return new Error('[recordingApi.ts] followMovements() failed: no presentation data') + if (presentation.movements === null || presentation.movements.length === 0) { + //|| this.playFFView === null) { + return new Error('[recordingApi.ts] followMovements() failed: no presentation data'); } if (this.isPlaying) return; @@ -165,7 +178,7 @@ export class ReplayMovements { Doc.UserDoc().presentationMode = 'watching'; // only get the movements that are remaining in the video time left - const filteredMovements = presentation.movements.filter(movement => movement.time > timeViewed * 1000) + const filteredMovements = presentation.movements.filter(movement => movement.time > timeViewed * 1000); const handleFirstMovements = () => { // if the first movement is a closed tab, open it @@ -179,13 +192,12 @@ export class ReplayMovements { const colFFView = this.getCollectionFFView(docId); if (colFFView) this.zoomAndPan(firstMove, colFFView); } - } + }; handleFirstMovements(); - // make timers that will execute each movement at the correct replay time this.timers = filteredMovements.map(movement => { - const timeDiff = movement.time - timeViewed * 1000 + const timeDiff = movement.time - timeViewed * 1000; return setTimeout(() => { const collectionFFView = this.getCollectionFFView(movement.docId); @@ -204,5 +216,5 @@ export class ReplayMovements { } }, timeDiff); }); - } + }; } |