fade controls when scrubbing

2 files changed, 8 insertions, 9 deletions

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>
                     :