From 5a3bec8422a078a1c66f84587bd4de5e200f8caf Mon Sep 17 00:00:00 2001
From: mehekj <mehek.jethani@gmail.com>
Date: Tue, 21 Jun 2022 13:33:45 -0400
Subject: fades when scrub with arrow keys and cleaner transition

---
 src/client/views/nodes/VideoBox.tsx | 48 +++++++++++++++++++++++++++++--------
 1 file changed, 38 insertions(+), 10 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx
index bad7813ef..43f052859 100644
--- a/src/client/views/nodes/VideoBox.tsx
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -29,8 +29,8 @@ import { MarqueeAnnotator } from "../MarqueeAnnotator";
 import { AnchorMenu } from "../pdf/AnchorMenu";
 import { StyleProp } from "../StyleProvider";
 import { FieldView, FieldViewProps } from './FieldView';
-import "./VideoBox.scss";
 import { RecordingBox } from "./RecordingBox/RecordingBox";
+import "./VideoBox.scss";
 const path = require('path');
 
 /**
@@ -103,7 +103,8 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
     @observable _volume: number = 1;
     @observable _muted: boolean = false;
     @observable _controlsTransform?: { X: number, Y: number };
-    @observable _controlsOpacity: number = 1;
+    @observable _controlsVisible: boolean = true;
+    @observable _scrubbing: boolean = false;
 
     @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
@@ -148,14 +149,34 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
             }
         }
         this.player && this.setPlayheadTime(0);
+        document.addEventListener("keydown", this.keyEvents, true);
     }
 
     componentWillUnmount() {
         this.removeCurrentlyPlaying();
         this.Pause();
         Object.keys(this._disposers).forEach(d => this._disposers[d]?.());
+        document.removeEventListener("keydown", this.keyEvents, true);
     }
 
+    // handles key events, when timeline scrubs fade controls
+    @action
+    keyEvents = (e: KeyboardEvent) => {
+        if (
+            !(e.target instanceof HTMLInputElement) &&
+            this.props.isSelected(true)
+        ) {
+            switch (e.key) {
+                case "ArrowLeft":
+                case "ArrowRight":
+                    clearTimeout(this._controlsFadeTimer);
+                    this._scrubbing = true;
+                    this._controlsFadeTimer = setTimeout(action(() => this._scrubbing = false), 500);
+                    e.stopPropagation();
+                    break;
+            }
+        }
+    }
 
     // plays video
     @action public Play = (update: boolean = true) => {
@@ -168,11 +189,11 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
 
             // if presentation isn't null, call followmovements on the recording api
             if (this.presentation) {
-                console.log("presentation isn't null")
+                // console.log("presentation isn't null")
                 const err = RecordingApi.Instance.playMovements(this.presentation, this.player?.currentTime || 0, this);
                 err && console.log(err)
           } else {
-                console.log("presentation is null")
+                // console.log("presentation is null")
         }
 
         this._playing = true;
@@ -263,7 +284,9 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
     @action controlsFade = (e: PointerEvent) => {
         e.stopPropagation();
         clearTimeout(this._controlsFadeTimer);
-        this._controlsFadeTimer = setTimeout(action(() => this._controlsOpacity = 0), 3000);
+        this._controlsVisible = true;
+        this._scrubbing = false;
+        this._controlsFadeTimer = setTimeout(action(() => this._controlsVisible = false), 3000);
     }
 
 
@@ -446,6 +469,9 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
         if (cref) {
             cref.onfullscreenchange = action((e) => {
                 this._fullScreen = (document.fullscreenElement === cref);
+                this._controlsVisible = true;
+                this._scrubbing = false;
+                clearTimeout(this._controlsFadeTimer);
                 if (this._fullScreen) {
                     document.addEventListener('pointermove', this.controlsFade);
                 }
@@ -505,11 +531,12 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
         const field = Cast(this.dataDoc[this.fieldKey], VideoField);
         const interactive = CurrentUserUtils.ActiveTool !== InkTool.None || !this.props.isSelected() ? "" : "-interactive";
         const classname = "videoBox-content" + (this._fullScreen ? "-fullScreen" : "") + interactive;
+        const opacity = this._scrubbing ? 0.5 : (this._controlsVisible ? 1 : 0);
         return !field ? <div key="loading">Loading</div> :
-            <div className="videoBox-contentContainer" key="container" style={{ mixBlendMode: "multiply", cursor: this._fullScreen && !this._controlsOpacity ? 'none' : 'pointer' }}>
+            <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={{ left: this._controlsTransform && this._controlsTransform.X, top: this._controlsTransform && this._controlsTransform.Y, visibility: this._controlsOpacity ? 'visible' : 'hidden', opacity: this._controlsOpacity }}>
+                        style={{ left: this._controlsTransform && this._controlsTransform.X, top: this._controlsTransform && this._controlsTransform.Y, visibility: this._controlsVisible || this._scrubbing ? 'visible' : 'hidden', opacity: opacity }}>
                         {this.UIButtons}
                     </div>}
                     <video key="video" autoPlay={this._screenCapture} ref={this.setVideoRef} style={this._fullScreen ? this.fullScreenSize() : {}}
@@ -833,8 +860,9 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
         const vidHeight = height * this.heightPercent / 100;
         const yPos = top + vidHeight - uiHeight - uiMargin;
         const xPos = uiHeight / vidHeight > 0.4 ? right + 10 : left + 10;
+        const opacity = this._scrubbing ? 0.5 : (this._controlsVisible ? 1 : 0);
         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" : "", opacity: this._controlsOpacity}}>
+            <div className="videoBox-ui" style={{ left: xPos, top: yPos, height: uiHeight, width: width - 20, transition: this._clicking ? "top 0.5s" : "", opacity: opacity}}>
                 {this.UIButtons}
             </div>
         </div>
@@ -860,9 +888,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={action((e: React.PointerEvent) => { e.stopPropagation(); this._controlsOpacity = 0.5;})}
+                            onPointerDown={action((e: React.PointerEvent) => { e.stopPropagation(); this._scrubbing = true;})}
                             onChange={(e: React.ChangeEvent<HTMLInputElement>) => this.setPlayheadTime(Number(e.target.value))}
-                            onPointerUp={action((e: React.PointerEvent) => {e.stopPropagation(); this._controlsOpacity = 1;})}
+                            onPointerUp={action((e: React.PointerEvent) => {e.stopPropagation(); this._scrubbing = false;})}
                         />
                     </div>
                     :
-- 
cgit v1.2.3-70-g09d2