v3.4.6

-   Added picture-in-picture support for Chrome 70+
-   Fixed issue with versioning the SVG sprite in the gulp build script

changelog.md

@@ -1,3 +1,8 @@
+# v3.4.6
+
+-   Added picture-in-picture support for Chrome 70+
+-   Fixed issue with versioning the SVG sprite in the gulp build script
+
 # v3.4.5
 
 -   Added download button option to download either current source or a custom URL you specify in options

dist/plyr.js

@@ -705,9 +705,25 @@ typeof navigator === "object" && (function (global, factory) {
       };
     },
     // Picture-in-picture support
-    // Safari only currently
+    // Safari & Chrome only currently
     pip: function () {
-      return !browser.isIPhone && is.function(createElement('video').webkitSetPresentationMode);
+      if (browser.isIPhone) {
+        return false;
+      } // Safari
+      // https://developer.apple.com/documentation/webkitjs/adding_picture_in_picture_to_your_safari_media_controls
+
+
+      if (is.function(createElement('video').webkitSetPresentationMode)) {
+        return true;
+      } // Chrome
+      // https://developers.google.com/web/updates/2018/10/watch-video-using-picture-in-picture
+
+
+      if (document.pictureInPictureEnabled && !createElement('video').disablePictureInPicture) {
+        return true;
+      }
+
+      return false;
     }(),
     // Airplay support
     // Safari only currently
@@ -840,10 +856,6 @@ typeof navigator === "object" && (function (global, factory) {
 
           triggerEvent.call(player, player.media, 'qualitychange', false, {
             quality: input
-          }); // Save to storage
-
-          player.storage.set({
-            quality: input
           });
         }
       });
@@ -3180,7 +3192,7 @@ typeof navigator === "object" && (function (global, factory) {
     // Sprite (for icons)
     loadSprite: true,
     iconPrefix: 'plyr',
-    iconUrl: 'https://cdn.plyr.io/3.3.12/plyr.svg',
+    iconUrl: 'https://cdn.plyr.io/3.4.6/plyr.svg',
     // Blank video (used to prevent errors on source change)
     blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
     // Quality default
@@ -3444,6 +3456,14 @@ typeof navigator === "object" && (function (global, factory) {
     }
   };
 
+  // ==========================================================================
+  // Plyr states
+  // ==========================================================================
+  var pip = {
+    active: 'picture-in-picture',
+    inactive: 'inline'
+  };
+
   // ==========================================================================
   // Plyr supported types and providers
   // ==========================================================================
@@ -7429,17 +7449,26 @@ typeof navigator === "object" && (function (global, factory) {
         }
 
         var quality = [!is.empty(input) && Number(input), this.storage.get('quality'), config.selected, config.default].find(is.number);
+        var updateStorage = true;
 
         if (!options.includes(quality)) {
           var value = closest(options, quality);
           this.debug.warn("Unsupported quality option: ".concat(quality, ", using ").concat(value, " instead"));
-          quality = value;
+          quality = value; // Don't update storage if quality is not supported
+
+          updateStorage = false;
         } // Update config
 
 
         config.selected = quality; // Set quality
 
-        this.media.quality = quality;
+        this.media.quality = quality; // Save to storage
+
+        if (updateStorage) {
+          this.storage.set({
+            quality: quality
+          });
+        }
       }
       /**
        * Get current quality level
@@ -7618,19 +7647,27 @@ typeof navigator === "object" && (function (global, factory) {
     }, {
       key: "pip",
       set: function set(input) {
-        var states = {
-          pip: 'picture-in-picture',
-          inline: 'inline'
-        }; // Bail if no support
-
+        // Bail if no support
         if (!support.pip) {
           return;
         } // Toggle based on current state if not passed
 
 
-        var toggle = is.boolean(input) ? input : this.pip === states.inline; // Toggle based on current state
+        var toggle = is.boolean(input) ? input : !this.pip; // Toggle based on current state
+        // Safari
 
-        this.media.webkitSetPresentationMode(toggle ? states.pip : states.inline);
+        if (is.function(this.media.webkitSetPresentationMode)) {
+          this.media.webkitSetPresentationMode(toggle ? pip.active : pip.inactive);
+        } // Chrome
+
+
+        if (is.function(this.media.requestPictureInPicture)) {
+          if (!this.pip && toggle) {
+            this.media.requestPictureInPicture();
+          } else if (this.pip && !toggle) {
+            document.exitPictureInPicture();
+          }
+        }
       }
       /**
        * Get the current picture-in-picture state
@@ -7639,9 +7676,15 @@ typeof navigator === "object" && (function (global, factory) {
       get: function get() {
         if (!support.pip) {
           return null;
-        }
+        } // Safari
 
-        return this.media.webkitPresentationMode;
+
+        if (!is.empty(this.media.webkitPresentationMode)) {
+          return this.media.webkitPresentationMode === pip.active;
+        } // Chrome
+
+
+        return this.media === document.pictureInPictureElement;
       }
     }], [{
       key: "supported",

dist/plyr.polyfilled.js

@@ -3329,9 +3329,25 @@ typeof navigator === "object" && (function (global, factory) {
       };
     },
     // Picture-in-picture support
-    // Safari only currently
+    // Safari & Chrome only currently
     pip: function () {
-      return !browser.isIPhone && is$1.function(createElement('video').webkitSetPresentationMode);
+      if (browser.isIPhone) {
+        return false;
+      } // Safari
+      // https://developer.apple.com/documentation/webkitjs/adding_picture_in_picture_to_your_safari_media_controls
+
+
+      if (is$1.function(createElement('video').webkitSetPresentationMode)) {
+        return true;
+      } // Chrome
+      // https://developers.google.com/web/updates/2018/10/watch-video-using-picture-in-picture
+
+
+      if (document.pictureInPictureEnabled && !createElement('video').disablePictureInPicture) {
+        return true;
+      }
+
+      return false;
     }(),
     // Airplay support
     // Safari only currently
@@ -3463,10 +3479,6 @@ typeof navigator === "object" && (function (global, factory) {
 
           triggerEvent.call(player, player.media, 'qualitychange', false, {
             quality: input
-          }); // Save to storage
-
-          player.storage.set({
-            quality: input
           });
         }
       });
@@ -5843,7 +5855,7 @@ typeof navigator === "object" && (function (global, factory) {
     // Sprite (for icons)
     loadSprite: true,
     iconPrefix: 'plyr',
-    iconUrl: 'https://cdn.plyr.io/3.3.12/plyr.svg',
+    iconUrl: 'https://cdn.plyr.io/3.4.6/plyr.svg',
     // Blank video (used to prevent errors on source change)
     blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
     // Quality default
@@ -6107,6 +6119,14 @@ typeof navigator === "object" && (function (global, factory) {
     }
   };
 
+  // ==========================================================================
+  // Plyr states
+  // ==========================================================================
+  var pip = {
+    active: 'picture-in-picture',
+    inactive: 'inline'
+  };
+
   // ==========================================================================
   // Plyr supported types and providers
   // ==========================================================================
@@ -10119,17 +10139,26 @@ typeof navigator === "object" && (function (global, factory) {
         }
 
         var quality = [!is$1.empty(input) && Number(input), this.storage.get('quality'), config.selected, config.default].find(is$1.number);
+        var updateStorage = true;
 
         if (!options.includes(quality)) {
           var value = closest(options, quality);
           this.debug.warn("Unsupported quality option: ".concat(quality, ", using ").concat(value, " instead"));
-          quality = value;
+          quality = value; // Don't update storage if quality is not supported
+
+          updateStorage = false;
         } // Update config
 
 
         config.selected = quality; // Set quality
 
-        this.media.quality = quality;
+        this.media.quality = quality; // Save to storage
+
+        if (updateStorage) {
+          this.storage.set({
+            quality: quality
+          });
+        }
       }
       /**
        * Get current quality level
@@ -10308,19 +10337,27 @@ typeof navigator === "object" && (function (global, factory) {
     }, {
       key: "pip",
       set: function set(input) {
-        var states = {
-          pip: 'picture-in-picture',
-          inline: 'inline'
-        }; // Bail if no support
-
+        // Bail if no support
         if (!support.pip) {
           return;
         } // Toggle based on current state if not passed
 
 
-        var toggle = is$1.boolean(input) ? input : this.pip === states.inline; // Toggle based on current state
+        var toggle = is$1.boolean(input) ? input : !this.pip; // Toggle based on current state
+        // Safari
 
-        this.media.webkitSetPresentationMode(toggle ? states.pip : states.inline);
+        if (is$1.function(this.media.webkitSetPresentationMode)) {
+          this.media.webkitSetPresentationMode(toggle ? pip.active : pip.inactive);
+        } // Chrome
+
+
+        if (is$1.function(this.media.requestPictureInPicture)) {
+          if (!this.pip && toggle) {
+            this.media.requestPictureInPicture();
+          } else if (this.pip && !toggle) {
+            document.exitPictureInPicture();
+          }
+        }
       }
       /**
        * Get the current picture-in-picture state
@@ -10329,9 +10366,15 @@ typeof navigator === "object" && (function (global, factory) {
       get: function get() {
         if (!support.pip) {
           return null;
-        }
+        } // Safari
 
-        return this.media.webkitPresentationMode;
+
+        if (!is$1.empty(this.media.webkitPresentationMode)) {
+          return this.media.webkitPresentationMode === pip.active;
+        } // Chrome
+
+
+        return this.media === document.pictureInPictureElement;
       }
     }], [{
       key: "supported",

gulpfile.js

@@ -308,13 +308,13 @@ if (Object.keys(credentials).includes('aws') && Object.keys(credentials).include
         console.log(`Updating versions to '${version}'...`);
 
         // Replace versioned URLs in source
-        const files = ['plyr.js', 'plyr.polyfilled.js', 'defaults.js'];
+        const files = ['plyr.js', 'plyr.polyfilled.js', 'config/defaults.js'];
 
         return gulp
-            .src(files.map(file => path.join(root, `src/js/${file}`)))
+            .src(files.map(file => path.join(root, `src/js/${file}`)), { base: '.' })
             .pipe(replace(semver, `v${version}`))
             .pipe(replace(cdnpath, `${aws.cdn.domain}/${version}/`))
-            .pipe(gulp.dest(path.join(root, 'src/js/')));
+            .pipe(gulp.dest('./'));
     });
 
     // Publish version to CDN bucket

package.json

@@ -1,6 +1,6 @@
 {
     "name": "plyr",
-    "version": "3.4.5",
+    "version": "3.4.6",
     "description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
     "homepage": "https://plyr.io",
     "author": "Sam Potts <sam@potts.es>",

readme.md

@@ -132,13 +132,13 @@ See [initialising](#initialising) for more information on advanced setups.
 You can use our CDN (provided by [Fastly](https://www.fastly.com/)) for the JavaScript. There's 2 versions; one with and one without [polyfills](#polyfills). My recommendation would be to manage polyfills seperately as part of your application but to make life easier you can use the polyfilled build.
 
 ```html
-<script src="https://cdn.plyr.io/3.4.5/plyr.js"></script>
+<script src="https://cdn.plyr.io/3.4.6/plyr.js"></script>
 ```
 
 ...or...
 
 ```html
-<script src="https://cdn.plyr.io/3.4.5/plyr.polyfilled.js"></script>
+<script src="https://cdn.plyr.io/3.4.6/plyr.polyfilled.js"></script>
 ```
 
 ### CSS
@@ -152,13 +152,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.4.5/plyr.css">
+<link rel="stylesheet" href="https://cdn.plyr.io/3.4.6/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.4.5/plyr.svg`.
+reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.4.6/plyr.svg`.
 
 ## Ads
 
@@ -417,7 +417,7 @@ player.fullscreen.active; // false;
 | `language`           | ✓      | ✓      | Gets or sets the preferred captions language for the player. The setter accepts an ISO two-letter language code. Support for the languages is dependent on the captions you include. If your captions don't have any language data, or if you have multiple tracks with the same language, you may want to use `currentTrack` instead. |
 | `fullscreen.active`  | ✓      | -      | Returns a boolean indicating if the current player is in fullscreen mode.                                                                                                                                                                                                                                                              |
 | `fullscreen.enabled` | ✓      | -      | Returns a boolean indicating if the current player has fullscreen enabled.                                                                                                                                                                                                                                                             |
-| `pip`                | ✓      | ✓      | Gets or sets the picture-in-picture state of the player. The setter accepts a boolean. This currently only supported on Safari 10+ on MacOS Sierra+ and iOS 10+.                                                                                                                                                                       |
+| `pip`                | ✓      | ✓      | Gets or sets the picture-in-picture state of the player. The setter accepts a boolean. This currently only supported on Safari 10+ (on MacOS Sierra+ and iOS 10+) and Chrome 70+.                                                                                                                                                      |
 
 1.  YouTube only. HTML5 will follow.
 2.  HTML5 only

src/js/config/defaults.js

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

src/js/config/states.js

@@ -0,0 +1,10 @@
+// ==========================================================================
+// Plyr states
+// ==========================================================================
+
+export const pip = {
+    active: 'picture-in-picture',
+    inactive: 'inline',
+};
+
+export default { pip };

src/js/html5.js

@@ -82,9 +82,6 @@ const html5 = {
                 triggerEvent.call(player, player.media, 'qualitychange', false, {
                     quality: input,
                 });
-
-                // Save to storage
-                player.storage.set({ quality: input });
             },
         });
     },

src/js/plyr.js

@@ -1,12 +1,13 @@
 // ==========================================================================
 // Plyr
-// plyr.js v3.4.5
+// plyr.js v3.4.6
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
 
 import captions from './captions';
 import defaults from './config/defaults';
+import { pip } from './config/states';
 import { getProviderByUrl, providers, types } from './config/types';
 import Console from './console';
 import controls from './controls';
@@ -695,10 +696,15 @@ class Plyr {
             config.default,
         ].find(is.number);
 
+        let updateStorage = true;
+
         if (!options.includes(quality)) {
             const value = closest(options, quality);
             this.debug.warn(`Unsupported quality option: ${quality}, using ${value} instead`);
             quality = value;
+
+            // Don't update storage if quality is not supported
+            updateStorage = false;
         }
 
         // Update config
@@ -706,6 +712,11 @@ class Plyr {
 
         // Set quality
         this.media.quality = quality;
+
+        // Save to storage
+        if (updateStorage) {
+            this.storage.set({ quality });
+        }
     }
 
     /**
@@ -886,21 +897,28 @@ class Plyr {
      * TODO: detect outside changes
      */
     set pip(input) {
-        const states = {
-            pip: 'picture-in-picture',
-            inline: 'inline',
-        };
-
         // Bail if no support
         if (!support.pip) {
             return;
         }
 
         // Toggle based on current state if not passed
-        const toggle = is.boolean(input) ? input : this.pip === states.inline;
+        const toggle = is.boolean(input) ? input : !this.pip;
 
         // Toggle based on current state
-        this.media.webkitSetPresentationMode(toggle ? states.pip : states.inline);
+        // Safari
+        if (is.function(this.media.webkitSetPresentationMode)) {
+            this.media.webkitSetPresentationMode(toggle ? pip.active : pip.inactive);
+        }
+
+        // Chrome
+        if (is.function(this.media.requestPictureInPicture)) {
+            if (!this.pip && toggle) {
+                this.media.requestPictureInPicture();
+            } else if (this.pip && !toggle) {
+                document.exitPictureInPicture();
+            }
+        }
     }
 
     /**
@@ -911,7 +929,13 @@ class Plyr {
             return null;
         }
 
-        return this.media.webkitPresentationMode;
+        // Safari
+        if (!is.empty(this.media.webkitPresentationMode)) {
+            return this.media.webkitPresentationMode === pip.active;
+        }
+
+        // Chrome
+        return this.media === document.pictureInPictureElement;
     }
 
     /**

src/js/plyr.polyfilled.js

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

src/js/support.js

@@ -36,8 +36,26 @@ const support = {
     },
 
     // Picture-in-picture support
-    // Safari only currently
-    pip: (() => !browser.isIPhone && is.function(createElement('video').webkitSetPresentationMode))(),
+    // Safari & Chrome only currently
+    pip: (() => {
+        if (browser.isIPhone) {
+            return false;
+        }
+
+        // Safari
+        // https://developer.apple.com/documentation/webkitjs/adding_picture_in_picture_to_your_safari_media_controls
+        if (is.function(createElement('video').webkitSetPresentationMode)) {
+            return true;
+        }
+
+        // Chrome
+        // https://developers.google.com/web/updates/2018/10/watch-video-using-picture-in-picture
+        if (document.pictureInPictureEnabled && !createElement('video').disablePictureInPicture) {
+            return true;
+        }
+
+        return false;
+    })(),
 
     // Airplay support
     // Safari only currently