Merge pull request #605 from browngraphicslab/presentation_updates

Presentation updates

10 files changed, 220 insertions, 211 deletions

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 536baadd4..2d988d322 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -478,7 +478,7 @@ export class CurrentUserUtils {
             title,
             toolTip,
             ignoreClick,
-            dropAction: "copy",
+            dropAction: "alias",
             onDragStart: drag ? ScriptField.MakeFunction(drag) : undefined,
             onClick: click ? ScriptField.MakeScript(click) : undefined,
             ischecked: ischecked ? ComputedField.MakeFunction(ischecked) : undefined,
@@ -853,12 +853,12 @@ export class CurrentUserUtils {
     // Import sidebar is where shared documents are contained
     static setupImportSidebar(doc: Doc) {
         if (doc["sidebar-import-documents"] === undefined) {
-            doc["sidebar-import-documents"] = new PrefetchProxy(Docs.Create.StackingDocument([], { title: "Imported Documents", _showTitle: "title", _height: 300, _yMargin: 30, childDropAction: "alias" }));
+            doc["sidebar-import-documents"] = new PrefetchProxy(Docs.Create.StackingDocument([], { title: "Imported Documents", forceActive: true, _showTitle: "title", childDropAction: "alias", _autoHeight: true, _yMargin: 30, lockedPosition: true, _chromeStatus: "disabled" }));
         }
         if (doc["sidebar-import"] === undefined) {
             const uploads = Cast(doc["sidebar-import-documents"], Doc, null) as Doc;
-            const newUpload = CurrentUserUtils.ficon({ onClick: ScriptField.MakeScript("importDocument()"), toolTip: "Import external document", _backgroundColor: "black", title: "Import", icon: "upload", system: true });
-            doc["sidebar-import"] = new PrefetchProxy(Docs.Create.StackingDocument([newUpload, uploads], { title: "Imported Documents", _yMargin: 30, childDropAction: "alias" }));
+            const newUpload = CurrentUserUtils.ficon({ onClick: ScriptField.MakeScript("importDocument()"), toolTip: "Import External document", _backgroundColor: "black", title: "Import", icon: "upload", system: true });
+            doc["sidebar-import"] = new PrefetchProxy(Docs.Create.StackingDocument([newUpload, uploads], { title: "Imported Documents", _yMargin: 20, ignoreClick: true, lockedPosition: true }));
         }
     }
 
diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts
index 4b1860b5c..0cca61841 100644
--- a/src/client/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -210,7 +210,7 @@ export namespace DragManager {
                 docDragData.droppedDocuments =
                     dragData.draggedDocuments.map(d => !dragData.isSelectionMove && !dragData.userDropAction && ScriptCast(d.onDragStart) ? addAudioTag(ScriptCast(d.onDragStart).script.run({ this: d }).result) :
                         docDragData.dropAction === "alias" ? Doc.MakeAlias(d) :
-                            docDragData.dropAction === "copy" ? Doc.MakeDelegate(d) : d);
+                            docDragData.dropAction === "copy" ? Doc.MakeClone(d) : d);
                 docDragData.dropAction !== "same" && docDragData.droppedDocuments.forEach((drop: Doc, i: number) => {
                     const dragProps = Cast(dragData.draggedDocuments[i].removeDropProperties, listSpec("string"), []);
                     const remProps = (dragData?.removeDropProperties || []).concat(Array.from(dragProps));
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 6ab335b85..d0f543d16 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -899,6 +899,7 @@ export class MainView extends React.Component {
         const sidebarDocView = DocumentManager.Instance.getDocumentView(sidebar);
         const input = document.createElement("input");
         input.type = "file";
+        input.multiple = true;
         input.accept = ".zip, application/pdf, video/*, image/*, audio/*";
         input.onchange = async _e => {
             const upload = Utils.prepend("/uploadDoc");
diff --git a/src/client/views/OverlayView.scss b/src/client/views/OverlayView.scss
index 09a349012..555f4298d 100644
--- a/src/client/views/OverlayView.scss
+++ b/src/client/views/OverlayView.scss
@@ -44,6 +44,6 @@
 }
 
 .overlayView-doc {
-    z-index: 1;
+    z-index: 9002; //so that it appears above chroma 
     position: absolute;
 }
\ No newline at end of file
diff --git a/src/client/views/OverlayView.tsx b/src/client/views/OverlayView.tsx
index 5c3a8185c..49580cde4 100644
--- a/src/client/views/OverlayView.tsx
+++ b/src/client/views/OverlayView.tsx
@@ -182,7 +182,7 @@ export class OverlayView extends React.Component {
                 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={{ width: NumCast(d._width), height: NumCast(d._height), transform: `translate(${d.x}px, ${d.y}px)` }}>
+            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}
                     LibraryPath={emptyPath}
diff --git a/src/client/views/collections/CollectionDockingView.scss b/src/client/views/collections/CollectionDockingView.scss
index 4204ef5bb..6ebd5103b 100644
--- a/src/client/views/collections/CollectionDockingView.scss
+++ b/src/client/views/collections/CollectionDockingView.scss
@@ -20,82 +20,6 @@
     }
 }
 
-.miniPres:hover {
-    opacity: 1;
-}
-
-.miniPres {
-    position: absolute;
-    overflow: hidden;
-    right: 10;
-    top: 10;
-    opacity: 0.1;
-    transition: all 0.4s;
-    /* border: solid 1px; */
-    color: white;
-    /* box-shadow: black 0.4vw 0.4vw 0.8vw; */
-    
-    .miniPresOverlay {
-        display: grid;
-        grid-template-columns: auto auto auto auto auto auto auto auto;
-        grid-template-rows: 100%;
-        height: 100%;
-        justify-items: center;
-        align-items: center;
-
-        .miniPres-button-text {
-            display: flex;
-            height: 20;
-            font-weight: 400;
-            min-width: 100%;
-            border-radius: 5px;
-            align-items: center;
-            justify-content: center;
-            transition: all 0.3s;
-        }
-
-        .miniPres-button-frame {
-            justify-self: center;
-            align-self: center;
-            align-items: center;
-            display: grid;
-            grid-template-columns: auto auto auto;
-            justify-content: space-around;
-            font-size: 11;
-            margin-left: 7;
-            width: 30;
-            height: 85%;
-            background-color: rgba(91, 157, 221, 0.4);
-            border-radius: 5px;
-        }
-
-        .miniPres-divider {
-            width: 0.5px;
-            height: 80%;
-            border-right: solid 2px #5a5a5a;
-        }
-
-        .miniPres-button {
-            display: flex;
-            height: 20;
-            min-width: 20;
-            border-radius: 100%;
-            align-items: center;
-            justify-content: center;
-            transition: all 0.3s;
-        }
-
-        .miniPres-button:hover {
-            background-color: #5a5a5a;
-        }
-
-        .miniPres-button-text:hover {
-            background-color: #5a5a5a;
-        }
-    }
-}
-
-
 .lm_title {
     margin-top: 3px;
     border-radius: 5px;
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 998e41bd2..43da0d3cf 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -191,31 +191,6 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
         return retVal;
     }
 
-    @undoBatch
-    @action
-    public static ReplaceTab(document: Doc, stack: any): Opt<Doc> {
-        if (!CollectionDockingView.Instance) return undefined;
-        const instance = CollectionDockingView.Instance;
-        const replaceTab = (doc: Doc, child: any): Opt<Doc> => {
-            for (const contentItem of child.contentItems) {
-                const { config, isStack, isRow, isColumn } = contentItem;
-                if (isRow || isColumn || isStack) {
-                    const val = replaceTab(doc, contentItem);
-                    if (val) return val;
-                } else if (config.component === "DocumentFrameRenderer" &&
-                    config.props.documentId === doc[Id]) {
-                    const alias = Doc.MakeAlias(doc);
-                    config.props.documentId = alias[Id];
-                    config.title = alias.title;
-                    instance.stateChanged();
-                    return alias;
-                }
-            }
-            return undefined;
-        };
-        return replaceTab(document, instance._goldenLayout.root);
-    }
-
     //
     //  Creates a vertical split on the right side of the docking view, and then adds the Document to the right of that split
     //
@@ -358,6 +333,32 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
         return true;
     }
 
+    @undoBatch
+    @action
+    public ReplaceTab = (stack: any, document: Doc, libraryPath?: Doc[]) => {
+        Doc.GetProto(document).lastOpened = new DateField;
+        const docContentConfig = CollectionDockingView.makeDocumentConfig(document, undefined, libraryPath);
+        if (stack === undefined) {
+            let stack: any = this._goldenLayout.root;
+            while (!stack.isStack) {
+                if (stack.contentItems.length) {
+                    stack = stack.contentItems[0];
+                } else {
+                    stack.addChild({ type: 'stack', content: [docContentConfig] });
+                    stack = undefined;
+                    break;
+                }
+            }
+            if (stack) {
+                stack.addChild(docContentConfig);
+            }
+        } else {
+            stack.addChild(docContentConfig, undefined);
+        }
+        this.layoutChanged();
+        return true;
+    }
+
     setupGoldenLayout() {
         const config = StrCast(this.props.Document.dockingConfig);
         if (config) {
@@ -839,12 +840,8 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> {
         } else if (location === "close") {
             return CollectionDockingView.CloseRightSplit(doc);
         } else if (location === "replace") {
-            const alias = CollectionDockingView.ReplaceTab(doc, this._stack);
-            if (alias) {
-                runInAction(() => this._document = alias);
-                return true;
-            }
-            return false;
+            CollectionDockingView.UseRightSplit(doc);
+            return true;
         } else {// if (location === "inPlace") {
             return CollectionDockingView.Instance.AddTab(this._stack, doc, libraryPath);
         }
@@ -875,26 +872,7 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> {
         const currentFrame = Cast(presTargetDoc.currentFrame, "number", null);
         return currentFrame;
     }
-    renderMiniPres() {
-        return (
-            <div className="miniPres"
-                style={{ width: 250, height: 30, background: '#323232' }}
-            >
-                {<div className="miniPresOverlay">
-                    <div className="miniPres-button" onClick={PresBox.Instance.back}><FontAwesomeIcon icon={"arrow-left"} /></div>
-                    <div className="miniPres-button" onClick={() => PresBox.Instance.startAutoPres(PresBox.Instance.itemIndex)}><FontAwesomeIcon icon={PresBox.Instance.layoutDoc.presStatus === "auto" ? "pause" : "play"} /></div>
-                    <div className="miniPres-button" onClick={PresBox.Instance.next}><FontAwesomeIcon icon={"arrow-right"} /></div>
-                    <div className="miniPres-divider"></div>
-                    <div className="miniPres-button-text">
-                        Slide {PresBox.Instance.itemIndex + 1} / {PresBox.Instance.childDocs.length}
-                        {PresBox.Instance.playButtonFrames}
-                    </div>
-                    <div className="miniPres-divider"></div>
-                    <div className="miniPres-button-text" onClick={PresBox.Instance.updateMinimize}>EXIT</div>
-                </div>}
-            </div>
-        );
-    }
+
     renderMiniMap() {
         return <div className="miniMap" style={{
             width: this.returnMiniSize(), height: this.returnMiniSize(), background: StrCast(this._document!._backgroundColor,
@@ -977,7 +955,6 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> {
                 ContainingCollectionView={undefined}
                 ContainingCollectionDoc={undefined} />
             {document._viewType === CollectionViewType.Freeform && !this._document?.hideMinimap ? this.renderMiniMap() : (null)}
-            {document._viewType === CollectionViewType.Freeform && this._document?.miniPres ? this.renderMiniPres() : (null)}
         </>;
     }
 
diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx
index 011b6ff87..900963eb0 100644
--- a/src/client/views/nodes/AudioBox.tsx
+++ b/src/client/views/nodes/AudioBox.tsx
@@ -510,7 +510,6 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD
     labelScript = () => AudioBox.LabelScript;
 
     render() {
-        AudioBox.Instance = this;
         const interactive = SnappingManager.GetIsDragging() || this.active() ? "-interactive" : "";
         this._first = true;  // for indicating the first marker that is rendered
         this.path && this._buckets.length !== 100 ? this.peaks : null; // render waveform if audio is done recording
diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss
index 54accb012..c4d8f1a4f 100644
--- a/src/client/views/nodes/PresBox.scss
+++ b/src/client/views/nodes/PresBox.scss
@@ -13,7 +13,7 @@ $light-background: #ececec;
     width: 100%;
     min-width: 20px;
     height: 100%;
-    min-height: 41px;
+    min-height: 35px;
     letter-spacing: 2px;
     overflow: hidden;
     transition: 0.7s opacity ease;
@@ -801,7 +801,7 @@ $light-background: #ececec;
     }
 
 
-    .miniPresOverlay {
+    .presPanelOverlay {
         background-color: #323232;
         color: white;
         border-radius: 5px;
@@ -816,7 +816,7 @@ $light-background: #ececec;
         right: 10px;
         transition: all 0.2s;
 
-        .miniPres-button-text {
+        .presPanel-button-text {
             display: flex;
             height: 20;
             width: max-content;
@@ -833,13 +833,13 @@ $light-background: #ececec;
             transition: all 0.3s;
         }
 
-        .miniPres-divider {
+        .presPanel-divider {
             width: 0.5px;
             height: 80%;
             border-right: solid 1px #5a5a5a;
         }
 
-        .miniPres-button-frame {
+        .presPanel-button-frame {
             justify-self: center;
             align-self: center;
             align-items: center;
@@ -854,7 +854,7 @@ $light-background: #ececec;
             border-radius: 5px;
         }
 
-        .miniPres-button {
+        .presPanel-button {
             cursor: pointer;
             display: flex;
             height: 20;
@@ -867,11 +867,11 @@ $light-background: #ececec;
             transition: all 0.3s;
         }
 
-        .miniPres-button:hover {
+        .presPanel-button:hover {
             background-color: #5a5a5a;
         }
 
-        .miniPres-button-text:hover {
+        .presPanel-button-text:hover {
             background-color: #5a5a5a;
         }
     }
@@ -950,4 +950,82 @@ $light-background: #ececec;
     .select {
         font-size: 100%;
     }
-}
\ No newline at end of file
+}
+
+.miniPres:hover {
+    opacity: 1;
+}
+
+.miniPres {
+    cursor: grab;
+    position: absolute;
+    overflow: hidden;
+    right: 10;
+    top: 10;
+    opacity: 0.1;
+    transition: all 0.4s;
+    /* border: solid 1px; */
+    color: white;
+    /* box-shadow: black 0.4vw 0.4vw 0.8vw; */
+    
+    .miniPresOverlay {
+        display: grid;
+        grid-template-columns: auto auto auto auto auto auto auto auto;
+        grid-template-rows: 100%;
+        height: 100%;
+        justify-items: center;
+        align-items: center;
+
+        .miniPres-button-text {
+            cursor: pointer;
+            display: flex;
+            height: 20;
+            font-weight: 400;
+            min-width: 100%;
+            border-radius: 5px;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.3s;
+        }
+
+        .miniPres-button-frame {
+            justify-self: center;
+            align-self: center;
+            align-items: center;
+            display: grid;
+            grid-template-columns: auto auto auto;
+            justify-content: space-around;
+            font-size: 11;
+            margin-left: 7;
+            width: 30;
+            height: 85%;
+            background-color: rgba(91, 157, 221, 0.4);
+            border-radius: 5px;
+        }
+
+        .miniPres-divider {
+            width: 0.5px;
+            height: 80%;
+            border-right: solid 2px #5a5a5a;
+        }
+
+        .miniPres-button {
+            cursor: pointer;
+            display: flex;
+            height: 20;
+            min-width: 20;
+            border-radius: 100%;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.3s;
+        }
+
+        .miniPres-button:hover {
+            background-color: #5a5a5a;
+        }
+
+        .miniPres-button-text:hover {
+            background-color: #5a5a5a;
+        }
+    }
+}
diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx
index f6f6a2333..dd4c103c4 100644
--- a/src/client/views/nodes/PresBox.tsx
+++ b/src/client/views/nodes/PresBox.tsx
@@ -147,9 +147,12 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
             // Case 3: No more frames in current doc and next slide is defined, therefore move to next slide
         } else if (this.childDocs[this.itemIndex + 1] !== undefined) {
             const nextSelected = this.itemIndex + 1;
+            if (presTargetDoc.type === DocumentType.AUDIO) AudioBox.Instance.pause();
             this.gotoDocument(nextSelected, this.itemIndex);
             const targetNext = Cast(activeNext.presentationTargetDoc, Doc, null);
             if (activeNext && targetNext.type === DocumentType.AUDIO && activeNext.playAuto) {
+                AudioBox.Instance.playFrom(0);
+                this._moveOnFromAudio = true;
             } else this._moveOnFromAudio = false;
         }
     }
@@ -228,21 +231,25 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         const docToJump = curDoc;
         const willZoom = false;
 
-        //docToJump stayed same meaning, it was not in the group or was the last element in the group
-        if (activeItem.zoomProgressivize && this.rootDoc.presStatus !== 'edit') {
-            this.zoomProgressivizeNext(targetDoc);
-        } else if (docToJump === curDoc) {
-            //checking if curDoc has navigation open
-            if (curDoc.presNavButton && targetDoc) {
-                await DocumentManager.Instance.jumpToDocument(targetDoc, false, undefined, srcContext);
-            } else if (curDoc.presZoomButton && targetDoc) {
+        // If openDocument is selected then it should open the document for the user
+        if (activeItem.openDocument) {
+            this.props.addDocTab(activeItem, "replace");
+        } else
+            //docToJump stayed same meaning, it was not in the group or was the last element in the group
+            if (activeItem.zoomProgressivize && this.rootDoc.presStatus !== 'edit') {
+                this.zoomProgressivizeNext(targetDoc);
+            } else if (docToJump === curDoc) {
+                //checking if curDoc has navigation open
+                if (curDoc.presNavButton && targetDoc) {
+                    await DocumentManager.Instance.jumpToDocument(targetDoc, false, undefined, srcContext);
+                } else if (curDoc.presZoomButton && targetDoc) {
+                    //awaiting jump so that new scale can be found, since jumping is async
+                    await DocumentManager.Instance.jumpToDocument(targetDoc, true, undefined, srcContext);
+                }
+            } else {
                 //awaiting jump so that new scale can be found, since jumping is async
-                await DocumentManager.Instance.jumpToDocument(targetDoc, true, undefined, srcContext);
+                targetDoc && await DocumentManager.Instance.jumpToDocument(targetDoc, willZoom, undefined, srcContext);
             }
-        } else {
-            //awaiting jump so that new scale can be found, since jumping is async
-            targetDoc && await DocumentManager.Instance.jumpToDocument(targetDoc, willZoom, undefined, srcContext);
-        }
         // After navigating to the document, if it is added as a presPinView then it will
         // adjust the pan and scale to that of the pinView when it was added.
         // TODO: Add option to remove presPinView 
@@ -251,10 +258,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
             targetDoc._panY = activeItem.presPinViewY;
             targetDoc._viewScale = activeItem.presPinViewScale;
         }
-        // If openDocument is selected then it should open the document for the user
-        if (collectionDocView && activeItem.openDocument) {
-            collectionDocView.props.addDocTab(activeItem, "inPlace");
-        }
         // If website and has presWebsite data associated then on click it should
         // go back to that specific website
         // TODO: Add progressivize for navigating web (storing websites for given frames)
@@ -353,9 +356,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
             for (var i = startSlide; i < this.childDocs.length; i++) {
                 activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
                 targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null);
-                if (targetDoc.presDuration && targetDoc.presTransition) {
-                    duration = NumCast(targetDoc.presDuration) + NumCast(targetDoc.presTransition);
-                } else duration = 2500;
+                duration = NumCast(targetDoc.presDuration) + NumCast(targetDoc.presTransition);
+                if (duration <= 100) { duration = 2500; }
                 if (NumCast(targetDoc.lastFrame) > 0) {
                     for (var f = 0; f < NumCast(targetDoc.lastFrame); f++) {
                         await timer(duration / NumCast(targetDoc.lastFrame));
@@ -415,17 +417,23 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
      * The method called to open the presentation as a minimized view
      * TODO: Look at old updateMinimize and compare...
      */
+    @undoBatch
+    @action
     updateMinimize = () => {
-        const srcContext = Cast(this.rootDoc.presCollection, Doc, null);
-        this.turnOffEdit();
-        if (srcContext) {
-            if (srcContext.miniPres) {
-                srcContext.miniPres = false;
-                CollectionDockingView.AddRightSplit(this.rootDoc);
-            } else {
-                srcContext.miniPres = true;
-                this.props.addDocTab?.(this.rootDoc, "close");
-            }
+        if (this.layoutDoc.inOverlay) {
+            this.layoutDoc.presStatus = 'edit';
+            Doc.RemoveDocFromList((Doc.UserDoc().myOverlayDocuments as Doc), undefined, this.rootDoc);
+            CollectionDockingView.AddRightSplit(this.rootDoc);
+            this.layoutDoc.inOverlay = false;
+        } else {
+            this.layoutDoc.presStatus = 'manual';
+            const pt = this.props.ScreenToLocalTransform().inverse().transformPoint(0, 0);
+            this.rootDoc.x = pt[0] + (this.props.PanelWidth() - 250);
+            this.rootDoc.y = pt[1] + 10;
+            this.rootDoc._height = 35;
+            this.rootDoc._width = 250;
+            this.props.addDocTab?.(this.rootDoc, "close");
+            Doc.AddDocToList((Doc.UserDoc().myOverlayDocuments as Doc), undefined, this.rootDoc);
         }
     }
 
@@ -465,6 +473,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
                 break;
             case 'jump': //Jump Cut
                 targetDoc.presTransition = 0;
+                activeItem.presZoomButton = true;
                 activeItem.presSwitchButton = !activeItem.presSwitchButton;
                 if (activeItem.presSwitchButton) activeItem.presMovement = 'Jump cut';
                 else activeItem.presMovement = 'None';
@@ -574,8 +583,10 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         const anchorNode = document.activeElement as HTMLDivElement;
         if (anchorNode && anchorNode.className?.includes("lm_title")) return;
         if (e.keyCode === 27) { // Escape key
-            if (this.layoutDoc.presStatus === "edit") { this._selectedArray = []; this._eleArray = []; this._dragArray = []; }
-            else this.layoutDoc.presStatus = "edit"; if (this._presTimer) clearTimeout(this._presTimer);
+            if (this.layoutDoc.inOverlay) { this.updateMinimize(); }
+            else if (this.layoutDoc.presStatus === "edit") { this._selectedArray = []; this._eleArray = []; this._dragArray = []; }
+            else this.layoutDoc.presStatus = "edit";
+            if (this._presTimer) clearTimeout(this._presTimer);
             handled = true;
         } if ((e.metaKey || e.altKey) && e.keyCode === 65) { // Ctrl-A to select all
             if (this.layoutDoc.presStatus === "edit") {
@@ -862,6 +873,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         return effect;
     }
 
+    @undoBatch
+    @action
     applyTo = (array: Doc[]) => {
         const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
         const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null);
@@ -1096,7 +1109,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
     @computed get presentDropdown() {
         return (
             <div className={`dropdown-play ${this.presentTools ? "active" : ""}`} onClick={e => e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}>
-                <div className="dropdown-play-button" onClick={() => this.updateMinimize()}>
+                <div className="dropdown-play-button" onClick={this.updateMinimize}>
                     Minimize
                 </div>
                 <div className="dropdown-play-button" onClick={(action(() => { this.layoutDoc.presStatus = "manual"; this.turnOffEdit(); }))}>
@@ -1287,9 +1300,10 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
             doc.editZoomProgressivize = false;
             doc.editScrollProgressivize = false;
             const targetDoc = Cast(doc.presentationTargetDoc, Doc, null);
-            targetDoc.editSnapZoomProgressivize = false;
-            targetDoc.editZoomProgressivize = false;
-            targetDoc.editScrollProgressivize = false;
+            if (targetDoc) {
+                targetDoc.editZoomProgressivize = false;
+                targetDoc.editScrollProgressivize = false;
+            }
         });
     }
 
@@ -1607,18 +1621,18 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
 
     @computed get playButtons() {
         // Case 1: There are still other frames and should go through all frames before going to next slide
-        return (<div className="miniPresOverlay" style={{ display: this.layoutDoc.presStatus !== "edit" ? "inline-flex" : "none" }}>
-            <div className="miniPres-button" onClick={this.back}><FontAwesomeIcon icon={"arrow-left"} /></div>
-            <div className="miniPres-button" onClick={() => this.startAutoPres(this.itemIndex)}><FontAwesomeIcon icon={this.layoutDoc.presStatus === "auto" ? "pause" : "play"} /></div>
-            <div className="miniPres-button" onClick={this.next}><FontAwesomeIcon icon={"arrow-right"} /></div>
-            <div className="miniPres-divider"></div>
-            <div className="miniPres-button-text" style={{ display: this.props.PanelWidth() > 250 ? "inline-flex" : "none" }}>
+        return (<div className="presPanelOverlay" style={{ display: this.layoutDoc.presStatus !== "edit" ? "inline-flex" : "none" }}>
+            <div className="presPanel-button" onClick={this.back}><FontAwesomeIcon icon={"arrow-left"} /></div>
+            <div className="presPanel-button" onClick={() => this.startAutoPres(this.itemIndex)}><FontAwesomeIcon icon={this.layoutDoc.presStatus === "auto" ? "pause" : "play"} /></div>
+            <div className="presPanel-button" onClick={this.next}><FontAwesomeIcon icon={"arrow-right"} /></div>
+            <div className="presPanel-divider"></div>
+            <div className="presPanel-button-text" style={{ display: this.props.PanelWidth() > 250 ? "inline-flex" : "none" }}>
                 Slide {this.itemIndex + 1} / {this.childDocs.length}
                 {this.playButtonFrames}
             </div>
-            <div className="miniPres-divider"></div>
-            {this.props.PanelWidth() > 250 ? <div className="miniPres-button-text" onClick={() => this.layoutDoc.presStatus = "edit"}>EXIT</div>
-                : <div className="miniPres-button" onClick={() => this.layoutDoc.presStatus = "edit"}>
+            <div className="presPanel-divider"></div>
+            {this.props.PanelWidth() > 250 ? <div className="presPanel-button-text" onClick={() => this.layoutDoc.presStatus = "edit"}>EXIT</div>
+                : <div className="presPanel-button" onClick={() => this.layoutDoc.presStatus = "edit"}>
                     <FontAwesomeIcon icon={"times"} />
                 </div>}
         </div>);
@@ -1630,28 +1644,44 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         // needed to ensure that the childDocs are loaded for looking up fields
         this.childDocs.slice();
         const mode = StrCast(this.rootDoc._viewType) as CollectionViewType;
-        return <div className="presBox-cont" style={{ minWidth: this.layoutDoc.inOverlay ? 240 : undefined }} >
-            {this.topPanel}
-            {this.toolbar}
-            {this.newDocumentToolbarDropdown}
-            <div className="presBox-listCont">
-                {mode !== CollectionViewType.Invalid ?
-                    <CollectionView {...this.props}
-                        ContainingCollectionDoc={this.props.Document}
-                        PanelWidth={this.props.PanelWidth}
-                        PanelHeight={this.panelHeight}
-                        moveDocument={returnFalse}
-                        childOpacity={returnOne}
-                        childLayoutTemplate={this.childLayoutTemplate}
-                        filterAddDocument={this.addDocumentFilter}
-                        removeDocument={returnFalse}
-                        dontRegisterView={true}
-                        focus={this.selectElement}
-                        ScreenToLocalTransform={this.getTransform} />
-                    : (null)
-                }
+        return this.layoutDoc.inOverlay ?
+            <div className="miniPres" style={{ width: 250, height: 35, background: '#323232', top: 0, zIndex: 3000000 }}>
+                {<div className="miniPresOverlay">
+                    <div className="miniPres-button" onClick={this.back}><FontAwesomeIcon icon={"arrow-left"} /></div>
+                    <div className="miniPres-button" onClick={() => this.startAutoPres(this.itemIndex)}><FontAwesomeIcon icon={this.layoutDoc.presStatus === "auto" ? "pause" : "play"} /></div>
+                    <div className="miniPres-button" onClick={this.next}><FontAwesomeIcon icon={"arrow-right"} /></div>
+                    <div className="miniPres-divider"></div>
+                    <div className="miniPres-button-text">
+                        Slide {this.itemIndex + 1} / {this.childDocs.length}
+                        {this.playButtonFrames}
+                    </div>
+                    <div className="miniPres-divider"></div>
+                    <div className="miniPres-button-text" onClick={this.updateMinimize}>EXIT</div>
+                </div>}
             </div>
-        </div>;
+            :
+            <div className="presBox-cont" style={{ minWidth: this.layoutDoc.inOverlay ? 240 : undefined }} >
+                {this.topPanel}
+                {this.toolbar}
+                {this.newDocumentToolbarDropdown}
+                <div className="presBox-listCont">
+                    {mode !== CollectionViewType.Invalid ?
+                        <CollectionView {...this.props}
+                            ContainingCollectionDoc={this.props.Document}
+                            PanelWidth={this.props.PanelWidth}
+                            PanelHeight={this.panelHeight}
+                            moveDocument={returnFalse}
+                            childOpacity={returnOne}
+                            childLayoutTemplate={this.childLayoutTemplate}
+                            filterAddDocument={this.addDocumentFilter}
+                            removeDocument={returnFalse}
+                            dontRegisterView={true}
+                            focus={this.selectElement}
+                            ScreenToLocalTransform={this.getTransform} />
+                        : (null)
+                    }
+                </div>
+            </div>;
     }
 }
 Scripting.addGlobal(function lookupPresBoxField(container: Doc, field: string, data: Doc) {