[Glitch] Change volume control and download buttons in web UI

Port 419ad6248beb192f34ef581306138c3ff0d600a9 to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>

1 files changed, 48 insertions, 15 deletions

diff --git a/app/javascript/flavours/glitch/styles/components/media.scss b/app/javascript/flavours/glitch/styles/components/media.scss
index a9abb9c16..88046a7a2 100644
--- a/app/javascript/flavours/glitch/styles/components/media.scss
+++ b/app/javascript/flavours/glitch/styles/components/media.scss
@@ -345,13 +345,21 @@
     height: 100%;
   }
 
+  .video-player__volume::before,
+  .video-player__seek::before {
+    background: rgba($white, 0.15);
+  }
+
   &.with-light-background {
+    color: $black;
+
+    .video-player__volume::before,
     .video-player__seek::before {
-      color: rgba($black, 0.35);
+      background: rgba($black, 0.15);
     }
 
-    .video-player__seek__seek {
-      color: rgba($black, 0.2);
+    .video-player__seek__buffer {
+      background: rgba($black, 0.2);
     }
 
     .video-player__buttons button {
@@ -369,10 +377,6 @@
     .video-player__time-current {
       color: $black;
     }
-
-    .video-player__volume::before {
-      background: rgba($black, 0.35);
-    }
   }
 
   .video-player__seek::before,
@@ -400,6 +404,7 @@
   border-radius: 4px;
   box-sizing: border-box;
   direction: ltr;
+  color: $white;
 
   &.editable {
     border-radius: 0;
@@ -527,6 +532,10 @@
   }
 
   &__buttons {
+    display: flex;
+    flex: 0 1 auto;
+    min-width: 30px;
+    align-items: center;
     font-size: 16px;
     white-space: nowrap;
     overflow: hidden;
@@ -545,6 +554,7 @@
     }
 
     button {
+      flex: 0 0 auto;
       background: transparent;
       padding: 2px 10px;
       font-size: 16px;
@@ -559,6 +569,13 @@
     }
   }
 
+  &__time {
+    display: inline;
+    flex: 0 1 auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
   &__time-sep,
   &__time-total,
   &__time-current {
@@ -568,7 +585,6 @@
 
   &__time-current {
     color: $white;
-    margin-left: 60px;
   }
 
   &__time-sep {
@@ -582,9 +598,22 @@
   }
 
   &__volume {
+    flex: 0 0 auto;
+    display: inline-flex;
     cursor: pointer;
     height: 24px;
-    display: inline;
+    position: relative;
+    overflow: hidden;
+
+    .no-reduce-motion & {
+      transition: all 100ms linear;
+    }
+
+    &.active {
+      overflow: visible;
+      width: 50px;
+      margin-right: 10px;
+    }
 
     &::before {
       content: "";
@@ -594,8 +623,9 @@
       display: block;
       position: absolute;
       height: 4px;
-      left: 70px;
-      bottom: 20px;
+      left: 0;
+      top: 50%;
+      transform: translate(0, -50%);
     }
 
     &__current {
@@ -603,8 +633,9 @@
       position: absolute;
       height: 4px;
       border-radius: 4px;
-      left: 70px;
-      bottom: 20px;
+      left: 0;
+      top: 50%;
+      transform: translate(0, -50%);
       background: lighten($ui-highlight-color, 8%);
     }
 
@@ -614,8 +645,10 @@
       border-radius: 50%;
       width: 12px;
       height: 12px;
-      bottom: 16px;
-      left: 70px;
+      top: 50%;
+      left: 0;
+      margin-left: -6px;
+      transform: translate(0, -50%);
       transition: opacity .1s ease;
       background: lighten($ui-highlight-color, 8%);
       box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);