Keyboard and focus improvements

1 files changed, 63 insertions, 22 deletions

diff --git a/demo/src/js/demo.js b/demo/src/js/demo.js
index c074d4fa..8892bad8 100644
--- a/demo/src/js/demo.js
+++ b/demo/src/js/demo.js
@@ -12,11 +12,16 @@ import Raven from 'raven-js';
     // Raven / Sentry
     // For demo site (https://plyr.io) only
     if (isLive) {
-        Raven.config('https://d4ad9866ad834437a4754e23937071e4@sentry.io/305555').install();
+        Raven.config(
+            'https://d4ad9866ad834437a4754e23937071e4@sentry.io/305555',
+        ).install();
     }
 
     document.addEventListener('DOMContentLoaded', () => {
         Raven.context(() => {
+            const selector = '#player';
+            const container = document.getElementById('container');
+
             if (window.shr) {
                 window.shr.setup({
                     count: {
@@ -30,6 +35,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 +50,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',
@@ -159,40 +173,47 @@ import Raven from 'raven-js';
                             title: 'View From A Blue Moon',
                             sources: [
                                 {
-                                    src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4',
+                                    src:
+                                        'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4',
                                     type: 'video/mp4',
                                     size: 576,
                                 },
                                 {
-                                    src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4',
+                                    src:
+                                        'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4',
                                     type: 'video/mp4',
                                     size: 720,
                                 },
                                 {
-                                    src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4',
+                                    src:
+                                        'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4',
                                     type: 'video/mp4',
                                     size: 1080,
                                 },
                                 {
-                                    src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1440p.mp4',
+                                    src:
+                                        'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1440p.mp4',
                                     type: 'video/mp4',
                                     size: 1440,
                                 },
                             ],
-                            poster: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg',
+                            poster:
+                                'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg',
                             tracks: [
                                 {
                                     kind: 'captions',
                                     label: 'English',
                                     srclang: 'en',
-                                    src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt',
+                                    src:
+                                        'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt',
                                     default: true,
                                 },
                                 {
                                     kind: 'captions',
                                     label: 'French',
                                     srclang: 'fr',
-                                    src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt',
+                                    src:
+                                        'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt',
                                 },
                             ],
                         };
@@ -202,14 +223,17 @@ import Raven from 'raven-js';
                     case types.audio:
                         player.source = {
                             type: 'audio',
-                            title: 'Kishi Bashi – “It All Began With A Burst”',
+                            title:
+                                'Kishi Bashi – “It All Began With A Burst”',
                             sources: [
                                 {
-                                    src: 'https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3',
+                                    src:
+                                        'https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3',
                                     type: 'audio/mp3',
                                 },
                                 {
-                                    src: 'https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg',
+                                    src:
+                                        'https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg',
                                     type: 'audio/ogg',
                                 },
                             ],
@@ -222,7 +246,8 @@ import Raven from 'raven-js';
                             type: 'video',
                             sources: [
                                 {
-                                    src: 'https://youtube.com/watch?v=bTqVqk7FSmY',
+                                    src:
+                                        'https://youtube.com/watch?v=bTqVqk7FSmY',
                                     provider: 'youtube',
                                 },
                             ],
@@ -251,16 +276,26 @@ import Raven from 'raven-js';
                 currentType = type;
 
                 // Remove active classes
-                Array.from(buttons).forEach(button => toggleClass(button.parentElement, 'active', false));
+                Array.from(buttons).forEach(button =>
+                    toggleClass(button.parentElement, 'active', false),
+                );
 
                 // Set active on parent
-                toggleClass(document.querySelector(`[data-source="${type}"]`), 'active', true);
+                toggleClass(
+                    document.querySelector(`[data-source="${type}"]`),
+                    'active',
+                    true,
+                );
 
                 // Show cite
-                Array.from(document.querySelectorAll('.plyr__cite')).forEach(cite => {
-                    cite.setAttribute('hidden', '');
-                });
-                document.querySelector(`.plyr__cite--${type}`).removeAttribute('hidden');
+                Array.from(document.querySelectorAll('.plyr__cite')).forEach(
+                    cite => {
+                        cite.setAttribute('hidden', '');
+                    },
+                );
+                document
+                    .querySelector(`.plyr__cite--${type}`)
+                    .removeAttribute('hidden');
             }
 
             // Bind to each button
@@ -328,7 +363,13 @@ import Raven from 'raven-js';
             a.async = 1;
             a.src = g;
             m.parentNode.insertBefore(a, m);
-        })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
+        })(
+            window,
+            document,
+            'script',
+            'https://www.google-analytics.com/analytics.js',
+            'ga',
+        );
         window.ga('create', 'UA-40881672-11', 'auto');
         window.ga('send', 'pageview');
     }