import { CollectionFreeFormView } from "../views/collections/collectionFreeForm"; import { IReactionDisposer, observable, reaction } from "mobx"; import { NumCast } from "../../fields/Types"; import { Doc } from "../../fields/Doc"; type Movement = { time: number, panX: number, panY: number, } type Presentation = { movements: Array meta: Object, startTime: number | null, } export class RecordingApi { private static NULL_PRESENTATION: Presentation = { movements: [], meta: {}, startTime: null, } // instance variables private currentPresentation: Presentation; private isRecording: boolean; private absoluteStart: number; // create static instance and getter for global use @observable static _instance: RecordingApi; public static get Instance(): RecordingApi { return RecordingApi._instance } public constructor() { // init the global instance RecordingApi._instance = this; // init the instance variables this.currentPresentation = RecordingApi.NULL_PRESENTATION this.isRecording = false; this.absoluteStart = -1; // used for tracking movements in the view frame this.disposeFunc = null; this.recordingFFView = null; // for now, set playFFView this.playFFView = null; this.timers = null; } // little helper :) private get isInitPresenation(): boolean { return this.currentPresentation.startTime === null } public start = (meta?: Object): Error | undefined => { // check if already init a presentation if (!this.isInitPresenation) { console.error('[recordingApi.ts] start() failed: current presentation data exists. please call clear() first.') return new Error('[recordingApi.ts] start()') } // update the presentation mode Doc.UserDoc().presentationMode = 'recording' // (1a) get start date for presenation const startDate = new Date() // (1b) set start timestamp to absolute timestamp // this.absoluteStart = startDate.getTime() // (2) assign meta content if it exists this.currentPresentation.meta = meta || {} // (3) assign start date to currentPresenation this.currentPresentation.startTime = startDate.getTime() // (4) set isRecording true to allow trackMovements this.isRecording = true } public clear = (): Error | Presentation => { // TODO: maybe archive the data? if (this.isRecording) { console.error('[recordingApi.ts] clear() failed: currently recording presentation. call pause() first') return new Error('[recordingApi.ts] clear()') } // update the presentation mode Doc.UserDoc().presentationMode = 'none' const presCopy = { ...this.currentPresentation } // clear presenation data this.currentPresentation = RecordingApi.NULL_PRESENTATION // clear isRecording this.isRecording = false // clear absoluteStart this.absoluteStart = -1 // clear the disposeFunc this.removeRecordingFFView() return presCopy; } public pause = (): Error | undefined => { if (this.isInitPresenation) { console.error('[recordingApi.ts] pause() failed: no presentation started. try calling init() first') return new Error('[recordingApi.ts] pause(): no presentation') } // don't allow track movments this.isRecording = false // set relativeStart to the pausedTimestamp const timestamp = new Date().getTime() this.absoluteStart = timestamp } public resume = () => { const timestamp = new Date().getTime() const startTimestamp = this.currentPresentation.startTime if (!startTimestamp) { console.error('[recordingApi.ts] resume() failed: no presentation data. try calling start() first') return new Error('[recordingApi.ts] pause()') } // update absoluteStart to bridge the paused time const absoluteTimePaused = timestamp - this.absoluteStart this.absoluteStart = absoluteTimePaused } private trackMovements = (panX: number, panY: number): Error | undefined => { // ensure we are recording if (!this.isRecording) { console.error('[recordingApi.ts] trackMovements() failed: recording is paused()') return new Error('[recordingApi.ts] trackMovements()') } // get the time const timestamp = new Date().getTime() // make new movement struct const movement: Movement = { time: timestamp, panX, panY } // add that movement to the current presentation data's movement array this.currentPresentation.movements.push(movement) } // instance variable for the FFView private disposeFunc: IReactionDisposer | null; private recordingFFView: CollectionFreeFormView | null; // set the FFView that will be used in a reaction to track the movements public setRecordingFFView = (view: CollectionFreeFormView): void => { // set the view to the current view if (view === this.recordingFFView || view === null) return; //this.recordingFFView = view; // set the reaction to track the movements this.disposeFunc = reaction( () => ({ x: NumCast(view.Document.panX, -1), y: NumCast(view.Document.panY, -1) }), (res) => (res.x !== -1 && res.y !== -1) && this.trackMovements(res.x, res.y) ) // for now, set the most recent recordingFFView to the playFFView this.recordingFFView = view; } // call on dispose function to stop tracking movements public removeRecordingFFView = (): void => { this.disposeFunc?.(); this.disposeFunc = null; } // TODO: extract this into different class with pause and resume recording private playFFView: CollectionFreeFormView | null; private timers: NodeJS.Timeout[] | null; public setPlayFFView = (view: CollectionFreeFormView): void => { this.playFFView = view } 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') } // TODO: set userdoc presentMode to browsing //console.log('cleared timers', this.timers) console.log(this.timers?.map(timer => clearTimeout(timer))) console.log('[recordingApi.ts] pauseMovements()') this._isPlaying = false } private _isPlaying = false; public playMovements = (presentation: Presentation, timeViewed: number = 0): undefined | Error => { if (presentation.startTime === 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') } this._isPlaying = true; console.log(timeViewed) const document = this.playFFView.Document const { movements } = presentation this.timers = movements.reduce((arr: NodeJS.Timeout[], movement) => { const { panX, panY, time } = movement const absoluteTime = time - presentation.startTime - timeViewed*1000 if (absoluteTime < 0) return arr; // set the pan to what was stored arr.push(setTimeout(() => { document._panX = panX; document._panY = panY; }, absoluteTime)) return arr; }, []) } // Unfinished code for tracing multiple free form views // export let pres: Map = new Map() // export function AddRecordingFFView(ffView: CollectionFreeFormView): void { // pres.set(ffView, // reaction(() => ({ x: ffView.panX, y: ffView.panY }), // (pt) => RecordingApi.trackMovements(ffView, pt.x, pt.y))) // ) // } // export function RemoveRecordingFFView(ffView: CollectionFreeFormView): void { // const disposer = pres.get(ffView); // disposer?.(); // pres.delete(ffView) // } }