Seek fixes for touch

3 files changed, 42 insertions, 6 deletions

diff --git a/src/js/plyr.js b/src/js/plyr.js
index 0749b716..ac6c7d20 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -2048,7 +2048,7 @@
         // Update hover tooltip for seeking
         function _updateSeekTooltip(event) {
             // Bail if setting not true
-            if (!config.tooltips.seek) {
+            if (!config.tooltips.seek || plyr.browser.touch) {
                 return;
             }
 
@@ -2251,11 +2251,11 @@
                 // Load HTML5 sources
                 plyr.media.load();
 
-                // Display duration if available
-                _displayDuration();
-
                 // Setup interface
                 _setupInterface();
+
+                // Display duration if available
+                _displayDuration();
             }
 
             // Play if autoplay attribute is present
diff --git a/src/less/plyr.less b/src/less/plyr.less
index 65918665..f480ed3f 100644
--- a/src/less/plyr.less
+++ b/src/less/plyr.less
@@ -110,8 +110,11 @@
 .seek-thumb() {
     background: transparent;
     border: 0;
-    width: (@plyr-control-spacing * 4);
+    width: 1px;
     height: @plyr-control-spacing;
+}
+.seek-thumb-touch() {
+    width: (@plyr-control-spacing * 4);
     transform: translateX(-50%);
 }
 .seek-track() {
@@ -495,6 +498,21 @@
         }
     }
 
+    // Touch seek wider handle
+    &--is-touch &--seek[type='range'] {
+        &::-webkit-slider-thumb {
+            .seek-thumb-touch();
+        }
+        // Mozilla
+        &::-moz-range-thumb {
+            .seek-thumb-touch();
+        }
+        // Microsoft
+        &::-ms-thumb {
+            .seek-thumb-touch();
+        }
+    }
+
     // Loading state
     &--loading .plyr__progress--buffer {
         animation: plyr-progress 1s linear infinite;
diff --git a/src/sass/plyr.scss b/src/sass/plyr.scss
index fd905af0..dd118602 100644
--- a/src/sass/plyr.scss
+++ b/src/sass/plyr.scss
@@ -111,8 +111,11 @@ $plyr-bp-captions-large:         768px !default; // When captions jump to the la
 @mixin seek-thumb() {
     background: transparent;
     border: 0;
-    width: ($plyr-control-spacing * 4);
+    width: 1px;
     height: $plyr-control-spacing;
+}
+@mixin seek-thumb-touch() {
+    width: ($plyr-control-spacing * 4);
     transform: translateX(-50%);
 }
 @mixin seek-track() {
@@ -496,6 +499,21 @@ $plyr-bp-captions-large:         768px !default; // When captions jump to the la
         }
     }
 
+    // Touch seek wider handle
+    &--is-touch &--seek[type='range'] {
+        &::-webkit-slider-thumb {
+            @include seek-thumb-touch();
+        }
+        // Mozilla
+        &::-moz-range-thumb {
+            @include seek-thumb-touch();
+        }
+        // Microsoft
+        &::-ms-thumb {
+            @include seek-thumb-touch();
+        }
+    }
+
     // Loading state
     &--loading .plyr__progress--buffer {
         animation: plyr-progress 1s linear infinite;