small bug fixes for the ui of replaying the presentations from slides. can't get the video to autmoatically open from PresBox.tsx - an inifnite loop somewhere.

3 files changed, 212 insertions, 183 deletions

diff --git a/src/client/views/nodes/RecordingBox/RecordingView.tsx b/src/client/views/nodes/RecordingBox/RecordingView.tsx
index 83ed6914e..ec5917b9e 100644
--- a/src/client/views/nodes/RecordingBox/RecordingView.tsx
+++ b/src/client/views/nodes/RecordingBox/RecordingView.tsx
@@ -43,8 +43,8 @@ export function RecordingView(props: IRecordingViewProps) {
     const videoRecorder = useRef<MediaRecorder | null>(null);
     const videoElementRef = useRef<HTMLVideoElement | null>(null);
 
-    const [finished, setFinished] = useState<boolean>(false)
-    const [trackScreen, setTrackScreen] = useState<boolean>(true)
+    const [finished, setFinished] = useState<boolean>(false);
+    const [trackScreen, setTrackScreen] = useState<boolean>(false);
 
 
 
diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx
index 9f858539f..7045d6d5d 100644
--- a/src/client/views/nodes/trails/PresBox.tsx
+++ b/src/client/views/nodes/trails/PresBox.tsx
@@ -30,6 +30,7 @@ import { FieldView, FieldViewProps } from '../FieldView';
 import "./PresBox.scss";
 import { PresEffect, PresMovement, PresStatus } from "./PresEnums";
 import { ScriptingGlobals } from "../../../util/ScriptingGlobals";
+import { PresElementBox } from ".";
 
 export interface PinProps {
     audioRange?: boolean;
@@ -221,6 +222,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
     // No more frames in current doc and next slide is defined, therefore move to next slide 
     nextSlide = (activeNext: Doc) => {
         const targetNext = Cast(activeNext.presentationTargetDoc, Doc, null);
+        console.info('nextSlide', activeNext.title, targetNext?.title);
         let nextSelected = this.itemIndex + 1;
         this.gotoDocument(nextSelected, this.activeItem);
         for (nextSelected = nextSelected + 1; nextSelected < this.childDocs.length; nextSelected++) {
diff --git a/src/client/views/nodes/trails/PresElementBox.tsx b/src/client/views/nodes/trails/PresElementBox.tsx
index a4c69f66b..cc7bd5189 100644
--- a/src/client/views/nodes/trails/PresElementBox.tsx
+++ b/src/client/views/nodes/trails/PresElementBox.tsx
@@ -4,7 +4,7 @@ import { action, computed, IReactionDisposer, observable, reaction } from "mobx"
 import { observer } from "mobx-react";
 import { Doc, DocListCast, HeightSym, Opt, WidthSym } from "../../../../fields/Doc";
 import { Id } from "../../../../fields/FieldSymbols";
-import { BoolCast, Cast, NumCast, StrCast } from "../../../../fields/Types";
+import { BoolCast, Cast, DocCast, NumCast, StrCast } from "../../../../fields/Types";
 import { emptyFunction, returnEmptyDoclist, returnFalse, returnTrue, setupMoveUpEvents } from "../../../../Utils";
 import { Docs, DocUtils } from "../../../documents/Documents";
 import { DocumentType } from "../../../documents/DocumentTypes";
@@ -35,6 +35,8 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
     _heightDisposer: IReactionDisposer | undefined;
 
     @observable _dragging = false;
+    // Idea: this boolean will determine whether to automatically show the video when this preselement is selected.
+    // @observable static showVideo: boolean = false;
     @computed get indexInPres() { return DocListCast(this.presBox[StrCast(this.presBox.presFieldKey, "data")]).indexOf(this.rootDoc); }  // the index field is where this document is in the presBox display list (since this value is different for each presentation element, the value can't be stored on the layout template which is used by all display elements)
     @computed get collapsedHeight() { return [CollectionViewType.Tree, CollectionViewType.Stacking].includes(this.presBox._viewType as any) ? 35 : 31; } // the collapsed height changes depending on the state of the presBox.  We could store this on the presentation element template if it's used by only one presentation - but if it's shared by multiple, then this value must be looked up
     @computed get presStatus() { return this.presBox.presStatus; }
@@ -260,12 +262,12 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
 
     @undoBatch
     removeItem = action((e: React.MouseEvent) => {
-      e.stopPropagation();
+        e.stopPropagation();
         this.props.removeDocument?.(this.rootDoc);
         if (PresBox.Instance._selectedArray.has(this.rootDoc)) {
             PresBox.Instance._selectedArray.delete(this.rootDoc);
         }
-        this.removeAllRecordingInOverlay() 
+        this.removeAllRecordingInOverlay()
     });
 
     // set the value/title of the individual pres element
@@ -286,17 +288,17 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
     @action
     updateView = (targetDoc: Doc, activeItem: Doc) => {
         switch (targetDoc.type) {
-            case DocumentType.PDF: case  DocumentType.WEB: case DocumentType.RTF :
+            case DocumentType.PDF: case DocumentType.WEB: case DocumentType.RTF:
                 const scroll = targetDoc._scrollTop;
                 activeItem.presPinViewScroll = scroll;
-            break;
+                break;
             case DocumentType.VID: case DocumentType.AUDIO:
                 activeItem.presStartTime = targetDoc._currentTimecode;
-            break;
-            case  DocumentType.COMPARISON :
+                break;
+            case DocumentType.COMPARISON:
                 const clipWidth = targetDoc._clipWidth;
                 activeItem.presPinClipWidth = clipWidth;
-            break;
+                break;
             default:
                 const x = targetDoc._panX;
                 const y = targetDoc._panY;
@@ -307,122 +309,147 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
         }
     }
 
-      @computed get recordingIsInOverlay() {
-            let isInOverlay = false
-            DocListCast(CurrentUserUtils.MyOverlayDocs.data).forEach((doc) => {
-                  if (doc.slides === this.rootDoc) {
-                        isInOverlay = true
-                        return
-                  }
-            })
-            return isInOverlay
-      }
-
-      removeAllRecordingInOverlay = () => {
-            DocListCast(CurrentUserUtils.MyOverlayDocs.data).forEach((doc) => {
-                  if (doc.slides === this.rootDoc) {
-                        Doc.RemoveDocFromList(CurrentUserUtils.MyOverlayDocs, undefined, doc);
-                  }
-            })
-      }
-
-      @undoBatch
-      @action
-      hideRecording = (e: React.MouseEvent) => {
-            e.stopPropagation()
-            this.removeAllRecordingInOverlay()
-      }
-
-      @undoBatch
-      @action
-      showRecording = (activeItem: Doc) => {
-            this.removeAllRecordingInOverlay()
-            if (activeItem.recording) {
-                  // if we already have an existing recording
-                  Doc.AddDocToList(CurrentUserUtils.MyOverlayDocs, undefined, Cast(activeItem.recording, Doc, null));
+    @computed get recordingIsInOverlay() {
+        let isInOverlay = false
+        DocListCast(CurrentUserUtils.MyOverlayDocs.data).forEach((doc) => {
+            if (doc.slides === this.rootDoc) {
+                isInOverlay = true
+                // return
+            }
+        })
+        return isInOverlay
+    }
+
+    // a previously recorded video will have timecode defined
+    static videoIsRecorded = (activeItem: Doc) => {
+        const casted = Cast(activeItem.recording, Doc, null);
+        return casted && 'currentTimecode' in casted;
+    }
 
+    removeAllRecordingInOverlay = () => {
+        DocListCast(CurrentUserUtils.MyOverlayDocs.data).forEach((doc) => {
+            if (doc.slides === this.rootDoc) {
+                Doc.RemoveDocFromList(CurrentUserUtils.MyOverlayDocs, undefined, doc);
             }
-      }
+        })
+    }
+
+    static removeEveryExistingRecordingInOverlay = () => {
+        // Remove every recording that already exists in overlay view
+        DocListCast(CurrentUserUtils.MyOverlayDocs.data).forEach((doc) => {
+            // if it's a recording video, don't remove from overlay (user can lose data)
+            if (!PresElementBox.videoIsRecorded(DocCast(doc.slides))) return
+
+            if (doc.slides !== null) {
+                Doc.RemoveDocFromList(CurrentUserUtils.MyOverlayDocs, undefined, doc);
+            }
+        })
+    }
+
+    @undoBatch
+    @action
+    hideRecording = (e: React.MouseEvent, iconClick: boolean = false) => {
+        e.stopPropagation()
+        this.removeAllRecordingInOverlay()
+
+        // if (iconClick) PresElementBox.showVideo = false;
+    }
+
+    @undoBatch
+    @action
+    showRecording = (activeItem: Doc, iconClick: boolean = false) => {
+        // if (iconClick) PresElementBox.showVideo = true;
+        // if (!PresElementBox.showVideo) return;
+
+        // remove the overlays on switch *IF* not opened from the specific icon
+        if (!iconClick) PresElementBox.removeEveryExistingRecordingInOverlay();
+
+
+        if (activeItem.recording) {
+            Doc.AddDocToList(CurrentUserUtils.MyOverlayDocs, undefined, Cast(activeItem.recording, Doc, null));
+        }
+    }
 
-      @undoBatch
-      @action
-      startRecording = (activeItem: Doc) => {
+    @undoBatch
+    @action
+    startRecording = (activeItem: Doc) => {
+        console.log('start recording', 'activeItem', activeItem)
+        if (PresElementBox.videoIsRecorded(activeItem)) {
+            // if we already have an existing recording
+            this.showRecording(activeItem, true);
+            //   // if we already have an existing recording
+            //   Doc.AddDocToList(CurrentUserUtils.MyOverlayDocs, undefined, Cast(activeItem.recording, Doc, null));
+
+        } else {
             // Remove every recording that already exists in overlay view
-            DocListCast(CurrentUserUtils.MyOverlayDocs.data).forEach((doc) => {
-                  if (doc.slides !== null) {
-                        Doc.RemoveDocFromList(CurrentUserUtils.MyOverlayDocs, undefined, doc);
-                  }
-            })
+            // this is a design decision to clear to focus in on the recoding mode
+            PresElementBox.removeEveryExistingRecordingInOverlay();
+
+            // if we dont have any recording
+            const recording = Docs.Create.WebCamDocument("", {
+                _width: 384, _height: 216,
+                hideDocumentButtonBar: true,
+                hideDecorationTitle: true,
+                hideOpenButton: true,
+                // hideDeleteButton: 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
+
+            // make recording box appear in the bottom right corner of the screen
+            recording.x = window.innerWidth - recording[WidthSym]() - 20;
+            recording.y = window.innerHeight - recording[HeightSym]() - 20;
+            Doc.AddDocToList(CurrentUserUtils.MyOverlayDocs, undefined, recording);
+        }
+    }
 
-            if (activeItem.recording) {
-                  // if we already have an existing recording
-                  Doc.AddDocToList(CurrentUserUtils.MyOverlayDocs, undefined, Cast(activeItem.recording, Doc, null));
+    @computed
+    get toolbarWidth(): number {
+        const presBoxDocView = DocumentManager.Instance.getDocumentView(this.presBox);
+        let width: number = NumCast(this.presBox._width);
+        if (presBoxDocView) width = presBoxDocView.props.PanelWidth();
+        if (width === 0) width = 300;
+        return width;
+    }
 
-            } else {
-                  // if we dont have any recording
-                  const recording = Docs.Create.WebCamDocument("", {
-                        _width: 384, _height: 216,
-                        hideDocumentButtonBar: true,
-                        hideDecorationTitle: true,
-                        hideOpenButton: true,
-                        // hideDeleteButton: 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
-
-                  // make recording box appear in the bottom right corner of the screen
-                  recording.x = window.innerWidth - recording[WidthSym]() - 20;
-                  recording.y = window.innerHeight - recording[HeightSym]() - 20;
-                  Doc.AddDocToList(CurrentUserUtils.MyOverlayDocs, undefined, recording);
-            }
-      }
-
-      @computed
-      get toolbarWidth(): number {
-            const presBoxDocView = DocumentManager.Instance.getDocumentView(this.presBox);
-            let width: number = NumCast(this.presBox._width);
-            if (presBoxDocView) width = presBoxDocView.props.PanelWidth();
-            if (width === 0) width = 300;
-            return width;
-      }
-
-      @computed get mainItem() {
-            const isSelected: boolean = PresBox.Instance?._selectedArray.has(this.rootDoc);
-            const toolbarWidth: number = this.toolbarWidth;
-            const showMore: boolean = this.toolbarWidth >= 300;
-            const miniView: boolean = this.toolbarWidth <= 110;
-            const presBox: Doc = this.presBox; //presBox
-            const presBoxColor: string = StrCast(presBox._backgroundColor);
-            const presColorBool: boolean = presBoxColor ? (presBoxColor !== Colors.WHITE && presBoxColor !== "transparent") : false;
-            const targetDoc: Doc = this.targetDoc;
-            const activeItem: Doc = this.rootDoc;
-            return (
-                  <div className={`presItem-container`}
-                        key={this.props.Document[Id] + this.indexInPres}
-                        ref={this._itemRef}
-                        style={{
-                              backgroundColor: presColorBool ? isSelected ? "rgba(250,250,250,0.3)" : "transparent" : isSelected ? Colors.LIGHT_BLUE : "transparent",
-                              opacity: this._dragging ? 0.3 : 1
-                        }}
-                        onClick={e => {
-                              e.stopPropagation();
-                              e.preventDefault();
-                              PresBox.Instance.modifierSelect(this.rootDoc, this._itemRef.current!, this._dragRef.current!, !e.shiftKey && !e.ctrlKey && !e.metaKey, e.ctrlKey || e.metaKey, e.shiftKey);
-                              this.showRecording(activeItem);
-                        }}
-                        onDoubleClick={action(e => {
-                              this.toggleProperties();
-                              PresBox.Instance.regularSelect(this.rootDoc, this._itemRef.current!, this._dragRef.current!, true);
-                        })}
-                        onPointerOver={this.onPointerOver}
-                        onPointerLeave={this.onPointerLeave}
-                        onPointerDown={this.headerDown}
-                        onPointerUp={this.headerUp}
-                  >
-                        {/* {miniView ?
+    @computed get mainItem() {
+        const isSelected: boolean = PresBox.Instance?._selectedArray.has(this.rootDoc);
+        const toolbarWidth: number = this.toolbarWidth;
+        const showMore: boolean = this.toolbarWidth >= 300;
+        const miniView: boolean = this.toolbarWidth <= 110;
+        const presBox: Doc = this.presBox; //presBox
+        const presBoxColor: string = StrCast(presBox._backgroundColor);
+        const presColorBool: boolean = presBoxColor ? (presBoxColor !== Colors.WHITE && presBoxColor !== "transparent") : false;
+        const targetDoc: Doc = this.targetDoc;
+        const activeItem: Doc = this.rootDoc;
+
+        return (
+            <div className={`presItem-container`}
+                key={this.props.Document[Id] + this.indexInPres}
+                ref={this._itemRef}
+                style={{
+                    backgroundColor: presColorBool ? isSelected ? "rgba(250,250,250,0.3)" : "transparent" : isSelected ? Colors.LIGHT_BLUE : "transparent",
+                    opacity: this._dragging ? 0.3 : 1
+                }}
+                onClick={e => {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    PresBox.Instance.modifierSelect(this.rootDoc, this._itemRef.current!, this._dragRef.current!, !e.shiftKey && !e.ctrlKey && !e.metaKey, e.ctrlKey || e.metaKey, e.shiftKey);
+                    this.showRecording(activeItem);
+                }}
+                onDoubleClick={action(e => {
+                    this.toggleProperties();
+                    PresBox.Instance.regularSelect(this.rootDoc, this._itemRef.current!, this._dragRef.current!, true);
+                })}
+                onPointerOver={this.onPointerOver}
+                onPointerLeave={this.onPointerLeave}
+                onPointerDown={this.headerDown}
+                onPointerUp={this.headerUp}
+            >
+                {/* {miniView ?
                               // when width is LESS than 110 px 
                               <div className={`presItem-miniSlide ${isSelected ? "active" : ""}`} ref={miniView ? this._dragRef : null}>
                                     {`${this.indexInPres + 1}.`}
@@ -432,53 +459,53 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
                               <div className="presItem-number">
                                     {`${this.indexInPres + 1}.`}
                               </div>} */}
-                        {/* <div className="presItem-number">
+                {/* <div className="presItem-number">
                               {`${this.indexInPres + 1}.`}
                         </div> */}
-                        {miniView ? (null) : <div ref={miniView ? null : this._dragRef} className={`presItem-slide ${isSelected ? "active" : ""}`}
-                              style={{
-                                    backgroundColor: this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BackgroundColor),
-                                    boxShadow: presBoxColor && presBoxColor !== "white" && presBoxColor !== "transparent" ? isSelected ? "0 0 0px 1.5px" + presBoxColor : undefined : undefined
-                              }}>
-                              <div className="presItem-name" style={{ maxWidth: showMore ? (toolbarWidth - 195) : toolbarWidth - 105, cursor: isSelected ? 'text' : 'grab' }}>
-                                    <div>{`${this.indexInPres + 1}.  `}</div>
-                                    <EditableView
-                                          ref={this._titleRef}
-                                          editing={!isSelected ? false : undefined}
-                                          contents={activeItem.title}
-                                          overflow={'ellipsis'}
-                                          GetValue={() => StrCast(activeItem.title)}
-                                          SetValue={this.onSetValue}
-                                    />
-                              </div>
-                              {/* <Tooltip title={<><div className="dash-tooltip">{"Movement speed"}</div></>}><div className="presItem-time" style={{ display: showMore ? "block" : "none" }}>{this.transition}</div></Tooltip> */}
-                              {/* <Tooltip title={<><div className="dash-tooltip">{"Duration"}</div></>}><div className="presItem-time" style={{ display: showMore ? "block" : "none" }}>{this.duration}</div></Tooltip> */}
-                              <div className={"presItem-slideButtons"}>
-                                    <Tooltip title={<><div className="dash-tooltip">{"Update view"}</div></>}>
-                                          <div className="slideButton"
-                                                onClick={() => this.updateView(targetDoc, activeItem)}
-                                                style={{ fontWeight: 700, display: activeItem.presPinView ? "flex" : "none" }}>V</div>
-                                    </Tooltip>
-
-                                    {this.recordingIsInOverlay ?
-                                          <Tooltip title={<><div className="dash-tooltip">{"Hide Recording"}</div></>}>
-                                                <div className="slideButton"
-                                                      onClick={this.hideRecording}
-                                                      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(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></>}>
+                {miniView ? (null) : <div ref={miniView ? null : this._dragRef} className={`presItem-slide ${isSelected ? "active" : ""}`}
+                    style={{
+                        backgroundColor: this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BackgroundColor),
+                        boxShadow: presBoxColor && presBoxColor !== "white" && presBoxColor !== "transparent" ? isSelected ? "0 0 0px 1.5px" + presBoxColor : undefined : undefined
+                    }}>
+                    <div className="presItem-name" style={{ maxWidth: showMore ? (toolbarWidth - 195) : toolbarWidth - 105, cursor: isSelected ? 'text' : 'grab' }}>
+                        <div>{`${this.indexInPres + 1}.  `}</div>
+                        <EditableView
+                            ref={this._titleRef}
+                            editing={!isSelected ? false : undefined}
+                            contents={activeItem.title}
+                            overflow={'ellipsis'}
+                            GetValue={() => StrCast(activeItem.title)}
+                            SetValue={this.onSetValue}
+                        />
+                    </div>
+                    {/* <Tooltip title={<><div className="dash-tooltip">{"Movement speed"}</div></>}><div className="presItem-time" style={{ display: showMore ? "block" : "none" }}>{this.transition}</div></Tooltip> */}
+                    {/* <Tooltip title={<><div className="dash-tooltip">{"Duration"}</div></>}><div className="presItem-time" style={{ display: showMore ? "block" : "none" }}>{this.duration}</div></Tooltip> */}
+                    <div className={"presItem-slideButtons"}>
+                        <Tooltip title={<><div className="dash-tooltip">{"Update view"}</div></>}>
+                            <div className="slideButton"
+                                onClick={() => this.updateView(targetDoc, activeItem)}
+                                style={{ fontWeight: 700, display: activeItem.presPinView ? "flex" : "none" }}>V</div>
+                        </Tooltip>
+
+                        {this.recordingIsInOverlay ?
+                            <Tooltip title={<><div className="dash-tooltip">{"Hide Recording"}</div></>}>
+                                <div className="slideButton"
+                                    onClick={(e) => this.hideRecording(e, true)}
+                                    style={{ fontWeight: 700 }}>
+                                    <FontAwesomeIcon icon={"video-slash"} onPointerDown={e => e.stopPropagation()} />
+                                </div>
+                            </Tooltip> :
+                            <Tooltip title={<><div className="dash-tooltip">{`${PresElementBox.videoIsRecorded(activeItem) ? "Show" : "Start"} recording`}</div></>}>
+                                <div className="slideButton"
+                                    onClick={(e) => { e.stopPropagation(); this.startRecording(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}
                                                 style={{
@@ -493,22 +520,22 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                                 </div>
                                           </div>
                                     </Tooltip>} */}
-                                <Tooltip title={<><div className="dash-tooltip">{this.rootDoc.presExpandInlineButton ? "Minimize" : "Expand"}</div></>}><div className={"slideButton"} onClick={e => { e.stopPropagation(); this.presExpandDocumentClick(); }}>
-                                    <FontAwesomeIcon icon={this.rootDoc.presExpandInlineButton ? "eye-slash" : "eye"} onPointerDown={e => e.stopPropagation()} />
-                                </div></Tooltip>
-                                    <Tooltip title={<><div className="dash-tooltip">{"Remove from presentation"}</div></>}><div
-                                          className={"slideButton"}
-                                          onClick={this.removeItem}>
-                                          <FontAwesomeIcon icon={"trash"} onPointerDown={e => e.stopPropagation()} />
-                                    </div></Tooltip>
-                              </div>
-                              {/* <div className="presItem-docName" style={{ maxWidth: showMore ? (toolbarWidth - 195) : toolbarWidth - 105 }}>{activeItem.presPinView ? (<><i>View of </i> {targetDoc.title}</>) : targetDoc.title}</div> */}
-                              {this.renderEmbeddedInline}
-                        </div>}
-                  </div >);
-      }
-
-      render() {
-            return !(this.rootDoc instanceof Doc) || this.targetDoc instanceof Promise ? (null) : this.mainItem;
-      }
+                        <Tooltip title={<><div className="dash-tooltip">{this.rootDoc.presExpandInlineButton ? "Minimize" : "Expand"}</div></>}><div className={"slideButton"} onClick={e => { e.stopPropagation(); this.presExpandDocumentClick(); }}>
+                            <FontAwesomeIcon icon={this.rootDoc.presExpandInlineButton ? "eye-slash" : "eye"} onPointerDown={e => e.stopPropagation()} />
+                        </div></Tooltip>
+                        <Tooltip title={<><div className="dash-tooltip">{"Remove from presentation"}</div></>}><div
+                            className={"slideButton"}
+                            onClick={this.removeItem}>
+                            <FontAwesomeIcon icon={"trash"} onPointerDown={e => e.stopPropagation()} />
+                        </div></Tooltip>
+                    </div>
+                    {/* <div className="presItem-docName" style={{ maxWidth: showMore ? (toolbarWidth - 195) : toolbarWidth - 105 }}>{activeItem.presPinView ? (<><i>View of </i> {targetDoc.title}</>) : targetDoc.title}</div> */}
+                    {this.renderEmbeddedInline}
+                </div>}
+            </div >);
+    }
+
+    render() {
+        return !(this.rootDoc instanceof Doc) || this.targetDoc instanceof Promise ? (null) : this.mainItem;
+    }
 }
\ No newline at end of file