Removed extra <progress> for populating lower fill on range inputs

4 files changed, 174 insertions, 193 deletions

diff --git a/src/js/plyr.js b/src/js/plyr.js
index d5d9f11b..c0a39fb9 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -471,6 +471,7 @@
                 isFirefox: isFirefox,
                 isChrome: isChrome,
                 isSafari: isSafari,
+                isWebkit: 'WebkitAppearance' in document.documentElement.style,
                 isIPhone: /(iPhone|iPod)/gi.test(navigator.platform),
                 isIos: /(iPad|iPhone|iPod)/gi.test(navigator.platform),
             };
@@ -1429,6 +1430,45 @@
             }
         }
 
+        // Webkit polyfill for lower fill range
+        function updateRangeFill(range) {
+            if (!player.browser.isWebkit) {
+                return;
+            }
+
+            if (!utils.is.htmlElement(range)) {
+                return;
+            }
+
+            // Inject the stylesheet if needed
+            if (!utils.is.htmlElement(player.elements.styleSheet)) {
+                player.elements.styleSheet = utils.createElement('style');
+                player.elements.container.appendChild(player.elements.styleSheet);
+            }
+
+            var styleSheet = player.elements.styleSheet.sheet;
+            var percentage = (range.value / range.max) * 100;
+            var selector = '#' + range.id + '::-webkit-slider-runnable-track';
+            var styles = '{ background-image: linear-gradient(to right, currentColor ' + percentage + '%, transparent ' + percentage + '%) }';
+            var index = -1;
+
+            // Find old rule if it exists
+            [].some.call(styleSheet.rules, function(rule, i) {
+                if (rule.selectorText === selector) {
+                    index = i;
+                    return true;
+                }
+            })[0];
+
+            // Remove old rule
+            if (index !== -1) {
+                styleSheet.deleteRule(index);
+            }
+
+            // Insert new one
+            styleSheet.insertRule([selector, styles].join(' '));
+        }
+
         // Get icon URL
         function getIconUrl() {
             return {
@@ -1605,7 +1645,7 @@
                         type: 'range',
                         min: 0,
                         max: 100,
-                        step: 0.1,
+                        step: 0.01,
                         value: 0,
                         autocomplete: 'off',
                     },
@@ -1738,14 +1778,11 @@
                 container.appendChild(seek.label);
                 container.appendChild(seek.input);
 
-                // TODO: Add loop display indicator
-
-                // Played progress
-                container.appendChild(createProgress('played'));
-
                 // Buffer progress
                 container.appendChild(createProgress('buffer'));
 
+                // TODO: Add loop display indicator
+
                 // Seek tooltip
                 if (player.config.tooltips.seek) {
                     var tooltip = utils.createElement(
@@ -1803,10 +1840,6 @@
                 volume.appendChild(range.label);
                 volume.appendChild(range.input);
 
-                // Create the display progress
-                var progress = createProgress('volume', attributes);
-                volume.appendChild(progress);
-
                 controls.appendChild(volume);
             }
 
@@ -2701,8 +2734,6 @@
                 // Display
                 player.elements.display = {
                     buffer: getElement(player.config.selectors.display.buffer),
-                    played: getElement(player.config.selectors.display.played),
-                    volume: getElement(player.config.selectors.display.volume),
                     duration: getElement(player.config.selectors.display.duration),
                     currentTime: getElement(player.config.selectors.display.currentTime),
                 };
@@ -3043,7 +3074,6 @@
                         // Get current quality
                         player.media.quality = instance.getPlaybackQuality();
 
-                        // Trigger timeupdate
                         trigger(player.media, 'qualitychange');
                     },
                     onPlaybackRateChange: function(event) {
@@ -3053,7 +3083,6 @@
                         // Get current speed
                         player.media.playbackRate = instance.getPlaybackRate();
 
-                        // Trigger timeupdate
                         trigger(player.media, 'ratechange');
                     },
                     onReady: function(event) {
@@ -3097,10 +3126,7 @@
                         // Update UI
                         embedReady();
 
-                        // Trigger timeupdate
                         trigger(player.media, 'timeupdate');
-
-                        // Trigger timeupdate
                         trigger(player.media, 'durationchange');
 
                         // Reset timer
@@ -3177,10 +3203,7 @@
 
                                 // Poll to get playback progress
                                 timers.playing = window.setInterval(function() {
-                                    // Set the current time
                                     player.media.currentTime = instance.getCurrentTime();
-
-                                    // Trigger timeupdate
                                     trigger(player.media, 'timeupdate');
                                 }, 100);
 
@@ -3248,15 +3271,11 @@
 
             player.embed.getCurrentTime().then(function(value) {
                 player.media.currentTime = value;
-
-                // Trigger timeupdate
                 trigger(player.media, 'timeupdate');
             });
 
             player.embed.getDuration().then(function(value) {
                 player.media.duration = value;
-
-                // Trigger timeupdate
                 trigger(player.media, 'durationchange');
             });
 
@@ -3358,8 +3377,6 @@
 
                 player.embed.getPosition(function(value) {
                     player.media.currentTime = value;
-
-                    // Trigger timeupdate
                     trigger(player.media, 'timeupdate');
                 });
 
@@ -3554,10 +3571,7 @@
                 var value = player.media.muted ? 0 : player.media.volume;
 
                 if (player.elements.inputs.volume) {
-                    player.elements.inputs.volume.value = value;
-                }
-                if (player.elements.display.volume) {
-                    player.elements.display.volume.value = value;
+                    setRange(player.elements.inputs.volume, value);
                 }
             }
 
@@ -3592,13 +3606,48 @@
             }, player.loading ? 250 : 0);
         }
 
+        // Update seek value and lower fill
+        function setRange(range, value) {
+            if (!utils.is.htmlElement(range)) {
+                return;
+            }
+
+            range.value = value;
+
+            // Webkit range fill
+            updateRangeFill(range);
+        }
+
+        // Set <progress> value
+        function setProgress(progress, value) {
+            // Default to 0
+            if (utils.is.undefined(value)) {
+                value = 0;
+            }
+
+            // Default to buffer or bail
+            if (utils.is.undefined(progress)) {
+                progress = player.elements.display.buffer;
+            }
+
+            // Update value and label
+            if (utils.is.htmlElement(progress)) {
+                progress.value = value;
+
+                // Update text label inside
+                var label = progress.getElementsByTagName('span')[0];
+                if (utils.is.htmlElement(label)) {
+                    label.childNodes[0].nodeValue = value;
+                }
+            }
+        }
+
         // Update <progress> elements
         function updateProgress(event) {
             if (!player.supported.full) {
                 return;
             }
 
-            var progress = player.elements.display.played;
             var value = 0;
             var duration = player.getDuration();
 
@@ -3610,8 +3659,8 @@
                         value = utils.getPercentage(player.media.currentTime, duration);
 
                         // Set seek range value only if it's a 'natural' time event
-                        if (event.type === 'timeupdate' && player.elements.inputs.seek) {
-                            player.elements.inputs.seek.value = value;
+                        if (event.type === 'timeupdate') {
+                            setRange(player.elements.inputs.seek, value);
                         }
 
                         break;
@@ -3619,7 +3668,6 @@
                     // Check buffer status
                     case 'playing':
                     case 'progress':
-                        progress = player.elements.display.buffer;
                         value = (function() {
                             var buffered = player.media.buffered;
 
@@ -3634,6 +3682,8 @@
                             return 0;
                         })();
 
+                        setProgress(player.elements.display.buffer, value);
+
                         break;
                 }
             }
@@ -3643,45 +3693,12 @@
                 console.warn('Looping');
                 player.seek(player.config.loop.start);
             }*/
-
-            setProgress(progress, value);
-        }
-
-        // Set <progress> value
-        function setProgress(progress, value) {
-            if (!player.supported.full) {
-                return;
-            }
-
-            // Default to 0
-            if (utils.is.undefined(value)) {
-                value = 0;
-            }
-            // Default to buffer or bail
-            if (utils.is.undefined(progress)) {
-                if (utils.is.htmlElement(player.elements.display.buffer)) {
-                    progress = player.elements.display.buffer;
-                } else {
-                    return;
-                }
-            }
-
-            // Update value and label
-            if (utils.is.htmlElement(progress)) {
-                progress.value = value;
-
-                // Update text label inside
-                var label = progress.getElementsByTagName('span')[0];
-                if (utils.is.htmlElement(label)) {
-                    label.childNodes[0].nodeValue = value;
-                }
-            }
         }
 
         // Update the displayed time
         function updateTimeDisplay(time, element) {
             // Bail if there's no duration display
-            if (!element) {
+            if (!utils.is.htmlElement(element)) {
                 return;
             }
 
@@ -3749,27 +3766,6 @@
             updateProgress(event);
         }
 
-        // Update seek range and progress
-        function updateSeekDisplay(time) {
-            // Default to 0
-            if (!utils.is.number(time)) {
-                time = 0;
-            }
-
-            var duration = player.getDuration();
-            var value = utils.getPercentage(time, duration);
-
-            // Update progress
-            if (player.elements.progress && player.elements.display.played) {
-                player.elements.display.played.value = value;
-            }
-
-            // Update seek range input
-            if (player.elements.buttons && player.elements.inputs.seek) {
-                player.elements.inputs.seek.value = value;
-            }
-        }
-
         // Update hover tooltip for seeking
         function updateSeekTooltip(event) {
             var duration = player.getDuration();
@@ -3828,17 +3824,13 @@
                 return;
             }
 
-            // Update seek range and progress
-            updateSeekDisplay();
-
-            // Reset buffer progress
-            setProgress();
-
             // Cancel current network requests
             cancelRequests();
 
             // Destroy instance and re-setup
             player.destroy(function() {
+                // TODO: Reset menus here
+
                 // Remove elements
                 removeElement(player.media);
                 removeElement('captions');
@@ -3977,7 +3969,7 @@
                 var target = player.elements.buttons[play ? 'pause' : 'play'];
 
                 // Transfer focus
-                if (target) {
+                if (utils.is.htmlElement(target)) {
                     target.focus();
                 }
             }
@@ -4262,11 +4254,12 @@
             // Click anywhere closes menu
             utils.on(document.documentElement, 'click', toggleMenu);
 
-            // Show tab in menu
-            utils.on(player.elements.settings.form, 'click', showTab);
-
-            // Settings menu items - use event delegation as items are added/removed
+            // Settings menu
             utils.on(player.elements.settings.form, 'click', function(event) {
+                // Show tab in menu
+                showTab(event);
+
+                // Settings menu items - use event delegation as items are added/removed
                 // Settings - Language
                 if (utils.matches(event.target, player.config.selectors.inputs.language)) {
                     handlerProxy.call(this, event, player.config.listeners.language, function() {
@@ -4306,11 +4299,18 @@
                 player.seek(event.target.value / event.target.max * duration);
             });
 
-            // Seek
+            // Volume
             utils.proxy(player.elements.inputs.volume, inputEvent, player.config.listeners.volume, function() {
                 player.setVolume(event.target.value);
             });
 
+            // Polyfill for lower fill in <input type="range"> for webkit
+            if (player.browser.isWebkit) {
+                utils.on(getElements('input[type="range"]'), [inputEvent, 'updated'].join(' '), function(event) {
+                    updateRangeFill(event.target);
+                });
+            }
+
             // Seek tooltip
             utils.on(player.elements.progress, 'mouseenter mouseleave mousemove', updateSeekTooltip);
 
@@ -4789,7 +4789,6 @@
             setupCaptions: setupCaptions,
             toggleNativeControls: toggleNativeControls,
             updateTimeDisplay: updateTimeDisplay,
-            updateSeekDisplay: updateSeekDisplay,
             updateSource: updateSource,
             toggleMenu: toggleMenu,
             timers: timers,
@@ -4925,9 +4924,6 @@
             targetTime = duration;
         }
 
-        // Update seek range and progress
-        player.core.updateSeekDisplay(targetTime);
-
         // Set the current time
         // Embeds
         if (utils.inArray(types.embed, player.type)) {
@@ -4949,9 +4945,6 @@
                 player.pause();
             }
 
-            // Trigger timeupdate
-            player.core.trigger(player.media, 'timeupdate');
-
             // Set seeking flag
             player.media.seeking = true;
 
@@ -5196,7 +5189,7 @@
                     player.config.loop.end = null;
                 }
                 player.config.loop.start = currentTime;
-                player.config.loop.indicator.start = player.elements.display.played.value;
+                //player.config.loop.indicator.start = player.elements.display.played.value;
                 break;
 
             case 'end':
@@ -5204,7 +5197,7 @@
                     return;
                 }
                 player.config.loop.end = currentTime;
-                player.config.loop.indicator.end = player.elements.display.played.value;
+                //player.config.loop.indicator.end = player.elements.display.played.value;
                 break;
 
             case 'all':
diff --git a/src/less/mixins.less b/src/less/mixins.less
index 0b75b2a6..a620a599 100644
--- a/src/less/mixins.less
+++ b/src/less/mixins.less
@@ -18,7 +18,7 @@
     background: @plyr-range-thumb-bg;
     border: @plyr-range-thumb-border;
     border-radius: 100%;
-    transition: background .2s ease, border .2s ease, transform .2s ease;
+    transition: background 0.2s ease, border 0.2s ease, transform 0.2s ease;
     box-shadow: @plyr-range-thumb-shadow;
     box-sizing: border-box;
 }
@@ -26,4 +26,4 @@
     background: @plyr-range-thumb-active-bg;
     border-color: @plyr-range-thumb-active-border-color;
     transform: scale(@plyr-range-thumb-active-scale);
-}
\ No newline at end of file
+}
diff --git a/src/less/plyr.less b/src/less/plyr.less
index 0c36930c..22e29aa2 100644
--- a/src/less/plyr.less
+++ b/src/less/plyr.less
@@ -1,6 +1,7 @@
 // ==========================================================================
 // Plyr styles
 // https://github.com/sampotts/plyr
+// TODO: break into smaller files and look at use of BEM classnames
 // ==========================================================================
 
 @import 'variables';
@@ -57,7 +58,7 @@
     }
 
     // ARIA
-    [aria-hidden="true"] {
+    [aria-hidden='true'] {
         display: none;
     }
 
@@ -77,7 +78,7 @@
 
     // Range inputs
     // Specificity is for bootstrap compatibility
-    input[type="range"] {
+    input[type='range'] {
         display: block;
         height: (@plyr-range-thumb-height * @plyr-range-thumb-active-scale);
         width: 100%;
@@ -87,6 +88,9 @@
         border: none;
         background: transparent;
 
+        // Used in JS to populate lower fill for WebKit
+        color: @plyr-range-selected-bg;
+
         // WebKit
         -webkit-appearance: none;
 
@@ -106,6 +110,11 @@
         &::-moz-range-thumb {
             .plyr-range-thumb();
         }
+        &::-moz-range-progress {
+            height: @plyr-range-track-height;
+            background: currentColor;
+            border-radius: (@plyr-range-track-height / 2);
+        }
 
         // Microsoft
         &::-ms-track {
@@ -119,7 +128,7 @@
         }
         &::-ms-fill-lower {
             .plyr-range-track();
-            background: @plyr-range-selected-bg;
+            background: currentColor;
         }
         &::-ms-thumb {
             .plyr-range-thumb();
@@ -157,13 +166,37 @@
 }
 
 // Video range inputs
-.plyr--video input[type="range"].tab-focus {
-    outline: 1px dotted fade(@plyr-video-control-color, 50%);
+.plyr--video input[type='range'] {
+    &::-webkit-slider-runnable-track {
+        background: @plyr-video-range-track-bg;
+    }
+    &::-moz-range-track {
+        background: @plyr-video-range-track-bg;
+    }
+    &::-ms-track {
+        background: @plyr-video-range-track-bg;
+    }
+
+    &.tab-focus {
+        outline: 1px dotted fade(@plyr-video-control-color, 50%);
+    }
 }
 
 // Audio range inputs
-.plyr--audio input[type="range"].tab-focus {
-    outline: 1px dotted fade(@plyr-audio-control-color, 50%);
+.plyr--audio input[type='range'] {
+    &::-webkit-slider-runnable-track {
+        background: @plyr-audio-range-track-bg;
+    }
+    &::-moz-range-track {
+        background: @plyr-audio-range-track-bg;
+    }
+    &::-ms-track {
+        background: @plyr-audio-range-track-bg;
+    }
+
+    &.tab-focus {
+        outline: 1px dotted fade(@plyr-audio-control-color, 50%);
+    }
 }
 
 // Screen reader only elements
@@ -354,7 +387,6 @@
         display: block;
         fill: currentColor;
         pointer-events: none;
-        filter: drop-shadow(0 1px 1px fade(#000, 15%));
     }
 
     // Hide toggle icons by default
@@ -378,17 +410,21 @@
     bottom: 0;
     z-index: 2;
     padding: (@plyr-control-spacing * 3.5) @plyr-control-spacing @plyr-control-spacing;
-    background: linear-gradient(fade(@plyr-video-controls-bg, 0%), fade(@plyr-video-controls-bg, 85%));
+    background: linear-gradient(fade(@plyr-video-controls-bg, 0%), fade(@plyr-video-controls-bg, 70%));
     border-bottom-left-radius: inherit;
     border-bottom-right-radius: inherit;
     color: @plyr-video-control-color;
     transition: opacity 0.3s ease;
 
     .plyr__control {
+        svg {
+            filter: drop-shadow(0 1px 1px fade(#000, 15%));
+        }
+
         // Hover and tab focus
         &.tab-focus,
         &:hover,
-        &[aria-expanded="true"] {
+        &[aria-expanded='true'] {
             background: @plyr-video-control-bg-hover;
             color: @plyr-video-control-color-hover;
         }
@@ -407,7 +443,7 @@
         // Hover and tab focus
         &.tab-focus,
         &:hover,
-        &[aria-expanded="true"] {
+        &[aria-expanded='true'] {
             background: @plyr-audio-control-bg-hover;
             color: @plyr-audio-control-color-hover;
         }
@@ -461,11 +497,11 @@
 }
 
 // States
-.plyr__controls [data-plyr="pause"],
-.plyr--playing .plyr__controls [data-plyr="play"] {
+.plyr__controls [data-plyr='pause'],
+.plyr--playing .plyr__controls [data-plyr='play'] {
     display: none;
 }
-.plyr--playing .plyr__controls [data-plyr="pause"] {
+.plyr--playing .plyr__controls [data-plyr='pause'] {
     display: inline-block;
 }
 
@@ -481,16 +517,16 @@
 }
 
 // Some options are hidden by default
-.plyr [data-plyr="captions"],
-.plyr [data-plyr="fullscreen"],
-.plyr [data-plyr="pip"],
-.plyr [data-plyr="airplay"] {
+.plyr [data-plyr='captions'],
+.plyr [data-plyr='fullscreen'],
+.plyr [data-plyr='pip'],
+.plyr [data-plyr='airplay'] {
     display: none;
 }
-.plyr--captions-enabled [data-plyr="captions"],
-.plyr--fullscreen-enabled [data-plyr="fullscreen"],
-.plyr--pip-enabled [data-plyr="pip"],
-.plyr--airplay-enabled [data-plyr="airplay"] {
+.plyr--captions-enabled [data-plyr='captions'],
+.plyr--fullscreen-enabled [data-plyr='fullscreen'],
+.plyr--pip-enabled [data-plyr='pip'],
+.plyr--airplay-enabled [data-plyr='airplay'] {
     display: inline-block;
 }
 
@@ -503,7 +539,7 @@
     .plyr__control svg {
         transition: transform 0.3s ease;
     }
-    .plyr__control[aria-expanded="true"] {
+    .plyr__control[aria-expanded='true'] {
         svg {
             transform: rotate(45deg);
         }
@@ -668,7 +704,7 @@
 
     &::before {
         // Arrows
-        content: "";
+        content: '';
         position: absolute;
         width: 0;
         height: 0;
@@ -739,16 +775,6 @@
     input[type='range'] {
         position: relative;
         z-index: 2;
-
-        &::-webkit-slider-runnable-track {
-            background: transparent;
-        }
-        &::-moz-range-track {
-            background: transparent;
-        }
-        &::-ms-fill-upper {
-            background: transparent;
-        }
     }
 
     // Seek tooltip to show time
@@ -760,9 +786,7 @@
     display: inline-block;
 }
 
-.plyr__progress--buffer,
-.plyr__progress--played,
-.plyr__volume--display {
+.plyr__progress--buffer {
     position: absolute;
     left: 0;
     top: 50%;
@@ -770,8 +794,7 @@
     height: @plyr-range-track-height;
     margin: -(@plyr-range-track-height / 2) 0 0;
     padding: 0;
-    vertical-align: top;
-
+    background: transparent;
     border: none;
     border-radius: 100px;
 
@@ -799,31 +822,6 @@
         border-radius: 100px;
     }
 }
-.plyr__progress--played,
-.plyr__volume--display {
-    z-index: 1;
-    color: @plyr-range-selected-bg;
-    background: transparent;
-    transition: none;
-
-    &::-webkit-progress-value {
-        min-width: @plyr-range-track-height;
-        max-width: 99%;
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-        transition: none;
-    }
-    &::-moz-progress-bar {
-        min-width: @plyr-range-track-height;
-        max-width: 99%;
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-        transition: none;
-    }
-    &::-ms-fill {
-        display: none;
-    }
-}
 .plyr__progress--buffer {
     &::-webkit-progress-value {
         transition: width 0.2s ease;
@@ -835,18 +833,10 @@
         transition: width 0.2s ease;
     }
 }
-.plyr--video .plyr__progress--buffer,
-.plyr--video .plyr__volume--display {
-    background: @plyr-video-range-track-bg;
-    box-shadow: 0 1px 1px fade(#000, 15%);
-}
 .plyr--video .plyr__progress--buffer {
+    box-shadow: 0 1px 1px fade(#000, 15%);
     color: @plyr-video-progress-buffered-bg;
 }
-.plyr--audio .plyr__progress--buffer,
-.plyr--audio .plyr__volume--display {
-    background: @plyr-audio-range-track-bg;
-}
 .plyr--audio .plyr__progress--buffer {
     color: @plyr-audio-progress-buffered-bg;
 }
@@ -892,7 +882,7 @@
 
     // Add a slash in before
     &::before {
-        content: "\2044";
+        content: '\2044';
         margin-right: @plyr-control-spacing;
     }
 }
@@ -926,7 +916,7 @@
 // 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,
-.plyr--is-ios [data-plyr="mute"] {
+.plyr--is-ios [data-plyr='mute'] {
     display: none !important;
 }
 
diff --git a/src/less/variables.less b/src/less/variables.less
index fe6e3e39..8232c3cb 100644
--- a/src/less/variables.less
+++ b/src/less/variables.less
@@ -29,8 +29,8 @@
 // Controls
 @plyr-control-icon-size: 18px;
 @plyr-control-spacing: 10px;
-@plyr-control-padding: (@plyr-control-spacing * .7);
-@plyr-video-controls-bg: #343f4a;
+@plyr-control-padding: (@plyr-control-spacing * 0.7);
+@plyr-video-controls-bg: #000;
 @plyr-video-control-color: #fff;
 @plyr-video-control-color-hover: #fff;
 @plyr-video-control-bg-hover: @plyr-color-main;
@@ -55,10 +55,8 @@
 // Progress
 @plyr-progress-loading-size: 25px;
 @plyr-progress-loading-bg: fade(#343f4a, 20%);
-@plyr-video-progress-bg: fade(#fff, 25%);
-@plyr-video-progress-buffered-bg: @plyr-video-progress-bg;
-@plyr-audio-progress-bg: fade(#c6d6db, 66%);
-@plyr-audio-progress-buffered-bg: @plyr-audio-progress-bg;
+@plyr-video-progress-buffered-bg: fade(#fff, 25%);
+@plyr-audio-progress-buffered-bg: fade(#c6d6db, 66%);
 
 // Range sliders
 @plyr-range-track-height: 8px;