From 7a4e8b6352d06242d3c8006256f395c59f8d342a Mon Sep 17 00:00:00 2001
From: mehekj <mehek.jethani@gmail.com>
Date: Thu, 5 May 2022 13:32:34 -0400
Subject: drag video controls in full screen

---
 src/client/views/nodes/VideoBox.scss |  7 ++++--
 src/client/views/nodes/VideoBox.tsx  | 41 ++++++++++++++++++++++++++++++++++--
 2 files changed, 44 insertions(+), 4 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/VideoBox.scss b/src/client/views/nodes/VideoBox.scss
index 08d0bb035..1fb5cef98 100644
--- a/src/client/views/nodes/VideoBox.scss
+++ b/src/client/views/nodes/VideoBox.scss
@@ -161,9 +161,12 @@
     align-items: flex-end;
 
     .videoBox-ui {
-        opacity: 0;
-        bottom: 50px;
+        // opacity: 0;
+        left: 50%;
+        top: 90%;
+        transform: translate(-50%, -50%);
         width: 80%;
+        transition: none;
     }
 
     .videoBox-ui:hover {
diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx
index 0344295bb..a4b7ffb9b 100644
--- a/src/client/views/nodes/VideoBox.tsx
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -23,6 +23,7 @@ import { ContextMenu } from "../ContextMenu";
 import { ContextMenuProps } from "../ContextMenuItem";
 import { ViewBoxAnnotatableComponent, ViewBoxAnnotatableProps } from "../DocComponent";
 import { DocumentDecorations } from "../DocumentDecorations";
+import { LinkPopup } from "../linking/LinkPopup";
 import { MarqueeAnnotator } from "../MarqueeAnnotator";
 import { AnchorMenu } from "../pdf/AnchorMenu";
 import { StyleProp } from "../StyleProvider";
@@ -97,6 +98,8 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
     @observable _finished: boolean = false; // has playback reached end of clip
     @observable _volume: number = 1;
     @observable _muted: boolean = false;
+    @observable _controlsTransform?: { X: number, Y: number };
+    // @observable _showLinkPopup = 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
@@ -220,6 +223,26 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
     }
 
 
+    @action controlsDrag = (e: React.PointerEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+        const eleStyle = getComputedStyle(e.target as Element);
+        this._controlsTransform = { X: parseInt(eleStyle.left), Y: parseInt(eleStyle.top) };
+
+        setupMoveUpEvents(e.target,
+            e,
+            action((e, down, delta) => {
+                if (this._controlsTransform) {
+                    this._controlsTransform.X = Math.max(0, Math.min(delta[0] + this._controlsTransform.X, window.innerWidth));
+                    this._controlsTransform.Y = Math.max(0, Math.min(delta[1] + this._controlsTransform.Y, window.innerHeight));
+                }
+                return false;
+            }),
+            emptyFunction,
+            emptyFunction)
+    }
+
+
     // creates and links snapshot photo of current video frame
     @action public Snapshot = (downX?: number, downY?: number, cb?: (filename: string, x: number | undefined, y: number | undefined) => void) => {
         const width = NumCast(this.layoutDoc._width);
@@ -383,7 +406,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
         return !field ? <div key="loading">Loading</div> :
             <div className="videoBox-contentContainer" key="container" style={{ mixBlendMode: "multiply" }}>
                 <div className={classname} ref={this.setContentRef} onPointerDown={(e) => this._fullScreen && e.stopPropagation()}>
-                    {this._fullScreen && <div className="videoBox-ui">
+                    {this._fullScreen && <div className="videoBox-ui" onPointerDown={this.controlsDrag} style={this._controlsTransform ? { left: this._controlsTransform.X, top: this._controlsTransform.Y } : {}}>
                         {this.UIButtons}
                     </div>}
                     <video key="video" autoPlay={this._screenCapture} ref={this.setVideoRef} style={this._fullScreen ? this.fullScreenSize() : {}}
@@ -609,6 +632,19 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
         }
     }
 
+    @action
+    onAudioDown = (e: React.PointerEvent) => {
+        e.stopPropagation();
+        setupMoveUpEvents(this, e, returnFalse, returnFalse, action((e: PointerEvent, doubleTap?: boolean) => {
+            if (doubleTap && !this._fullScreen) {
+                // console.log("hello");
+                // this._showLinkPopup = !this._showLinkPopup;
+            } else {
+                this.toggleMute();
+            }
+        }));
+    }
+
     // toggles video mute
     @action
     toggleMute = () => {
@@ -706,6 +742,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
         return this._fullScreen ? null : <div className="videoBox-ui-wrapper" style={{ clip: `rect(${boundsTop}px, 10000px, 10000px, ${boundsLeft}px)` }}>
             <div className="videoBox-ui" style={{ left: left - overflow, top: yPos, width: width }}>
                 {this.UIButtons}
+                {/* <LinkPopup key="popup" showPopup={this._showLinkPopup} linkFrom={emptyFunction} />, */}
             </div>
         </div>
     }
@@ -760,7 +797,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
 
             <div className="videobox-button show-slider"
                 title={this._muted ? "unmute" : "mute"}
-                onPointerDown={(e) => { e.stopPropagation(); this.toggleMute(); }}>
+                onPointerDown={this.onAudioDown}>
                 <FontAwesomeIcon icon={this._muted ? "volume-mute" : "volume-up"} />
             </div>
             <input type="range" step="0.1" min="0" max="1" value={this._muted ? 0 : this._volume}
-- 
cgit v1.2.3-70-g09d2