put videoBox ui into componentUI function

1 files changed, 31 insertions, 41 deletions

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