From e474d02cf51c5e20e42baa6b7d9c4aeb4ab51967 Mon Sep 17 00:00:00 2001
From: mehekj <mehek.jethani@gmail.com>
Date: Sat, 12 Mar 2022 16:40:40 -0500
Subject: video ui in progress, basic functions show up

---
 src/client/views/nodes/VideoBox.scss | 90 ++++++++++++++++++++++++++++++++++--
 1 file changed, 85 insertions(+), 5 deletions(-)

(limited to 'src/client/views/nodes/VideoBox.scss')

diff --git a/src/client/views/nodes/VideoBox.scss b/src/client/views/nodes/VideoBox.scss
index 8a3261c7d..35f5a7e65 100644
--- a/src/client/views/nodes/VideoBox.scss
+++ b/src/client/views/nodes/VideoBox.scss
@@ -78,10 +78,49 @@
 .videoBox-ui {
     position: absolute;
     flex-direction: row;
-    right: 5px;
-    top: 5px;
-    display: none;
-    background-color: rgba($dark-gray, 0.6);
+    align-items: center;
+    justify-content: center;
+    display: flex;
+    visibility: none;
+    opacity: 0;
+    background-color: $dark-gray;
+    color: white;
+    border-radius: 100px;
+    left: 50%;
+    transform: translate(-50%, -150%);
+    transition: top 0.5s, opacity 0.2s, visibility 0s;
+    height: 5%;
+    width: 80%;
+
+    .timecode-controls {
+        display: flex;
+        flex-direction: row;
+        margin: 0 5px;
+
+        .timecode {
+            margin: 0 5px;
+        }
+    }
+
+    .videobox-button {
+        margin: 5px;
+        cursor: pointer;
+        width: 30px;
+        height: 30px;
+        border-radius: 50%;
+        background: $dark-gray;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        &:hover {
+            background: $black;
+        }
+
+        svg {
+            width: 20px;
+        }
+    }
 }
 .videoBox-time,
 .videoBox-snapshot,
@@ -101,6 +140,47 @@
 
 .videoBox:hover {
     .videoBox-ui {
-        display: flex;
+        visibility: visible;
+        opacity: 1;
+        z-index: 10000;
     }
 }
+
+video::-webkit-media-controls {
+    display: none !important;
+}
+
+input[type="range"] {
+    -webkit-appearance: none;
+    background: none;
+    margin: 5px;
+}
+
+input[type="range"]:focus {
+    outline: none;
+}
+
+input[type="range"]::-webkit-slider-runnable-track {
+    width: 100%;
+    height: 6px;
+    cursor: pointer;
+    box-shadow: 0;
+    background: $light-gray;
+    border-radius: 3px;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+    box-shadow: 0;
+    border: 0;
+    height: 10px;
+    width: 10px;
+    border-radius: 10px;
+    background: $medium-blue;
+    cursor: pointer;
+    -webkit-appearance: none;
+    margin-top: -2px;
+}
+
+.toolbar-slider.volume {
+    width: 50px;
+}
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2