Merge pull request #1142 from sampotts/a11y-improvements

A11y improvements

1 files changed, 29 insertions, 64 deletions

diff --git a/demo/src/js/demo.js b/demo/src/js/demo.js
index c074d4fa..605eded7 100644
--- a/demo/src/js/demo.js
+++ b/demo/src/js/demo.js
@@ -7,16 +7,17 @@
 import Raven from 'raven-js';
 
 (() => {
-    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 +31,9 @@ import Raven from 'raven-js';
 
             // Remove class on blur
             document.addEventListener('focusout', event => {
+                if (container.contains(event.target)) {
+                    return;
+                }
                 event.target.classList.remove(tabClassName);
             });
 
@@ -42,12 +46,18 @@ 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 || 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',
@@ -57,57 +67,6 @@ import Raven from 'raven-js';
                 tooltips: {
                     controls: true,
                 },
-                clickToPlay: false,
-                /* 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,
                 },
@@ -115,7 +74,7 @@ import Raven from 'raven-js';
                     google: 'AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c',
                 },
                 ads: {
-                    enabled: true,
+                    enabled: env.prod || env.dev,
                     publisherId: '918848828995742',
                 },
             });
@@ -311,11 +270,17 @@ import Raven from 'raven-js';
         });
     });
 
+    // Raven / Sentry
+    // For demo site (https://plyr.io) only
+    if (env.prod) {
+        Raven.config('https://d4ad9866ad834437a4754e23937071e4@sentry.io/305555').install();
+    }
+
     // Google analytics
     // For demo site (https://plyr.io) only
     /* eslint-disable */
-    if (isLive) {
-        (function(i, s, o, g, r, a, m) {
+    if (env.prod) {
+        ((i, s, o, g, r, a, m) => {
             i.GoogleAnalyticsObject = r;
             i[r] =
                 i[r] ||