fade full screen controls

2 files changed, 35 insertions, 15 deletions

diff --git a/src/client/views/nodes/VideoBox.scss b/src/client/views/nodes/VideoBox.scss
index 1fb5cef98..b97e90bd9 100644
--- a/src/client/views/nodes/VideoBox.scss
+++ b/src/client/views/nodes/VideoBox.scss
@@ -86,15 +86,13 @@
     align-items: center;
     justify-content: center;
     display: flex;
-    // visibility: none;
-    // opacity: 0;
     background-color: $dark-gray;
     color: white;
     border-radius: 100px;
     z-index: 2001;
     min-width: 300px;
     
-    transition: top 0.5s, width 0.5s, opacity 0.2s, visibility 0s;
+    transition: top 0.5s, width 0.5s, opacity 0.2s, visibility 0.2s;
     height: 50px;
     padding: 0 10px 0 7px;
 
@@ -161,16 +159,11 @@
     align-items: flex-end;
 
     .videoBox-ui {
-        // opacity: 0;
         left: 50%;
         top: 90%;
         transform: translate(-50%, -50%);
         width: 80%;
-        transition: none;
-    }
-
-    .videoBox-ui:hover {
-        opacity: 1;
+        transition: top 0s, width 0s, opacity 0.3s, visibility 0.3s;
     }
 }
 
diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx
index 3ffd813d6..a98cd8cf4 100644
--- a/src/client/views/nodes/VideoBox.tsx
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -4,7 +4,7 @@ import { action, computed, IReactionDisposer, observable, ObservableMap, reactio
 import { observer } from "mobx-react";
 import { basename } from "path";
 import * as rp from 'request-promise';
-import { Doc, DocListCast, HeightSym, WidthSym } from "../../../fields/Doc";
+import { Doc, DocListCast, HeightSym, Opt, WidthSym } from "../../../fields/Doc";
 import { InkTool } from "../../../fields/InkField";
 import { Cast, NumCast, StrCast } from "../../../fields/Types";
 import { AudioField, ImageField, VideoField } from "../../../fields/URLField";
@@ -84,6 +84,10 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
     private _mainCont: React.RefObject<HTMLDivElement> = React.createRef(); // outermost div
     private _annotationLayer: React.RefObject<HTMLDivElement> = React.createRef();
     private _playRegionTimer: any = null; // timeout for playback
+    private _controlsFadeTimer: any = null; // timeout for controls fade
+
+    public onMakeAnchor: () => Opt<Doc> = () => undefined; // Method to get anchor from text search
+
     @observable _stackedTimeline: any; // CollectionStackedTimeline ref
     @observable static _nativeControls: boolean; // default html controls
     @observable _marqueeing: number[] | undefined; // coords for marquee selection
@@ -98,6 +102,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
     @observable _volume: number = 1;
     @observable _muted: boolean = false;
     @observable _controlsTransform?: { X: number, Y: number };
+    @observable _controlsVisible: boolean = true;
 
     @computed get links() { return DocListCast(this.dataDoc.links); }
     @computed get heightPercent() { return NumCast(this.layoutDoc._timelineHeightPercent, 100); } // current percent of video relative to VideoBox height
@@ -211,7 +216,6 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
         else {
             this._fullScreen = true;
             this.player && this._contentRef && this._contentRef.requestFullscreen();
-
         }
         try {
             this._youtubePlayer && this.props.addDocTab(this.rootDoc, "add");
@@ -220,7 +224,16 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
         }
     }
 
+    // fades out controls in fullscreen after mouse stops moving
+    @action controlsFade = (e: PointerEvent) => {
+        e.stopPropagation();
+        this._controlsVisible = true;
+        clearTimeout(this._controlsFadeTimer);
+        this._controlsFadeTimer = setTimeout(action(() => this._controlsVisible = false), 3000);
+    }
 
+
+    // drag controls around window in fulls screen
     @action controlsDrag = (e: React.PointerEvent) => {
         e.preventDefault();
         e.stopPropagation();
@@ -361,7 +374,19 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
     setContentRef = (cref: HTMLDivElement | null) => {
         this._contentRef = cref;
         if (cref) {
-            cref.onfullscreenchange = action((e) => this._fullScreen = (document.fullscreenElement === cref));
+            cref.onfullscreenchange = action((e) => {
+                this._fullScreen = (document.fullscreenElement === cref);
+                if (this._fullScreen) {
+                    document.addEventListener('pointermove', this.controlsFade);
+                    this._controlsVisible = true;
+                    this._controlsFadeTimer = setTimeout(action(() => this._controlsVisible = false), 3000)
+                    console.log("added");
+                }
+                else {
+                    document.removeEventListener('pointermove', this.controlsFade);
+                    console.log("removed");
+                }
+            });
         }
     }
 
@@ -402,9 +427,10 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
         const interactive = CurrentUserUtils.SelectedTool !== InkTool.None || !this.props.isSelected() ? "" : "-interactive";
         const classname = "videoBox-content" + (this._fullScreen ? "-fullScreen" : "") + interactive;
         return !field ? <div key="loading">Loading</div> :
-            <div className="videoBox-contentContainer" key="container" style={{ mixBlendMode: "multiply" }}>
+            <div className="videoBox-contentContainer" key="container" style={{ mixBlendMode: "multiply", cursor: this._fullScreen && !this._controlsVisible ? 'none' : 'pointer' }}>
                 <div className={classname} ref={this.setContentRef} onPointerDown={(e) => this._fullScreen && e.stopPropagation()}>
-                    {this._fullScreen && <div className="videoBox-ui" onPointerDown={this.controlsDrag} style={this._controlsTransform ? { left: this._controlsTransform.X, top: this._controlsTransform.Y } : {}}>
+                    {this._fullScreen && <div className="videoBox-ui" onPointerDown={this.controlsDrag}
+                        style={{ left: this._controlsTransform && this._controlsTransform.X, top: this._controlsTransform && this._controlsTransform.Y, visibility: this._controlsVisible ? 'visible' : 'hidden', opacity: this._controlsVisible ? 1 : 0 }}>
                         {this.UIButtons}
                     </div>}
                     <video key="video" autoPlay={this._screenCapture} ref={this.setVideoRef} style={this._fullScreen ? this.fullScreenSize() : {}}
@@ -413,7 +439,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
                         onPlay={() => this.Play()}
                         onSeeked={this.updateTimecode}
                         onPause={() => this.Pause()}
-                        onClick={e => e.preventDefault()}>
+                        onClick={this._fullScreen ? () => this.playing() ? this.Pause() : this.Play() : e => e.preventDefault()}>
                         <source src={field.url.href} type="video/mp4" />
                         Not supported.
                     </video>
@@ -830,6 +856,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
                 playLink={this.playLink}
                 PanelHeight={this.timelineHeight}
                 rawDuration={this.rawDuration}
+                vref={this._videoRef}
             />
         </div>;
     }