updates

3 files changed, 44 insertions, 3 deletions

diff --git a/src/client/views/OverlayView.scss b/src/client/views/OverlayView.scss
index 555f4298d..02ea5e53b 100644
--- a/src/client/views/OverlayView.scss
+++ b/src/client/views/OverlayView.scss
@@ -1,3 +1,13 @@
+.overlayView {
+    position: absolute;
+    pointer-events: none;
+    top: 0;
+    width: 100vw;
+    height: 100vh;
+    /* background-color: pink; */
+    z-index: 100000;
+}
+
 .overlayWindow-outerDiv {
     border-radius: 5px;
     overflow: hidden;
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 103c3624d..3f1a703bf 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -1296,6 +1296,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         const xshift = () => (this.props.Document.isInkMask ? InkingStroke.MaskDim : Math.abs(this.Xshift) <= 0.001 ? this.props.PanelWidth() : undefined);
         const yshift = () => (this.props.Document.isInkMask ? InkingStroke.MaskDim : Math.abs(this.Yshift) <= 0.001 ? this.props.PanelHeight() : undefined);
         const isButton: boolean = this.props.Document.type === DocumentType.FONTICON || this.props.Document._viewType === CollectionViewType.Linear;
+        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}
@@ -1303,8 +1304,8 @@ export class DocumentView extends React.Component<DocumentViewProps> {
                         transition: this.props.dataTransition,
                         position: this.props.Document.isInkMask ? "absolute" : undefined,
                         transform: isButton ? undefined : `translate(${this.centeringX}px, ${this.centeringY}px)`,
-                        width: isButton ? "100%" : xshift() ?? `${100 * (this.props.PanelWidth() - this.Xshift * 2) / this.props.PanelWidth()}%`,
-                        height: (!this.props.ignoreAutoHeight && this.layoutDoc.autoHeight && this.layoutDoc.type === DocumentType.RTF) || isButton || this.props.forceAutoHeight ? undefined : yshift() ?? (this.fitWidth ? `${this.panelHeight}px` :
+                        width: isOverlay ? undefined : isButton ? "100%" : xshift() ?? `${100 * (this.props.PanelWidth() - this.Xshift * 2) / this.props.PanelWidth()}%`,
+                        height: isOverlay ? undefined : (!this.props.ignoreAutoHeight && this.layoutDoc.autoHeight && this.layoutDoc.type === DocumentType.RTF) || isButton || this.props.forceAutoHeight ? undefined : yshift() ?? (this.fitWidth ? `${this.panelHeight}px` :
                             `${100 * this.effectiveNativeHeight / this.effectiveNativeWidth * this.props.PanelWidth() / this.props.PanelHeight()}%`),
                     }}>
                     <DocumentViewInternal {...this.props}
diff --git a/src/client/views/nodes/trails/PresElementBox.tsx b/src/client/views/nodes/trails/PresElementBox.tsx
index a4ec559f5..766676e95 100644
--- a/src/client/views/nodes/trails/PresElementBox.tsx
+++ b/src/client/views/nodes/trails/PresElementBox.tsx
@@ -6,7 +6,7 @@ import { DataSym, Doc, Opt } from "../../../../fields/Doc";
 import { Id } from "../../../../fields/FieldSymbols";
 import { Cast, NumCast, StrCast } from "../../../../fields/Types";
 import { emptyFunction, returnEmptyDoclist, returnFalse, returnTrue, setupMoveUpEvents } from "../../../../Utils";
-import { DocUtils } from "../../../documents/Documents";
+import { Docs, DocUtils } from "../../../documents/Documents";
 import { DocumentType } from "../../../documents/DocumentTypes";
 import { CurrentUserUtils } from "../../../util/CurrentUserUtils";
 import { DocumentManager } from "../../../util/DocumentManager";
@@ -23,6 +23,7 @@ import { PresBox } from "./PresBox";
 import "./PresElementBox.scss";
 import { PresMovement } from "./PresEnums";
 import React = require("react");
+import { List } from "../../../../fields/List";
 /**
  * This class models the view a document added to presentation will have in the presentation.
  * It involves some functionality for its buttons and options.
@@ -265,6 +266,28 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
         }
     }
 
+    @undoBatch
+    @action 
+    startRecording = (targetDoc: Doc, activeItem: Doc) => {
+        // If we already have an existing recording
+        // TODO: Remove everything that already exists
+        if (activeItem.recording) {
+            Doc.AddDocToList((Doc.UserDoc().myOverlayDocs as Doc), undefined, Cast(activeItem.recording, Doc, null));
+        // Recording has not yet been created
+        } else {
+            console.log(targetDoc.title, activeItem.title);
+            const recording = Docs.Create.WebCamDocument("", { _width: 400, _height: 200, title: "recording", system: true, cloneFieldFilter: new List<string>(["system"]) });
+            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];
+            Doc.AddDocToList((Doc.UserDoc().myOverlayDocs as Doc), undefined, recording);
+        }
+        
+    }
+
     @computed
     get toolbarWidth(): number {
         const presBoxDocView = DocumentManager.Instance.getDocumentView(this.presBox);
@@ -339,6 +362,13 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                 onClick={() => this.updateView(targetDoc, activeItem)}
                                 style={{ fontWeight: 700, display: activeItem.presPinView ? "flex" : "none" }}>V</div>
                         </Tooltip>
+                        <Tooltip title={<><div className="dash-tooltip">{"Start recording"}</div></>}>
+                            <div className="slideButton"
+                                onClick={() => this.startRecording(targetDoc, activeItem)}
+                                style={{ fontWeight: 700 }}>
+                                    <FontAwesomeIcon icon={"video"} onPointerDown={e => e.stopPropagation()} />
+                                </div>
+                        </Tooltip>
                         {this.indexInPres === 0 ? (null) : <Tooltip title={<><div className="dash-tooltip">{activeItem.groupWithUp ? "Ungroup" : "Group with up"}</div></>}>
                             <div className="slideButton"
                                 onClick={() => activeItem.groupWithUp = !activeItem.groupWithUp}