Demo clean up

4 files changed, 168 insertions, 189 deletions

diff --git a/demo/src/js/demo.js b/demo/src/js/demo.js
index a0a6ab1a..a2867b20 100644
--- a/demo/src/js/demo.js
+++ b/demo/src/js/demo.js
@@ -4,10 +4,16 @@
 // Please see readme.md in the root or github.com/sampotts/plyr
 // ==========================================================================
 
+import './tab-focus';
+import 'custom-event-polyfill';
+import 'url-polyfill';
+
 import Raven from 'raven-js';
 import Shr from 'shr-buttons';
 
 import Plyr from '../../../src/js/plyr';
+import sources from './sources';
+import toggleClass from './toggle-class';
 
 (() => {
     const { host } = window.location;
@@ -19,48 +25,15 @@ import Plyr from '../../../src/js/plyr';
     document.addEventListener('DOMContentLoaded', () => {
         Raven.context(() => {
             const selector = '#player';
-            const container = document.getElementById('container');
-
-            if (Shr) {
-                Shr.setup('.js-shr', {
-                    count: {
-                        className: 'button__count',
-                    },
-                    wrapper: {
-                        className: 'button--with-count',
-                    },
-                });
-            }
-
-            // Setup tab focus
-            const tabClassName = 'tab-focus';
-
-            // Remove class on blur
-            document.addEventListener('focusout', event => {
-                if (!event.target.classList || container.contains(event.target)) {
-                    return;
-                }
-
-                event.target.classList.remove(tabClassName);
-            });
-
-            // Add classname to tabbed elements
-            document.addEventListener('keydown', event => {
-                if (event.keyCode !== 9) {
-                    return;
-                }
-
-                // Delay the adding of classname until the focus has changed
-                // This event fires before the focusin event
-                setTimeout(() => {
-                    const focused = document.activeElement;
-
-                    if (!focused || !focused.classList || container.contains(focused)) {
-                        return;
-                    }
 
-                    focused.classList.add(tabClassName);
-                }, 10);
+            // Setup share buttons
+            Shr.setup('.js-shr', {
+                count: {
+                    className: 'button__count',
+                },
+                wrapper: {
+                    className: 'button--with-count',
+                },
             });
 
             // Setup the player
@@ -98,144 +71,45 @@ import Plyr from '../../../src/js/plyr';
 
             // Setup type toggle
             const buttons = document.querySelectorAll('[data-source]');
-            const types = {
-                video: 'video',
-                audio: 'audio',
-                youtube: 'youtube',
-                vimeo: 'vimeo',
-            };
-            let currentType = window.location.hash.replace('#', '');
-            const historySupport = window.history && window.history.pushState;
+            const types = Object.keys(sources);
+            const historySupport = Boolean(window.history && window.history.pushState);
+            let currentType = window.location.hash.substring(1);
+            const hasCurrentType = !currentType.length;
 
-            // Toggle class on an element
-            function toggleClass(element, className, state) {
-                if (element) {
-                    element.classList[state ? 'add' : 'remove'](className);
-                }
+            function render(type) {
+                // Remove active classes
+                Array.from(buttons).forEach(button => toggleClass(button.parentElement, 'active', false));
+
+                // Set active on parent
+                toggleClass(document.querySelector(`[data-source="${type}"]`), 'active', true);
+
+                // Show cite
+                Array.from(document.querySelectorAll('.plyr__cite')).forEach(cite => {
+                    // eslint-disable-next-line no-param-reassign
+                    cite.hidden = true;
+                });
+
+                document.querySelector(`.plyr__cite--${type}`).hidden = false;
             }
 
             // Set a new source
-            function newSource(type, init) {
+            function setSource(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) ||
+                    !types.includes(type) ||
                     (!init && type === currentType) ||
-                    (!currentType.length && type === types.video)
+                    (!currentType.length && type === 'video')
                 ) {
                     return;
                 }
 
-                switch (type) {
-                    case types.video:
-                        player.source = {
-                            type: 'video',
-                            title: 'View From A Blue Moon',
-                            sources: [
-                                {
-                                    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',
-                                    type: 'video/mp4',
-                                    size: 720,
-                                },
-                                {
-                                    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',
-                                    type: 'video/mp4',
-                                    size: 1440,
-                                },
-                            ],
-                            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',
-                                    default: true,
-                                },
-                                {
-                                    kind: 'captions',
-                                    label: 'French',
-                                    srclang: 'fr',
-                                    src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt',
-                                },
-                            ],
-                        };
-
-                        break;
-
-                    case types.audio:
-                        player.source = {
-                            type: 'audio',
-                            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',
-                                    type: 'audio/mp3',
-                                },
-                                {
-                                    src: 'https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg',
-                                    type: 'audio/ogg',
-                                },
-                            ],
-                        };
-
-                        break;
-
-                    case types.youtube:
-                        player.source = {
-                            type: 'video',
-                            sources: [
-                                {
-                                    src: 'https://youtube.com/watch?v=bTqVqk7FSmY',
-                                    provider: 'youtube',
-                                },
-                            ],
-                        };
-
-                        break;
-
-                    case types.vimeo:
-                        player.source = {
-                            type: 'video',
-                            sources: [
-                                {
-                                    src: 'https://vimeo.com/76979871',
-                                    provider: 'vimeo',
-                                },
-                            ],
-                        };
-
-                        break;
-
-                    default:
-                        break;
-                }
+                // Set the new source
+                player.source = sources[type];
 
                 // Set the current type for next time
                 currentType = type;
 
-                // Remove active classes
-                Array.from(buttons).forEach(button => toggleClass(button.parentElement, 'active', false));
-
-                // Set active on parent
-                toggleClass(document.querySelector(`[data-source="${type}"]`), 'active', true);
-
-                // Show cite
-                Array.from(document.querySelectorAll('.plyr__cite')).forEach(cite => {
-                    // eslint-disable-next-line no-param-reassign
-                    cite.hidden = true;
-                });
-
-                document.querySelector(`.plyr__cite--${type}`).hidden = false;
+                render(type);
             }
 
             // Bind to each button
@@ -243,7 +117,7 @@ import Plyr from '../../../src/js/plyr';
                 button.addEventListener('click', () => {
                     const type = button.getAttribute('data-source');
 
-                    newSource(type);
+                    setSource(type);
 
                     if (historySupport) {
                         window.history.pushState({ type }, '', `#${type}`);
@@ -253,36 +127,27 @@ import Plyr from '../../../src/js/plyr';
 
             // List for backwards/forwards
             window.addEventListener('popstate', event => {
-                if (event.state && 'type' in event.state) {
-                    newSource(event.state.type);
+                if (event.state && Object.keys(event.state).includes('type')) {
+                    setSource(event.state.type);
                 }
             });
 
-            // On load
-            if (historySupport) {
-                const video = !currentType.length;
-
-                // If there's no current type set, assume video
-                if (video) {
-                    currentType = types.video;
-                }
+            // If there's no current type set, assume video
+            if (hasCurrentType) {
+                currentType = 'video';
+            }
 
-                // Replace current history state
-                if (currentType in types) {
-                    window.history.replaceState(
-                        {
-                            type: currentType,
-                        },
-                        '',
-                        video ? '' : `#${currentType}`,
-                    );
-                }
+            // Replace current history state
+            if (historySupport && types.includes(currentType)) {
+                window.history.replaceState({ type: currentType }, '', hasCurrentType ? '' : `#${currentType}`);
+            }
 
-                // If it's not video, load the source
-                if (currentType !== types.video) {
-                    newSource(currentType, true);
-                }
+            // If it's not video, load the source
+            if (currentType !== 'video') {
+                setSource(currentType, true);
             }
+
+            render(currentType);
         });
     });
 
diff --git a/demo/src/js/sources.js b/demo/src/js/sources.js
new file mode 100644
index 00000000..8dbed4e3
--- /dev/null
+++ b/demo/src/js/sources.js
@@ -0,0 +1,78 @@
+const sources = {
+    video: {
+        type: 'video',
+        title: 'View From A Blue Moon',
+        sources: [
+            {
+                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',
+                type: 'video/mp4',
+                size: 720,
+            },
+            {
+                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',
+                type: 'video/mp4',
+                size: 1440,
+            },
+        ],
+        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',
+                default: true,
+            },
+            {
+                kind: 'captions',
+                label: 'French',
+                srclang: 'fr',
+                src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt',
+            },
+        ],
+    },
+    audio: {
+        type: 'audio',
+        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',
+                type: 'audio/mp3',
+            },
+            {
+                src: 'https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg',
+                type: 'audio/ogg',
+            },
+        ],
+    },
+    youtube: {
+        type: 'video',
+        sources: [
+            {
+                src: 'https://youtube.com/watch?v=bTqVqk7FSmY',
+                provider: 'youtube',
+            },
+        ],
+    },
+    vimeo: {
+        type: 'video',
+        sources: [
+            {
+                src: 'https://vimeo.com/76979871',
+                provider: 'vimeo',
+            },
+        ],
+    },
+};
+
+export default sources;
diff --git a/demo/src/js/tab-focus.js b/demo/src/js/tab-focus.js
new file mode 100644
index 00000000..c1602cf0
--- /dev/null
+++ b/demo/src/js/tab-focus.js
@@ -0,0 +1,31 @@
+// Setup tab focus
+const container = document.getElementById('container');
+const tabClassName = 'tab-focus';
+
+// Remove class on blur
+document.addEventListener('focusout', event => {
+    if (!event.target.classList || container.contains(event.target)) {
+        return;
+    }
+
+    event.target.classList.remove(tabClassName);
+});
+
+// Add classname to tabbed elements
+document.addEventListener('keydown', event => {
+    if (event.keyCode !== 9) {
+        return;
+    }
+
+    // Delay the adding of classname until the focus has changed
+    // This event fires before the focusin event
+    setTimeout(() => {
+        const focused = document.activeElement;
+
+        if (!focused || !focused.classList || container.contains(focused)) {
+            return;
+        }
+
+        focused.classList.add(tabClassName);
+    }, 10);
+});
diff --git a/demo/src/js/toggle-class.js b/demo/src/js/toggle-class.js
new file mode 100644
index 00000000..1661433b
--- /dev/null
+++ b/demo/src/js/toggle-class.js
@@ -0,0 +1,5 @@
+// Toggle class on an element
+const toggleClass = (element, className = '', toggle = false) =>
+    element && element.classList[toggle ? 'add' : 'remove'](className);
+
+export default toggleClass;