Added RangeTouch, updated Shr lib in demo

changelog.md

@@ -9,6 +9,7 @@
 -   Use `Math.trunc` instead of `parseInt` (thanks @taion)
 -   Many fixes for fullscreen in embedded players with non 16:9 screens or videos
 -   Added 'force' fallback option for fullscreen
+-   [RangeTouch](https://rangetouch.com) is now bundled with Plyr as a dependency to fix the scrubber on touch devices
 
 ### v3.4.8
 

demo/index.html

@@ -107,12 +107,7 @@
 
                 <div class="call-to-action">
                     <span class="button--with-count">
-                        <a
+                        <a href="https://github.com/sampotts/plyr" target="_blank" class="button js-shr-button">
-                            href="https://github.com/sampotts/plyr"
-                            target="_blank"
-                            class="button"
-                            data-shr-network="github"
-                        >
                             <svg class="icon" role="presentation">
                                 <title>GitHub</title>
                                 <path
@@ -261,7 +256,7 @@
                 <a
                     href="https://twitter.com/intent/tweet?text=A+simple+HTML5+media+player+with+custom+controls+and+WebVTT+captions.&amp;url=http%3A%2F%2Fplyr.io&amp;via=Sam_Potts"
                     target="_blank"
-                    data-shr-network="twitter"
+                    class="js-shr-button"
                     >tweet it</a
                 >
                 👍
@@ -275,10 +270,7 @@
         ></script>
 
         <!-- Sharing libary (https://shr.one) -->
-        <script src="https://cdn.shr.one/1.0.1/shr.js" crossorigin="anonymous"></script>
+        <script src="https://cdn.shr.one/2.0.0-beta.2/shr.js" crossorigin="anonymous"></script>
-
-        <!-- Rangetouch to fix <input type="range"> on touch devices (see https://rangetouch.com) -->
-        <script src="https://cdn.rangetouch.com/1.0.1/rangetouch.js" async crossorigin="anonymous"></script>
 
         <!-- Docs script -->
         <script src="dist/demo.js" crossorigin="anonymous"></script>

demo/src/js/demo.js

@@ -19,8 +19,8 @@ import Plyr from '../../../src/js/plyr';
             const selector = '#player';
             const container = document.getElementById('container');
 
-            if (window.shr) {
+            if (window.Shr) {
-                window.shr.setup({
+                window.Shr.setup('.js-shr-button', {
                     count: {
                         classname: 'button__count',
                     },

gulpfile.js

@@ -130,7 +130,6 @@ const build = {
                     .src(bundles[bundle].js[key])
                     .pipe(sourcemaps.init())
                     .pipe(concat(key))
-
                     .pipe(
                         rollup(
                             {

package.json

@@ -5,8 +5,8 @@
     "homepage": "https://plyr.io",
     "author": "Sam Potts <sam@potts.es>",
     "main": "dist/plyr.js",
-    "module": "dist/plyr.mjs",
+    "module": "dist/plyr.min.mjs",
-    "jsnext:main": "dist/plyr.mjs",
+    "jsnext:main": "dist/plyr.min.mjs",
     "browser": "dist/plyr.min.js",
     "sass": "src/sass/plyr.scss",
     "style": "dist/plyr.css",
@@ -84,9 +84,10 @@
         "through2": "^3.0.0"
     },
     "dependencies": {
-        "core-js": "^2.6.4",
+        "core-js": "^2.6.5",
         "custom-event-polyfill": "^1.0.6",
         "loadjs": "^3.5.5",
+        "rangetouch": "^2.0.0",
         "raven-js": "^3.27.0",
         "url-polyfill": "^1.1.3"
     }

src/js/controls.js

@@ -3,6 +3,7 @@
 // TODO: This needs to be split into smaller files and cleaned up
 // ==========================================================================
 
+import RangeTouch from 'rangetouch';
 import captions from './captions';
 import html5 from './html5';
 import support from './support';
@@ -334,6 +335,9 @@ const controls = {
         // Set the fill for webkit now
         controls.updateRangeFill.call(this, input);
 
+        // Improve support on touch devices
+        RangeTouch.setup(input);
+
         return input;
     },
 

yarn.lock

@@ -6329,6 +6329,11 @@ randomatic@^3.0.0:
     kind-of "^6.0.0"
     math-random "^1.0.1"
 
+rangetouch@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/rangetouch/-/rangetouch-2.0.0.tgz#5459cdb38b929326c5484ab47aac9632fbe3a896"
+  integrity sha512-y66wTFbwh7KafYligRsmIYYR1kZY8U9tGHH9PgbVhBUFmGzPMsOSjslXPedgR5D3M9W1QKVbAf1AtaVAt7JJTw==
+
 raven-js@^3.27.0:
   version "3.27.0"
   resolved "https://registry.yarnpkg.com/raven-js/-/raven-js-3.27.0.tgz#9f47c03e17933ce756e189f3669d49c441c1ba6e"