Input progress for volume, fixes for playback progress

controls.md

@@ -15,7 +15,6 @@ i18n: {
     play:               "Play",
     pause:              "Pause",
     forward:            "Forward {seektime} secs",
-    played:             "played",
     buffered:           "buffered",
     currentTime:        "Current time",
     duration:           "Duration",
@@ -50,9 +49,7 @@ var controls = ["<div class='plyr__controls'>",
     "<div class='plyr__progress'>",
         "<label for='seek{id}' class='plyr__sr-only'>Seek</label>",
         "<input id='seek{id}' class='plyr__progress--seek' type='range' min='0' max='100' step='0.1' value='0' data-plyr='seek'>",
-        "<progress class='plyr__progress--played' max='100' value='0'>",
+        "<progress class='plyr__progress--played' max='100' value='0' role="presentation"></progress>",
-            "<span>0</span>% played",
-        "</progress>",
         "<progress class='plyr__progress--buffer' max='100' value='0'>",
             "<span>0</span>% buffered",
         "</progress>",

src/js/plyr.js

@@ -60,10 +60,13 @@
                 rewind:         '[data-plyr="rewind"]',
                 forward:        '[data-plyr="fast-forward"]',
                 mute:           '[data-plyr="mute"]',
-                volume:         '[data-plyr="volume"]',
                 captions:       '[data-plyr="captions"]',
                 fullscreen:     '[data-plyr="fullscreen"]'
             },
+            volume: {
+                input:          '[data-plyr="volume"]',
+                display:        '.plyr__volume--display'
+            },
             progress: {
                 container:      '.plyr__progress',
                 buffer:         '.plyr__progress--buffer',
@@ -706,9 +709,7 @@
                 html.push('<span class="plyr__progress">',
                     '<label for="seek{id}" class="plyr__sr-only">Seek</label>',
                     '<input id="seek{id}" class="plyr__progress--seek" type="range" min="0" max="100" step="0.1" value="0" data-plyr="seek">',
-                    '<progress class="plyr__progress--played" max="100" value="0">',
+                    '<progress class="plyr__progress--played" max="100" value="0" role="presentation"></progress>',
-                        '<span>0</span>% ' + config.i18n.played,
-                    '</progress>',
                     '<progress class="plyr__progress--buffer" max="100" value="0">',
                         '<span>0</span>% ' + config.i18n.buffered,
                     '</progress>');
@@ -756,8 +757,11 @@
             // Volume range control
             if (_inArray(config.controls, 'volume')) {
                 html.push(
+                    '<span class="plyr__volume">',
                         '<label for="volume{id}" class="plyr__sr-only">' + config.i18n.volume + '</label>',
-                    '<input id="volume{id}" class="plyr__volume" type="range" min="0" max="10" value="5" data-plyr="volume">'
+                        '<input id="volume{id}" class="plyr__volume--input" type="range" min="0" max="10" value="5" data-plyr="volume">',
+                        '<progress class="plyr__volume--display" max="10" value="0" role="presentation"></progress>',
+                    '</span>'
                 );
             }
 
@@ -1206,10 +1210,8 @@
                 plyr.buttons.fullscreen       = _getElement(config.selectors.buttons.fullscreen);
 
                 // Inputs
-                plyr.buttons.volume           = _getElement(config.selectors.buttons.volume);
                 plyr.buttons.mute             = _getElement(config.selectors.buttons.mute);
                 plyr.buttons.captions         = _getElement(config.selectors.buttons.captions);
-                plyr.checkboxes               = _getElements('[type="checkbox"]');
 
                 // Progress
                 plyr.progress = {};
@@ -1223,13 +1225,14 @@
                 // Progress - Played
                 plyr.progress.played          = {};
                 plyr.progress.played.bar      = _getElement(config.selectors.progress.played);
-                plyr.progress.played.text     = plyr.progress.played.bar && plyr.progress.played.bar.getElementsByTagName('span')[0];
 
                 // Seek tooltip
                 plyr.progress.tooltip         = plyr.progress.container && plyr.progress.container.querySelector('.' + config.classes.tooltip);
 
                 // Volume
-                plyr.volume                   = _getElement(config.selectors.buttons.volume);
+                plyr.volume                   = {};
+                plyr.volume.input             = _getElement(config.selectors.volume.input);
+                plyr.volume.display           = _getElement(config.selectors.volume.display);
 
                 // Timing
                 plyr.duration                 = _getElement(config.selectors.duration);
@@ -1719,6 +1722,11 @@
                 targetTime = duration;
             }
 
+            // Update progress 
+            if(plyr.progress.played.bar) {
+                plyr.progress.played.bar.value = ((100 / duration) * targetTime);
+            }
+
             // Set the current time
             // Try/catch incase the media isn't set and we're calling seek() from source() and IE moans
             try {
@@ -1910,6 +1918,11 @@
             // Set the player volume
             plyr.media.volume = parseFloat(volume / 10);
 
+            // Set the display
+            if (plyr.volume.display) {
+                plyr.volume.display.value = volume;
+            }
+
             // Embeds
             if(_inArray(config.types.embed, plyr.type)) {
                 // YouTube
@@ -1939,8 +1952,13 @@
             var volume = plyr.media.muted ? 0 : (plyr.media.volume * 10);
 
             // Update the <input type="range"> if present
-            if (plyr.supported.full && plyr.volume) {
+            if (plyr.supported.full) {
-                plyr.volume.value = volume;
+                if (plyr.volume.input) {
+                    plyr.volume.input.value = volume;
+                }
+                if (plyr.volume.display) {
+                    plyr.volume.display.value = volume;
+                }
             }
 
             // Store the volume in storage
@@ -1998,7 +2016,7 @@
         // Update <progress> elements
         function _updateProgress(event) {
             var progress    = plyr.progress.played.bar,
-                text        = plyr.progress.played.text,
+                text        = false,
                 value       = 0,
                 duration    = _getDuration();
 
@@ -2016,13 +2034,6 @@
 
                         break;
 
-                    // Events from seek range
-                    case 'change':
-                    case 'input':
-                        value = event.target.value;
-                        break;
-
-
                     // Check buffer status
                     case 'playing':
                     case 'progress':
@@ -2042,6 +2053,8 @@
 
                             return 0;
                         })();
+
+                        break;
                 }
             }
 
@@ -2499,8 +2512,8 @@
             _proxyListener(plyr.buttons.seek, inputEvent, config.listeners.seek, _seek);
 
             // Set volume
-            _proxyListener(plyr.volume, inputEvent, config.listeners.volume, function() {
+            _proxyListener(plyr.volume.input, inputEvent, config.listeners.volume, function() {
-                _setVolume(plyr.volume.value);
+                _setVolume(plyr.volume.input.value);
             });
 
             // Mute

src/less/plyr.less

@@ -509,7 +509,8 @@
 }
 
 .plyr__progress--buffer[value],
-.plyr__progress--played[value] {
+.plyr__progress--played[value],
+.plyr__volume--display[value] {
     position: absolute;
     left: 0;
     top: 50%;
@@ -539,7 +540,8 @@
         border-radius: 100px;
     }
 }
-.plyr__progress--played[value] {
+.plyr__progress--played[value],
+.plyr__volume--display[value] {
     z-index: 1;
     color: @plyr-progress-playing-bg;
     background: transparent;
@@ -614,10 +616,14 @@
 
 // Volume
 // --------------------------------------------------------------
-// <input[type='range']> element
+.plyr .plyr__volume { 
-// Specificity is for bootstrap compatibility
-.plyr .plyr__volume[type='range'] {
     display: none;
+    position: relative;
+
+    input[type="range"] {
+        position: relative;
+        z-index: 2;
+    }
 
     @media (min-width: @plyr-bp-screen-sm) {
         display: block;
@@ -631,7 +637,7 @@
 // Hide sound controls on iOS
 // It's not supported to change volume using JavaScript:
 // https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html
-.plyr--is-ios .plyr__volume[type='range'],
+.plyr--is-ios .plyr__volume,
 .plyr--is-ios [data-plyr='mute'] {
     display: none !important;
 }