Merge branch 'develop' into beta

5 files changed, 63 insertions, 96 deletions

diff --git a/demo/src/js/demo.js b/demo/src/js/demo.js
index 003e85d5..add123e5 100644
--- a/demo/src/js/demo.js
+++ b/demo/src/js/demo.js
@@ -5,18 +5,20 @@
 // ==========================================================================
 
 import Raven from 'raven-js';
+import Plyr from '../../../src/js/plyr';
 
 (() => {
-    const isLive = window.location.host === 'plyr.io';
-
-    // Raven / Sentry
-    // For demo site (https://plyr.io) only
-    if (isLive) {
-        Raven.config('https://d4ad9866ad834437a4754e23937071e4@sentry.io/305555').install();
-    }
+    const { host } = window.location;
+    const env = {
+        prod: host === 'plyr.io',
+        dev: host === 'dev.plyr.io',
+    };
 
     document.addEventListener('DOMContentLoaded', () => {
         Raven.context(() => {
+            const selector = '#player';
+            const container = document.getElementById('container');
+
             if (window.shr) {
                 window.shr.setup({
                     count: {
@@ -30,6 +32,10 @@ import Raven from 'raven-js';
 
             // Remove class on blur
             document.addEventListener('focusout', event => {
+                if (!event.target.classList || container.contains(event.target)) {
+                    return;
+                }
+
                 event.target.classList.remove(tabClassName);
             });
 
@@ -42,71 +48,27 @@ import Raven from 'raven-js';
                 // Delay the adding of classname until the focus has changed
                 // This event fires before the focusin event
                 setTimeout(() => {
-                    document.activeElement.classList.add(tabClassName);
-                }, 0);
+                    const focused = document.activeElement;
+
+                    if (!focused || !focused.classList || container.contains(focused)) {
+                        return;
+                    }
+
+                    focused.classList.add(tabClassName);
+                }, 10);
             });
 
             // Setup the player
-            const player = new Plyr('#player', {
+            const player = new Plyr(selector, {
                 debug: true,
                 title: 'View From A Blue Moon',
-                iconUrl: '../dist/plyr.svg',
+                iconUrl: 'dist/plyr.svg',
                 keyboard: {
                     global: true,
                 },
                 tooltips: {
                     controls: true,
                 },
-                /* controls: [
-                    'play-large',
-                    'restart',
-                    'rewind',
-                    'play',
-                    'fast-forward',
-                    'progress',
-                    'current-time',
-                    'duration',
-                    'mute',
-                    'volume',
-                    'captions',
-                    'settings',
-                    'pip',
-                    'airplay',
-                    'fullscreen',
-                ], */
-                /* i18n: {
-                    restart: '重新開始',
-                    rewind: '快退{seektime}秒',
-                    play: '播放',
-                    pause: '暫停',
-                    fastForward: '快進{seektime}秒',
-                    seek: '尋求',
-                    played: '發揮',
-                    buffered: '緩衝的',
-                    currentTime: '當前時間戳',
-                    duration: '長短',
-                    volume: '音量',
-                    mute: '靜音',
-                    unmute: '取消靜音',
-                    enableCaptions: '開啟字幕',
-                    disableCaptions: '關閉字幕',
-                    enterFullscreen: '進入全螢幕',
-                    exitFullscreen: '退出全螢幕',
-                    frameTitle: '球員為{title}',
-                    captions: '字幕',
-                    settings: '設定',
-                    speed: '速度',
-                    normal: '正常',
-                    quality: '質量',
-                    loop: '循環',
-                    start: 'Start',
-                    end: 'End',
-                    all: 'All',
-                    reset: '重啟',
-                    disabled: '殘',
-                    enabled: '啟用',
-                    advertisement: '廣告',
-                }, */
                 captions: {
                     active: true,
                 },
@@ -114,9 +76,16 @@ import Raven from 'raven-js';
                     google: 'AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c',
                 },
                 ads: {
-                    enabled: true,
+                    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
@@ -143,7 +112,11 @@ import Raven from 'raven-js';
             // Set a new source
             function newSource(type, init) {
                 // Bail if new type isn't known, it's the current type, or current type is empty (video is default) and new type is video
-                if (!(type in types) || (!init && type === currentType) || (!currentType.length && type === types.video)) {
+                if (
+                    !(type in types) ||
+                    (!init && type === currentType) ||
+                    (!currentType.length && type === types.video)
+                ) {
                     return;
                 }
 
@@ -215,10 +188,12 @@ import Raven from 'raven-js';
                     case types.youtube:
                         player.source = {
                             type: 'video',
-                            sources: [{
-                                src: 'https://youtube.com/watch?v=bTqVqk7FSmY',
-                                provider: 'youtube',
-                            }],
+                            sources: [
+                                {
+                                    src: 'https://youtube.com/watch?v=bTqVqk7FSmY',
+                                    provider: 'youtube',
+                                },
+                            ],
                         };
 
                         break;
@@ -226,10 +201,12 @@ import Raven from 'raven-js';
                     case types.vimeo:
                         player.source = {
                             type: 'video',
-                            sources: [{
-                                src: 'https://vimeo.com/76979871',
-                                provider: 'vimeo',
-                            }],
+                            sources: [
+                                {
+                                    src: 'https://vimeo.com/76979871',
+                                    provider: 'vimeo',
+                                },
+                            ],
                         };
 
                         break;
@@ -302,26 +279,9 @@ import Raven from 'raven-js';
         });
     });
 
-    // Google analytics
+    // Raven / Sentry
     // For demo site (https://plyr.io) only
-    /* eslint-disable */
-    if (isLive) {
-        (function(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');
+    if (env.prod) {
+        Raven.config('https://d4ad9866ad834437a4754e23937071e4@sentry.io/305555').install();
     }
-    /* eslint-enable */
 })();
diff --git a/demo/src/sass/lib/fontface.scss b/demo/src/sass/lib/fontface.scss
index e7e4edf8..d104c501 100644
--- a/demo/src/sass/lib/fontface.scss
+++ b/demo/src/sass/lib/fontface.scss
@@ -7,7 +7,8 @@
     font-family: 'Gordita';
     font-style: normal;
     font-weight: $font-weight-light;
-    src: url('https://cdn.plyr.io/static/fonts/gordita-light.woff2') format('woff2'), url('https://cdn.plyr.io/static/fonts/gordita-light.woff') format('woff');
+    src: url('https://cdn.plyr.io/static/fonts/gordita-light.woff2') format('woff2'),
+        url('https://cdn.plyr.io/static/fonts/gordita-light.woff') format('woff');
 }
 
 @font-face {
@@ -33,7 +34,8 @@
     font-family: 'Gordita';
     font-style: normal;
     font-weight: $font-weight-bold;
-    src: url('https://cdn.plyr.io/static/fonts/gordita-bold.woff2') format('woff2'), url('https://cdn.plyr.io/static/fonts/gordita-bold.woff') format('woff');
+    src: url('https://cdn.plyr.io/static/fonts/gordita-bold.woff2') format('woff2'),
+        url('https://cdn.plyr.io/static/fonts/gordita-bold.woff') format('woff');
 }
 
 @font-face {
@@ -41,5 +43,6 @@
     font-family: 'Gordita';
     font-style: normal;
     font-weight: $font-weight-black;
-    src: url('https://cdn.plyr.io/static/fonts/gordita-black.woff2') format('woff2'), url('https://cdn.plyr.io/static/fonts/gordita-black.woff') format('woff');
+    src: url('https://cdn.plyr.io/static/fonts/gordita-black.woff2') format('woff2'),
+        url('https://cdn.plyr.io/static/fonts/gordita-black.woff') format('woff');
 }
diff --git a/demo/src/sass/settings/layout.scss b/demo/src/sass/settings/layout.scss
index 8d1fbd28..77185344 100644
--- a/demo/src/sass/settings/layout.scss
+++ b/demo/src/sass/settings/layout.scss
@@ -2,4 +2,4 @@
 // Layout
 // ==========================================================================
 
-$container-max-width: 1280px;
+$container-max-width: 1260px;
diff --git a/demo/src/sass/settings/plyr.scss b/demo/src/sass/settings/plyr.scss
index 44f89bb2..ae6be636 100644
--- a/demo/src/sass/settings/plyr.scss
+++ b/demo/src/sass/settings/plyr.scss
@@ -11,6 +11,9 @@ $plyr-font-size-small: 12px;
 $plyr-font-size-time: 11px;
 $plyr-font-size-badges: 9px;
 
+// Other
+$plyr-font-smoothing: true;
+
 // Captions
 $plyr-font-size-captions-base: $plyr-font-size-base;
 $plyr-font-size-captions-small: $plyr-font-size-small;
diff --git a/demo/src/sass/settings/type.scss b/demo/src/sass/settings/type.scss
index e8f0b2c8..8c614361 100644
--- a/demo/src/sass/settings/type.scss
+++ b/demo/src/sass/settings/type.scss
@@ -2,7 +2,8 @@
 // Typography
 // ==========================================================================
 
-$font-sans-serif: 'Gordita', 'Avenir', 'Helvetica Neue', sans-serif;
+$font-sans-serif: 'Gordita', 'Avenir', 'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+    'Segoe UI Symbol';
 
 $font-size-base: 15;
 $font-size-small: 13;