Volume fixes, iOS bug fixes

3 files changed, 25 insertions, 23 deletions

diff --git a/src/js/plyr.js b/src/js/plyr.js
index cc4af346..329bf783 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -1223,8 +1223,7 @@
                 plyr.progress.buffer.text     = plyr.progress.buffer.bar && plyr.progress.buffer.bar.getElementsByTagName('span')[0];
 
                 // Progress - Played
-                plyr.progress.played          = {};
-                plyr.progress.played.bar      = _getElement(config.selectors.progress.played);
+                plyr.progress.played          = _getElement(config.selectors.progress.played);
 
                 // Seek tooltip
                 plyr.progress.tooltip         = plyr.progress.container && plyr.progress.container.querySelector('.' + config.classes.tooltip);
@@ -1723,8 +1722,8 @@
             }
 
             // Update progress 
-            if(plyr.progress.played.bar) {
-                plyr.progress.played.bar.value = ((100 / duration) * targetTime);
+            if(plyr.progress && plyr.progress.played) {
+                plyr.progress.played.value = ((100 / duration) * targetTime);
             }
 
             // Set the current time
@@ -2015,7 +2014,7 @@
 
         // Update <progress> elements
         function _updateProgress(event) {
-            var progress    = plyr.progress.played.bar,
+            var progress    = plyr.progress.played,
                 text        = false,
                 value       = 0,
                 duration    = _getDuration();
@@ -2278,9 +2277,12 @@
             _pause();
 
             // Set seek input to 0
-            if(plyr.buttons && plyr.buttons.seek) {
+            if (plyr.buttons && plyr.buttons.seek) {
                 plyr.buttons.seek.value = 0;
             }
+            if (plyr.progress && plyr.progress.played) {
+                plyr.progress.played.value = 0;
+            }
 
             // Clean up YouTube stuff
             if (plyr.type === 'youtube') {
@@ -2772,6 +2774,9 @@
                 // Remove controls
                 _remove(_getElement(config.selectors.controls.wrapper));
 
+                // Remove large play
+                _remove(_getElement(config.selectors.buttons.play));
+
                 // Restore native controls
                 _toggleNativeControls(true);
 
diff --git a/src/less/mixins.less b/src/less/mixins.less
index 8e8c43f1..25f43761 100644
--- a/src/less/mixins.less
+++ b/src/less/mixins.less
@@ -6,7 +6,7 @@
 // <input type="range"> styling
 .plyr-range-track() {
     height: @plyr-range-track-height;
-    background: currentColor;
+    background: transparent;
     border: 0;
     border-radius: (@plyr-range-track-height / 2);
     user-select: none;
diff --git a/src/less/plyr.less b/src/less/plyr.less
index 28159d68..e289b8f3 100644
--- a/src/less/plyr.less
+++ b/src/less/plyr.less
@@ -130,21 +130,13 @@
 }
 
 // Video range inputs
-.plyr--video input[type='range'] {
-    color: @plyr-video-range-track-bg;
-
-    &.tab-focus:focus {
-        outline: 1px dotted fade(@plyr-video-control-color, 50%);
-    }
+.plyr--video input[type='range'].tab-focus:focus {
+    outline: 1px dotted fade(@plyr-video-control-color, 50%);
 }
 
 // Audio range inputs
-.plyr--audio input[type='range'] {
-    color: @plyr-audio-range-track-bg;
-
-    &.tab-focus:focus {
-        outline: 1px dotted fade(@plyr-audio-control-color, 50%);
-    }
+.plyr--audio input[type='range'].tab-focus:focus {
+    outline: 1px dotted fade(@plyr-audio-control-color, 50%);
 }
 
 // Screen reader only elements
@@ -572,14 +564,20 @@
         transition: width .2s ease;
     }            
 }
+.plyr--video .plyr__progress--buffer[value],
+.plyr--video .plyr__volume--display[value] {
+    background: @plyr-video-range-track-bg;
+}
 .plyr--video .plyr__progress--buffer[value] { 
     color: @plyr-video-progress-buffered-bg;
-    background: @plyr-video-range-track-bg;
 }
-.plyr--audio .plyr__progress--buffer[value] { 
-    color: @plyr-audio-progress-buffered-bg;
+.plyr--audio .plyr__progress--buffer[value],
+.plyr--audio .plyr__volume--display[value] {
     background: @plyr-audio-range-track-bg;
 }
+.plyr--audio .plyr__progress--buffer[value] {
+    color: @plyr-audio-progress-buffered-bg;
+}
 
 // Loading state
 .plyr--loading .plyr__progress--buffer {
@@ -624,7 +622,6 @@
         position: relative;
         z-index: 2;
     }
-
     @media (min-width: @plyr-bp-screen-sm) {
         display: block;
         max-width: 60px;