iOS fix (Fixes #166), Edge Progress Tip (Fixes #160), SASS fix (Fixes #158)

3 files changed, 35 insertions, 19 deletions

diff --git a/src/js/plyr.js b/src/js/plyr.js
index ac6c7d20..6725478a 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -172,7 +172,7 @@
 
         // Seek tooltip
         if (config.tooltips.seek) {
-            html.push('<span class="plyr__tooltip">0:00</span>');
+            html.push('<span class="plyr__tooltip">--:--</span>');
         }
 
         // Close progress
@@ -238,7 +238,7 @@
             html.push(
                 '<span class="plyr__time">',
                     '<span class="plyr__sr-only">' + config.i18n.duration + '</span>',
-                    '<span class="plyr__time--duration">00:00</span>',
+                    '<span class="plyr__time--duration">--:--</span>',
                 '</span>'
             );
         }
@@ -746,7 +746,7 @@
     // Player instance
     function Plyr(container) {
         var plyr = this;
-        plyr.container = container,
+        plyr.container = container;
         plyr.timers = {};
 
         // Captions functions
@@ -1816,14 +1816,18 @@
         function _setVolume(volume) {
             // Use default if no value specified
             if (typeof volume === 'undefined') {
+                volume = config.volume;
+
                 if (config.storage.enabled && _storage().supported) {
-                    volume = window.localStorage[config.storage.key] || config.volume;
-                }
-                else {
-                    volume = config.volume;
+                    volume = window.localStorage.getItem(config.storage.key);
                 }
             }
 
+            // Use config if all else fails
+            if(isNaN(volume)) {
+                volume = config.volume;
+            }
+
             // Maximum is 10
             if (volume > 10) {
                 volume = 10;
@@ -1873,7 +1877,7 @@
             }
 
             // Store the volume in storage
-            if (config.storage.enabled && _storage().supported) {
+            if (config.storage.enabled && _storage().supported && !isNaN(volume)) {
                 window.localStorage.setItem(config.storage.key, volume);
             }
 
@@ -2015,6 +2019,7 @@
                 return;
             }
 
+            // Determine duration
             var duration = plyr.media.duration || 0;
 
             // If there's only one time display, display duration there
diff --git a/src/less/plyr.less b/src/less/plyr.less
index f480ed3f..73e14c56 100644
--- a/src/less/plyr.less
+++ b/src/less/plyr.less
@@ -181,7 +181,6 @@
             height: 100%;
             border: 0;
             user-select: none;
-            pointer-events: none; // To allow mouse events to be captured
         }
 
         // Vimeo hack
@@ -190,6 +189,11 @@
             padding-bottom: 200%;
             transform: translateY(-35.95%);
         }
+
+        // To allow mouse events to be captured if full support
+        &.plyr iframe {
+            pointer-events: none;
+        }
     }
 
     // Captions
@@ -387,9 +391,14 @@
     }
 
     // Common range styles
-    input[type='range'].tab-focus:focus {
-        outline: 1px dotted fade(@plyr-gray-dark, 80%);
-        outline-offset: 3px;
+    input[type='range'] {
+        &::-ms-tooltip {
+            display: none;
+        }
+        &.tab-focus:focus {
+            outline: 1px dotted fade(@plyr-gray-dark, 80%);
+            outline-offset: 3px;
+        }
     }
 
     // Playback progress
diff --git a/src/sass/plyr.scss b/src/sass/plyr.scss
index dd118602..f0d1df6f 100644
--- a/src/sass/plyr.scss
+++ b/src/sass/plyr.scss
@@ -27,21 +27,19 @@ $plyr-font-size-captions-large:  ($plyr-font-size-base * 2) !default;
 $plyr-control-spacing:           10px !default;
 $plyr-controls-bg:               #fff !default;
 $plyr-control-bg-hover:          $plyr-blue !default;
-$plyr-control-color:             null !default;
-$plyr-control-color-hover:       null !default;
 
 // Contrast
 @if lightness($plyr-controls-bg) >= 65% {
-    $plyr-control-color: $plyr-gray-light;
+    $plyr-control-color: $plyr-gray-light !default;
 }
 @else {
-    $plyr-control-color: $plyr-gray-lighter;
+    $plyr-control-color: $plyr-gray-lighter !default;
 }
 @if lightness($plyr-control-bg-hover) >= 65% {
-    $plyr-control-color-hover: $plyr-gray;
+    $plyr-control-color-hover: $plyr-gray !default;
 }
 @else {
-    $plyr-control-color-hover: #fff;
+    $plyr-control-color-hover: #fff !default;
 }
 
 // Tooltips
@@ -182,7 +180,6 @@ $plyr-bp-captions-large:         768px !default; // When captions jump to the la
             height: 100%;
             border: 0;
             user-select: none;
-            pointer-events: none; // To allow mouse events to be captured
         }
 
         // Vimeo hack
@@ -191,6 +188,11 @@ $plyr-bp-captions-large:         768px !default; // When captions jump to the la
             padding-bottom: 200%;
             transform: translateY(-35.95%);
         }
+
+        // To allow mouse events to be captured if full support
+        &.plyr iframe {
+            pointer-events: none;
+        }
     }
 
     // Captions