Sentry upgrade for demo

1 files changed, 110 insertions, 118 deletions

diff --git a/demo/src/js/demo.js b/demo/src/js/demo.js
index 1723fcbc..7f7cec28 100644
--- a/demo/src/js/demo.js
+++ b/demo/src/js/demo.js
@@ -8,7 +8,7 @@ import './tab-focus';
 import 'custom-event-polyfill';
 import 'url-polyfill';
 
-import Raven from 'raven-js';
+import * as Sentry from '@sentry/browser';
 import Shr from 'shr-buttons';
 
 import Plyr from '../../../src/js/plyr';
@@ -16,145 +16,137 @@ import sources from './sources';
 import toggleClass from './toggle-class';
 
 (() => {
-    const { host } = window.location;
-    const env = {
-        prod: host === 'plyr.io',
-        dev: host === 'dev.plyr.io',
-    };
+    const production = 'plyr.io';
 
-    document.addEventListener('DOMContentLoaded', () => {
-        Raven.context(() => {
-            const selector = '#player';
-
-            // Setup share buttons
-            Shr.setup('.js-shr', {
-                count: {
-                    className: 'button__count',
-                },
-                wrapper: {
-                    className: 'button--with-count',
-                },
-            });
+    // Sentry for demo site (https://plyr.io) only
+    if (window.location.host === production) {
+        Sentry.init({
+            dsn: 'https://d4ad9866ad834437a4754e23937071e4@sentry.io/305555',
+            whitelistUrls: [production].map(d => new RegExp(`https://(([a-z0-9])+(.))*${d}`)),
+        });
+    }
 
-            // Setup the player
-            const player = new Plyr(selector, {
-                debug: true,
-                title: 'View From A Blue Moon',
-                iconUrl: 'dist/demo.svg',
-                keyboard: {
-                    global: true,
-                },
-                tooltips: {
-                    controls: true,
-                },
-                captions: {
-                    active: true,
-                },
-                ads: {
-                    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',
-                    ],
-                },
-                vimeo: {
-                    // Prevent Vimeo blocking plyr.io demo site
-                    referrerPolicy: 'no-referrer',
-                },
-            });
+    document.addEventListener('DOMContentLoaded', () => {
+        const selector = '#player';
+
+        // Setup share buttons
+        Shr.setup('.js-shr', {
+            count: {
+                className: 'button__count',
+            },
+            wrapper: {
+                className: 'button--with-count',
+            },
+        });
 
-            // Expose for tinkering in the console
-            window.player = player;
+        // Setup the player
+        const player = new Plyr(selector, {
+            debug: true,
+            title: 'View From A Blue Moon',
+            iconUrl: 'dist/demo.svg',
+            keyboard: {
+                global: true,
+            },
+            tooltips: {
+                controls: true,
+            },
+            captions: {
+                active: true,
+            },
+            ads: {
+                enabled: window.location.host.includes(production),
+                publisherId: '918848828995742',
+            },
+            previewThumbnails: {
+                enabled: true,
+                src: [
+                    'https://cdn.plyr.io/static/demo/thumbs/100p.vtt',
+                    'https://cdn.plyr.io/static/demo/thumbs/240p.vtt',
+                ],
+            },
+            vimeo: {
+                // Prevent Vimeo blocking plyr.io demo site
+                referrerPolicy: 'no-referrer',
+            },
+        });
 
-            // Setup type toggle
-            const buttons = document.querySelectorAll('[data-source]');
-            const types = Object.keys(sources);
-            const historySupport = Boolean(window.history && window.history.pushState);
-            let currentType = window.location.hash.substring(1);
-            const hasCurrentType = !currentType.length;
+        // Expose for tinkering in the console
+        window.player = player;
 
-            function render(type) {
-                // Remove active classes
-                Array.from(buttons).forEach(button => toggleClass(button.parentElement, 'active', false));
+        // Setup type toggle
+        const buttons = document.querySelectorAll('[data-source]');
+        const types = Object.keys(sources);
+        const historySupport = Boolean(window.history && window.history.pushState);
+        let currentType = window.location.hash.substring(1);
+        const hasInitialType = currentType.length;
 
-                // Set active on parent
-                toggleClass(document.querySelector(`[data-source="${type}"]`), 'active', true);
+        function render(type) {
+            // Remove active classes
+            Array.from(buttons).forEach(button => toggleClass(button.parentElement, 'active', false));
 
-                // Show cite
-                Array.from(document.querySelectorAll('.plyr__cite')).forEach(cite => {
-                    // eslint-disable-next-line no-param-reassign
-                    cite.hidden = true;
-                });
+            // Set active on parent
+            toggleClass(document.querySelector(`[data-source="${type}"]`), 'active', true);
 
-                document.querySelector(`.plyr__cite--${type}`).hidden = false;
-            }
+            // Show cite
+            Array.from(document.querySelectorAll('.plyr__cite')).forEach(cite => {
+                // eslint-disable-next-line no-param-reassign
+                cite.hidden = true;
+            });
 
-            // Set a new source
-            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 (
-                    !types.includes(type) ||
-                    (!init && type === currentType) ||
-                    (!currentType.length && type === 'video')
-                ) {
-                    return;
-                }
+            document.querySelector(`.plyr__cite--${type}`).hidden = false;
+        }
 
-                // Set the new source
-                player.source = sources[type];
+        // Set a new source
+        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 (!types.includes(type) || (!init && type === currentType) || (!currentType.length && type === 'video')) {
+                return;
+            }
 
-                // Set the current type for next time
-                currentType = type;
+            // Set the new source
+            player.source = sources[type];
 
-                render(type);
-            }
+            // Set the current type for next time
+            currentType = type;
 
-            // Bind to each button
-            Array.from(buttons).forEach(button => {
-                button.addEventListener('click', () => {
-                    const type = button.getAttribute('data-source');
+            render(type);
+        }
 
-                    setSource(type);
+        // Bind to each button
+        Array.from(buttons).forEach(button => {
+            button.addEventListener('click', () => {
+                const type = button.getAttribute('data-source');
 
-                    if (historySupport) {
-                        window.history.pushState({ type }, '', `#${type}`);
-                    }
-                });
-            });
+                setSource(type);
 
-            // List for backwards/forwards
-            window.addEventListener('popstate', event => {
-                if (event.state && Object.keys(event.state).includes('type')) {
-                    setSource(event.state.type);
+                if (historySupport) {
+                    window.history.pushState({ type }, '', `#${type}`);
                 }
             });
+        });
 
-            // If there's no current type set, assume video
-            if (hasCurrentType) {
-                currentType = 'video';
+        // List for backwards/forwards
+        window.addEventListener('popstate', event => {
+            if (event.state && Object.keys(event.state).includes('type')) {
+                setSource(event.state.type);
             }
+        });
 
-            // Replace current history state
-            if (historySupport && types.includes(currentType)) {
-                window.history.replaceState({ type: currentType }, '', hasCurrentType ? '' : `#${currentType}`);
-            }
+        // If there's no current type set, assume video
+        if (!hasInitialType) {
+            currentType = 'video';
+        }
 
-            // If it's not video, load the source
-            if (currentType !== 'video') {
-                setSource(currentType, true);
-            }
+        // Replace current history state
+        if (historySupport && types.includes(currentType)) {
+            window.history.replaceState({ type: currentType }, '', hasInitialType ? `#${currentType}` : '');
+        }
 
-            render(currentType);
-        });
-    });
+        // If it's not video, load the source
+        if (currentType !== 'video') {
+            setSource(currentType, true);
+        }
 
-    // Raven / Sentry
-    // For demo site (https://plyr.io) only
-    if (env.prod) {
-        Raven.config('https://d4ad9866ad834437a4754e23937071e4@sentry.io/305555').install();
-    }
+        render(currentType);
+    });
 })();