diff options
Diffstat (limited to 'demo/src')
| -rw-r--r-- | demo/src/js/demo.js | 85 |
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'); } |