From a5da5e6246a6fd7500fed8b206fc3540be509eab Mon Sep 17 00:00:00 2001
From: Jenny Yu <jennyyu212@outlook.com>
Date: Fri, 22 Apr 2022 19:53:44 -0400
Subject: uploading not working (cannot find ffmpeg)

---
 src/client/views/OverlayView.tsx | 387 ++++++++++++++++++++-------------------
 1 file changed, 194 insertions(+), 193 deletions(-)

(limited to 'src/client/views/OverlayView.tsx')

diff --git a/src/client/views/OverlayView.tsx b/src/client/views/OverlayView.tsx
index 0f51cf9b2..806abb990 100644
--- a/src/client/views/OverlayView.tsx
+++ b/src/client/views/OverlayView.tsx
@@ -20,212 +20,213 @@ import { DefaultStyleProvider } from "./StyleProvider";
 export type OverlayDisposer = () => void;
 
 export type OverlayElementOptions = {
-    x: number;
-    y: number;
-    width?: number;
-    height?: number;
-    title?: string;
+      x: number;
+      y: number;
+      width?: number;
+      height?: number;
+      title?: string;
 };
 
 export interface OverlayWindowProps {
-    children: JSX.Element;
-    overlayOptions: OverlayElementOptions;
-    onClick: () => void;
+      children: JSX.Element;
+      overlayOptions: OverlayElementOptions;
+      onClick: () => void;
 }
 
 @observer
 export class OverlayWindow extends React.Component<OverlayWindowProps> {
-    @observable x: number;
-    @observable y: number;
-    @observable width: number;
-    @observable height: number;
-    constructor(props: OverlayWindowProps) {
-        super(props);
-
-        const opts = props.overlayOptions;
-        this.x = opts.x;
-        this.y = opts.y;
-        this.width = opts.width || 200;
-        this.height = opts.height || 200;
-    }
-
-    onPointerDown = (_: React.PointerEvent) => {
-        document.removeEventListener("pointermove", this.onPointerMove);
-        document.removeEventListener("pointerup", this.onPointerUp);
-        document.addEventListener("pointermove", this.onPointerMove);
-        document.addEventListener("pointerup", this.onPointerUp);
-    }
-
-    onResizerPointerDown = (_: React.PointerEvent) => {
-        document.removeEventListener("pointermove", this.onResizerPointerMove);
-        document.removeEventListener("pointerup", this.onResizerPointerUp);
-        document.addEventListener("pointermove", this.onResizerPointerMove);
-        document.addEventListener("pointerup", this.onResizerPointerUp);
-    }
-
-    @action
-    onPointerMove = (e: PointerEvent) => {
-        this.x += e.movementX;
-        this.x = Math.max(Math.min(this.x, window.innerWidth - this.width), 0);
-        this.y += e.movementY;
-        this.y = Math.max(Math.min(this.y, window.innerHeight - this.height), 0);
-    }
-
-    @action
-    onResizerPointerMove = (e: PointerEvent) => {
-        this.width += e.movementX;
-        this.width = Math.max(this.width, 30);
-        this.height += e.movementY;
-        this.height = Math.max(this.height, 30);
-    }
-
-    onPointerUp = (e: PointerEvent) => {
-        document.removeEventListener("pointermove", this.onPointerMove);
-        document.removeEventListener("pointerup", this.onPointerUp);
-    }
-
-    onResizerPointerUp = (e: PointerEvent) => {
-        document.removeEventListener("pointermove", this.onResizerPointerMove);
-        document.removeEventListener("pointerup", this.onResizerPointerUp);
-    }
-
-    render() {
-        return (
-            <div className="overlayWindow-outerDiv" style={{ transform: `translate(${this.x}px, ${this.y}px)`, width: this.width, height: this.height }}>
-                <div className="overlayWindow-titleBar" onPointerDown={this.onPointerDown} >
-                    {this.props.overlayOptions.title || "Untitled"}
-                    <button onClick={this.props.onClick} className="overlayWindow-closeButton">X</button>
-                </div>
-                <div className="overlayWindow-content">
-                    {this.props.children}
-                </div>
-                <div className="overlayWindow-resizeDragger" onPointerDown={this.onResizerPointerDown}></div>
-            </div>
-        );
-    }
+      @observable x: number;
+      @observable y: number;
+      @observable width: number;
+      @observable height: number;
+      constructor(props: OverlayWindowProps) {
+            super(props);
+
+            const opts = props.overlayOptions;
+            this.x = opts.x;
+            this.y = opts.y;
+            this.width = opts.width || 200;
+            this.height = opts.height || 200;
+      }
+
+      onPointerDown = (_: React.PointerEvent) => {
+            document.removeEventListener("pointermove", this.onPointerMove);
+            document.removeEventListener("pointerup", this.onPointerUp);
+            document.addEventListener("pointermove", this.onPointerMove);
+            document.addEventListener("pointerup", this.onPointerUp);
+      }
+
+      onResizerPointerDown = (_: React.PointerEvent) => {
+            document.removeEventListener("pointermove", this.onResizerPointerMove);
+            document.removeEventListener("pointerup", this.onResizerPointerUp);
+            document.addEventListener("pointermove", this.onResizerPointerMove);
+            document.addEventListener("pointerup", this.onResizerPointerUp);
+      }
+
+      @action
+      onPointerMove = (e: PointerEvent) => {
+            this.x += e.movementX;
+            this.x = Math.max(Math.min(this.x, window.innerWidth - this.width), 0);
+            this.y += e.movementY;
+            this.y = Math.max(Math.min(this.y, window.innerHeight - this.height), 0);
+      }
+
+      @action
+      onResizerPointerMove = (e: PointerEvent) => {
+            this.width += e.movementX;
+            this.width = Math.max(this.width, 30);
+            this.height += e.movementY;
+            this.height = Math.max(this.height, 30);
+      }
+
+      onPointerUp = (e: PointerEvent) => {
+            document.removeEventListener("pointermove", this.onPointerMove);
+            document.removeEventListener("pointerup", this.onPointerUp);
+      }
+
+      onResizerPointerUp = (e: PointerEvent) => {
+            document.removeEventListener("pointermove", this.onResizerPointerMove);
+            document.removeEventListener("pointerup", this.onResizerPointerUp);
+      }
+
+      render() {
+            return (
+                  <div className="overlayWindow-outerDiv" style={{ transform: `translate(${this.x}px, ${this.y}px)`, width: this.width, height: this.height }}>
+                        <div className="overlayWindow-titleBar" onPointerDown={this.onPointerDown} >
+                              {this.props.overlayOptions.title || "Untitled"}
+                              <button onClick={this.props.onClick} className="overlayWindow-closeButton">X</button>
+                        </div>
+                        <div className="overlayWindow-content">
+                              {this.props.children}
+                        </div>
+                        <div className="overlayWindow-resizeDragger" onPointerDown={this.onResizerPointerDown}></div>
+                  </div>
+            );
+      }
 }
 
 @observer
 export class OverlayView extends React.Component {
-    public static Instance: OverlayView;
-    @observable.shallow
-    private _elements: JSX.Element[] = [];
-
-    constructor(props: any) {
-        super(props);
-        if (!OverlayView.Instance) {
-            OverlayView.Instance = this;
-        }
-    }
-
-    @action
-    addElement(ele: JSX.Element, options: OverlayElementOptions): OverlayDisposer {
-        const remove = action(() => {
-            const index = this._elements.indexOf(ele);
-            if (index !== -1) this._elements.splice(index, 1);
-        });
-        ele = <div key={Utils.GenerateGuid()} className="overlayView-wrapperDiv" style={{
-            transform: `translate(${options.x}px, ${options.y}px)`,
-            width: options.width,
-            height: options.height,
-            top: 0,
-            left: 0
-        }}>{ele}</div>;
-        this._elements.push(ele);
-        return remove;
-    }
-
-    @action
-    addWindow(contents: JSX.Element, options: OverlayElementOptions): OverlayDisposer {
-        const remove = action(() => {
-            const index = this._elements.indexOf(contents);
-            if (index !== -1) this._elements.splice(index, 1);
-        });
-        contents = <OverlayWindow onClick={remove} key={Utils.GenerateGuid()} overlayOptions={options}>{contents}</OverlayWindow>;
-        this._elements.push(contents);
-        return remove;
-    }
-
-
-    @computed get overlayDocs() {
-        return CurrentUserUtils.OverlayDocs?.map(d => {
-            let offsetx = 0, offsety = 0;
-            const dref = React.createRef<HTMLDivElement>();
-            const onPointerMove = action((e: PointerEvent, down: number[]) => {
-                if (e.buttons === 1) {
-                    d.x = e.clientX + offsetx;
-                    d.y = e.clientY + offsety;
-                }
-                if (e.metaKey) {
-                    const dragData = new DragManager.DocumentDragData([d]);
-                    dragData.offset = [-offsetx, -offsety];
-                    dragData.dropAction = "move";
-                    dragData.removeDocument = (doc: Doc | Doc[]) => {
-                        const docs = (doc instanceof Doc) ? [doc] : doc;
-                        docs.forEach(d => Doc.RemoveDocFromList(Cast(Doc.UserDoc().myOverlayDocs, Doc, null), "data", d));
-                        return true;
-                    };
-                    dragData.moveDocument = (doc: Doc | Doc[], targetCollection: Doc | undefined, addDocument: (doc: Doc | Doc[]) => boolean): boolean => {
-                        return dragData.removeDocument!(doc) ? addDocument(doc) : false;
-                    };
-                    DragManager.StartDocumentDrag([dref.current!], dragData, down[0], down[1]);
-                    return true;
-                }
-                return false;
+      public static Instance: OverlayView;
+      @observable.shallow
+      private _elements: JSX.Element[] = [];
+
+      constructor(props: any) {
+            super(props);
+            if (!OverlayView.Instance) {
+                  OverlayView.Instance = this;
+            }
+      }
+
+      @action
+      addElement(ele: JSX.Element, options: OverlayElementOptions): OverlayDisposer {
+            const remove = action(() => {
+                  const index = this._elements.indexOf(ele);
+                  if (index !== -1) this._elements.splice(index, 1);
             });
-
-            const onPointerDown = (e: React.PointerEvent) => {
-                setupMoveUpEvents(this, e, onPointerMove, emptyFunction, emptyFunction);
-                offsetx = NumCast(d.x) - e.clientX;
-                offsety = NumCast(d.y) - e.clientY;
-            };
-            return <div className="overlayView-doc" ref={dref} key={d[Id]} onPointerDown={onPointerDown} style={{ top: d.type === 'presentation' ? 0 : undefined, width: NumCast(d._width), height: NumCast(d._height), transform: `translate(${d.x}px, ${d.y}px)` }}>
-                <DocumentView
-                    Document={d}
-                    rootSelected={returnTrue}
-                    bringToFront={emptyFunction}
-                    addDocument={undefined}
-                    removeDocument={undefined}
-                    PanelWidth={returnOne}
-                    PanelHeight={returnOne}
-                    ScreenToLocalTransform={Transform.Identity}
-                    renderDepth={1}
-                    isDocumentActive={returnTrue}
-                    isContentActive={emptyFunction}
-                    whenChildContentsActiveChanged={emptyFunction}
-                    focus={DocUtils.DefaultFocus}
-                    styleProvider={DefaultStyleProvider}
-                    layerProvider={undefined}
-                    docViewPath={returnEmptyDoclist}
-                    addDocTab={returnFalse}
-                    pinToPres={emptyFunction}
-                    docFilters={returnEmptyFilter}
-                    docRangeFilters={returnEmptyFilter}
-                    searchFilterDocs={returnEmptyDoclist}
-                    ContainingCollectionView={undefined}
-                    ContainingCollectionDoc={undefined} />
-            </div>;
-        });
-    }
-
-    public static ShowSpinner() {
-        return OverlayView.Instance.addElement(<ReactLoading type="spinningBubbles" color="green" height={250} width={250} />, { x: 300, y: 200 });
-    }
-
-
-    render() {
-        return (
-            <div className="overlayView" id="overlayView">
-                <div>
-                    {this._elements}
-                </div>
-                <CollectionFreeFormLinksView key="freeformLinks" />
-                {this.overlayDocs}
-            </div>
-        );
-    }
+            ele = <div key={Utils.GenerateGuid()} className="overlayView-wrapperDiv" style={{
+                  transform: `translate(${options.x}px, ${options.y}px)`,
+                  width: options.width,
+                  height: options.height,
+                  top: 0,
+                  left: 0
+            }}>{ele}</div>;
+            this._elements.push(ele);
+            return remove;
+      }
+
+      @action
+      addWindow(contents: JSX.Element, options: OverlayElementOptions): OverlayDisposer {
+            const remove = action(() => {
+                  const index = this._elements.indexOf(contents);
+                  if (index !== -1) this._elements.splice(index, 1);
+            });
+            contents = <OverlayWindow onClick={remove} key={Utils.GenerateGuid()} overlayOptions={options}>{contents}</OverlayWindow>;
+            this._elements.push(contents);
+            return remove;
+      }
+
+
+      @computed get overlayDocs() {
+            return CurrentUserUtils.OverlayDocs?.map(d => {
+                  let offsetx = 0, offsety = 0;
+                  const dref = React.createRef<HTMLDivElement>();
+                  const onPointerMove = action((e: PointerEvent, down: number[]) => {
+                        if (e.buttons === 1) {
+                              d.x = e.clientX + offsetx;
+                              d.y = e.clientY + offsety;
+                        }
+                        if (e.metaKey) {
+                              const dragData = new DragManager.DocumentDragData([d]);
+                              dragData.offset = [-offsetx, -offsety];
+                              dragData.dropAction = "move";
+                              dragData.removeDocument = (doc: Doc | Doc[]) => {
+                                    const docs = (doc instanceof Doc) ? [doc] : doc;
+                                    docs.forEach(d => Doc.RemoveDocFromList(Cast(Doc.UserDoc().myOverlayDocs, Doc, null), "data", d));
+                                    return true;
+                              };
+                              dragData.moveDocument = (doc: Doc | Doc[], targetCollection: Doc | undefined, addDocument: (doc: Doc | Doc[]) => boolean): boolean => {
+                                    return dragData.removeDocument!(doc) ? addDocument(doc) : false;
+                              };
+                              DragManager.StartDocumentDrag([dref.current!], dragData, down[0], down[1]);
+                              return true;
+                        }
+                        return false;
+                  });
+
+                  const onPointerDown = (e: React.PointerEvent) => {
+                        setupMoveUpEvents(this, e, onPointerMove, emptyFunction, emptyFunction);
+                        offsetx = NumCast(d.x) - e.clientX;
+                        offsety = NumCast(d.y) - e.clientY;
+                  };
+
+                  return <div className="overlayView-doc" ref={dref} key={d[Id]} onPointerDown={onPointerDown} style={{ top: d.type === 'presentation' ? 0 : undefined, width: NumCast(d._width), height: NumCast(d._height), transform: `translate(${d.x}px, ${d.y}px)` }}>
+                        <DocumentView
+                              Document={d}
+                              rootSelected={returnTrue}
+                              bringToFront={emptyFunction}
+                              addDocument={undefined}
+                              removeDocument={undefined}
+                              PanelWidth={returnOne}
+                              PanelHeight={returnOne}
+                              ScreenToLocalTransform={Transform.Identity}
+                              renderDepth={1}
+                              isDocumentActive={returnTrue}
+                              isContentActive={emptyFunction}
+                              whenChildContentsActiveChanged={emptyFunction}
+                              focus={DocUtils.DefaultFocus}
+                              styleProvider={DefaultStyleProvider}
+                              layerProvider={undefined}
+                              docViewPath={returnEmptyDoclist}
+                              addDocTab={returnFalse}
+                              pinToPres={emptyFunction}
+                              docFilters={returnEmptyFilter}
+                              docRangeFilters={returnEmptyFilter}
+                              searchFilterDocs={returnEmptyDoclist}
+                              ContainingCollectionView={undefined}
+                              ContainingCollectionDoc={undefined} />
+                  </div>;
+            });
+      }
+
+      public static ShowSpinner() {
+            return OverlayView.Instance.addElement(<ReactLoading type="spinningBubbles" color="green" height={250} width={250} />, { x: 300, y: 200 });
+      }
+
+
+      render() {
+            return (
+                  <div className="overlayView" id="overlayView">
+                        <div>
+                              {this._elements}
+                        </div>
+                        <CollectionFreeFormLinksView key="freeformLinks" />
+                        {this.overlayDocs}
+                  </div>
+            );
+      }
 }
 // bcz: ugh ... want to be able to pass ScriptingRepl as tag argument, but that doesn't seem to work.. runtime error
 ScriptingGlobals.add(function addOverlayWindow(type: string, options: OverlayElementOptions) {
-    OverlayView.Instance.addWindow(<ScriptingRepl />, options);
+      OverlayView.Instance.addWindow(<ScriptingRepl />, options);
 });
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From 99ae2ccde9dbcf6bae75edea231d4b10c736a692 Mon Sep 17 00:00:00 2001
From: Jenny Yu <jennyyu212@outlook.com>
Date: Thu, 28 Apr 2022 17:09:13 -0400
Subject: feat: recording box turning into video + only one recording box

---
 package-lock.json                                  | 44 ++++++++++++++--------
 src/client/views/OverlayView.tsx                   |  4 +-
 src/client/views/nodes/DocumentView.tsx            |  2 +-
 .../views/nodes/RecordingBox/RecordingBox.tsx      |  4 +-
 src/client/views/nodes/trails/PresElementBox.tsx   | 16 +++++---
 5 files changed, 44 insertions(+), 26 deletions(-)

(limited to 'src/client/views/OverlayView.tsx')

diff --git a/package-lock.json b/package-lock.json
index 684caa92e..691f56160 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4775,16 +4775,6 @@
             "integrity": "sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=",
             "dev": true
         },
-        "d": {
-            "version": "1.0.1",
-            "resolved": "https://registry.npmjs.org/d/-/d-1.0.1.tgz",
-            "integrity": "sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==",
-            "dev": true,
-            "requires": {
-                "es5-ext": "^0.10.50",
-                "type": "^1.0.1"
-            }
-        },
         "d3-array": {
             "version": "2.12.1",
             "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz",
@@ -5812,8 +5802,8 @@
             "integrity": "sha512-/o+BXHmB7ocbHEAs6F2EnG0ogybVVUdkRunTT2glZU9XAaGmhqskrvKwqXuDfNjEO0LZKWdejEEpnq8aM0tOaw=="
         },
         "equation-editor-react": {
-            "version": "github:bobzel/equation-editor-react#75915e852b4b36a6a4cd3e1cbc80598da6b65227",
-            "from": "github:bobzel/equation-editor-react#useLocally",
+            "version": "git+ssh://git@github.com/bobzel/equation-editor-react.git#75915e852b4b36a6a4cd3e1cbc80598da6b65227",
+            "from": "equation-editor-react@github:bobzel/equation-editor-react#useLocally",
             "requires": {
                 "jquery": "^3.4.1",
                 "mathquill": "^0.10.1-a"
@@ -5912,6 +5902,18 @@
                 "d": "1",
                 "es5-ext": "^0.10.35",
                 "es6-symbol": "^3.1.1"
+            },
+            "dependencies": {
+                "d": {
+                    "version": "1.0.1",
+                    "resolved": "https://registry.npmjs.org/d/-/d-1.0.1.tgz",
+                    "integrity": "sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==",
+                    "dev": true,
+                    "requires": {
+                        "es5-ext": "^0.10.50",
+                        "type": "^1.0.1"
+                    }
+                }
             }
         },
         "es6-promise": {
@@ -5927,6 +5929,18 @@
             "requires": {
                 "d": "^1.0.1",
                 "ext": "^1.1.2"
+            },
+            "dependencies": {
+                "d": {
+                    "version": "1.0.1",
+                    "resolved": "https://registry.npmjs.org/d/-/d-1.0.1.tgz",
+                    "integrity": "sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==",
+                    "dev": true,
+                    "requires": {
+                        "es5-ext": "^0.10.50",
+                        "type": "^1.0.1"
+                    }
+                }
             }
         },
         "escalade": {
@@ -8002,14 +8016,14 @@
             "resolved": "https://registry.npmjs.org/image-size-stream/-/image-size-stream-1.1.0.tgz",
             "integrity": "sha1-Ivou2mbG31AQh0bacUkmSy0l+Gs=",
             "requires": {
-                "image-size": "github:netroy/image-size#da2c863807a3e9602617bdd357b0de3ab4a064c1",
+                "image-size": "image-size@git+https://github.com/netroy/image-size#da2c863807a3e9602617bdd357b0de3ab4a064c1",
                 "readable-stream": "^1.0.33",
                 "tryit": "^1.0.1"
             },
             "dependencies": {
                 "image-size": {
-                    "version": "github:netroy/image-size#da2c863807a3e9602617bdd357b0de3ab4a064c1",
-                    "from": "github:netroy/image-size#da2c863807a3e9602617bdd357b0de3ab4a064c1"
+                    "version": "git+ssh://git@github.com/netroy/image-size.git#da2c863807a3e9602617bdd357b0de3ab4a064c1",
+                    "from": "image-size@git+https://github.com/netroy/image-size#da2c863807a3e9602617bdd357b0de3ab4a064c1"
                 },
                 "isarray": {
                     "version": "0.0.1",
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);
             }
 
-- 
cgit v1.2.3-70-g09d2