fade controls when scrubbing

3 files changed, 21 insertions, 25 deletions

diff --git a/package-lock.json b/package-lock.json
index 9dc7f1b04..5214ce10e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2384,9 +2384,13 @@
             "integrity": "sha512-reGEWshDmTDQDsCec/HduOO9Wyj6yMOupMfhIf3ugN1TDlK2NQW4DDJSqNNtp380SNcvRfXtO8HSCQot0d0SMw=="
         },
         "D": {
-            "version": "1.0.0",
+            "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/d/-/d-1.0.1.tgz",
-            "integrity": "sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA=="
+            "integrity": "sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==",
+            "requires": {
+                "es5-ext": "^0.10.50",
+                "type": "^1.0.1"
+            }
         },
         "abab": {
             "version": "2.0.6",
@@ -4838,7 +4842,6 @@
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/d/-/d-1.0.1.tgz",
             "integrity": "sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==",
-            "dev": true,
             "requires": {
                 "es5-ext": "^0.10.50",
                 "type": "^1.0.1"
@@ -5973,7 +5976,6 @@
             "version": "0.10.61",
             "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.61.tgz",
             "integrity": "sha512-yFhIqQAzu2Ca2I4SE2Au3rxVfmohU9Y7wqGR+s7+H7krk26NXhIRAZDgqd6xqjCEFUomDEA3/Bo/7fKmIkW1kA==",
-            "dev": true,
             "requires": {
                 "es6-iterator": "^2.0.3",
                 "es6-symbol": "^3.1.3",
@@ -5984,7 +5986,6 @@
             "version": "2.0.3",
             "resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.3.tgz",
             "integrity": "sha512-zw4SRzoUkd+cl+ZoE15A9o1oQd920Bb0iOJMQkQhl3jNc03YqVjAhG7scf9C5KWRU/R13Orf588uCC6525o02g==",
-            "dev": true,
             "requires": {
                 "d": "1",
                 "es5-ext": "^0.10.35",
@@ -6000,7 +6001,6 @@
             "version": "3.1.3",
             "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.3.tgz",
             "integrity": "sha512-NJ6Yn3FuDinBaBRWl/q5X/s4koRHBrgKAu+yGI6JCBeiu3qrcbJhwT2GeR/EXVfylRk8dpQVJoLEFhK+Mu31NA==",
-            "dev": true,
             "requires": {
                 "d": "^1.0.1",
                 "ext": "^1.1.2"
@@ -6388,7 +6388,6 @@
             "version": "1.6.0",
             "resolved": "https://registry.npmjs.org/ext/-/ext-1.6.0.tgz",
             "integrity": "sha512-sdBImtzkq2HpkdRLtlLWDa6w4DX22ijZLKx8BMPUuKe1c5lbN6xwQDQCxSfxBQnHZ13ls/FH0MQZx/q/gr6FQg==",
-            "dev": true,
             "requires": {
                 "type": "^2.5.0"
             },
@@ -6396,8 +6395,7 @@
                 "type": {
                     "version": "2.6.0",
                     "resolved": "https://registry.npmjs.org/type/-/type-2.6.0.tgz",
-                    "integrity": "sha512-eiDBDOmkih5pMbo9OqsqPRGMljLodLcwd5XD5JbtNB0o89xZAwynY9EdCDsJU7LtcVCClu9DvM7/0Ep1hYX3EQ==",
-                    "dev": true
+                    "integrity": "sha512-eiDBDOmkih5pMbo9OqsqPRGMljLodLcwd5XD5JbtNB0o89xZAwynY9EdCDsJU7LtcVCClu9DvM7/0Ep1hYX3EQ=="
                 }
             }
         },
@@ -10869,7 +10867,7 @@
             "dependencies": {
                 "JSONStream": {
                     "version": "1.3.5",
-                    "resolved": "https://registry.npmjs.org/JSONStream/-/JSONStream-1.3.5.tgz",
+                    "resolved": false,
                     "integrity": "sha512-E+iruNOY8VV9s4JEbe1aNEm6MiszPRr/UfcHMz0TQh1BXSxHK+ASV1R6W4HpjBhSeS+54PIsAMCBmwD06LLsqQ==",
                     "requires": {
                         "jsonparse": "^1.2.0",
@@ -12317,7 +12315,7 @@
                 },
                 "jsonparse": {
                     "version": "1.3.1",
-                    "resolved": "https://registry.npmjs.org/jsonparse/-/jsonparse-1.3.1.tgz",
+                    "resolved": false,
                     "integrity": "sha1-P02uSpH6wxX3EGL4UhzCOfE2YoA="
                 },
                 "jsprim": {
@@ -13703,7 +13701,7 @@
                 },
                 "strict-uri-encode": {
                     "version": "2.0.0",
-                    "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz",
+                    "resolved": false,
                     "integrity": "sha1-ucczDHBChi9rFC3CdLvMWGbONUY="
                 },
                 "string-width": {
@@ -13737,7 +13735,7 @@
                 },
                 "string_decoder": {
                     "version": "1.3.0",
-                    "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+                    "resolved": false,
                     "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
                     "requires": {
                         "safe-buffer": "~5.2.0"
@@ -13745,7 +13743,7 @@
                     "dependencies": {
                         "safe-buffer": {
                             "version": "5.2.0",
-                            "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.0.tgz",
+                            "resolved": false,
                             "integrity": "sha512-fZEwUGbVl7kouZs1jCdMLdt95hdIv0ZeHg6L7qPeciMZhZ+/gdesW4wgTARkrFWEpspjEATAzUGPG8N2jJiwbg=="
                         }
                     }
@@ -18921,8 +18919,7 @@
         "type": {
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/type/-/type-1.2.0.tgz",
-            "integrity": "sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg==",
-            "dev": true
+            "integrity": "sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg=="
         },
         "type-check": {
             "version": "0.3.2",
diff --git a/src/client/views/nodes/VideoBox.scss b/src/client/views/nodes/VideoBox.scss
index 47867b128..da29c291f 100644
--- a/src/client/views/nodes/VideoBox.scss
+++ b/src/client/views/nodes/VideoBox.scss
@@ -97,6 +97,7 @@
     z-index: 2001;
     height: 40px;
     padding: 0 10px 0 7px;
+    transition: opacity 0.3s;
 
     .timecode-controls {
         display: flex;
diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx
index c8bea2a44..bad7813ef 100644
--- a/src/client/views/nodes/VideoBox.tsx
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -103,7 +103,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;
+    @observable _controlsOpacity: number = 1;
 
     @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
@@ -262,9 +262,8 @@ 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);
+        this._controlsFadeTimer = setTimeout(action(() => this._controlsOpacity = 0), 3000);
     }
 
 
@@ -449,8 +448,6 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
                 this._fullScreen = (document.fullscreenElement === cref);
                 if (this._fullScreen) {
                     document.addEventListener('pointermove', this.controlsFade);
-                    this._controlsVisible = true;
-                    this._controlsFadeTimer = setTimeout(action(() => this._controlsVisible = false), 3000)
                 }
                 else {
                     document.removeEventListener('pointermove', this.controlsFade);
@@ -509,10 +506,10 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
         const interactive = CurrentUserUtils.ActiveTool !== 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", cursor: this._fullScreen && !this._controlsVisible ? 'none' : 'pointer' }}>
+            <div className="videoBox-contentContainer" key="container" style={{ mixBlendMode: "multiply", cursor: this._fullScreen && !this._controlsOpacity ? 'none' : 'pointer' }}>
                 <div className={classname} ref={this.setContentRef} onPointerDown={(e) => this._fullScreen && e.stopPropagation()}>
                     {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 }}>
+                        style={{ left: this._controlsTransform && this._controlsTransform.X, top: this._controlsTransform && this._controlsTransform.Y, visibility: this._controlsOpacity ? 'visible' : 'hidden', opacity: this._controlsOpacity }}>
                         {this.UIButtons}
                     </div>}
                     <video key="video" autoPlay={this._screenCapture} ref={this.setVideoRef} style={this._fullScreen ? this.fullScreenSize() : {}}
@@ -837,7 +834,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
         const yPos = top + vidHeight - uiHeight - uiMargin;
         const xPos = uiHeight / vidHeight > 0.4 ? right + 10 : left + 10;
         return this._fullScreen || (right - left) < 50 ? null : <div className="videoBox-ui-wrapper" style={{ clip: `rect(${boundsTop}px, 10000px, 10000px, ${boundsLeft}px)` }}>
-            <div className="videoBox-ui" style={{ left: xPos, top: yPos, height: uiHeight, width: width - 20, transition: this._clicking ? "top 0.5s" : "" }}>
+            <div className="videoBox-ui" style={{ left: xPos, top: yPos, height: uiHeight, width: width - 20, transition: this._clicking ? "top 0.5s" : "", opacity: this._controlsOpacity}}>
                 {this.UIButtons}
             </div>
         </div>
@@ -863,8 +860,9 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
                     <div className="timeline-slider">
                         <input type="range" step="0.1" min={this.timeline.clipStart} max={this.timeline.clipEnd} value={curTime}
                             className="toolbar-slider time-progress"
-                            onPointerDown={(e: React.PointerEvent) => { e.stopPropagation(); }}
+                            onPointerDown={action((e: React.PointerEvent) => { e.stopPropagation(); this._controlsOpacity = 0.5;})}
                             onChange={(e: React.ChangeEvent<HTMLInputElement>) => this.setPlayheadTime(Number(e.target.value))}
+                            onPointerUp={action((e: React.PointerEvent) => {e.stopPropagation(); this._controlsOpacity = 1;})}
                         />
                     </div>
                     :