refactored trackingtabs code to be used for replaying a presentation

1 files changed, 69 insertions, 8 deletions

diff --git a/src/client/util/RecordingApi.ts b/src/client/util/RecordingApi.ts
index 48ea12fd9..b2432af6b 100644
--- a/src/client/util/RecordingApi.ts
+++ b/src/client/util/RecordingApi.ts
@@ -22,6 +22,8 @@ type Movement = {
     docId: string,
 }
 
+type tabReactionFunction = (res : { x: number; y: number; scale: number; key: string; }) => void;
+
 
 export type Presentation = {
     movements: Movement[] | null,
@@ -57,7 +59,7 @@ export class RecordingApi {
         this.absoluteStart = -1;
 
         // used for tracking movements in the view frame
-        this.recordingFFViews = null;
+        this.recordingFFViews = new Map();
         this.tabChangeDisposeFunc = null;
 
         // for now, set playFFView
@@ -83,6 +85,22 @@ export class RecordingApi {
         this.recordingFFViews?.set(key, disposeFunc);
     }
 
+    private addRecordingFFViewTest(doc: Doc, reactionFunc: any): void {
+        console.info('adding dispose funcTest : key', doc[Id], 'reactionFunc', reactionFunc);
+        const key = doc[Id];
+
+        if (this.recordingFFViews === null) { console.warn('addFFViewTest on null RecordingApi'); return; }
+        console.log('addFFViewTest : key', key, 'map', this.recordingFFViews);
+        if (this.recordingFFViews.has(key)) { console.warn('addFFViewTest : key already in map'); return; }
+
+        const disposeFunc = reaction(
+            () => ({ x: NumCast(doc.panX, -1), y: NumCast(doc.panY, -1), scale: NumCast(doc.viewScale, 0), key: doc[Id] }),
+            (res) => reactionFunc(res),
+        );
+
+        this.recordingFFViews?.set(key, disposeFunc);
+    }
+
     private removeRecordingFFView = (key: string) => {
         console.info('removing dispose func : docId', key);
         if (this.recordingFFViews === null) { console.warn('removeFFView on null RecordingApi'); return; }
@@ -91,6 +109,42 @@ export class RecordingApi {
     }
 
     // in the case where only one tab was changed (updates not across dashboards), set only one to true
+    private updateRecordingFFViewsFromTabsTest = (tabbedDocs: Doc[], reactionFunc: any, onlyOne = false) => {
+        if (this.recordingFFViews === null) return;
+
+        // so that the size comparisons are correct, we must filter to only the FFViews
+        const isFFView = (doc: Doc) => doc && 'viewType' in doc && doc.viewType === 'freeform';
+        const tabbedFFViews = new Set<string>();
+        for (const DashDoc of tabbedDocs) {
+            if (isFFView(DashDoc)) tabbedFFViews.add(DashDoc[Id]);
+        }
+
+
+        // new tab was added - need to add it
+        if (tabbedFFViews.size > this.recordingFFViews.size) {
+            for (const DashDoc of tabbedDocs) {
+                if (!this.recordingFFViews.has(DashDoc[Id])) {
+                    if (isFFView(DashDoc)) {
+                        this.addRecordingFFViewTest(DashDoc, reactionFunc);
+
+                        // only one max change, so return
+                        if (onlyOne) return;
+                    }
+                }
+            }
+        }
+        // tab was removed - need to remove it from recordingFFViews
+        else if (tabbedFFViews.size < this.recordingFFViews.size) {
+            for (const [key] of this.recordingFFViews) {
+                if (!tabbedFFViews.has(key)) { 
+                    this.removeRecordingFFView(key);
+                    if (onlyOne) return;
+                } 
+            }
+        }
+    }
+
+    // in the case where only one tab was changed (updates not across dashboards), set only one to true
     private updateRecordingFFViewsFromTabs = (tabbedDocs: Doc[], onlyOne = false) => {
         if (this.recordingFFViews === null) return;
 
@@ -126,11 +180,10 @@ export class RecordingApi {
         }
     }
 
-    public start = (meta?: Object) => {
+    private initTabWatcher = (reactionFunc: tabReactionFunction) => {
         // init the dispose funcs on the page
-        this.recordingFFViews = new Map();
         const docList = DocListCast(CollectionDockingView.Instance.props.Document.data);
-        this.updateRecordingFFViewsFromTabs(docList);
+        this.updateRecordingFFViewsFromTabsTest(docList, reactionFunc);
 
         // create a reaction to monitor changes in tabs
         this.tabChangeDisposeFunc =
@@ -138,8 +191,14 @@ export class RecordingApi {
                 (change) => {
                     // TODO: consider changing between dashboards
                     console.log('change in tabs', change);
-                    this.updateRecordingFFViewsFromTabs(DocListCast(change), true);
-                });
+                    this.updateRecordingFFViewsFromTabsTest(DocListCast(change), reactionFunc, true);
+            });
+    }
+
+    public start = (meta?: Object) => {
+
+        const reactionFunc: tabReactionFunction = (res) => (res.x !== -1 && res.y !== -1 && this.tracking) && this.trackMovements(res.x, res.y, res.key, res.scale)
+        this.initTabWatcher(reactionFunc);
 
         // update the presentation mode
         Doc.UserDoc().presentationMode = 'recording';
@@ -171,7 +230,7 @@ export class RecordingApi {
         // reset the current presentation
         clearData && this.clear();
 
-        console.log('yieldPresentation', cpy);
+        console.log('yieldPresentation', cpy, 'map', this.recordingFFViews);
         return cpy;
     }
 
@@ -290,6 +349,8 @@ export class RecordingApi {
         this._isPlaying = true;
         Doc.UserDoc().presentationMode = 'watching';
 
+        // setup the reaction on tabs that will pause the video if the user interacts with a tab
+
         // TODO: consider this bug at the end of the clip on seek
         // this.videoBox = videoBox || null;
 
@@ -315,7 +376,7 @@ export class RecordingApi {
         // 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
+        // this will load the cache, so getCachedRefFields won't have to reach server
         DocServer.GetRefFields([...docIds]).then(refFields => { 
             console.log('refFields', refFields)