1 files changed, 46 insertions, 9 deletions

diff --git a/src/client/views/nodes/trails/PresElementBox.tsx b/src/client/views/nodes/trails/PresElementBox.tsx
index f4f33482e..bc1cea505 100644
--- a/src/client/views/nodes/trails/PresElementBox.tsx
+++ b/src/client/views/nodes/trails/PresElementBox.tsx
@@ -43,6 +43,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
       @computed get presBox() { return Cast(this.lookupField("presBox"), Doc, null); }
       @computed get targetDoc() { return Cast(this.rootDoc.presentationTargetDoc, Doc, null) || this.rootDoc; }
 
+
       @observable isShowingVideo = false;
       @action setIsShowingVideo(shown: boolean) {
             this.isShowingVideo = shown
@@ -271,10 +272,31 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
             }
       }
 
+      @computed get recordingIsInOverlay() {
+            let isInOverlay = false
+            DocListCast((Doc.UserDoc().myOverlayDocs as Doc).data).forEach((doc) => {
+                  if (doc.slides === this.rootDoc) {
+                        isInOverlay = true
+                        return
+                  }
+            })
+            return isInOverlay
+      }
+
       @undoBatch
       @action
-      startRecording = (targetDoc: Doc, activeItem: Doc) => {
+      hideRecording = (targetDoc: Doc, activeItem: Doc) => {
+            console.log("hide recording")
+            DocListCast((Doc.UserDoc().myOverlayDocs as Doc).data).forEach((doc) => {
+                  if (doc.slides === activeItem) {
+                        Doc.RemoveDocFromList((Doc.UserDoc().myOverlayDocs as Doc), undefined, doc);
+                  }
+            })
+      }
 
+      @undoBatch
+      @action
+      startRecording = (targetDoc: Doc, activeItem: Doc) => {
             // Remove every recording that already exists in overlay view
             DocListCast((Doc.UserDoc().myOverlayDocs as Doc).data).forEach((doc) => {
                   if (doc.slides !== null) {
@@ -284,21 +306,24 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
 
             if (activeItem.recording) {
                   // if we already have an existing recording
+                  console.log("recording exists")
                   Doc.AddDocToList((Doc.UserDoc().myOverlayDocs as Doc), undefined, Cast(activeItem.recording, Doc, null));
 
             } else {
+                  console.log("creating new recording")
                   // if we dont have any recording
                   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);
                   recording.x = pt[0];
                   recording.y = pt[1];
                   Doc.AddDocToList((Doc.UserDoc().myOverlayDocs as Doc), undefined, recording);
             }
-
       }
 
       @computed
@@ -375,13 +400,25 @@ 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.recordingIsInOverlay ?
+                                          <Tooltip title={<><div className="dash-tooltip">{"Hide Recording"}</div></>}>
+                                                <div className="slideButton"
+                                                      onClick={() => this.hideRecording(targetDoc, activeItem)}
+                                                      style={{ fontWeight: 700 }}>
+                                                      <FontAwesomeIcon icon={"video-slash"} onPointerDown={e => e.stopPropagation()} />
+                                                </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}