From 3faf46a1d765040db7c2375b0630b19bd108d09a Mon Sep 17 00:00:00 2001
From: Alain Takoudjou <alain.takoudjou@nexedi.com>
Date: Tue, 8 Dec 2020 13:27:56 +0100
Subject: [PATCH] Rework video player style

Reduce button size and reduce video control bar size.
Add a volume slider to control volume level when volume control is enabled
---
 static/galene.css  | 65 +++++++++++++++++++++++++++++++++++++---------
 static/galene.html | 23 +++++++++-------
 static/galene.js   | 24 ++++++++++++-----
 3 files changed, 85 insertions(+), 27 deletions(-)

diff --git a/static/galene.css b/static/galene.css
index e861133..6b6f9e2 100644
--- a/static/galene.css
+++ b/static/galene.css
@@ -457,30 +457,51 @@ textarea.form-reply {
     left: 0;
     bottom: 25px;
     text-align: center;
-    color: #fff;
-    font-size: 1.5em;
-    transition: all .5s ease-out;
+    color: #eaeaea;
+    font-size: 1.1em;
     opacity: 0;
+    height: 32px;
+}
+
+.video-controls:after, .top-video-controls:after {
+    clear: both;
+    display: table;
+    content: " ";
 }
 
 .top-video-controls {
-  text-align: right;
-  bottom: inherit;
-  top: 5px;
+    text-align: right;
+    bottom: inherit;
+    top: 5px;
+}
+
+.controls-button {
+    padding: 3px 10px;
+    vertical-align: middle;
+    height: 100%;
+}
+
+.controls-left {
+    float: left;
+    text-align: left;
+}
+
+.controls-right {
+    float: right;
+    text-align: right;
 }
 
 .vc-overlay {
-  background: linear-gradient(180deg, rgb(0 0 0 / 0%) 0%, rgb(0 0 0 / 7%) 0%, rgb(0 0 0 / 24%) 100%);
+    background: linear-gradient(180deg, rgb(0 0 0 / 20%) 0%, rgb(0 0 0 / 50%) 0%, rgb(0 0 0 / 70%) 100%);
 }
 
 .peer:hover > .video-controls, .peer:hover > .top-video-controls {
     opacity: 1;
-    transition: all .7s ease-out;
 }
 
 .video-controls span, .top-video-controls span {
-    margin-right: 10%;
-    transition: all .7s ease-out;
+    margin-right: 20px;
+    transition: opacity .7s ease-out;
     opacity: 1;
     cursor: pointer;
 }
@@ -490,12 +511,11 @@ textarea.form-reply {
 }
 
 .video-controls span:hover, .top-video-controls span:hover {
-    opacity: .5;
+    opacity: .8;
     transition: opacity .5s ease-out;
 }
 
 .video-controls .volume {
-    width: 25px;
     display: inline-block;
     text-align: center;
 }
@@ -505,6 +525,27 @@ textarea.form-reply {
     color: #c8c8c8
 }
 
+.volume-mute {
+    vertical-align: middle;
+    width: 25px;
+    display: var(--dv, inline);
+}
+
+.volume-slider {
+    height: 4px;
+    width: 60px;
+    cursor: pointer;
+    margin: 5px 5px;
+    vertical-align: middle;
+    opacity: var(--ov, 0);
+    transition: opacity .5s ease-out;
+}
+
+.video-controls .volume:hover {
+    --ov: 1;
+    --dv: inline;
+}
+
 .mobile-container {
     display: block !important;
 }
diff --git a/static/galene.html b/static/galene.html
index 02b126e..76191f9 100644
--- a/static/galene.html
+++ b/static/galene.html
@@ -218,15 +218,20 @@
 
     <div id="videocontrols-template" class="invisible">
       <div class="video-controls vc-overlay">
-        <span class="volume" title="Volume">
-          <i class="fas fa-volume-up" aria-hidden="true"></i>
-        </span>
-        <span class="pip" title="Picture In Picture">
-          <i class="fas fa-clone" aria-hidden="true"></i>
-        </span>
-        <span class="fullscreen" title="Fullscreen">
-          <i class="fas fa-expand-alt" aria-hidden="true"></i>
-        </span>
+        <div class="controls-button controls-left">
+          <span class="volume" title="Volume">
+            <i class="fas fa-volume-up volume-mute" aria-hidden="true"></i>
+            <input class="volume-slider" type="range" max="100" value="100" min="0" step="5" >
+          </span>
+        </div>
+        <div class="controls-button controls-right">
+          <span class="pip" title="Picture In Picture">
+            <i class="far fa-clone" aria-hidden="true"></i>
+          </span>
+          <span class="fullscreen" title="Fullscreen">
+            <i class="fas fa-expand" aria-hidden="true"></i>
+          </span>
+        </div>
       </div>
     </div>
 
diff --git a/static/galene.js b/static/galene.js
index 2e05f7a..d05f907 100644
--- a/static/galene.js
+++ b/static/galene.js
@@ -1125,6 +1125,9 @@ function addCustomControls(media, container, c) {
     if(c.kind === 'local') {
         volume.remove();
     } else {
+        let slider = /** @type{HTMLInputElement} */
+            (getVideoButton(controls, "volume-slider"));
+        slider.disabled = media.muted;
         setVolumeButton(
             /** @type{HTMLElement} */(volume.firstElementChild),
             media.muted,
@@ -1149,11 +1152,11 @@ function getVideoButton(container, name) {
  */
 function setVolumeButton(button, muted) {
     if(!muted) {
-        button.classList.remove("fa-volume-off");
+        button.classList.remove("fa-volume-mute");
         button.classList.add("fa-volume-up");
     } else {
         button.classList.remove("fa-volume-up");
-        button.classList.add("fa-volume-off");
+        button.classList.add("fa-volume-mute");
     }
 }
 
@@ -1165,12 +1168,21 @@ function registerControlHandlers(media, container) {
     let volume = getVideoButton(container, 'volume');
     if (volume) {
         volume.onclick = function(event) {
+            let target = /** @type{HTMLElement} */(event.target);
+            if(!target.classList.contains('volume-mute'))
+                // if click on volume slider, do nothing
+                return;
             event.preventDefault();
             media.muted = !media.muted;
-            setVolumeButton(
-                /** @type{HTMLElement} */(event.target),
-                media.muted,
-            );
+            let slider = /** @type{HTMLInputElement} */
+                (getVideoButton(volume, "volume-slider"));
+            slider.disabled = media.muted;
+            setVolumeButton(target, media.muted);
+        };
+        volume.oninput = function() {
+          let slider = /** @type{HTMLInputElement} */
+              (getVideoButton(volume, "volume-slider"));
+          media.volume = parseInt(slider.value, 10)/100;
         };
     }