put videoBox ui into componentUI function

3 files changed, 54 insertions, 46 deletions

diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index c794c73db..15ccd7b31 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -184,7 +184,7 @@ export class MainView extends React.Component {
         fa.faArrowAltCircleDown, fa.faArrowAltCircleUp, fa.faArrowAltCircleLeft, fa.faArrowAltCircleRight, fa.faStopCircle, fa.faCheckCircle, fa.faGripVertical,
         fa.faSortUp, fa.faSortDown, fa.faTable, fa.faTh, fa.faThList, fa.faProjectDiagram, fa.faSignature, fa.faColumns, fa.faChevronCircleUp, fa.faUpload, fa.faBorderAll,
         fa.faBraille, fa.faChalkboard, fa.faPencilAlt, fa.faEyeSlash, fa.faSmile, fa.faIndent, fa.faOutdent, fa.faChartBar, fa.faBan, fa.faPhoneSlash, fa.faGripLines,
-        fa.faSave, fa.faBookmark, fa.faList, fa.faListOl, fa.faFolderPlus, fa.faLightbulb, fa.faBookOpen, fa.faMapMarkerAlt, fa.faSearchPlus, fa.faVolumeUp, fa.faVolumeDown]);
+        fa.faSave, fa.faBookmark, fa.faList, fa.faListOl, fa.faFolderPlus, fa.faLightbulb, fa.faBookOpen, fa.faMapMarkerAlt, fa.faSearchPlus, fa.faVolumeUp, fa.faVolumeMute]);
         this.initAuthenticationRouters();
     }
 
diff --git a/src/client/views/nodes/VideoBox.scss b/src/client/views/nodes/VideoBox.scss
index f47a71469..08d0bb035 100644
--- a/src/client/views/nodes/VideoBox.scss
+++ b/src/client/views/nodes/VideoBox.scss
@@ -75,54 +75,53 @@
 //     pointer-events: all;
 // }
 
+.videoBox-ui-wrapper {
+    width: 0;
+    height: 0;
+}
+
 .videoBox-ui {
     position: absolute;
     flex-direction: row;
     align-items: center;
     justify-content: center;
     display: flex;
-    width: 100%;
-    visibility: none;
-    opacity: 0;
+    // visibility: none;
+    // opacity: 0;
     background-color: $dark-gray;
     color: white;
     border-radius: 100px;
-    top: calc(100% - 20px);
-    left: 50%;
-    transform: translate(-50%, -100%);
+    z-index: 2001;
+    min-width: 300px;
     
     transition: top 0.5s, width 0.5s, opacity 0.2s, visibility 0s;
-    height: 120px;
-    padding: 0 20px;
+    height: 50px;
+    padding: 0 10px 0 7px;
 
     .timecode-controls {
         display: flex;
         flex-direction: row;
         align-items: center;
         justify-content: center;
-        margin: 0 5px;
+        margin: 0 2px;
         flex-grow: 2;
-        font-size: 32px;
-
-        .timecode {
-            margin: 0 5px;
-        }
+        font-size: 14px;
 
         .timeline-slider {
-            margin: 0 20px 0 20px;
+            margin: 5px;
             flex-grow: 2;
         }
     }
 
     .toolbar-slider.volume, .toolbar-slider.zoom {
-        width: 100px;
+        width: 50px;
     }
 
     .videobox-button {
-        margin: 5px;
+        margin: 2px;
         cursor: pointer;
-        width: 70px;
-        height: 70px;
+        width: 30px;
+        height: 30px;
         border-radius: 50%;
         background: $dark-gray;
         display: flex;
@@ -134,8 +133,8 @@
         }
 
         svg {
-            width: 40px;
-            height: 40px;
+            width: 17px;
+            height: 17px;
         }
     }
 }
@@ -156,23 +155,15 @@
     }
 }
 
-.videoBox:hover {
-    .videoBox-ui {
-        visibility: visible;
-        opacity: 1;
-        z-index: 10000;
-    }
-}
-
 .videoBox-content-fullScreen, .videoBox-content-fullScreen-interactive {
     display: flex;
     justify-content: center;
-    align-items: center;
+    align-items: flex-end;
 
-    &:hover {
-        .videoBox-ui {
-            opacity: 0;
-        }
+    .videoBox-ui {
+        opacity: 0;
+        bottom: 50px;
+        width: 80%;
     }
 
     .videoBox-ui:hover {
@@ -187,7 +178,6 @@ video::-webkit-media-controls {
 input[type="range"] {
     -webkit-appearance: none;
     background: none;
-    margin: 10px;
 }
 
 input[type="range"]:focus {
@@ -196,21 +186,21 @@ input[type="range"]:focus {
 
 input[type="range"]::-webkit-slider-runnable-track {
     width: 100%;
-    height: 20px;
+    height: 10px;
     cursor: pointer;
     box-shadow: 0;
     background: $light-gray;
-    border-radius: 20px;
+    border-radius: 10px;
 }
 
 input[type="range"]::-webkit-slider-thumb {
     box-shadow: 0;
     border: 0;
-    height: 26px;
-    width: 26px;
-    border-radius: 20px;
+    height: 12px;
+    width: 12px;
+    border-radius: 10px;
     background: $medium-blue;
     cursor: pointer;
     -webkit-appearance: none;
-    margin-top: -3px;
+    margin-top: -1px;
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx
index e57cb1abe..80ad63e72 100644
--- a/src/client/views/nodes/VideoBox.tsx
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -383,7 +383,10 @@ 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.uIButtons}
+                    {/* {this._fullScreen && this.componentUI(0, 0)} */}
+                    {this._fullScreen && <div className="videoBox-ui">
+                        {this.UIButtons}
+                    </div>}
                     <video key="video" autoPlay={this._screenCapture} ref={this.setVideoRef} style={this._fullScreen ? this.fullScreenSize() : {}}
                         onCanPlay={this.videoLoad}
                         controls={VideoBox._nativeControls}
@@ -692,9 +695,24 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
 
 
     // renders video controls
-    @computed get uIButtons() {
+    componentUI = (boundsLeft: number, boundsTop: number) => {
+        const bounds = this.props.docViewPath().lastElement().getBounds();
+        const left = bounds?.left || 0;
+        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 - 20, 300);
+        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 + 10, top: yPos, width: width }}>
+                {this.UIButtons}
+            </div>
+        </div>
+    }
+
+    @computed get UIButtons() {
         const curTime = NumCast(this.layoutDoc._currentTimecode) - (this.timeline?.clipStart || 0);
-        return <div className="videoBox-ui" style={this._fullScreen || this.heightPercent === 100 ? { fontSize: "40px", minWidth: "80%" } : {}}>
+        return <>
             <div className="videobox-button"
                 title={this._playing ? "play" : "pause"}
                 onPointerDown={this.onPlayDown}>
@@ -762,7 +780,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
                         onChange={(e: React.ChangeEvent<HTMLInputElement>) => { this.zoom(Number(e.target.value)); }}
                     />
                 </>}
-        </div>;
+        </>
     }
 
     // renders CollectionStackedTimeline