From 5a6743a4ce293747fbc9da0ea681f13f033b6cf2 Mon Sep 17 00:00:00 2001
From: DispatchCommit <dispatchcommit@gmail.com>
Date: Sat, 13 Feb 2021 04:26:07 -0800
Subject: [PATCH] Bring in the initial styling

---
 .../plugins/videojs-overlay/plugin.scss       | 157 +++++++++++++++++-
 ui/scss/component/_file-render.scss           |   2 +-
 2 files changed, 157 insertions(+), 2 deletions(-)

diff --git a/ui/component/viewers/videoViewer/internal/plugins/videojs-overlay/plugin.scss b/ui/component/viewers/videoViewer/internal/plugins/videojs-overlay/plugin.scss
index 2d9ff7e9b..834da9566 100644
--- a/ui/component/viewers/videoViewer/internal/plugins/videojs-overlay/plugin.scss
+++ b/ui/component/viewers/videoViewer/internal/plugins/videojs-overlay/plugin.scss
@@ -1,4 +1,4 @@
-.video-js {
+/*.video-js {
   $bottom: 3.5em;
   $nudge: 5px;
   $middle: 50%;
@@ -81,5 +81,160 @@
   .vjs-no-flex .vjs-overlay-right {
     margin-top: $offset-v;
   }
+}*/
+
+$accent-color: var(--color-primary);
+
+.video-js {
+  font-size: 12px;
+  overflow: hidden;
+
+  // Control Bar (container)
+  .vjs-control-bar {
+    background: none;
+
+    &::before {
+      position: absolute;
+      bottom: 0;
+      content: '';
+      height: 5rem;
+      width: 100%;
+      background: rgba(20, 20, 20, 0.45);
+      background: linear-gradient(0deg, rgba(0,0,0,.85) 10%, rgba(0,0,0,0) 100%);
+    }
+  }
+
+  // Progress Bar
+  .vjs-progress-control.vjs-control {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 1rem;
+    bottom: 90%;
+
+    // Circle play head
+    .vjs-play-progress::before {
+      transform: scale(0);
+      transition: transform .3s;
+    }
+
+    &:hover {
+      .vjs-play-progress::before {
+        transform: scale(1);
+      }
+    }
+
+    // Progress Slider
+    .vjs-slider {
+      margin: 0 1rem;
+    }
+  }
+
+  // Load progress color
+  .vjs-load-progress,
+  .vjs-load-progress div {
+    background-color: rgba(160, 160, 160, 0.5);
+  }
+
+  // Progress Bar Background
+  .vjs-slider {
+    background-color: rgba(60, 60, 60, 0.5);
+  }
+
+  // Primary Color Progress
+  .vjs-slider-bar {
+    background-color: $accent-color;
+  }
+
+  // Inner Progress Bar
+  .vjs-play-progress {
+    background-color: $accent-color;
+    color: $accent-color;
+  }
+
+  // Spacer
+  .vjs-custom-control-spacer {
+    display: flex;
+    flex: auto;
+  }
+
+  // Transcoding menu
+  /*.vjs-tech {
+    height: auto !important;
+    position: absolute !important;
+  }*/
+
+  // Menu size
+  .vjs-playback-rate .vjs-menu .vjs-menu-content {
+    width: 125%;
+    font-size: 10px;
+  }
+
+  // Volume slider
+  .vjs-volume-panel {
+    &.vjs-control {
+      transition: .2s;
+    }
+
+    .vjs-volume-control.vjs-volume-horizontal {
+      transition: .2s;
+    }
+  }
 }
 
+
+// Tooltip
+.vjs-mouse-display .vjs-time-tooltip {
+  color: $accent-color;
+}
+
+// Tooltip
+.video-js {
+  .vjs-progress-control{
+    .vjs-play-progress {
+      .vjs-time-tooltip {
+        display: none;
+      }
+    }
+  }
+}
+
+
+// Transitions control bar between active / inactive
+.vjs-has-started {
+  .vjs-control-bar {
+    opacity: 1;
+    transition: .1s;
+  }
+
+  &.vjs-user-inactive.vjs-playing {
+    .vjs-control-bar {
+      opacity: 0;
+      transition: .3s;
+    }
+  }
+
+  &.vjs-user-active.vjs-playing {
+    .vjs-control-bar {
+
+    }
+  }
+}
+
+
+// Button glow
+.video-js {
+  .vjs-control {
+    &:focus:before,
+    &:hover:before,
+    &:focus {
+      // Disable builtin button glow
+      text-shadow: none;
+    }
+  }
+}
+
+.bottom-gradient {
+  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.4) 0%, transparent 72px);
+}
diff --git a/ui/scss/component/_file-render.scss b/ui/scss/component/_file-render.scss
index de87758db..86dbb7896 100644
--- a/ui/scss/component/_file-render.scss
+++ b/ui/scss/component/_file-render.scss
@@ -387,7 +387,7 @@
   }
 
   .vjs-control-bar {
-    background-color: rgba(0, 0, 0, 0.8);
+    // background-color: rgba(0, 0, 0, 0.8);
 
     .vjs-remaining-time {
       display: none;