cleaned up videobox controls along with option to switch to native controls. changed placement of link buttons in lightbox to be outside of document

4 files changed, 60 insertions, 84 deletions

diff --git a/src/Utils.ts b/src/Utils.ts
index 194c38a6f..f251f776c 100644
--- a/src/Utils.ts
+++ b/src/Utils.ts
@@ -390,8 +390,7 @@ export function formatTime(time: number) {
     const hours = Math.floor(time / 60 / 60);
     const minutes = Math.floor(time / 60) - (hours * 60);
     const seconds = time % 60;
-
-    return hours.toString().padStart(2, '0') + ':' + minutes.toString().padStart(2, '0') + ':' + seconds.toString().padStart(2, '0');
+    return (hours ? hours.toString() + ":" : "") + minutes.toString().padStart(2, '0') + ':' + seconds.toString().padStart(2, '0');
 }
 
 export function aggregateBounds(boundsList: { x: number, y: number, width?: number, height?: number }[], xpad: number, ypad: number) {
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index a29f2f662..d158746d6 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -182,7 +182,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
     protected _multiTouchDisposer?: InteractionUtils.MultiTouchEventDisposer;
     _componentView: Opt<DocComponentView>; // needs to be accessed from DocumentView wrapper class
 
-    private get topMost() { return this.props.renderDepth === 0; }
+    private get topMost() { return this.props.renderDepth === 0 && !LightboxView.LightboxDoc; }
     public get displayName() { return "DocumentView(" + this.props.Document.title + ")"; } // this makes mobx trace() statements more descriptive
     public get ContentDiv() { return this._mainCont.current; }
     public get LayoutFieldKey() { return Doc.LayoutFieldKey(this.layoutDoc); }
diff --git a/src/client/views/nodes/VideoBox.scss b/src/client/views/nodes/VideoBox.scss
index f593f74fb..cdd36eb3b 100644
--- a/src/client/views/nodes/VideoBox.scss
+++ b/src/client/views/nodes/VideoBox.scss
@@ -49,63 +49,28 @@
 //     pointer-events: all;
 // }
 
-.videoBox-time{
-    color : white;
-    top :25px;
-    left : 25px;
+.videoBox-ui {
     position: absolute;
-    background-color: rgba(50, 50, 50, 0.2);
-    transform-origin: left top;
-    pointer-events:all;
+    flex-direction: row;
+    right: 5px;
+    top: 5px;
+    display: none;
+    background-color: rgba(0, 0, 0, 0.6);
 }
-.videoBox-snapshot{
+.videoBox-time, .videoBox-snapshot, .videoBox-timelineButton, .videoBox-play, .videoBox-full {
     color : white;
-    top :25px;
-    right : 25px;
-    position: absolute;
-    background-color:rgba(50, 50, 50, 0.2);
+    position: relative;
     transform-origin: left top;
     pointer-events:all;
-    cursor: default;
-}
-
-.videoBox-timelineButton {
-    position: absolute;
-    display: flex;
-    align-items: center;
-    z-index: 1010;
-    bottom: 5px;
-    right: 5px;
-    color: white;
+    padding-right: 5px;
     cursor: pointer;
-    background: dimgrey;
-    width: 20px;
-    height: 20px;
-}
-.videoBox-play {
-    width: 25px;
-    height: 20px;
-    bottom: 25px;
-    left : 25px;
-    position: absolute;
-    color : white;
-    background-color: rgba(50, 50, 50, 0.2);
-    border-radius: 4px;
-    text-align: center;
-    transform-origin: left bottom;
-    pointer-events:all;
+    &:hover {
+        background-color: gray;
+    }
 }
-.videoBox-full {
-    width: 25px;
-    height: 20px;
-    bottom: 25px;
-    right : 25px;
-    position: absolute;
-    color : white;
-    background-color: rgba(50, 50, 50, 0.2);
-    border-radius: 4px;
-    text-align: center;
-    transform-origin: right bottom;
-    pointer-events:all;
 
+.videoBox:hover {
+    .videoBox-ui {
+        display: flex;
+    }
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx
index ce45c01e6..fc97a6f4d 100644
--- a/src/client/views/nodes/VideoBox.tsx
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -28,6 +28,8 @@ import { LinkDocPreview } from "./LinkDocPreview";
 import "./VideoBox.scss";
 import { DragManager } from "../../util/DragManager";
 import { DocumentManager } from "../../util/DocumentManager";
+import { DocumentType } from "../../documents/DocumentTypes";
+import { Tooltip } from "@material-ui/core";
 const path = require('path');
 
 type VideoDocument = makeInterface<[typeof documentSchema]>;
@@ -49,7 +51,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
     private _annotationLayer: React.RefObject<HTMLDivElement> = React.createRef();
     private _playRegionTimer: any = null;
     private _playRegionDuration = 0;
-    @observable static _showControls: boolean;
+    @observable static _nativeControls: boolean;
     @observable _marqueeing: number[] | undefined;
     @observable _savedAnnotations = new ObservableMap<number, HTMLDivElement[]>();
     @observable _screenCapture = false;
@@ -125,7 +127,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
         this.updateTimecode();
     }
 
-    @action public FullScreen() {
+    @action public FullScreen = () => {
         this._fullScreen = true;
         this.player && this.player.requestFullscreen();
         try {
@@ -137,7 +139,6 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
 
     @action public Snapshot(downX?: number, downY?: number) {
         const width = (this.layoutDoc._width || 0);
-        const height = (this.layoutDoc._height || 0);
         const canvas = document.createElement('canvas');
         canvas.width = 640;
         canvas.height = 640 * Doc.NativeHeight(this.layoutDoc) / (Doc.NativeWidth(this.layoutDoc) || 1);
@@ -281,10 +282,9 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
         if (field) {
             const url = field.url.href;
             const subitems: ContextMenuProps[] = [];
-            subitems.push({ description: "Copy path", event: () => { Utils.CopyText(url); }, icon: "expand-arrows-alt" });
-            subitems.push({ description: "Toggle Show Controls", event: action(() => VideoBox._showControls = !VideoBox._showControls), icon: "expand-arrows-alt" });
-            subitems.push({ description: "Take Snapshot", event: () => this.Snapshot(), icon: "expand-arrows-alt" });
-            subitems.push({
+            subitems.push({ description: "Full Screen", event: this.FullScreen, icon: "expand" });
+            subitems.push({ description: "Take Snapshot", event: this.Snapshot, icon: "expand-arrows-alt" });
+            this.rootDoc.type === DocumentType.SCREENSHOT && subitems.push({
                 description: "Screen Capture", event: (async () => {
                     runInAction(() => this._screenCapture = !this._screenCapture);
                     this._videoRef!.srcObject = !this._screenCapture ? undefined : await (navigator.mediaDevices as any).getDisplayMedia({ video: true });
@@ -292,6 +292,8 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
             });
             subitems.push({ description: (this.layoutDoc.dontAutoPlayFollowedLinks ? "" : "Don't") + " play when link is selected", event: () => this.layoutDoc.dontAutoPlayFollowedLinks = !this.layoutDoc.dontAutoPlayFollowedLinks, icon: "expand-arrows-alt" });
             subitems.push({ description: (this.layoutDoc.autoPlayAnchors ? "Don't auto play" : "Auto play") + " anchors onClick", event: () => this.layoutDoc.autoPlayAnchors = !this.layoutDoc.autoPlayAnchors, icon: "expand-arrows-alt" });
+            subitems.push({ description: "Toggle Native Controls", event: action(() => VideoBox._nativeControls = !VideoBox._nativeControls), icon: "expand-arrows-alt" });
+            subitems.push({ description: "Copy path", event: () => { Utils.CopyText(url); }, icon: "expand-arrows-alt" });
             ContextMenu.Instance.addItem({ description: "Options...", subitems: subitems, icon: "video" });
         }
     }
@@ -315,7 +317,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
                     <video key="video" autoPlay={this._screenCapture} ref={this.setVideoRef}
                         style={{ height: "100%", width: "auto", display: "flex", margin: "auto" }}
                         onCanPlay={this.videoLoad}
-                        controls={VideoBox._showControls}
+                        controls={VideoBox._nativeControls}
                         onPlay={() => this.Play()}
                         onSeeked={this.updateTimecode}
                         onPause={() => this.Pause()}
@@ -380,26 +382,36 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
     }
     private get uIButtons() {
         const curTime = (this.layoutDoc._currentTimecode || 0);
-        return ([<div className="videoBox-time" key="time" onPointerDown={this.onResetDown} >
-            <span>{"" + formatTime(curTime)}</span>
-            <span style={{ fontSize: 8 }}>{" " + Math.round((curTime - Math.trunc(curTime)) * 100)}</span>
-        </div>,
-        <div className="videoBox-snapshot" key="snap" onPointerDown={this.onSnapshotDown} >
-            <FontAwesomeIcon icon="camera" size="lg" />
-        </div>,
-        <div className="videoBox-timelineButton" key="timeline" onPointerDown={this.onTimelineHdlDown} style={{ bottom: `${100 - this.heightPercent}%` }}>
-            <FontAwesomeIcon icon={"eye"} size="lg" />
-        </div>,
-        VideoBox._showControls ? (null) : [
-            // <div className="control-background">
-            <div className="videoBox-play" key="play" onPointerDown={this.onPlayDown} >
-                <FontAwesomeIcon icon={this._playing ? "pause" : "play"} size="lg" />
-            </div>,
-            <div className="videoBox-full" key="full" onPointerDown={this.onFullDown} >
-                F
-                {/* </div> */}
-            </div>
-        ]]);
+        const nonNativeControls = [
+            <Tooltip title={<div className="dash-tooltip">{"playback"}</div>} placement="bottom">
+                <div className="videoBox-play" key="play" onPointerDown={this.onPlayDown} >
+                    <FontAwesomeIcon icon={this._playing ? "pause" : "play"} size="lg" />
+                </div>
+            </Tooltip>,
+            <Tooltip title={<div className="dash-tooltip">{"timecode"}</div>} placement="bottom">
+                <div className="videoBox-time" onPointerDown={this.onResetDown} >
+                    <span>{formatTime(curTime)}</span>
+                    <span style={{ fontSize: 8 }}>{" " + Math.floor((curTime - Math.trunc(curTime)) * 100).toString().padStart(2, "0")}</span>
+                </div>
+            </Tooltip>,
+            <Tooltip title={<div className="dash-tooltip">{"view full screen"}</div>} placement="bottom">
+                <div className="videoBox-full" onPointerDown={this.FullScreen}>
+                    <FontAwesomeIcon icon="expand" size="lg" />
+                </div>
+            </Tooltip>];
+        return <div className="videoBox-ui">
+            {[...(VideoBox._nativeControls ? [] : nonNativeControls),
+            <Tooltip title={<div className="dash-tooltip">{"snapshot current frame"}</div>} placement="bottom">
+                <div className="videoBox-snapshot" onPointerDown={this.onSnapshotDown} >
+                    <FontAwesomeIcon icon="camera" size="lg" />
+                </div>
+            </Tooltip>,
+            <Tooltip title={<div className="dash-tooltip">{"show annotation timeline"}</div>} placement="bottom">
+                <div className="videoBox-timelineButton" onPointerDown={this.onTimelineHdlDown}>
+                    <FontAwesomeIcon icon="eye" size="lg" />
+                </div>
+            </Tooltip>,]}
+        </div>;
     }
 
     onPlayDown = () => this._playing ? this.Pause() : this.Play();
@@ -453,7 +465,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
         return <iframe key={this._youtubeIframeId} id={`${this.youtubeVideoId + this._youtubeIframeId}-player`}
             onPointerLeave={this.updateTimecode}
             onLoad={this.youtubeIframeLoaded} className={`${style}`} width={Doc.NativeWidth(this.layoutDoc) || 640} height={Doc.NativeHeight(this.layoutDoc) || 390}
-            src={`https://www.youtube.com/embed/${this.youtubeVideoId}?enablejsapi=1&rel=0&showinfo=1&autoplay=0&mute=1&start=${start}&modestbranding=1&controls=${VideoBox._showControls ? 1 : 0}`} />;
+            src={`https://www.youtube.com/embed/${this.youtubeVideoId}?enablejsapi=1&rel=0&showinfo=1&autoplay=0&mute=1&start=${start}&modestbranding=1&controls=${VideoBox._nativeControls ? 1 : 0}`} />;
     }
 
     @action.bound
@@ -610,4 +622,4 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
     }
 }
 
-VideoBox._showControls = true;
\ No newline at end of file
+VideoBox._nativeControls = false;
\ No newline at end of file