dynamically adjust video controls based on scale

2 files changed, 48 insertions, 35 deletions

diff --git a/src/client/views/nodes/VideoBox.scss b/src/client/views/nodes/VideoBox.scss
index f279b9709..47867b128 100644
--- a/src/client/views/nodes/VideoBox.scss
+++ b/src/client/views/nodes/VideoBox.scss
@@ -95,8 +95,7 @@
     color: white;
     border-radius: 100px;
     z-index: 2001;
-    min-width: 300px;
-    height: 50px;
+    height: 40px;
     padding: 0 10px 0 7px;
 
     .timecode-controls {
@@ -121,8 +120,8 @@
     .videobox-button {
         margin: 2px;
         cursor: pointer;
-        width: 30px;
-        height: 30px;
+        width: 25px;
+        height: 25px;
         border-radius: 50%;
         background: $dark-gray;
         display: flex;
@@ -134,8 +133,8 @@
         }
 
         svg {
-            width: 17px;
-            height: 17px;
+            width: 15px;
+            height: 15px;
         }
     }
 }
diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx
index 76b1ad842..61afda70f 100644
--- a/src/client/views/nodes/VideoBox.tsx
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -763,17 +763,22 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
         const right = bounds?.right || 0;
         const top = bounds?.top || 0;
         const height = (bounds?.bottom || 0) - top;
-        const yPos = height * this.heightPercent / 100 - 60 + top;
-        const width = Math.max(right - left, 300);
-        const overflow = (width - right + left) / 2;
-        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" : "" }}>
+        const width = right - left;
+        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)` }}>
+            <div className="videoBox-ui" style={{ left: xPos, top: yPos, height: uiHeight, width: width - 20, transition: this._clicking ? "top 0.5s" : "" }}>
                 {this.UIButtons}
             </div>
         </div>
     }
 
     @computed get UIButtons() {
+        const bounds = this.props.docViewPath().lastElement().getBounds();
+        const width = (bounds?.right || 0) - (bounds?.left || 0);
         const curTime = NumCast(this.layoutDoc._currentTimecode) - (this.timeline?.clipStart || 0);
         return <>
             <div className="videobox-button"
@@ -782,12 +787,12 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
                 <FontAwesomeIcon icon={this._playing ? "pause" : "play"} />
             </div>
 
-            {this.timeline && <div className="timecode-controls">
+            {this.timeline && width > 160 && <div className="timecode-controls">
                 <div className="timecode-current">
                     {formatTime(curTime)}
                 </div>
 
-                {this._fullScreen || this.heightPercent === 100 ?
+                {this._fullScreen || (this.heightPercent === 100 && width > 200) ?
                     <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"
@@ -801,38 +806,46 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
                 <div className="timecode-end">
                     {formatTime(this.timeline.clipDuration)}
                 </div>
-            </div>}
+            </div>
+            }
 
-            <div className="videobox-button"
+            {width > 100 && <div className="videobox-button"
                 title={"full screen"}
                 onPointerDown={this.onFullDown}>
                 <FontAwesomeIcon icon="expand" />
-            </div>
-
-            {!this._fullScreen && <div className="videobox-button"
-                title={"show timeline"}
-                onPointerDown={this.onTimelineHdlDown}>
-                <FontAwesomeIcon icon="eye" />
             </div>}
 
-            {!this._fullScreen && <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>}
+            {
+                !this._fullScreen && width > 250 && <div className="videobox-button"
+                    title={"show timeline"}
+                    onPointerDown={this.onTimelineHdlDown}>
+                    <FontAwesomeIcon icon="eye" />
+                </div>
+            }
 
-            <div className="videobox-button show-slider"
+            {
+                !this._fullScreen && width > 250 && <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"
                 title={this._muted ? "unmute" : "mute"}
                 onPointerDown={(e) => { e.stopPropagation(); this.toggleMute(); }}>
                 <FontAwesomeIcon icon={this._muted ? "volume-mute" : "volume-up"} />
-            </div>
-            <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"
-                onPointerDown={(e: React.PointerEvent) => e.stopPropagation()}
-                onChange={(e: React.ChangeEvent<HTMLInputElement>) => this.setVolume(Number(e.target.value))}
-            />
+            </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"
+                    onPointerDown={(e: React.PointerEvent) => e.stopPropagation()}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => this.setVolume(Number(e.target.value))}
+                />
+            }
 
-            {!this._fullScreen && this.heightPercent !== 100 &&
+            {
+                !this._fullScreen && this.heightPercent !== 100 && width > 300 &&
                 <>
                     <div className="videobox-button" title="zoom">
                         <FontAwesomeIcon icon="search-plus" />
@@ -842,7 +855,8 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
                         onPointerDown={(e: React.PointerEvent) => { e.stopPropagation(); }}
                         onChange={(e: React.ChangeEvent<HTMLInputElement>) => { this.zoom(Number(e.target.value)); }}
                     />
-                </>}
+                </>
+            }
         </>
     }