From c412afe10fda4b3a8a918621c7f3bbaf6db8f1f2 Mon Sep 17 00:00:00 2001
From: mehekj <mehek.jethani@gmail.com>
Date: Wed, 8 Jun 2022 09:17:31 -0400
Subject: better controls breakpoints

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

(limited to 'src')

diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx
index 61afda70f..236c0d5fd 100644
--- a/src/client/views/nodes/VideoBox.tsx
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -763,13 +763,13 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
         const right = bounds?.right || 0;
         const top = bounds?.top || 0;
         const height = (bounds?.bottom || 0) - top;
-        const width = right - left;
+        const width = Math.max(right - left, 100);
         const uiHeight = Math.max(25, Math.min(50, height / 10));
         const uiMargin = Math.min(10, height / 20);
         const vidHeight = height * this.heightPercent / 100;
         const yPos = top + vidHeight - uiHeight - uiMargin;
-        const xPos = uiHeight / vidHeight > 0.5 ? right + 10 : left + 10;
-        return this._fullScreen || width < 50 ? null : <div className="videoBox-ui-wrapper" style={{ clip: `rect(${boundsTop}px, 10000px, 10000px, ${boundsLeft}px)` }}>
+        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" : "" }}>
                 {this.UIButtons}
             </div>
@@ -787,7 +787,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
                 <FontAwesomeIcon icon={this._playing ? "pause" : "play"} />
             </div>
 
-            {this.timeline && width > 160 && <div className="timecode-controls">
+            {this.timeline && width > 150 && <div className="timecode-controls">
                 <div className="timecode-current">
                     {formatTime(curTime)}
                 </div>
@@ -809,14 +809,14 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
             </div>
             }
 
-            {width > 100 && <div className="videobox-button"
+            <div className="videobox-button"
                 title={"full screen"}
                 onPointerDown={this.onFullDown}>
                 <FontAwesomeIcon icon="expand" />
-            </div>}
+            </div>
 
             {
-                !this._fullScreen && width > 250 && <div className="videobox-button"
+                !this._fullScreen && width > 300 && <div className="videobox-button"
                     title={"show timeline"}
                     onPointerDown={this.onTimelineHdlDown}>
                     <FontAwesomeIcon icon="eye" />
@@ -824,18 +824,18 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
             }
 
             {
-                !this._fullScreen && width > 250 && <div className="videobox-button"
+                !this._fullScreen && width > 300 && <div className="videobox-button"
                     title={this.timeline?.IsTrimming !== TrimScope.None ? "finish trimming" : "start trim"}
                     onPointerDown={this.onClipPointerDown}>
                     <FontAwesomeIcon icon={this.timeline?.IsTrimming !== TrimScope.None ? "check" : "cut"} />
                 </div>
             }
 
-            {width > 70 && <div className="videobox-button"
+            <div className="videobox-button"
                 title={this._muted ? "unmute" : "mute"}
                 onPointerDown={(e) => { e.stopPropagation(); this.toggleMute(); }}>
                 <FontAwesomeIcon icon={this._muted ? "volume-mute" : "volume-up"} />
-            </div>}
+            </div>
             {
                 width > 300 && <input type="range" style={{ width: `min(25%, 50px)` }} step="0.1" min="0" max="1" value={this._muted ? 0 : this._volume}
                     className="toolbar-slider volume"
-- 
cgit v1.2.3-70-g09d2