Seek fixes for touch

changelog.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## v1.5.8
+- Fix for touch device seek tooltip
+- Seek improvements
+
 ## v1.5.7
 - Fix for control tooltips always showing
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "plyr",
-  "version": "1.5.7",
+  "version": "1.5.8",
   "description": "A simple HTML5 media player using custom controls",
   "homepage": "http://plyr.io",
   "main": "gulpfile.js",

readme.md

@@ -40,7 +40,7 @@ If you have any cool ideas or features, please let me know by [creating an issue
 
 Check `docs/index.html` and `docs/dist/docs.js` for an example setup.
 
-**Heads up:** the example `index.html` file needs to be served from a webserver (such as Apache, Nginx, IIS or similar) unless you change the file sources to include http or https. e.g. change `//cdn.plyr.io/1.5.7/plyr.js` to `https://cdn.plyr.io/1.5.7/plyr.js`
+**Heads up:** the example `index.html` file needs to be served from a webserver (such as Apache, Nginx, IIS or similar) unless you change the file sources to include http or https. e.g. change `//cdn.plyr.io/1.5.8/plyr.js` to `https://cdn.plyr.io/1.5.8/plyr.js`
 
 ### Bower
 If bower is your thang, you can grab Plyr using:
@@ -60,11 +60,11 @@ More info is on [npm](https://www.npmjs.com/package/ember-cli-plyr) and [GitHub]
 If you want to use our CDN, you can use the following:
 
 ```html
-<link rel="stylesheet" href="https://cdn.plyr.io/1.5.7/plyr.css">
+<link rel="stylesheet" href="https://cdn.plyr.io/1.5.8/plyr.css">
-<script src="https://cdn.plyr.io/1.5.7/plyr.js"></script>
+<script src="https://cdn.plyr.io/1.5.8/plyr.js"></script>
 ```
 
-You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.5.7/sprite.svg`.
+You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.5.8/sprite.svg`.
 
 ### CSS & Styling
 If you want to use the default css, add the `plyr.css` file from `/dist` into your head, or even better use `plyr.less` or `plyr.sass` file included in `/src` in your build to save a request.
@@ -161,7 +161,7 @@ More info on CORS here:
 Here's an example of a default setup:
 
 ```html
-<script src="https://cdn.plyr.io/1.5.7/plyr.js"></script>
+<script src="https://cdn.plyr.io/1.5.8/plyr.js"></script>
 <script>plyr.setup();</script>
 ```
 

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

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;

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;