From 516fbb5692bd774b0421f4bbdb10a19e5920c84c Mon Sep 17 00:00:00 2001
From: mehekj <mehek.jethani@gmail.com>
Date: Mon, 6 Jun 2022 11:17:27 -0400
Subject: fixed funky video UI scaling and movement

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

(limited to 'src')

diff --git a/src/client/views/nodes/VideoBox.scss b/src/client/views/nodes/VideoBox.scss
index c7108d290..f279b9709 100644
--- a/src/client/views/nodes/VideoBox.scss
+++ b/src/client/views/nodes/VideoBox.scss
@@ -96,8 +96,6 @@
     border-radius: 100px;
     z-index: 2001;
     min-width: 300px;
-    
-    transition: top 0.5s, width 0.5s, opacity 0.2s, visibility 0.2s;
     height: 50px;
     padding: 0 10px 0 7px;
 
diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx
index 5fe1ad5ed..76b1ad842 100644
--- a/src/client/views/nodes/VideoBox.tsx
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -31,6 +31,17 @@ import "./VideoBox.scss";
 const path = require('path');
 
 
+//TODO mj: one option for doing thumbnail previews of video in timeline?
+/**
+ * 1. set vref in videobox
+ * 2. when vref is set immediately process video to extract ~50 thumbnails
+ * (^^ would make more sense to do this when video is initially uploaded)
+ * 3. upload each file to server using convertDataURI and save list of URLs as field on doc
+ * 4. in CST onHover, set hover time
+ * 5. use hover time to figure out index of nearest thumbnail
+ * 6. get URL of image and use source to paint canvas accordingly
+ */
+
 /**
  * VideoBox
  * Main component: VideoBox.tsx
@@ -755,8 +766,8 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
         const yPos = height * this.heightPercent / 100 - 60 + top;
         const width = Math.max(right - left, 300);
         const overflow = (width - right + left) / 2;
-        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 }}>
+        return this._fullScreen || (right - left) < 250 ? 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, transition: this._clicking ? "top 0.5s" : "" }}>
                 {this.UIButtons}
             </div>
         </div>
-- 
cgit v1.2.3-70-g09d2