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

4 files changed, 15 insertions, 11 deletions

diff --git a/src/client/views/OverlayView.tsx b/src/client/views/OverlayView.tsx
index 806abb990..f86406997 100644
--- a/src/client/views/OverlayView.tsx
+++ b/src/client/views/OverlayView.tsx
@@ -187,8 +187,8 @@ export class OverlayView extends React.Component {
                               bringToFront={emptyFunction}
                               addDocument={undefined}
                               removeDocument={undefined}
-                              PanelWidth={returnOne}
-                              PanelHeight={returnOne}
+                              PanelWidth={() => NumCast(d._width)}
+                              PanelHeight={() => NumCast(d._height)}
                               ScreenToLocalTransform={Transform.Identity}
                               renderDepth={1}
                               isDocumentActive={returnTrue}
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 78c6c9776..f48173975 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -1317,7 +1317,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
             const yshift = () => (this.props.Document.isInkMask ? InkingStroke.MaskDim : Math.abs(this.Yshift) <= 0.001 ? this.props.PanelHeight() : undefined);
             const isPresTreeElement: boolean = this.props.treeViewDoc?.type === DocumentType.PRES;
             const isButton: boolean = this.props.Document.type === DocumentType.FONTICON || this.props.Document._viewType === CollectionViewType.Linear;
-            const isOverlay: boolean = CurrentUserUtils.OverlayDocs.includes(this.props.Document);
+            // const isOverlay: boolean = CurrentUserUtils.OverlayDocs.includes(this.props.Document);
             return (<div className="contentFittingDocumentView">
                   {!this.props.Document || !this.props.PanelWidth() ? (null) : (
                         <div className="contentFittingDocumentView-previewDoc" ref={this.ContentRef}
diff --git a/src/client/views/nodes/RecordingBox/RecordingBox.tsx b/src/client/views/nodes/RecordingBox/RecordingBox.tsx
index 6f9451925..86358e838 100644
--- a/src/client/views/nodes/RecordingBox/RecordingBox.tsx
+++ b/src/client/views/nodes/RecordingBox/RecordingBox.tsx
@@ -39,8 +39,8 @@ export class RecordingBox extends ViewBoxBaseComponent() {
             this.dataDoc[this.fieldKey + "-duration"] = this.videoDuration;
 
             this.layoutDoc.layout = VideoBox.LayoutString(this.fieldKey);
-            this.dataDoc.nativeWidth = this.dataDoc.nativeHeight = undefined;
-            this.layoutDoc._fitWidth = undefined;
+            // this.dataDoc.nativeWidth = this.dataDoc.nativeHeight = undefined;
+            // this.layoutDoc._fitWidth = undefined;
             this.dataDoc[this.props.fieldKey] = new VideoField(this.result.accessPaths.agnostic.client);
       }
 
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);
             }