From 8a4d54af0bd7dc54f48ade3f4deda0aaf81eb303 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fernando=20Jim=C3=A9nez=20Moreno?= <ferjmoreno@gmail.com>
Date: Thu, 18 Apr 2019 12:02:58 +0200
Subject: [PATCH] Add progress percentage as input range

---
 resources/media_controls.js | 31 +++++++++++++++++++------------
 1 file changed, 19 insertions(+), 12 deletions(-)

diff --git a/resources/media_controls.js b/resources/media_controls.js
index 855e9774096..827c8f1cee8 100644
--- a/resources/media_controls.js
+++ b/resources/media_controls.js
@@ -7,6 +7,7 @@
 
   const MARKUP = `
     <button id="play-pause-button"></button>
+    <input id="progress" type="range" value="0" min="0" max="100" step="1"></input>
     <span id="position-duration-box" class="hidden">
       #1
       <span id="duration"> / #2</span>
@@ -94,6 +95,7 @@
         "duration",
         "play-pause-button",
         "position-duration-box",
+        "progress",
         "volume-switch",
         "volume-level"
       ].forEach(id => {
@@ -187,7 +189,6 @@
 
           const to = TRANSITIONS[name][from];
 
-          console.log(`transitioning from ${from} to ${to}`);
           if (from == to) {
             return;
           }
@@ -215,7 +216,6 @@
         return;
       }
 
-      console.log(`render from ${from} to ${this.state}`);
       if (this.state != from) {
         // Play/Pause button.
         const playPauseButton = this.elements.playPauseButton;
@@ -223,6 +223,23 @@
         playPauseButton.classList.add(this.state);
       }
 
+      // Progress.
+      const positionPercent = this.media.currentTime / this.media.duration * 100;
+      if (!isNaN(positionPercent) && positionPercent != Infinity) {
+        this.elements.progress.value = positionPercent;
+      } else {
+        this.elements.progress.value = 0;
+      }
+
+      // Current time and duration.
+      let currentTime = "0:00";
+      let duration = "0:00";
+      if (!isNaN(this.media.currentTime) && !isNaN(this.media.duration)) {
+        currentTime = formatTime(Math.round(this.media.currentTime * 1000));
+        duration = formatTime(Math.round(this.media.duration * 1000));
+      }
+      this.elements.positionDurationBox.show(currentTime, duration);
+
       // Volume.
       const volumeSwitchClass = this.media.muted || this.media.volume == 0 ? "muted" : "volumeup";
       if (!this.elements.volumeSwitch.classList.contains(volumeSwitchClass)) {
@@ -233,15 +250,6 @@
       if (this.elements.volumeLevel.value != volumeLevelValue) {
         this.elements.volumeLevel.value = volumeLevelValue;
       }
-
-      // Current time and duration.
-      let currentTime = "0:00";
-      let duration = "0:00";
-      if (!isNaN(this.media.currentTime) && !isNaN(this.media.duration)) {
-        currentTime = formatTime(Math.round(this.media.currentTime * 1000));
-        duration = formatTime(Math.round(this.media.duration * 1000));
-      }
-      this.elements.positionDurationBox.show(currentTime, duration);
     }
 
     handleEvent(event) {
@@ -283,7 +291,6 @@
 
     // HTMLMediaElement event handler
     onMediaEvent(event) {
-      console.log(event.type);
       switch (event.type) {
         case "ended":
           this.end();