Added Sentry

demo/index.html

@@ -181,7 +181,7 @@
     <script src="https://cdn.rangetouch.com/1.0.1/rangetouch.js" async></script>
 
     <!-- Docs script -->
-    <script src="dist/demo.js"></script>
+    <script src="dist/demo.js?2" crossorigin="anonymous"></script>
 </body>
 
 </html>

demo/src/js/demo.js

@@ -4,222 +4,234 @@
 // Please see readme.md in the root or github.com/sampotts/plyr
 // ==========================================================================
 
+import Raven from 'raven-js';
+
+Raven.config('https://d4ad9866ad834437a4754e23937071e4@sentry.io/305555').install();
+
 document.addEventListener('DOMContentLoaded', () => {
-    if (window.shr) {
+    Raven.context(() => {
-        window.shr.setup({
+        if (window.shr) {
-            count: {
+            window.shr.setup({
-                classname: 'button__count',
+                count: {
+                    classname: 'button__count',
+                },
+            });
+        }
+
+        // Setup tab focus
+        const tabClassName = 'tab-focus';
+
+        // Remove class on blur
+        document.addEventListener('focusout', event => {
+            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(() => {
+                document.activeElement.classList.add(tabClassName);
+            }, 0);
+        });
+
+        // Setup the player
+        const player = new Plyr('#player', {
+            debug: true,
+            title: 'View From A Blue Moon',
+            iconUrl: '../dist/plyr.svg',
+            keyboard: {
+                global: true,
+            },
+            tooltips: {
+                controls: true,
+            },
+            captions: {
+                active: true,
+            },
+            keys: {
+                google: 'AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c',
+            },
+            ads: {
+                enabled: true,
+                publisherId: '918848828995742',
             },
         });
-    }
 
-    // Setup tab focus
+        // Expose for tinkering in the console
-    const tabClassName = 'tab-focus';
+        window.player = player;
 
-    // Remove class on blur
+        // Setup type toggle
-    document.addEventListener('focusout', event => {
+        const buttons = document.querySelectorAll('[data-source]');
-        event.target.classList.remove(tabClassName);
+        const types = {
-    });
+            video: 'video',
+            audio: 'audio',
+            youtube: 'youtube',
+            vimeo: 'vimeo',
+        };
+        let currentType = window.location.hash.replace('#', '');
+        const historySupport = window.history && window.history.pushState;
 
-    // Add classname to tabbed elements
+        // Toggle class on an element
-    document.addEventListener('keydown', event => {
+        function toggleClass(element, className, state) {
-        if (event.keyCode !== 9) {
+            if (element) {
-            return;
+                element.classList[state ? 'add' : 'remove'](className);
+            }
         }
 
-        // Delay the adding of classname until the focus has changed
+        // Set a new source
-        // This event fires before the focusin event
+        function newSource(type, init) {
-        setTimeout(() => {
+            // 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
-            document.activeElement.classList.add(tabClassName);
+            if (!(type in types) || (!init && type === currentType) || (!currentType.length && type === types.video)) {
-        }, 0);
+                return;
-    });
+            }
 
-    // Setup the player
+            switch (type) {
-    const player = new Plyr('#player', {
+                case types.video:
-        debug: true,
+                    player.source = {
-        title: 'View From A Blue Moon',
+                        type: 'video',
-        iconUrl: '../dist/plyr.svg',
+                        title: 'View From A Blue Moon',
-        keyboard: {
+                        sources: [
-            global: true,
+                            {
-        },
+                                src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4',
-        tooltips: {
+                                type: 'video/mp4',
-            controls: true,
+                            },
-        },
+                        ],
-        captions: {
+                        poster: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg',
-            active: true,
+                        tracks: [
-        },
+                            {
-        keys: {
+                                kind: 'captions',
-            google: 'AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c',
+                                label: 'English',
-        },
+                                srclang: 'en',
-        ads: {
+                                src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt',
-            enabled: true,
+                                default: true,
-            publisherId: '918848828995742',
+                            },
-        },
+                            {
-    });
+                                kind: 'captions',
+                                label: 'French',
+                                srclang: 'fr',
+                                src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt',
+                            },
+                        ],
+                    };
 
-    // Expose for tinkering in the console
+                    break;
-    window.player = player;
 
-    // Setup type toggle
+                case types.audio:
-    const buttons = document.querySelectorAll('[data-source]');
+                    player.source = {
-    const types = {
+                        type: 'audio',
-        video: 'video',
+                        title: 'Kishi Bashi – “It All Began With A Burst”',
-        audio: 'audio',
+                        sources: [
-        youtube: 'youtube',
+                            {
-        vimeo: 'vimeo',
+                                src: 'https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3',
-    };
+                                type: 'audio/mp3',
-    let currentType = window.location.hash.replace('#', '');
+                            },
-    const historySupport = window.history && window.history.pushState;
+                            {
+                                src: 'https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg',
+                                type: 'audio/ogg',
+                            },
+                        ],
+                    };
 
-    // Toggle class on an element
+                    break;
-    function toggleClass(element, className, state) {
-        if (element) {
-            element.classList[state ? 'add' : 'remove'](className);
-        }
-    }
 
-    // Set a new source
+                case types.youtube:
-    function newSource(type, init) {
+                    player.source = {
-        // 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
+                        type: 'video',
-        if (!(type in types) || (!init && type === currentType) || (!currentType.length && type === types.video)) {
+                        title: 'View From A Blue Moon',
-            return;
+                        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 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 => {
+                cite.setAttribute('hidden', '');
+            });
+            document.querySelector(`.plyr__cite--${type}`).removeAttribute('hidden');
         }
 
-        switch (type) {
+        // Bind to each button
-            case types.video:
+        Array.from(buttons).forEach(button => {
-                player.source = {
+            button.addEventListener('click', () => {
-                    type: 'video',
+                const type = button.getAttribute('data-source');
-                    title: 'View From A Blue Moon',
-                    sources: [{
-                        src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4',
-                        type: 'video/mp4',
-                    }],
-                    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;
+                newSource(type);
 
-            case types.audio:
+                if (historySupport) {
-                player.source = {
+                    window.history.pushState({ type }, '', `#${type}`);
-                    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',
-                    title: 'View From A Blue Moon',
-                    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 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 => {
-            cite.setAttribute('hidden', '');
         });
-        document.querySelector(`.plyr__cite--${type}`).removeAttribute('hidden');
-    }
 
-    // Bind to each button
+        // List for backwards/forwards
-    Array.from(buttons).forEach(button => {
+        window.addEventListener('popstate', event => {
-        button.addEventListener('click', () => {
+            if (event.state && 'type' in event.state) {
-            const type = button.getAttribute('data-source');
+                newSource(event.state.type);
-
-            newSource(type);
-
-            if (historySupport) {
-                window.history.pushState({ type }, '', `#${type}`);
             }
         });
-    });
 
-    // List for backwards/forwards
+        // On load
-    window.addEventListener('popstate', event => {
+        if (historySupport) {
-        if (event.state && 'type' in event.state) {
+            const video = !currentType.length;
-            newSource(event.state.type);
+
+            // If there's no current type set, assume video
+            if (video) {
+                currentType = types.video;
+            }
+
+            // Replace current history state
+            if (currentType in types) {
+                window.history.replaceState(
+                    {
+                        type: currentType,
+                    },
+                    '',
+                    video ? '' : `#${currentType}`,
+                );
+            }
+
+            // If it's not video, load the source
+            if (currentType !== types.video) {
+                newSource(currentType, true);
+            }
         }
     });
-
-    // On load
-    if (historySupport) {
-        const video = !currentType.length;
-
-        // If there's no current type set, assume video
-        if (video) {
-            currentType = types.video;
-        }
-
-        // Replace current history state
-        if (currentType in types) {
-            window.history.replaceState(
-                {
-                    type: currentType,
-                },
-                '',
-                video ? '' : `#${currentType}`,
-            );
-        }
-
-        // If it's not video, load the source
-        if (currentType !== types.video) {
-            newSource(currentType, true);
-        }
-    }
 });
 
 // Google analytics

dist/plyr.js

@@ -77,7 +77,7 @@ var defaults = {
     // Sprite (for icons)
     loadSprite: true,
     iconPrefix: 'plyr',
-    iconUrl: 'https://cdn.plyr.io/3.0.0-beta.20/plyr.svg',
+    iconUrl: 'https://cdn.plyr.io/3.0.0/plyr.svg',
 
     // Blank video (used to prevent errors on source change)
     blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
@@ -6021,7 +6021,7 @@ var source = {
 
 // ==========================================================================
 // Plyr
-// plyr.js v3.0.0-beta.20
+// plyr.js v3.0.0
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================

dist/plyr.polyfilled.js

@@ -12512,7 +12512,7 @@ var Plyr$1 = function () {
 
 // ==========================================================================
 // Plyr Polyfilled Build
-// plyr.js v3.0.0-beta.20
+// plyr.js v3.0.0
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================

package.json

@@ -13,7 +13,7 @@
         "babel-plugin-external-helpers": "^6.22.0",
         "babel-preset-env": "^1.6.1",
         "del": "^3.0.0",
-        "eslint": "^4.18.2",
+        "eslint": "^4.19.0",
         "eslint-config-airbnb-base": "^12.1.0",
         "eslint-config-prettier": "^2.9.0",
         "eslint-plugin-import": "^2.9.0",
@@ -65,6 +65,7 @@
     "author": "Sam Potts <sam@potts.es>",
     "dependencies": {
         "babel-polyfill": "^6.26.0",
-        "custom-event-polyfill": "^0.3.0"
+        "custom-event-polyfill": "^0.3.0",
+        "raven-js": "^3.23.3"
     }
 }

readme.md

@@ -703,7 +703,7 @@ Credit to the PayPal HTML5 Video player from which Plyr's caption functionality
 
 ## Thanks
 
-[![Fastly](https://www.fastly.com/sites/all/themes/custom/fastly2016/logo.png)](https://www.fastly.com/)
+[![Fastly](https://cdn.plyr.io/static/demo/fastly-logo.png)](https://www.fastly.com/)
 
 Massive thanks to [Fastly](https://www.fastly.com/) for providing the CDN services.
 

yarn.lock

@@ -4356,6 +4356,10 @@ randomatic@^1.1.3:
     is-number "^3.0.0"
     kind-of "^4.0.0"
 
+raven-js@^3.23.3:
+  version "3.23.3"
+  resolved "https://registry.yarnpkg.com/raven-js/-/raven-js-3.23.3.tgz#6174f506c7362eb8bb72b291af5f22edb44ef165"
+
 read-pkg-up@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-1.0.1.tgz#9d63c13276c065918d57f002a57f40a1b643fb02"