Merge branch 'master' of github.com:sampotts/plyr

changelog.md

@@ -1,4 +1,23 @@
-# v3.0.3
+## v3.0.7
+
+*   Fix for keyboard shortcut error with fast forward
+*   Fix for Vimeo trying to set playback rate when not allowed
+
+## v3.0.6
+
+*   Improved the logic for the custom handlers preventing default handlers
+
+## v3.0.5
+
+*   Removed console messages
+
+## v3.0.4
+
+*   Fixes for fullscreen not working inside iframes
+*   Fixes for custom handlers being able to prevent default
+*   Fixes for controls not hiding/showing correctly on Mobile Safari
+
+## v3.0.3
 
 *   Vimeo offset tweak (fixes #826)
 *   Fix for .stop() method (fixes #819)
@@ -9,11 +28,11 @@
 *   Fix fast-forward control (thanks @saadshahd)
 *   Fix the options link in the readme (thanks @DanielRuf)
 
-# v3.0.2
+## v3.0.2
 
 *   Fix for Safari not firing error events when trying to load blocked scripts
 
-# v3.0.1
+## v3.0.1
 
 *   Fix for trying to accessing local storage when it's blocked
 

demo/dist/demo.js

@@ -3843,9 +3843,12 @@ var singleton = Raven;
                     google: 'AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c'
                 },
                 ads: {
-                    // enabled: true,
+                    enabled: true,
                     publisherId: '918848828995742'
                 }
+                /* listeners: {
+                    seek: () => false,
+                }, */
             });
 
             // Expose for tinkering in the console
@@ -3933,7 +3936,7 @@ var singleton = Raven;
                         player.source = {
                             type: 'video',
                             sources: [{
-                                src: 'https://vimeo.com/76979871',
+                                src: 'https://vimeo.com/25345658',
                                 provider: 'vimeo'
                             }]
                         };

demo/src/js/demo.js

@@ -80,9 +80,12 @@ import Raven from 'raven-js';
                     google: 'AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c',
                 },
                 ads: {
-                    // enabled: true,
+                    enabled: true,
                     publisherId: '918848828995742',
                 },
+                /* listeners: {
+                    seek: () => false,
+                }, */
             });
 
             // Expose for tinkering in the console
@@ -176,7 +179,7 @@ import Raven from 'raven-js';
                         player.source = {
                             type: 'video',
                             sources: [{
-                                src: 'https://vimeo.com/76979871',
+                                src: 'https://vimeo.com/25345658',
                                 provider: 'vimeo',
                             }],
                         };

dist/plyr.js

@@ -77,7 +77,7 @@ var defaults = {
     // Sprite (for icons)
     loadSprite: true,
     iconPrefix: 'plyr',
-    iconUrl: 'https://cdn.plyr.io/3.0.4/plyr.svg',
+    iconUrl: 'https://cdn.plyr.io/3.0.6/plyr.svg',
 
     // Blank video (used to prevent errors on source change)
     blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
@@ -3533,9 +3533,14 @@ var controls = {
 
 
     // Set a list of available captions languages
-    setSpeedMenu: function setSpeedMenu() {
+    setSpeedMenu: function setSpeedMenu(options) {
         var _this4 = this;
 
+        // Do nothing if not selected
+        if (!this.config.controls.includes('settings') || !this.config.settings.includes('speed')) {
+            return;
+        }
+
         // Menu required
         if (!utils.is.element(this.elements.settings.panes.speed)) {
             return;
@@ -3543,9 +3548,11 @@ var controls = {
 
         var type = 'speed';
 
-        // Set the default speeds
-        if (!utils.is.array(this.options.speed) || !this.options.speed.length) {
+        // Set the speed options
+        if (!utils.is.array(options)) {
             this.options.speed = [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
+        } else {
+            this.options.speed = options;
         }
 
         // Set options if passed and filter based on config
@@ -3557,6 +3564,9 @@ var controls = {
         var toggle = !utils.is.empty(this.options.speed);
         controls.toggleTab.call(this, type, toggle);
 
+        // Check if we need to toggle the parent
+        controls.checkMenu.call(this);
+
         // If we're hiding, nothing more to do
         if (!toggle) {
             return;
@@ -3581,6 +3591,15 @@ var controls = {
     },
 
 
+    // Check if we need to hide/show the settings menu
+    checkMenu: function checkMenu() {
+        var speedHidden = this.elements.settings.tabs.speed.getAttribute('hidden') !== null;
+        var languageHidden = this.elements.settings.tabs.captions.getAttribute('hidden') !== null;
+
+        utils.toggleHidden(this.elements.settings.menu, speedHidden && languageHidden);
+    },
+
+
     // Show/hide menu
     toggleMenu: function toggleMenu(event) {
         var form = this.elements.settings.form;
@@ -3971,7 +3990,7 @@ var controls = {
 
         this.elements.controls = container;
 
-        if (this.config.controls.includes('settings') && this.config.settings.includes('speed')) {
+        if (this.isHTML5) {
             controls.setSpeedMenu.call(this);
         }
 
@@ -4179,7 +4198,7 @@ var Listeners = function () {
 
                     case 39:
                         // Arrow forward
-                        this.player.fastForward();
+                        this.player.forward();
                         break;
 
                     case 37:
@@ -4476,14 +4495,15 @@ var Listeners = function () {
             var proxy = function proxy(event, defaultHandler, customHandlerKey) {
                 var customHandler = _this4.player.config.listeners[customHandlerKey];
                 var hasCustomHandler = utils.is.function(customHandler);
+                var returned = true;
 
                 // Execute custom handler
                 if (hasCustomHandler) {
-                    customHandler.call(_this4.player, event);
+                    returned = customHandler.call(_this4.player, event);
                 }
 
                 // Only call default handler if not prevented in custom handler
-                if (!event.defaultPrevented && utils.is.function(defaultHandler)) {
+                if (returned && utils.is.function(defaultHandler)) {
                     defaultHandler.call(_this4.player, event);
                 }
             };
@@ -5709,7 +5729,8 @@ var youtube = {
                     });
 
                     // Get available speeds
-                    player.options.speed = instance.getAvailablePlaybackRates();
+                    var options = instance.getAvailablePlaybackRates();
+                    controls.setSpeedMenu.call(player, options);
 
                     // Set the tabindex to avoid focus entering iframe
                     if (player.supported.ui) {
@@ -5986,6 +6007,11 @@ var vimeo = {
                 player.embed.setPlaybackRate(input).then(function () {
                     speed = input;
                     utils.dispatchEvent.call(player, player.media, 'ratechange');
+                }).catch(function (error) {
+                    // Hide menu item (and menu if empty)
+                    if (error.name === 'Error') {
+                        controls.setSpeedMenu.call(player, []);
+                    }
                 });
             }
         });
@@ -6408,7 +6434,7 @@ var source = {
 
 // ==========================================================================
 // Plyr
-// plyr.js v3.0.4
+// plyr.js v3.0.6
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================

dist/plyr.polyfilled.js

@@ -5268,7 +5268,7 @@ var defaults = {
     // Sprite (for icons)
     loadSprite: true,
     iconPrefix: 'plyr',
-    iconUrl: 'https://cdn.plyr.io/3.0.5/plyr.svg',
+    iconUrl: 'https://cdn.plyr.io/3.0.7/plyr.svg',
 
     // Blank video (used to prevent errors on source change)
     blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
@@ -8714,9 +8714,14 @@ var controls = {
 
 
     // Set a list of available captions languages
-    setSpeedMenu: function setSpeedMenu() {
+    setSpeedMenu: function setSpeedMenu(options) {
         var _this4 = this;
 
+        // Do nothing if not selected
+        if (!this.config.controls.includes('settings') || !this.config.settings.includes('speed')) {
+            return;
+        }
+
         // Menu required
         if (!utils.is.element(this.elements.settings.panes.speed)) {
             return;
@@ -8724,9 +8729,11 @@ var controls = {
 
         var type = 'speed';
 
-        // Set the default speeds
-        if (!utils.is.array(this.options.speed) || !this.options.speed.length) {
+        // Set the speed options
+        if (!utils.is.array(options)) {
             this.options.speed = [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
+        } else {
+            this.options.speed = options;
         }
 
         // Set options if passed and filter based on config
@@ -8738,6 +8745,9 @@ var controls = {
         var toggle = !utils.is.empty(this.options.speed);
         controls.toggleTab.call(this, type, toggle);
 
+        // Check if we need to toggle the parent
+        controls.checkMenu.call(this);
+
         // If we're hiding, nothing more to do
         if (!toggle) {
             return;
@@ -8762,6 +8772,15 @@ var controls = {
     },
 
 
+    // Check if we need to hide/show the settings menu
+    checkMenu: function checkMenu() {
+        var speedHidden = this.elements.settings.tabs.speed.getAttribute('hidden') !== null;
+        var languageHidden = this.elements.settings.tabs.captions.getAttribute('hidden') !== null;
+
+        utils.toggleHidden(this.elements.settings.menu, speedHidden && languageHidden);
+    },
+
+
     // Show/hide menu
     toggleMenu: function toggleMenu(event) {
         var form = this.elements.settings.form;
@@ -9152,7 +9171,7 @@ var controls = {
 
         this.elements.controls = container;
 
-        if (this.config.controls.includes('settings') && this.config.settings.includes('speed')) {
+        if (this.isHTML5) {
             controls.setSpeedMenu.call(this);
         }
 
@@ -9360,7 +9379,7 @@ var Listeners = function () {
 
                     case 39:
                         // Arrow forward
-                        this.player.fastForward();
+                        this.player.forward();
                         break;
 
                     case 37:
@@ -9657,14 +9676,15 @@ var Listeners = function () {
             var proxy = function proxy(event, defaultHandler, customHandlerKey) {
                 var customHandler = _this4.player.config.listeners[customHandlerKey];
                 var hasCustomHandler = utils.is.function(customHandler);
+                var returned = true;
 
                 // Execute custom handler
                 if (hasCustomHandler) {
-                    customHandler.call(_this4.player, event);
+                    returned = customHandler.call(_this4.player, event);
                 }
 
                 // Only call default handler if not prevented in custom handler
-                if (!event.defaultPrevented && utils.is.function(defaultHandler)) {
+                if (returned && utils.is.function(defaultHandler)) {
                     defaultHandler.call(_this4.player, event);
                 }
             };
@@ -10890,7 +10910,8 @@ var youtube = {
                     });
 
                     // Get available speeds
-                    player.options.speed = instance.getAvailablePlaybackRates();
+                    var options = instance.getAvailablePlaybackRates();
+                    controls.setSpeedMenu.call(player, options);
 
                     // Set the tabindex to avoid focus entering iframe
                     if (player.supported.ui) {
@@ -11167,6 +11188,11 @@ var vimeo = {
                 player.embed.setPlaybackRate(input).then(function () {
                     speed = input;
                     utils.dispatchEvent.call(player, player.media, 'ratechange');
+                }).catch(function (error) {
+                    // Hide menu item (and menu if empty)
+                    if (error.name === 'Error') {
+                        controls.setSpeedMenu.call(player, []);
+                    }
                 });
             }
         });
@@ -11589,7 +11615,7 @@ var source = {
 
 // ==========================================================================
 // Plyr
-// plyr.js v3.0.5
+// plyr.js v3.0.7
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
@@ -12905,7 +12931,7 @@ var Plyr$1 = function () {
 
 // ==========================================================================
 // Plyr Polyfilled Build
-// plyr.js v3.0.4
+// plyr.js v3.0.6
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================

package.json

@@ -1,6 +1,6 @@
 {
     "name": "plyr",
-    "version": "3.0.5",
+    "version": "3.0.7",
     "description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
     "homepage": "https://plyr.io",
     "main": "./dist/plyr.js",

readme.md

@@ -2,7 +2,7 @@
 
 A simple, lightweight, accessible and customizable HTML5, YouTube and Vimeo media player that supports [_modern_](#browser-support) browsers.
 
-[Checkout the demo](https://plyr.io) - [Donate to support Plyr](#donate) - [Chat on Slack](https://bit.ly/plyr-slack)
+[Checkout the demo](https://plyr.io) - [Donate to support Plyr](#donate) - [Chat on Slack](https://bit.ly/plyr-chat)
 
 [![Image of Plyr](https://cdn.plyr.io/static/demo/screenshot.png?v=3)](https://plyr.io)
 
@@ -128,7 +128,7 @@ See [initialising](#initialising) for more information on advanced setups.
 If you want to use our CDN (provided by [Fastly](https://www.fastly.com/)) for the JavaScript, you can use the following:
 
 ```html
-<script src="https://cdn.plyr.io/3.0.5/plyr.js"></script>
+<script src="https://cdn.plyr.io/3.0.7/plyr.js"></script>
 ```
 
 _Note_: Be sure to read the [polyfills](#polyfills) section below about browser compatibility
@@ -144,13 +144,13 @@ Include the `plyr.css` stylsheet into your `<head>`
 If you want to use our CDN (provided by [Fastly](https://www.fastly.com/)) for the default CSS, you can use the following:
 
 ```html
-<link rel="stylesheet" href="https://cdn.plyr.io/3.0.5/plyr.css">
+<link rel="stylesheet" href="https://cdn.plyr.io/3.0.7/plyr.css">
 ```
 
 ### SVG Sprite
 
 The SVG sprite is loaded automatically from our CDN (provided by [Fastly](https://www.fastly.com/)). To change this, see the [options](#options) below. For
-reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.0.5/plyr.svg`.
+reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.0.7/plyr.svg`.
 
 ## Ads
 

src/js/controls.js

@@ -706,7 +706,12 @@ const controls = {
     },
 
     // Set a list of available captions languages
-    setSpeedMenu() {
+    setSpeedMenu(options) {
+        // Do nothing if not selected
+        if (!this.config.controls.includes('settings') || !this.config.settings.includes('speed')) {
+            return;
+        }
+
         // Menu required
         if (!utils.is.element(this.elements.settings.panes.speed)) {
             return;
@@ -714,8 +719,8 @@ const controls = {
 
         const type = 'speed';
 
-        // Set the default speeds
-        if (!utils.is.array(this.options.speed) || !this.options.speed.length) {
+        // Set the speed options
+        if (!utils.is.array(options)) {
             this.options.speed = [
                 0.5,
                 0.75,
@@ -725,6 +730,8 @@ const controls = {
                 1.75,
                 2,
             ];
+        } else {
+            this.options.speed = options;
         }
 
         // Set options if passed and filter based on config
@@ -734,6 +741,9 @@ const controls = {
         const toggle = !utils.is.empty(this.options.speed);
         controls.toggleTab.call(this, type, toggle);
 
+        // Check if we need to toggle the parent
+        controls.checkMenu.call(this);
+
         // If we're hiding, nothing more to do
         if (!toggle) {
             return;
@@ -755,6 +765,14 @@ const controls = {
         controls.updateSetting.call(this, type, list);
     },
 
+    // Check if we need to hide/show the settings menu
+    checkMenu() {
+        const speedHidden = this.elements.settings.tabs.speed.getAttribute('hidden') !== null;
+        const languageHidden = this.elements.settings.tabs.captions.getAttribute('hidden') !== null;
+
+        utils.toggleHidden(this.elements.settings.menu, speedHidden && languageHidden);
+    },
+
     // Show/hide menu
     toggleMenu(event) {
         const { form } = this.elements.settings;
@@ -1159,7 +1177,7 @@ const controls = {
 
         this.elements.controls = container;
 
-        if (this.config.controls.includes('settings') && this.config.settings.includes('speed')) {
+        if (this.isHTML5) {
             controls.setSpeedMenu.call(this);
         }
 

src/js/defaults.js

@@ -56,7 +56,7 @@ const defaults = {
     // Sprite (for icons)
     loadSprite: true,
     iconPrefix: 'plyr',
-    iconUrl: 'https://cdn.plyr.io/3.0.5/plyr.svg',
+    iconUrl: 'https://cdn.plyr.io/3.0.7/plyr.svg',
 
     // Blank video (used to prevent errors on source change)
     blankVideo: 'https://cdn.plyr.io/static/blank.mp4',

src/js/listeners.js

@@ -129,7 +129,7 @@ class Listeners {
 
                 case 39:
                     // Arrow forward
-                    this.player.fastForward();
+                    this.player.forward();
                     break;
 
                 case 37:
@@ -398,14 +398,15 @@ class Listeners {
         const proxy = (event, defaultHandler, customHandlerKey) => {
             const customHandler = this.player.config.listeners[customHandlerKey];
             const hasCustomHandler = utils.is.function(customHandler);
+            let returned = true;
 
             // Execute custom handler
             if (hasCustomHandler) {
-                customHandler.call(this.player, event);
+                returned = customHandler.call(this.player, event);
             }
 
             // Only call default handler if not prevented in custom handler
-            if (!event.defaultPrevented && utils.is.function(defaultHandler)) {
+            if (returned && utils.is.function(defaultHandler)) {
                 defaultHandler.call(this.player, event);
             }
         };

src/js/plugins/vimeo.js

@@ -4,6 +4,7 @@
 
 import utils from './../utils';
 import captions from './../captions';
+import controls from './../controls';
 import ui from './../ui';
 
 const vimeo = {
@@ -139,10 +140,18 @@ const vimeo = {
                 return speed;
             },
             set(input) {
-                player.embed.setPlaybackRate(input).then(() => {
-                    speed = input;
-                    utils.dispatchEvent.call(player, player.media, 'ratechange');
-                });
+                player.embed
+                    .setPlaybackRate(input)
+                    .then(() => {
+                        speed = input;
+                        utils.dispatchEvent.call(player, player.media, 'ratechange');
+                    })
+                    .catch(error => {
+                        // Hide menu item (and menu if empty)
+                        if (error.name === 'Error') {
+                            controls.setSpeedMenu.call(player, []);
+                        }
+                    });
             },
         });
 

src/js/plugins/youtube.js

@@ -294,7 +294,8 @@ const youtube = {
                     });
 
                     // Get available speeds
-                    player.options.speed = instance.getAvailablePlaybackRates();
+                    const options = instance.getAvailablePlaybackRates();
+                    controls.setSpeedMenu.call(player, options);
 
                     // Set the tabindex to avoid focus entering iframe
                     if (player.supported.ui) {

src/js/plyr.js

@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr
-// plyr.js v3.0.5
+// plyr.js v3.0.7
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================

src/js/plyr.polyfilled.js

@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr Polyfilled Build
-// plyr.js v3.0.5
+// plyr.js v3.0.7
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================