refactor code, fix bugs, make first movement on screen the beginning of the presentation.

1 files changed, 135 insertions, 60 deletions

diff --git a/src/client/util/RecordingApi.ts b/src/client/util/RecordingApi.ts
index ae5431a03..87cb85497 100644
--- a/src/client/util/RecordingApi.ts
+++ b/src/client/util/RecordingApi.ts
@@ -57,7 +57,7 @@ export class RecordingApi {
         this.absoluteStart = -1;
 
         // used for tracking movements in the view frame
-        this.recordingFFViews = new Map();
+        this.recordingFFViews = null;
         this.tabChangeDisposeFunc = null;
 
         // for now, set playFFView
@@ -127,6 +127,10 @@ export class RecordingApi {
     }
 
     public initTabTracker = () => {
+        if (this.recordingFFViews === null) {
+            this.recordingFFViews = new Map();
+        }
+
         // init the dispose funcs on the page
         const docList = DocListCast(CollectionDockingView.Instance.props.Document.data);
         this.updateRecordingFFViewsFromTabs(docList);
@@ -142,6 +146,8 @@ export class RecordingApi {
     }
 
     public start = (meta?: Object) => {
+        this.initTabTracker();
+
         // update the presentation mode
         Doc.UserDoc().presentationMode = 'recording';
 
@@ -190,6 +196,9 @@ export class RecordingApi {
             this.tabChangeDisposeFunc?.();
             // update the presentation mode now that we are done tracking
             Doc.UserDoc().presentationMode = 'none';
+
+            this.recordingFFViews = null;
+            this.tabChangeDisposeFunc = null;
         }
 
         // clear presenation data
@@ -250,13 +259,28 @@ export class RecordingApi {
     private videoBoxDisposeFunc: IReactionDisposer | null = null;
     private videoBox: VideoBox | null = null;
 
-    setVideoBox = (videoBox: VideoBox) => {
+    setVideoBox = async (videoBox: VideoBox) => {
         console.log('setVideoBox', videoBox);
-        if (this.videoBoxDisposeFunc !== null) { console.warn('setVideoBox on already videoBox'); this.videoBoxDisposeFunc(); }
+        if (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; }
+        
+        let docIdtoDoc: Map<string, Doc> = new Map();
+        try {
+            docIdtoDoc = await this.loadPresentation(presentation);
+        } catch {
+            console.error('[recordingApi.ts] setVideoBox(): error loading presentation - no replay movements');
+            throw 'error loading docs from server';
+        }
+
+        
         this.videoBoxDisposeFunc =
             reaction(() => ({ playing: videoBox._playing, timeViewed: videoBox.player?.currentTime || 0 }),
                 ({ playing, timeViewed }) => 
-                    playing ? this.playMovements(videoBox.presentation, timeViewed) : this.pauseMovements()
+                    playing ? this.playMovements(presentation, docIdtoDoc, timeViewed) : this.pauseMovements()
             );
         this.videoBox = videoBox;
     }
@@ -283,10 +307,81 @@ export class RecordingApi {
 
     public _isPlaying = false;
 
-    public playMovements = (presentation: Presentation, timeViewed: number = 0, videoBox?: VideoBox): undefined | Error => {
-        console.log('playMovements', presentation, timeViewed, videoBox);
+    loadPresentation = async (presentation: Presentation) => {
+        const { movements } = presentation;
+        if (movements === null) {
+            throw '[recordingApi.ts] followMovements() failed: no presentation data';
+        }
+
+        // generate a set of all unique docIds
+        const docIds = new Set<string>();
+        for (const {docId} of movements) {
+            if (!docIds.has(docId)) docIds.add(docId);
+        }
+
+        const docIdtoDoc = new Map<string, Doc>();
+
+        let refFields = await DocServer.GetRefFields([...docIds.keys()]);
+        for (const docId in refFields) {
+            if (!refFields[docId]) {
+                throw `one field was undefined`;
+            }
+            docIdtoDoc.set(docId, refFields[docId] as Doc);
+        }
+        console.log('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; }
+    }
+
+    // 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}`)
+            return undefined;
+        }
+        CollectionDockingView.AddSplit(doc, 'right');
+        const docView = DocumentManager.Instance.getDocumentViewById(docId);
+        return docView?.ComponentView as CollectionFreeFormView;
+    }
+
+    // helper to replay a movement
+    private preScale = -1;
+    zoomAndPan = (movement: Movement, document: CollectionFreeFormView) => {
+        const { panX, panY, scale } = movement;
+        (scale !== 0 && this.preScale !== scale) && document.zoomSmoothlyAboutPt([panX, panY], scale, 0);
+        document.Document._panX = panX;
+        document.Document._panY = panY;
+
+        this.preScale = scale;
+    }
+
+    getFirstMovements = (movements: Movement[], timeViewed: number): Map<string, Movement> => {
+        if (movements === null) return new Map();
+        // generate a set of all unique docIds
+        const docIdtoFirstMove = new Map();
+        for (const move of movements) {
+            const { docId } = move;
+            if (!docIdtoFirstMove.has(docId)) docIdtoFirstMove.set(docId, move);
+        }
+        return docIdtoFirstMove;
+    }
+
+    endPlayingPresentation = () => {
+        this.preScale = -1;
+        RecordingApi.Instance._isPlaying = false;
+    }
+
+    public playMovements = (presentation: Presentation, docIdtoDoc: Map<string, Doc>, timeViewed: number = 0) => {
+        console.log('playMovements', presentation, timeViewed, docIdtoDoc);
 
-        if (presentation.movements === null) { //|| this.playFFView === null) {
+        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;
@@ -294,65 +389,45 @@ export class RecordingApi {
         this._isPlaying = true;
         Doc.UserDoc().presentationMode = 'watching';
 
-        // TODO: consider this bug at the end of the clip on seek
-        // 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
-        let preScale = -1;
-        const zoomAndPan = (movement: Movement, document: CollectionFreeFormView) => {
-            const { panX, panY, scale } = movement;
-            (scale !== 0 && preScale !== scale) && document.zoomSmoothlyAboutPt([panX, panY], scale, 0);
-            document.Document._panX = panX;
-            document.Document._panY = panY;
-
-            preScale = scale;
+        const handleFirstMovements = () => {
+            // if the first movement is a closed tab, open it
+            const firstMovement = filteredMovements[0];
+            const isClosed = this.getCollectionFFView(firstMovement.docId) === undefined;
+            if (isClosed) this.openTab(firstMovement.docId, docIdtoDoc);
+
+            // for the open tabs, set it to the first move
+            const docIdtoFirstMove = this.getFirstMovements(filteredMovements, timeViewed);
+            for (const [docId, firstMove] of docIdtoFirstMove) {
+                const colFFView = this.getCollectionFFView(docId);
+                if (colFFView) this.zoomAndPan(firstMove, colFFView);
+            }
         }
-        // set the first frame to be at the start of the pres
-        // zoomAndPan(filteredMovements[0]);
-
-        // generate a set of all unique docIds
-        const docIds = new Set(filteredMovements.map(movement => movement.docId))
-        // TODO: optimize only ons-first load
-        // TODO: make async await
-        // TODO: make sure the cahce still hs the id
-        // TODO: if they are open, set them to their first move
-        // this will load the cache, so getCachedREfFields won't have to reach server
-        DocServer.GetRefFields([...docIds]).then(refFields => { 
-            console.log('refFields', refFields)
-
-            const openTab = (docId: string) : DocumentView | undefined => {
-                const isInView = DocumentManager.Instance.getDocumentViewById(docId);
-                if (isInView) { return isInView; }
-
-                const doc = DocServer.GetCachedRefField(docId) as Doc;
-                if (doc == undefined) {
-                    console.warn('Doc server cache did not contain docId', docId)
-                    return undefined;
+        handleFirstMovements();
+        
+
+        // make timers that will execute each movement at the correct replay time
+        this.timers = filteredMovements.map(movement => {
+            const timeDiff = movement.time - timeViewed * 1000
+
+            return setTimeout(() => {
+                const collectionFFView = this.getCollectionFFView(movement.docId);
+                if (collectionFFView) {
+                    this.zoomAndPan(movement, collectionFFView);
+                } else {
+                    // tab wasn't open - open it and play the movement
+                    const openedColFFView = this.openTab(movement.docId, docIdtoDoc);
+                    openedColFFView && this.zoomAndPan(movement, openedColFFView);
                 }
-                CollectionDockingView.AddSplit(doc, 'right');
-                return DocumentManager.Instance.getDocumentView(doc);
-            }
 
-            // make timers that will execute each movement at the correct replay time
-            this.timers = filteredMovements.map(movement => {
-                const timeDiff = movement.time - timeViewed * 1000
-                return setTimeout(() => {
-                    // open tab if it is not already open
-                    const view = openTab(movement.docId);
-                    if (view) { 
-                        const collectionFFView = view.ComponentView;
-                        console.log(collectionFFView instanceof CollectionFreeFormView)
-                        // replay the movement
-                        zoomAndPan(movement, collectionFFView as CollectionFreeFormView);
-                    }
-                    // if last movement, presentation is done -> set the instance var
-                    if (movement === filteredMovements[filteredMovements.length - 1]) RecordingApi.Instance._isPlaying = false;
-                }, timeDiff)
-            });
-        })
+                // if last movement, presentation is done -> cleanup :)
+                if (movement === filteredMovements[filteredMovements.length - 1]) {
+                    this.endPlayingPresentation();
+                }
+            }, timeDiff);
+        });
     }
 
     // method that concatenates an array of presentatations into one