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

1 files changed, 42 insertions, 30 deletions

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