fixed RecordingBox/View serialization to save docid, not Doc.

7 files changed, 102 insertions, 85 deletions

diff --git a/src/client/util/ReplayMovements.ts b/src/client/util/ReplayMovements.ts
index 40261985a..22cca4a2e 100644
--- a/src/client/util/ReplayMovements.ts
+++ b/src/client/util/ReplayMovements.ts
@@ -1,13 +1,11 @@
+import { IReactionDisposer, observable, reaction } from 'mobx';
+import { Doc, IdToDoc } from '../../fields/Doc';
+import { CollectionDockingView } from '../views/collections/CollectionDockingView';
 import { CollectionFreeFormView } from '../views/collections/collectionFreeForm';
-import { IReactionDisposer, observable, observe, reaction } from 'mobx';
-import { Doc } from '../../fields/Doc';
+import { OpenWhereMod } from '../views/nodes/DocumentView';
 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';
-import { returnTransparent } from '../../Utils';
 
 export class ReplayMovements {
     private timers: NodeJS.Timeout[] | null;
@@ -61,7 +59,7 @@ export class ReplayMovements {
             return;
         }
 
-        const docIdtoDoc = this.loadPresentation(presentation);
+        this.loadPresentation(presentation);
 
         this.videoBoxDisposeFunc = reaction(
             () => ({ playing: videoBox._playing, timeViewed: videoBox.player?.currentTime || 0 }),
@@ -94,13 +92,14 @@ export class ReplayMovements {
             throw '[recordingApi.ts] followMovements() failed: no presentation data';
         }
 
-        // generate a set of all unique docIds
-        const docs = new Set<Doc>();
-        for (const { doc } of movements) {
-            if (!docs.has(doc)) docs.add(doc);
-        }
-
-        return docs;
+        movements.forEach((movement, i) => {
+            if (typeof movement.doc === 'string') {
+                movements[i].doc = IdToDoc(movement.doc);
+                if (!movements[i].doc) {
+                    console.log('ERROR: tracked doc not found');
+                }
+            }
+        });
     };
 
     // returns undefined if the docView isn't open on the screen
diff --git a/src/client/util/TrackMovements.ts b/src/client/util/TrackMovements.ts
index 2f16307b3..cb8225643 100644
--- a/src/client/util/TrackMovements.ts
+++ b/src/client/util/TrackMovements.ts
@@ -234,7 +234,7 @@ export class TrackMovements {
         const movement: Movement = { time, panX, panY, scale, doc };
 
         // add that movement to the current presentation data's movement array
-        this.currentPresentation.movements && this.currentPresentation.movements.push(movement);
+        this.currentPresentation.movements?.push(movement);
     };
 
     // method that concatenates an array of presentatations into one
diff --git a/src/client/views/nodes/RecordingBox/RecordingBox.tsx b/src/client/views/nodes/RecordingBox/RecordingBox.tsx
index 0ff7c4292..f406ffbea 100644
--- a/src/client/views/nodes/RecordingBox/RecordingBox.tsx
+++ b/src/client/views/nodes/RecordingBox/RecordingBox.tsx
@@ -1,58 +1,64 @@
-import { action, observable } from "mobx";
-import { observer } from "mobx-react";
-import * as React from "react";
-import { VideoField } from "../../../../fields/URLField";
-import { Upload } from "../../../../server/SharedMediaTypes";
-import { ViewBoxBaseComponent } from "../../DocComponent";
-import { FieldView } from "../FieldView";
-import { VideoBox } from "../VideoBox";
+import { action, observable } from 'mobx';
+import { observer } from 'mobx-react';
+import * as React from 'react';
+import { VideoField } from '../../../../fields/URLField';
+import { Upload } from '../../../../server/SharedMediaTypes';
+import { ViewBoxBaseComponent } from '../../DocComponent';
+import { FieldView } from '../FieldView';
+import { VideoBox } from '../VideoBox';
 import { RecordingView } from './RecordingView';
-import { DocumentType } from "../../../documents/DocumentTypes";
-import { Presentation } from "../../../util/TrackMovements";
-import { Doc } from "../../../../fields/Doc";
-import { Id } from "../../../../fields/FieldSymbols";
-
+import { DocumentType } from '../../../documents/DocumentTypes';
+import { Presentation } from '../../../util/TrackMovements';
+import { Doc } from '../../../../fields/Doc';
+import { Id } from '../../../../fields/FieldSymbols';
 
 @observer
 export class RecordingBox extends ViewBoxBaseComponent() {
+    public static LayoutString(fieldKey: string) {
+        return FieldView.LayoutString(RecordingBox, fieldKey);
+    }
 
-      public static LayoutString(fieldKey: string) { return FieldView.LayoutString(RecordingBox, fieldKey); }
-
-      private _ref: React.RefObject<HTMLDivElement> = React.createRef();
+    private _ref: React.RefObject<HTMLDivElement> = React.createRef();
 
-      constructor(props: any) {
+    constructor(props: any) {
         super(props);
-      }
-
-      componentDidMount() {
-            Doc.SetNativeWidth(this.dataDoc, 1280);
-            Doc.SetNativeHeight(this.dataDoc, 720);
-      }
-
-      @observable result: Upload.AccessPathInfo | undefined = undefined
-      @observable videoDuration: number | undefined = undefined
-
-      @action
-      setVideoDuration = (duration: number) => {
-            this.videoDuration = duration
-      }
-
-      @action
-      setResult = (info: Upload.AccessPathInfo, presentation?: Presentation) => {
-            this.result = info
-            this.dataDoc.type = DocumentType.VID;
-            this.dataDoc[this.fieldKey + "-duration"] = this.videoDuration;
-
-            this.dataDoc.layout = VideoBox.LayoutString(this.fieldKey);
-            this.dataDoc[this.props.fieldKey] = new VideoField(this.result.accessPaths.client);
-            this.dataDoc[this.fieldKey + "-recorded"] = true;
-            // stringify the presentation and store it
-            presentation?.movements && (this.dataDoc[this.fieldKey + "-presentation"] = JSON.stringify(presentation));
-      }
-
-      render() {
-            return <div className="recordingBox" ref={this._ref}>
-                  {!this.result && <RecordingView setResult={this.setResult} setDuration={this.setVideoDuration} id={this.rootDoc.proto?.[Id] || ''} />}
-            </div>;
-      }
+    }
+
+    componentDidMount() {
+        Doc.SetNativeWidth(this.dataDoc, 1280);
+        Doc.SetNativeHeight(this.dataDoc, 720);
+    }
+
+    @observable result: Upload.AccessPathInfo | undefined = undefined;
+    @observable videoDuration: number | undefined = undefined;
+
+    @action
+    setVideoDuration = (duration: number) => {
+        this.videoDuration = duration;
+    };
+
+    @action
+    setResult = (info: Upload.AccessPathInfo, presentation?: Presentation) => {
+        this.result = info;
+        this.dataDoc.type = DocumentType.VID;
+        this.dataDoc[this.fieldKey + '-duration'] = this.videoDuration;
+
+        this.dataDoc.layout = VideoBox.LayoutString(this.fieldKey);
+        this.dataDoc[this.props.fieldKey] = new VideoField(this.result.accessPaths.client);
+        this.dataDoc[this.fieldKey + '-recorded'] = true;
+        // stringify the presentation and store it
+        if (presentation?.movements) {
+            const presCopy = { ...presentation };
+            presCopy.movements = presentation.movements.map(movement => ({ ...movement, doc: movement.doc[Id] })) as any;
+            this.dataDoc[this.fieldKey + '-presentation'] = JSON.stringify(presCopy);
+        }
+    };
+
+    render() {
+        return (
+            <div className="recordingBox" ref={this._ref}>
+                {!this.result && <RecordingView setResult={this.setResult} setDuration={this.setVideoDuration} id={this.rootDoc.proto?.[Id] || ''} />}
+            </div>
+        );
+    }
 }
diff --git a/src/client/views/nodes/RecordingBox/RecordingView.tsx b/src/client/views/nodes/RecordingBox/RecordingView.tsx
index 6efe62e0b..424ebc384 100644
--- a/src/client/views/nodes/RecordingBox/RecordingView.tsx
+++ b/src/client/views/nodes/RecordingBox/RecordingView.tsx
@@ -1,14 +1,14 @@
 import * as React from 'react';
-import './RecordingView.scss';
 import { useEffect, useRef, useState } from 'react';
-import { ProgressBar } from './ProgressBar';
-import { MdBackspace } from 'react-icons/md';
-import { FaCheckCircle } from 'react-icons/fa';
 import { IconContext } from 'react-icons';
-import { Networking } from '../../../Network';
+import { FaCheckCircle } from 'react-icons/fa';
+import { MdBackspace } from 'react-icons/md';
 import { Upload } from '../../../../server/SharedMediaTypes';
 import { returnFalse, returnTrue, setupMoveUpEvents } from '../../../../Utils';
+import { Networking } from '../../../Network';
 import { Presentation, TrackMovements } from '../../../util/TrackMovements';
+import { ProgressBar } from './ProgressBar';
+import './RecordingView.scss';
 
 export interface MediaSegment {
     videoChunks: any[];
diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts
index 93c28cf08..0ec881c48 100644
--- a/src/fields/Doc.ts
+++ b/src/fields/Doc.ts
@@ -1703,8 +1703,11 @@ export namespace Doc {
     }
 }
 
+export function IdToDoc(id: string) {
+    return DocCast(DocServer.GetCachedRefField(id));
+}
 ScriptingGlobals.add(function idToDoc(id: string): any {
-    return DocServer.GetCachedRefField(id);
+    return IdToDoc(id);
 });
 ScriptingGlobals.add(function renameAlias(doc: any) {
     return StrCast(Doc.GetProto(doc).title).replace(/\([0-9]*\)/, '') + `(${doc.aliasNumber})`;
diff --git a/src/server/DashUploadUtils.ts b/src/server/DashUploadUtils.ts
index f461cf3fa..070d49ec3 100644
--- a/src/server/DashUploadUtils.ts
+++ b/src/server/DashUploadUtils.ts
@@ -70,7 +70,14 @@ export namespace DashUploadUtils {
         // make a list of paths to create the ordered text file for ffmpeg
         const filePathsText = filePaths.map(filePath => `file '${filePath}'`).join('\n');
         // write the text file to the file system
-        writeFile(textFilePath, filePathsText, err => console.log(err));
+        await new Promise<void>((res, reject) =>
+            writeFile(textFilePath, filePathsText, err => {
+                if (err) {
+                    reject();
+                    console.log(err);
+                } else res();
+            })
+        );
 
         // make output file name based on timestamp
         const outputFileName = `output-${Utils.GenerateGuid()}.mp4`;
@@ -86,7 +93,10 @@ export namespace DashUploadUtils {
                 .outputOptions('-c copy')
                 //.videoCodec("copy")
                 .save(outputFilePath)
-                .on('error', reject)
+                .on('error', (err: any) => {
+                    console.log(err);
+                    reject();
+                })
                 .on('end', resolve);
         });
 
diff --git a/src/server/websocket.ts b/src/server/websocket.ts
index a11d20cfa..2acdaa5a3 100644
--- a/src/server/websocket.ts
+++ b/src/server/websocket.ts
@@ -51,7 +51,7 @@ export namespace WebSocket {
                 next();
             });
 
-            socket.emit(MessageStore.UpdateStats.Message, DashStats.getUpdatedStatsBundle())
+            socket.emit(MessageStore.UpdateStats.Message, DashStats.getUpdatedStatsBundle());
 
             // convenience function to log server messages on the client
             function log(message?: any, ...optionalParams: any[]) {
@@ -104,14 +104,12 @@ export namespace WebSocket {
             socket.on('disconnect', function () {
                 let currentUser = socketMap.get(socket);
                 if (!(currentUser === undefined)) {
-                    let currentUsername = currentUser.split(' ')[0]
+                    let currentUsername = currentUser.split(' ')[0];
                     DashStats.logUserLogout(currentUsername, socket);
-                    delete timeMap[currentUsername]
+                    delete timeMap[currentUsername];
                 }
             });
 
-
-
             Utils.Emit(socket, MessageStore.Foo, 'handshooken');
 
             Utils.AddServerHandler(socket, MessageStore.Bar, guid => barReceived(socket, guid));
@@ -146,10 +144,10 @@ export namespace WebSocket {
             };
         });
 
-        setInterval(function() {
+        setInterval(function () {
             // Utils.Emit(socket, MessageStore.UpdateStats, DashStats.getUpdatedStatsBundle());
 
-            io.emit(MessageStore.UpdateStats.Message, DashStats.getUpdatedStatsBundle())
+            io.emit(MessageStore.UpdateStats.Message, DashStats.getUpdatedStatsBundle());
         }, DashStats.SAMPLING_INTERVAL);
     }
 
@@ -193,7 +191,7 @@ export namespace WebSocket {
     }
 
     function barReceived(socket: SocketIO.Socket, userEmail: string) {
-         clients[userEmail] = new Client(userEmail.toString());
+        clients[userEmail] = new Client(userEmail.toString());
         const currentdate = new Date();
         const datetime = currentdate.getDate() + '/' + (currentdate.getMonth() + 1) + '/' + currentdate.getFullYear() + ' @ ' + currentdate.getHours() + ':' + currentdate.getMinutes() + ':' + currentdate.getSeconds();
         console.log(blue(`user ${userEmail} has connected to the web socket at: ${datetime}`));
@@ -326,8 +324,7 @@ export namespace WebSocket {
         const remListItems = diff.diff.$set[updatefield].fields;
         const curList = (curListItems as any)?.fields?.[updatefield.replace('fields.', '')]?.fields.filter((f: any) => f !== null) || [];
         diff.diff.$set[updatefield].fields = curList?.filter(
-            (curItem: any) => !remListItems.some((remItem: any) => (remItem.fieldId ? remItem.fieldId === curItem.fieldId :
-                 remItem.heading ? remItem.heading === curItem.heading : remItem === curItem))
+            (curItem: any) => !remListItems.some((remItem: any) => (remItem.fieldId ? remItem.fieldId === curItem.fieldId : remItem.heading ? remItem.heading === curItem.heading : remItem === curItem))
         );
         const sendBack = diff.diff.length !== diff.diff.$set[updatefield].fields.length;
         delete diff.diff.length;
@@ -373,9 +370,11 @@ export namespace WebSocket {
     var CurUser: string | undefined = undefined;
 
     function UpdateField(socket: Socket, diff: Diff) {
-        let currentUsername = socketMap.get(socket)!.split(' ')[0];
+        const curUser = socketMap.get(socket);
+        if (!curUser) return;
+        let currentUsername = curUser.split(' ')[0];
         userOperations.set(currentUsername, userOperations.get(currentUsername) !== undefined ? userOperations.get(currentUsername)! + 1 : 0);
-        
+
         if (CurUser !== socketMap.get(socket)) {
             CurUser = socketMap.get(socket);
             console.log('Switch User: ' + CurUser);