Create smooth record and playback of tracking.

4 files changed, 39 insertions, 1 deletions

diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts
index 8d4b98d88..db9986a41 100644
--- a/src/client/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -216,7 +216,7 @@ export namespace DragManager {
     ) {
         // stop an 'accidental' on-click drag that may have occured if the user is in presenting mode
         // note: dragData.dropAction is only undefined when the element itself being dragged without being selected
-        if (Doc.UserDoc()?.isPresenting && dragData.dropAction === undefined) return false;
+        if (Doc.UserDoc()?.presentationMode === 'recording' && dragData.dropAction === undefined) return false;
 
         const addAudioTag = (dropDoc: any) => {
             dropDoc && !dropDoc.creationDate && (dropDoc.creationDate = new DateField);
diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss
index 15cd2c144..3799b6b13 100644
--- a/src/client/views/MainView.scss
+++ b/src/client/views/MainView.scss
@@ -29,6 +29,11 @@
     left: calc(100% + 5px);
     z-index: 1;
     pointer-events: none;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
 }
 
 .mainView-snapLines {
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 8c0795881..b98c80068 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -528,6 +528,7 @@ export class MainView extends React.Component {
                     searchFilterDocs={returnEmptyDoclist}
                     ContainingCollectionView={undefined}
                     ContainingCollectionDoc={undefined} />
+                {['watching', 'recording'].includes(String(this.userDoc?.presentationMode) ?? '') ? <div style={{ border: '.5rem solid green', padding: '5px' }}>{this.userDoc?.presentationMode}</div>: <></>}
             </div>;
     }
     @computed get snapLines() {
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index e2ea81392..75855f5d9 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -50,6 +50,7 @@ import { CollectionFreeFormRemoteCursors } from "./CollectionFreeFormRemoteCurso
 import "./CollectionFreeFormView.scss";
 import { MarqueeView } from "./MarqueeView";
 import React = require("react");
+import e = require("connect-flash");
 
 export const panZoomSchema = createSchema({
     _panX: "number",
@@ -117,6 +118,8 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
     @observable _keyframeEditing = false;
     @observable ChildDrag: DocumentView | undefined; // child document view being dragged.  needed to update drop areas of groups when a group item is dragged.
 
+    @observable storedMovements: object[] = []; // stores the movement if in presenting mode
+
     @computed get views() { return this._layoutElements.filter(ele => ele.bounds && !ele.bounds.z).map(ele => ele.ele); }
     @computed get backgroundEvents() { return this.props.layerProvider?.(this.layoutDoc) === false && SnappingManager.GetIsDragging(); }
     @computed get backgroundActive() { return this.props.layerProvider?.(this.layoutDoc) === false && this.props.isContentActive(); }
@@ -956,8 +959,37 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         }
     }
 
+    followMovements = (): void => {
+        // need the first for subtraction
+        let first = null;
+
+        this.storedMovements.forEach(movement => {
+            if (first === null) first = movement.time;
+
+            // set the pan to what was stored
+            setTimeout(() => {
+                this.Document._panX = movement.panX;
+                this.Document._panY = movement.panY;
+            }, movement.time - first)
+        })
+
+        // for now, clear the movements
+        this.storedMovements = []
+    }
+
     @action
     setPan(panX: number, panY: number, panTime: number = 0, clamp: boolean = false) {
+        // if not presenting, just retrace the movements
+        if (Doc.UserDoc()?.presentationMode === 'watching') {
+            this.followMovements()
+            return;
+        }
+
+        if (Doc.UserDoc()?.presentationMode === 'recording') {
+            // store as many movments as possible
+            this.storedMovements.push({time: new Date().getTime(), panX, panY})
+        }
+
         if (!this.isAnnotationOverlay && clamp) {
             // this section wraps the pan position, horizontally and/or vertically whenever the content is panned out of the viewing bounds
             const docs = this.childLayoutPairs.map(pair => pair.layout).filter(doc => doc instanceof Doc);