1 files changed, 31 insertions, 1 deletions
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}