better mobile seek bar

static/mobile/css/style.css

@@ -201,3 +201,75 @@ ol li {
     width: 64px;
     height: 64px;
 }
+
+
+.seekbar {
+  padding: 12px 22px;
+  position: relative;
+  width: 100%;
+}
+.fullscreen .seekbar {
+    padding: 28px 22px;
+}
+
+.seekbar-progress {
+  height: 10px;
+  border: solid 1px #B1B1B1;
+}
+
+.seekbar-progress [role="progressbar"] {
+  height: 100%;
+  position: relative;
+  background-color: #B1B1B180;
+}
+
+.seekbar-progress [role="progressbar"]:after {
+  content: " ";
+  display: block;
+  width: 14px;
+  height: 14px;
+  position: absolute;
+  top: -3px;
+  right: -7px;
+  border: 2px solid #B1B1B180;
+  background-color: #B1B1B180;
+}
+
+.seekbar input[type="range"] {
+  -webkit-appearance: none;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 2;
+  background: transparent;
+  outline: 0;
+  border: 0;
+}
+
+.seekbar input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  display: block;
+  width: 48px;
+  height: 48px;
+  background-color: transparent;
+}
+
+.seekbar input[type="range"]::-moz-range-thumb {
+  display: block;
+  width: 48px;
+  height: 48px;
+  background: transparent;
+  border: 0;
+}
+
+.seekbar input[type="range"]::-moz-range-track {
+  background: transparent;
+  border: 0;
+}
+
+.seekbar input[type="range"]::-moz-focus-outer {
+  border: 0;
+}

static/mobile/js/VideoPlayer.js

@@ -153,9 +153,11 @@ window.VideoPlayer = function(options) {
                     ${icon.mute}
                 </div>
                 <div class="position">
-                    <div class="bar">
+                    <div class="seekbar">
-                        <div class="progress"></div>
+                      <input type="range" value="0" min='0' max='100' step='.25' />
-
+                      <div class="seekbar-progress">
+                        <div role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="38" style="width: 0%;"></div>
+                      </div>
                     </div>
                 </div>
                 <div class="time">
@@ -223,15 +225,28 @@ window.VideoPlayer = function(options) {
             }
         }
         var showControls
+        function hideControlsLater() {
+            showControls = setTimeout(() => {
+                if (touching) {
+                    hideControlsLater()
+                } else {
+                    self.controls.style.opacity = that.paused ? '1' : '0'
+                    showControls = null
+                }
+            }, 3000)
+        }
         var toggleControls = event => {
+            if (event.target.tagName == "INPUT") {
+                if (showControls) {
+                    clearTimeout(showControls)
+                }
+                return
+            }
             if (self.controls.style.opacity == '0') {
                 event.preventDefault()
                 event.stopPropagation()
                 self.controls.style.opacity = '1'
-                showControls = setTimeout(() => {
+                hideControlsLater()
-                    self.controls.style.opacity = that.paused ? '1' : '0'
-                    showControls = null
-                }, 3000)
             } else {
                 self.controls.style.opacity = '0'
             }
@@ -241,10 +256,7 @@ window.VideoPlayer = function(options) {
                 clearTimeout(showControls)
             }
             self.controls.style.opacity = '1'
-            showControls = setTimeout(() => {
+            hideControlsLater()
-                self.controls.style.opacity = that.paused ? '1' : '0'
-                showControls = null
-            }, 3000)
         })
         self.controls.addEventListener("mouseleave", event => {
             if (showControls) {
@@ -253,7 +265,13 @@ window.VideoPlayer = function(options) {
             self.controls.style.opacity = that.paused ? '1' : '0'
             showControls = null
         })
+        self.controls.addEventListener("touchstart", event => {
+            touching = true
+        })
         self.controls.addEventListener("touchstart", toggleControls)
+        self.controls.addEventListener("touchend", event => {
+            touching = false
+        })
         self.controls.querySelector('.toggle').addEventListener("click", toggleVideo)
         self.controls.querySelector('.volume').addEventListener("click", toggleSound)
         self.controls.querySelector('.fullscreen-btn').addEventListener("click", toggleFullscreen)
@@ -310,6 +328,7 @@ window.VideoPlayer = function(options) {
         that.append(unblock)
     })
     var loading = true
+    var touching = false
     that.brightness(0)
     that.addEventListener("loadedmetadata", event => {
         //
@@ -331,34 +350,29 @@ window.VideoPlayer = function(options) {
         }
     })
 
-    var time = that.querySelector('.controls .time div'),
+    var time = that.querySelector('.controls .time div');
-        progress = that.querySelector('.controls .position .progress')
+    const progressbar = that.querySelector('.seekbar div[role="progressbar"]');
-    that.querySelector('.controls .position').addEventListener("click", event => {
+    function setProgressPosition(value) {
-        var bar = event.target
+        progressbar.style.width = value + '%';
-        while (bar && !bar.classList.contains('bar')) {
+        progressbar.setAttribute('aria-valuenow', value);
-            bar = bar.parentElement
+
     }
-        if (bar && bar.classList.contains('bar')) {
+    that.querySelector('.controls .position input').addEventListener('input', function(event){
         event.preventDefault()
         event.stopPropagation()
-            var rect = bar.getBoundingClientRect()
+        setProgressPosition(this.value)
-            var x = event.clientX - rect.x
+        var position = this.value/100 * self.options.duration
-            var percent = x / rect.width
-            var position = percent * self.options.duration
-            if (self.options.position) {
-                position += self.options.position
-            }
-            progress.style.width = (100 * percent) + '%'
         that.currentTime(position)
-        }
+        hideControlsLater()
     })
+
     that.addEventListener("timeupdate", event => {
         var currentTime = that.currentTime(),
             duration = self.options.duration
         if (self.options.position) {
             currentTime -= self.options.position
         }
-        progress.style.width = (100 * currentTime / duration) + '%'
+        setProgressPosition(100 * currentTime / duration)
         duration = formatDuration(duration)
         currentTime = formatDuration(currentTime)
         while (duration && duration.startsWith('00:')) {