Merge branch 'develop' into css-variables

# Conflicts:
#	demo/dist/demo.css
#	demo/index.html
#	dist/plyr.css
#	gulpfile.js
#	package.json
#	yarn.lock

demo/index.html

@@ -33,7 +33,7 @@
         <meta name="twitter:card" content="summary_large_image" />
 
         <!-- Docs styles -->
-        <link rel="stylesheet" href="dist/demo.css?v=2" />
+        <link rel="stylesheet" href="dist/demo.css" />
 
         <!-- Preload -->
         <link
@@ -108,7 +108,7 @@
                 <div class="call-to-action">
                     <span class="button--with-count">
                         <a
-                            href="https://github.com/sampotts/plyr"
+                        <a href="https://github.com/sampotts/plyr" target="_blank" class="button js-shr-button">
                             target="_blank"
                             class="button"
                             data-shr-network="github"
@@ -261,7 +261,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
                 >
                 👍
@@ -270,18 +270,12 @@
 
         <!-- Polyfills -->
         <script
-            src="https://cdn.polyfill.io/v2/polyfill.min.js?features=es6,Array.prototype.includes,CustomEvent,Object.entries,Object.values,URL"
+            src="https://cdn.polyfill.io/v2/polyfill.min.js?features=es6,Array.prototype.includes,CustomEvent,Object.entries,Object.values,URL,Math.trunc"
             crossorigin="anonymous"
         ></script>
 
-        <!-- Plyr core script -->
-        <script src="../dist/plyr.js" crossorigin="anonymous"></script>
-
         <!-- Sharing libary (https://shr.one) -->
-        <script src="https://cdn.shr.one/1.0.1/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>
+        <script src="https://cdn.shr.one/2.0.0-beta.2/shr.js" crossorigin="anonymous"></script>
 
         <!-- Docs script -->
         <script src="dist/demo.js" crossorigin="anonymous"></script>

demo/src/js/demo.js

@@ -5,6 +5,7 @@
 // ==========================================================================
 
 import Raven from 'raven-js';
+import Plyr from '../../../src/js/plyr';
 
 (() => {
     const { host } = window.location;
@@ -18,8 +19,8 @@ import Raven from 'raven-js';
             const selector = '#player';
             const container = document.getElementById('container');
 
-            if (window.shr) {
-                window.shr.setup({
+            if (window.Shr) {
+                window.Shr.setup('.js-shr-button', {
                     count: {
                         classname: 'button__count',
                     },
@@ -61,7 +62,7 @@ import Raven from 'raven-js';
             const player = new Plyr(selector, {
                 debug: true,
                 title: 'View From A Blue Moon',
-                iconUrl: '../dist/plyr.svg',
+                iconUrl: 'dist/demo.svg',
                 keyboard: {
                     global: true,
                 },
@@ -78,6 +79,13 @@ import Raven from 'raven-js';
                     enabled: env.prod || env.dev,
                     publisherId: '918848828995742',
                 },
+                previewThumbnails: {
+                    enabled: true,
+                    src: [
+                        'https://cdn.plyr.io/static/demo/thumbs/100p.vtt',
+                        'https://cdn.plyr.io/static/demo/thumbs/240p.vtt',
+                    ],
+                },
             });
 
             // Expose for tinkering in the console
@@ -276,27 +284,4 @@ import Raven from 'raven-js';
     if (env.prod) {
         Raven.config('https://d4ad9866ad834437a4754e23937071e4@sentry.io/305555').install();
     }
-
-    // Google analytics
-    // For demo site (https://plyr.io) only
-    /* eslint-disable */
-    if (env.prod) {
-        ((i, s, o, g, r, a, m) => {
-            i.GoogleAnalyticsObject = r;
-            i[r] =
-                i[r] ||
-                function() {
-                    (i[r].q = i[r].q || []).push(arguments);
-                };
-            i[r].l = 1 * new Date();
-            a = s.createElement(o);
-            m = s.getElementsByTagName(o)[0];
-            a.async = 1;
-            a.src = g;
-            m.parentNode.insertBefore(a, m);
-        })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
-        window.ga('create', 'UA-40881672-11', 'auto');
-        window.ga('send', 'pageview');
-    }
-    /* eslint-enable */
 })();