feat: recording box turning into video + only one recording box

1 files changed, 10 insertions, 6 deletions

diff --git a/src/client/views/nodes/trails/PresElementBox.tsx b/src/client/views/nodes/trails/PresElementBox.tsx
index 05f1b0365..f4f33482e 100644
--- a/src/client/views/nodes/trails/PresElementBox.tsx
+++ b/src/client/views/nodes/trails/PresElementBox.tsx
@@ -2,7 +2,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Tooltip } from "@material-ui/core";
 import { action, computed, IReactionDisposer, observable, reaction } from "mobx";
 import { observer } from "mobx-react";
-import { DataSym, Doc, Opt } from "../../../../fields/Doc";
+import { DataSym, Doc, DocListCast, Opt } from "../../../../fields/Doc";
 import { Id } from "../../../../fields/FieldSymbols";
 import { Cast, NumCast, StrCast } from "../../../../fields/Types";
 import { emptyFunction, returnEmptyDoclist, returnFalse, returnTrue, setupMoveUpEvents } from "../../../../Utils";
@@ -275,23 +275,27 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
       @action
       startRecording = (targetDoc: Doc, activeItem: Doc) => {
 
-            // TODO: Remove everything that already exists
+            // Remove every recording that already exists in overlay view
+            DocListCast((Doc.UserDoc().myOverlayDocs as Doc).data).forEach((doc) => {
+                  if (doc.slides !== null) {
+                        Doc.RemoveDocFromList((Doc.UserDoc().myOverlayDocs as Doc), undefined, doc);
+                  }
+            })
+
             if (activeItem.recording) {
                   // if we already have an existing recording
                   Doc.AddDocToList((Doc.UserDoc().myOverlayDocs as Doc), undefined, Cast(activeItem.recording, Doc, null));
 
             } else {
                   // if we dont have any recording
-                  console.log(targetDoc.title, activeItem.title);
                   const recording = Docs.Create.WebCamDocument("", { _width: 400, _height: 200, title: "recording", system: true, cloneFieldFilter: new List<string>(["system"]) });
+                  // attach the recording to the slide, and attach the slide to the recording
+                  recording.slides = activeItem
                   activeItem.recording = recording
                   // TODO: Figure out exactly where we want the video to appear
                   const pt = this.props.ScreenToLocalTransform().inverse().transformPoint(0, 0);
-                  console.log("x: ", pt[0], "y: ", pt[1]);
                   recording.x = pt[0];
                   recording.y = pt[1];
-                  console.log(Doc.UserDoc().myOverlayDocs)
-                  // Doc.RemoveDocFromList((Doc.UserDoc().myOverlayDocs as Doc), undefined, this.rootDoc);
                   Doc.AddDocToList((Doc.UserDoc().myOverlayDocs as Doc), undefined, recording);
             }