v3.2.0

Fix IE10 split error

bundles.json

@@ -11,7 +11,7 @@
     "demo": {
         "sass": {
             "demo.css": "demo/src/sass/bundles/demo.scss",
-            "error.css": "demo/src/sass/bundles/error.csss"
+            "error.css": "demo/src/sass/bundles/error.scss"
         },
         "js": {
             "demo.js": "demo/src/js/demo.js"

changelog.md

@@ -1,3 +1,25 @@
+## v3.2.0
+
+*   Fullscreen fixes (thanks @friday)
+*   Menu fix for if speed not in config
+*   Menu z-index fix (thanks @danielsarin)
+*   i18n fix for missing "Normal" string (thanks @danielsarin)
+*   Safer check for active caption (thanks @Antonio-Laguna)
+*   Add custom property fallback (thanks @friday)
+*   Fixed bug for captions with no srclang and labels and improved logic (fixes #875)
+*   Fix for `playing` false positive (fixes #898)
+*   Fix for IE issue with navigator.language (thanks @nicolasthy) (fixes #893)
+*   Fix for Vimeo controls missing on iOS (thanks @verde-io) (fixes #807)
+*   Fix for double vimeo caption rendering (fixes #877)
+
+## v3.1.0
+
+*   Styling fixes
+
+## v3.1.0-beta.2
+
+*   YouTube playback speed fixes
+
 ## v3.1.0-beta.1
 
 *   HTML5 quality selection

controls.md

@@ -59,6 +59,7 @@ i18n: {
     captions: 'Captions',
     settings: 'Settings',
     speed: 'Speed',
+    normal: 'Normal',
     quality: 'Quality',
     loop: 'Loop',
     start: 'Start',

demo/error.html

@@ -6,8 +6,14 @@
     <title>Doh. Looks like something went wrong.</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
+    <!-- Icons -->
+    <link rel="icon" href="https://cdn.plyr.io/static/icons/favicon.ico">
+    <link rel="icon" type="image/png" href="https://cdn.plyr.io/static/icons/32x32.png" sizes="32x32">
+    <link rel="icon" type="image/png" href="https://cdn.plyr.io/static/icons/16x16.png" sizes="16x16">
+    <link rel="apple-touch-icon" sizes="180x180" href="https://cdn.plyr.io/static/icons/180x180.png">
+
     <!-- Docs styles -->
-    <link rel="stylesheet" href="dist/error.css">
+    <link rel="stylesheet" href="dist/error.css?v=2">
 
     <!-- Preload -->
     <link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/gordita-medium.woff2">

demo/index.html

@@ -27,7 +27,7 @@
     <meta name="twitter:card" content="summary_large_image">
 
     <!-- Docs styles -->
-    <link rel="stylesheet" href="dist/demo.css">
+    <link rel="stylesheet" href="dist/demo.css?v=2">
 
     <!-- Preload -->
     <link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/gordita-medium.woff2">
@@ -114,7 +114,7 @@
                             <title>HTML5</title>
                             <path d="M14.738.326C14.548.118 14.28 0 14 0H2c-.28 0-.55.118-.738.326S.98.81 1.004 1.09l1 11c.03.317.208.603.48.767l5 3c.16.095.338.143.516.143s.356-.048.515-.143l5-3c.273-.164.452-.45.48-.767l1-11c.026-.28-.067-.557-.257-.764zM12 4H6v2h6v5.72l-4 1.334-4-1.333V9h2v1.28l2 .666 2-.667V8H4V2h8v2z"></path>
                         </svg>
-                        <a href="http://viewfromabluemoon.com/" target="_blank">View From A Blue Moon</a> &copy; Brainfarm
+                        <a href="https://itunes.apple.com/au/movie/view-from-a-blue-moon/id1041586323" target="_blank">View From A Blue Moon</a> &copy; Brainfarm
                     </small>
                 </li>
                 <li class="plyr__cite plyr__cite--audio" hidden>

demo/src/sass/bundles/error.scss

@@ -3,12 +3,6 @@
 // ==========================================================================
 @charset 'UTF-8';
 
-// Libs
-@import '../lib/fontface';
-@import '../lib/mixins';
-@import '../lib/normalize';
-@import '../lib/reset';
-
 // Settings
 @import '../settings/colors';
 @import '../settings/cosmetic';
@@ -17,6 +11,12 @@
 @import '../settings/spacing';
 @import '../settings/type';
 
+// Libs
+@import '../lib/fontface';
+@import '../lib/mixins';
+@import '../lib/normalize';
+@import '../lib/reset';
+
 // Layout
 @import '../layout/error';
 

demo/src/sass/settings/plyr.scss

@@ -16,3 +16,4 @@ $plyr-font-size-captions-base: $plyr-font-size-base;
 $plyr-font-size-captions-small: $plyr-font-size-small;
 $plyr-font-size-captions-medium: 18px;
 $plyr-font-size-captions-large: 21px;
+$plyr-font-size-menu: $plyr-font-size-base;

demo/src/sass/type/headings.scss

@@ -6,5 +6,6 @@ h1 {
     @include font-size($font-size-h1);
     font-weight: $font-weight-bold;
     letter-spacing: $letter-spacing-headings;
-    margin: 0 0 ($spacing-base / 2);
+    line-height: 1.2;
+    margin: 0 0 $spacing-base;
 }

dist/plyr.js

@@ -77,7 +77,7 @@ var defaults = {
     // Sprite (for icons)
     loadSprite: true,
     iconPrefix: 'plyr',
-    iconUrl: 'https://cdn.plyr.io/3.1.0-beta.1/plyr.svg',
+    iconUrl: 'https://cdn.plyr.io/3.1.0/plyr.svg',
 
     // Blank video (used to prevent errors on source change)
     blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
@@ -116,7 +116,7 @@ var defaults = {
     // Captions settings
     captions: {
         active: false,
-        language: window.navigator.language.split('-')[0]
+        language: (navigator.language || navigator.userLanguage).split('-')[0]
     },
 
     // Fullscreen settings
@@ -164,6 +164,7 @@ var defaults = {
         captions: 'Captions',
         settings: 'Settings',
         speed: 'Speed',
+        normal: 'Normal',
         quality: 'Quality',
         loop: 'Loop',
         start: 'Start',
@@ -171,6 +172,7 @@ var defaults = {
         all: 'All',
         reset: 'Reset',
         disabled: 'Disabled',
+        enabled: 'Enabled',
         advertisement: 'Ad'
     },
 
@@ -1702,16 +1704,16 @@ var support = {
 
     // Check for support
     // Basic functionality vs full UI
-    check: function check(type, provider, inline) {
+    check: function check(type, provider, playsinline) {
         var api = false;
         var ui = false;
         var browser = utils.getBrowser();
-        var playsInline = browser.isIPhone && inline && support.inline;
+        var canPlayInline = browser.isIPhone && playsinline && support.playsinline;
 
         switch (provider + ':' + type) {
             case 'html5:video':
                 api = support.video;
-                ui = api && support.rangeInput && (!browser.isIPhone || playsInline);
+                ui = api && support.rangeInput && (!browser.isIPhone || canPlayInline);
                 break;
 
             case 'html5:audio':
@@ -1722,7 +1724,7 @@ var support = {
             case 'youtube:video':
             case 'vimeo:video':
                 api = true;
-                ui = support.rangeInput && (!browser.isIPhone || playsInline);
+                ui = support.rangeInput && (!browser.isIPhone || canPlayInline);
                 break;
 
             default:
@@ -1750,7 +1752,7 @@ var support = {
 
     // Inline playback support
     // https://webkit.org/blog/6784/new-video-policies-for-ios/
-    inline: 'playsInline' in document.createElement('video'),
+    playsinline: 'playsInline' in document.createElement('video'),
 
     // Check for mime type support against a player instance
     // Credits: http://diveintohtml5.info/everything.html
@@ -2034,7 +2036,7 @@ var Fullscreen = function () {
             } else if (!Fullscreen.native) {
                 toggleFallback.call(this, false);
             } else if (!this.prefix) {
-                document.cancelFullScreen();
+                (document.cancelFullScreen || document.exitFullscreen).call(document);
             } else if (!utils.is.empty(this.prefix)) {
                 var action = this.prefix === 'moz' ? 'Cancel' : 'Exit';
                 document['' + this.prefix + action + this.name]();
@@ -2129,6 +2131,36 @@ var Fullscreen = function () {
 
 // ==========================================================================
 
+var i18n = {
+    get: function get$$1() {
+        var key = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+        var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
+        if (utils.is.empty(key) || utils.is.empty(config) || !Object.keys(config.i18n).includes(key)) {
+            return '';
+        }
+
+        var string = config.i18n[key];
+
+        var replace = {
+            '{seektime}': config.seekTime,
+            '{title}': config.title
+        };
+
+        Object.entries(replace).forEach(function (_ref) {
+            var _ref2 = slicedToArray(_ref, 2),
+                key = _ref2[0],
+                value = _ref2[1];
+
+            string = utils.replaceAll(string, key, value);
+        });
+
+        return string;
+    }
+};
+
+// ==========================================================================
+
 var captions = {
     // Setup captions
     setup: function setup() {
@@ -2168,6 +2200,7 @@ var captions = {
 
             return;
         }
+
         // Inject the container
         if (!utils.is.element(this.elements.captions)) {
             this.elements.captions = utils.createElement('div', utils.getAttributesFromSelector(this.config.selectors.captions));
@@ -2272,9 +2305,54 @@ var captions = {
     getCurrentTrack: function getCurrentTrack() {
         var _this2 = this;
 
-        return captions.getTracks.call(this).find(function (track) {
+        var tracks = captions.getTracks.call(this);
+
+        if (!tracks.length) {
+            return null;
+        }
+
+        // Get track based on current language
+        var track = tracks.find(function (track) {
             return track.language.toLowerCase() === _this2.language;
         });
+
+        // Get the <track> with default attribute
+        if (!track) {
+            track = utils.getElement.call(this, 'track[default]');
+        }
+
+        // Get the first track
+        if (!track) {
+            var _tracks = slicedToArray(tracks, 1);
+
+            track = _tracks[0];
+        }
+
+        return track;
+    },
+
+
+    // Get UI label for track
+    getLabel: function getLabel(track) {
+        var currentTrack = track;
+
+        if (!utils.is.track(currentTrack) && support.textTracks && this.captions.active) {
+            currentTrack = captions.getCurrentTrack.call(this);
+        }
+
+        if (utils.is.track(currentTrack)) {
+            if (!utils.is.empty(currentTrack.label)) {
+                return currentTrack.label;
+            }
+
+            if (!utils.is.empty(currentTrack.language)) {
+                return track.language.toUpperCase();
+            }
+
+            return i18n.get('enabled', this.config);
+        }
+
+        return i18n.get('disabled', this.config);
     },
 
 
@@ -2360,36 +2438,6 @@ var captions = {
 
 // ==========================================================================
 
-var i18n = {
-    get: function get$$1() {
-        var key = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-        var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-
-        if (utils.is.empty(key) || utils.is.empty(config) || !Object.keys(config.i18n).includes(key)) {
-            return '';
-        }
-
-        var string = config.i18n[key];
-
-        var replace = {
-            '{seektime}': config.seekTime,
-            '{title}': config.title
-        };
-
-        Object.entries(replace).forEach(function (_ref) {
-            var _ref2 = slicedToArray(_ref, 2),
-                key = _ref2[0],
-                value = _ref2[1];
-
-            string = utils.replaceAll(string, key, value);
-        });
-
-        return string;
-    }
-};
-
-// ==========================================================================
-
 var ui = {
     addStyleHook: function addStyleHook() {
         utils.toggleClass(this.elements.container, this.config.selectors.container.replace('.', ''), true);
@@ -3310,6 +3358,9 @@ var controls = {
         var toggle = !utils.is.empty(this.options.quality) && this.options.quality.length > 1;
         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;
@@ -3366,16 +3417,17 @@ var controls = {
     getLabel: function getLabel(setting, value) {
         switch (setting) {
             case 'speed':
-                return value === 1 ? 'Normal' : value + '&times;';
+                return value === 1 ? i18n.get('normal', this.config) : value + '&times;';
 
             case 'quality':
                 if (utils.is.number(value)) {
                     return value + 'p';
                 }
+
                 return utils.toTitleCase(value);
 
             case 'captions':
-                return controls.getLanguage.call(this);
+                return captions.getLabel.call(this);
 
             default:
                 return null;
@@ -3391,7 +3443,18 @@ var controls = {
 
         switch (setting) {
             case 'captions':
-                value = this.captions.active ? this.captions.language : i18n.get('disabled', this.config);
+                if (this.captions.active) {
+                    if (this.options.captions.length > 2 || !this.options.captions.some(function (lang) {
+                        return lang === 'enabled';
+                    })) {
+                        value = this.captions.language;
+                    } else {
+                        value = 'enabled';
+                    }
+                } else {
+                    value = '';
+                }
+
                 break;
 
             default:
@@ -3422,17 +3485,19 @@ var controls = {
             list = pane && pane.querySelector('ul');
         }
 
-        // Update the label
-        if (!utils.is.empty(value)) {
-            var label = this.elements.settings.tabs[setting].querySelector('.' + this.config.classNames.menu.value);
-            label.innerHTML = controls.getLabel.call(this, setting, value);
+        // If there's no list it means it's not been rendered...
+        if (!utils.is.element(list)) {
+            return;
         }
 
-        // Find the radio option
+        // Update the label
+        var label = this.elements.settings.tabs[setting].querySelector('.' + this.config.classNames.menu.value);
+        label.innerHTML = controls.getLabel.call(this, setting, value);
+
+        // Find the radio option and check it
         var target = list && list.querySelector('input[value="' + value + '"]');
 
         if (utils.is.element(target)) {
-            // Check it
             target.checked = true;
         }
     },
@@ -3476,21 +3541,6 @@ var controls = {
 
     // Get current selected caption language
     // TODO: rework this to user the getter in the API?
-    getLanguage: function getLanguage() {
-        if (!this.supported.ui) {
-            return null;
-        }
-
-        if (support.textTracks && captions.getTracks.call(this).length && this.captions.active) {
-            var currentTrack = captions.getCurrentTrack.call(this);
-
-            if (utils.is.track(currentTrack)) {
-                return currentTrack.label;
-            }
-        }
-
-        return i18n.get('disabled', this.config);
-    },
 
 
     // Set a list of available captions languages
@@ -3508,6 +3558,9 @@ var controls = {
         // Empty the menu
         utils.emptyElement(list);
 
+        // Check if we need to toggle the parent
+        controls.checkMenu.call(this);
+
         // If there's no captions, bail
         if (!toggle) {
             return;
@@ -3516,8 +3569,8 @@ var controls = {
         // Re-map the tracks into just the data we need
         var tracks = captions.getTracks.call(this).map(function (track) {
             return {
-                language: track.language,
-                label: !utils.is.empty(track.label) ? track.label : track.language.toUpperCase()
+                language: !utils.is.empty(track.language) ? track.language : 'enabled',
+                label: captions.getLabel.call(_this3, track)
             };
         });
 
@@ -3529,7 +3582,12 @@ var controls = {
 
         // Generate options
         tracks.forEach(function (track) {
-            controls.createMenuItem.call(_this3, track.language, list, 'language', track.label || track.language, controls.createBadge.call(_this3, track.language.toUpperCase()), track.language.toLowerCase() === _this3.captions.language.toLowerCase());
+            controls.createMenuItem.call(_this3, track.language, list, 'language', track.label, track.language !== 'enabled' ? controls.createBadge.call(_this3, track.language.toUpperCase()) : null, track.language.toLowerCase() === _this3.captions.language.toLowerCase());
+        });
+
+        // Store reference
+        this.options.captions = tracks.map(function (track) {
+            return track.language;
         });
 
         controls.updateSetting.call(this, type, list);
@@ -4048,7 +4106,7 @@ var controls = {
                 seektime: this.config.seekTime,
                 speed: this.speed,
                 quality: this.quality,
-                captions: controls.getLanguage.call(this)
+                captions: captions.getLabel.call(this)
                 // TODO: Looping
                 // loop: 'None',
             });
@@ -4070,7 +4128,7 @@ var controls = {
         // Inject controls HTML
         if (utils.is.element(container)) {
             target.appendChild(container);
-        } else {
+        } else if (container) {
             target.insertAdjacentHTML('beforeend', container);
         }
 
@@ -4402,6 +4460,10 @@ var Listeners = function () {
             // If autoplay, then load advertisement if required
             // TODO: Show some sort of loading state while the ad manager loads else there's a delay before ad shows
             utils.on(this.player.media, 'playing', function () {
+                if (!_this3.player.ads) {
+                    return;
+                }
+
                 // If ads are enabled, wait for them first
                 if (_this3.player.ads.enabled && !_this3.player.ads.initialized) {
                     // Wait for manager response
@@ -5729,7 +5791,11 @@ var youtube = {
                             return Number(instance.getCurrentTime());
                         },
                         set: function set(time) {
+                            // Vimeo will automatically play on seek
+                            var paused = player.media.paused;
+
                             // Set seeking flag
+
                             player.media.seeking = true;
 
                             // Trigger seeking
@@ -5737,6 +5803,11 @@ var youtube = {
 
                             // Seek after events sent
                             instance.seekTo(time);
+
+                            // Restore pause state
+                            if (paused) {
+                                player.pause();
+                            }
                         }
                     });
 
@@ -5974,10 +6045,14 @@ var vimeo = {
     setAspectRatio: function setAspectRatio(input) {
         var ratio = utils.is.string(input) ? input.split(':') : this.config.ratio.split(':');
         var padding = 100 / ratio[0] * ratio[1];
+        this.elements.wrapper.style.paddingBottom = padding + '%';
+
+        if (this.supported.ui) {
             var height = 240;
             var offset = (height - padding) / (height / 50);
-        this.elements.wrapper.style.paddingBottom = padding + '%';
+
             this.media.style.transform = 'translateY(-' + offset + '%)';
+        }
     },
 
 
@@ -5996,7 +6071,8 @@ var vimeo = {
             title: false,
             speed: true,
             transparent: 0,
-            gesture: 'media'
+            gesture: 'media',
+            playsinline: !this.config.fullscreen.iosNative
         };
         var params = utils.buildUrlParams(options);
 
@@ -6030,6 +6106,11 @@ var vimeo = {
         player.media.paused = true;
         player.media.currentTime = 0;
 
+        // Disable native text track rendering
+        if (player.supported.ui) {
+            player.embed.disableTextTrack();
+        }
+
         // Create a faux HTML5 API using the Vimeo API
         player.media.play = function () {
             player.embed.play().then(function () {
@@ -6399,7 +6480,7 @@ var source = {
             _this2.provider = !utils.is.empty(input.sources[0].provider) ? input.sources[0].provider : providers.html5;
 
             // Check for support
-            _this2.supported = support.check(_this2.type, _this2.provider, _this2.config.inline);
+            _this2.supported = support.check(_this2.type, _this2.provider, _this2.config.playsinline);
 
             // Create new markup
             switch (_this2.provider + ':' + _this2.type) {
@@ -6447,7 +6528,7 @@ var source = {
                 if (_this2.config.muted) {
                     _this2.media.setAttribute('muted', '');
                 }
-                if (_this2.config.inline) {
+                if (_this2.config.playsinline) {
                     _this2.media.setAttribute('playsinline', '');
                 }
             }
@@ -6528,7 +6609,7 @@ var Plyr = function () {
         }
 
         // Set config
-        this.config = utils.extend({}, defaults, options, function () {
+        this.config = utils.extend({}, defaults, options || {}, function () {
             try {
                 return JSON.parse(_this.media.getAttribute('data-plyr-config'));
             } catch (e) {
@@ -6565,7 +6646,8 @@ var Plyr = function () {
         // Options
         this.options = {
             speed: [],
-            quality: []
+            quality: [],
+            captions: []
         };
 
         // Debugging
@@ -6650,12 +6732,17 @@ var Plyr = function () {
                         if (truthy.includes(params.autoplay)) {
                             this.config.autoplay = true;
                         }
-                        if (truthy.includes(params.playsinline)) {
-                            this.config.inline = true;
-                        }
                         if (truthy.includes(params.loop)) {
                             this.config.loop.active = true;
                         }
+
+                        // TODO: replace fullscreen.iosNative with this playsinline config option
+                        // YouTube requires the playsinline in the URL
+                        if (this.isYouTube) {
+                            this.config.playsinline = truthy.includes(params.playsinline);
+                        } else {
+                            this.config.playsinline = true;
+                        }
                     }
                 } else {
                     // <div> with attributes
@@ -6689,7 +6776,7 @@ var Plyr = function () {
                     this.config.autoplay = true;
                 }
                 if (this.media.hasAttribute('playsinline')) {
-                    this.config.inline = true;
+                    this.config.playsinline = true;
                 }
                 if (this.media.hasAttribute('muted')) {
                     this.config.muted = true;
@@ -6706,7 +6793,7 @@ var Plyr = function () {
         }
 
         // Check for support again but with type
-        this.supported = support.check(this.type, this.provider, this.config.inline);
+        this.supported = support.check(this.type, this.provider, this.config.playsinline);
 
         // If no support for even API, bail
         if (!this.supported.api) {
@@ -6932,7 +7019,7 @@ var Plyr = function () {
             }
 
             // If the method is called without parameter, toggle based on current value
-            var show = utils.is.boolean(input) ? input : this.elements.container.className.indexOf(this.config.classNames.captions.active) === -1;
+            var show = utils.is.boolean(input) ? input : !this.elements.container.classList.contains(this.config.classNames.captions.active);
 
             // Nothing to change...
             if (this.captions.active === show) {
@@ -7291,7 +7378,7 @@ var Plyr = function () {
     }, {
         key: 'playing',
         get: function get$$1() {
-            return Boolean(!this.paused && !this.ended && (this.isHTML5 ? this.media.readyState > 2 : true));
+            return Boolean(this.ready && !this.paused && !this.ended && (this.isHTML5 ? this.media.readyState > 2 : true));
         }
 
         /**
@@ -7728,17 +7815,29 @@ var Plyr = function () {
                 return;
             }
 
-            // Toggle captions based on input
-            this.toggleCaptions(!utils.is.empty(input));
-
             // If empty string is passed, assume disable captions
             if (utils.is.empty(input)) {
+                this.toggleCaptions(false);
                 return;
             }
 
             // Normalize
             var language = input.toLowerCase();
 
+            // Check for support
+            if (!this.options.captions.includes(language)) {
+                this.debug.warn('Unsupported language option: ' + language);
+                return;
+            }
+
+            // Ensure captions are enabled
+            this.toggleCaptions(true);
+
+            // Enabled only
+            if (language === 'enabled') {
+                return;
+            }
+
             // If nothing to change, bail
             if (this.language === language) {
                 return;

dist/plyr.polyfilled.js

@@ -5117,7 +5117,7 @@ var defaults = {
     // Sprite (for icons)
     loadSprite: true,
     iconPrefix: 'plyr',
-    iconUrl: 'https://cdn.plyr.io/3.1.0-beta.2/plyr.svg',
+    iconUrl: 'https://cdn.plyr.io/3.2.0/plyr.svg',
 
     // Blank video (used to prevent errors on source change)
     blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
@@ -5156,7 +5156,7 @@ var defaults = {
     // Captions settings
     captions: {
         active: false,
-        language: window.navigator.language.split('-')[0]
+        language: (navigator.language || navigator.userLanguage).split('-')[0]
     },
 
     // Fullscreen settings
@@ -5204,6 +5204,7 @@ var defaults = {
         captions: 'Captions',
         settings: 'Settings',
         speed: 'Speed',
+        normal: 'Normal',
         quality: 'Quality',
         loop: 'Loop',
         start: 'Start',
@@ -5211,6 +5212,7 @@ var defaults = {
         all: 'All',
         reset: 'Reset',
         disabled: 'Disabled',
+        enabled: 'Enabled',
         advertisement: 'Ad'
     },
 
@@ -6736,16 +6738,16 @@ var support = {
 
     // Check for support
     // Basic functionality vs full UI
-    check: function check(type, provider, inline) {
+    check: function check(type, provider, playsinline) {
         var api = false;
         var ui = false;
         var browser = utils.getBrowser();
-        var playsInline = browser.isIPhone && inline && support.inline;
+        var canPlayInline = browser.isIPhone && playsinline && support.playsinline;
 
         switch (provider + ':' + type) {
             case 'html5:video':
                 api = support.video;
-                ui = api && support.rangeInput && (!browser.isIPhone || playsInline);
+                ui = api && support.rangeInput && (!browser.isIPhone || canPlayInline);
                 break;
 
             case 'html5:audio':
@@ -6756,7 +6758,7 @@ var support = {
             case 'youtube:video':
             case 'vimeo:video':
                 api = true;
-                ui = support.rangeInput && (!browser.isIPhone || playsInline);
+                ui = support.rangeInput && (!browser.isIPhone || canPlayInline);
                 break;
 
             default:
@@ -6784,7 +6786,7 @@ var support = {
 
     // Inline playback support
     // https://webkit.org/blog/6784/new-video-policies-for-ios/
-    inline: 'playsInline' in document.createElement('video'),
+    playsinline: 'playsInline' in document.createElement('video'),
 
     // Check for mime type support against a player instance
     // Credits: http://diveintohtml5.info/everything.html
@@ -7068,7 +7070,7 @@ var Fullscreen = function () {
             } else if (!Fullscreen.native) {
                 toggleFallback.call(this, false);
             } else if (!this.prefix) {
-                document.cancelFullScreen();
+                (document.cancelFullScreen || document.exitFullscreen).call(document);
             } else if (!utils.is.empty(this.prefix)) {
                 var action = this.prefix === 'moz' ? 'Cancel' : 'Exit';
                 document['' + this.prefix + action + this.name]();
@@ -7163,6 +7165,36 @@ var Fullscreen = function () {
 
 // ==========================================================================
 
+var i18n = {
+    get: function get() {
+        var key = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+        var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
+        if (utils.is.empty(key) || utils.is.empty(config) || !Object.keys(config.i18n).includes(key)) {
+            return '';
+        }
+
+        var string = config.i18n[key];
+
+        var replace = {
+            '{seektime}': config.seekTime,
+            '{title}': config.title
+        };
+
+        Object.entries(replace).forEach(function (_ref) {
+            var _ref2 = slicedToArray(_ref, 2),
+                key = _ref2[0],
+                value = _ref2[1];
+
+            string = utils.replaceAll(string, key, value);
+        });
+
+        return string;
+    }
+};
+
+// ==========================================================================
+
 var captions = {
     // Setup captions
     setup: function setup() {
@@ -7202,6 +7234,7 @@ var captions = {
 
             return;
         }
+
         // Inject the container
         if (!utils.is.element(this.elements.captions)) {
             this.elements.captions = utils.createElement('div', utils.getAttributesFromSelector(this.config.selectors.captions));
@@ -7306,9 +7339,54 @@ var captions = {
     getCurrentTrack: function getCurrentTrack() {
         var _this2 = this;
 
-        return captions.getTracks.call(this).find(function (track) {
+        var tracks = captions.getTracks.call(this);
+
+        if (!tracks.length) {
+            return null;
+        }
+
+        // Get track based on current language
+        var track = tracks.find(function (track) {
             return track.language.toLowerCase() === _this2.language;
         });
+
+        // Get the <track> with default attribute
+        if (!track) {
+            track = utils.getElement.call(this, 'track[default]');
+        }
+
+        // Get the first track
+        if (!track) {
+            var _tracks = slicedToArray(tracks, 1);
+
+            track = _tracks[0];
+        }
+
+        return track;
+    },
+
+
+    // Get UI label for track
+    getLabel: function getLabel(track) {
+        var currentTrack = track;
+
+        if (!utils.is.track(currentTrack) && support.textTracks && this.captions.active) {
+            currentTrack = captions.getCurrentTrack.call(this);
+        }
+
+        if (utils.is.track(currentTrack)) {
+            if (!utils.is.empty(currentTrack.label)) {
+                return currentTrack.label;
+            }
+
+            if (!utils.is.empty(currentTrack.language)) {
+                return track.language.toUpperCase();
+            }
+
+            return i18n.get('enabled', this.config);
+        }
+
+        return i18n.get('disabled', this.config);
     },
 
 
@@ -7394,36 +7472,6 @@ var captions = {
 
 // ==========================================================================
 
-var i18n = {
-    get: function get() {
-        var key = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-        var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-
-        if (utils.is.empty(key) || utils.is.empty(config) || !Object.keys(config.i18n).includes(key)) {
-            return '';
-        }
-
-        var string = config.i18n[key];
-
-        var replace = {
-            '{seektime}': config.seekTime,
-            '{title}': config.title
-        };
-
-        Object.entries(replace).forEach(function (_ref) {
-            var _ref2 = slicedToArray(_ref, 2),
-                key = _ref2[0],
-                value = _ref2[1];
-
-            string = utils.replaceAll(string, key, value);
-        });
-
-        return string;
-    }
-};
-
-// ==========================================================================
-
 var ui = {
     addStyleHook: function addStyleHook() {
         utils.toggleClass(this.elements.container, this.config.selectors.container.replace('.', ''), true);
@@ -8344,6 +8392,9 @@ var controls = {
         var toggle = !utils.is.empty(this.options.quality) && this.options.quality.length > 1;
         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;
@@ -8400,16 +8451,17 @@ var controls = {
     getLabel: function getLabel(setting, value) {
         switch (setting) {
             case 'speed':
-                return value === 1 ? 'Normal' : value + '&times;';
+                return value === 1 ? i18n.get('normal', this.config) : value + '&times;';
 
             case 'quality':
                 if (utils.is.number(value)) {
                     return value + 'p';
                 }
+
                 return utils.toTitleCase(value);
 
             case 'captions':
-                return controls.getLanguage.call(this);
+                return captions.getLabel.call(this);
 
             default:
                 return null;
@@ -8425,7 +8477,18 @@ var controls = {
 
         switch (setting) {
             case 'captions':
-                value = this.captions.active ? this.captions.language : i18n.get('disabled', this.config);
+                if (this.captions.active) {
+                    if (this.options.captions.length > 2 || !this.options.captions.some(function (lang) {
+                        return lang === 'enabled';
+                    })) {
+                        value = this.captions.language;
+                    } else {
+                        value = 'enabled';
+                    }
+                } else {
+                    value = '';
+                }
+
                 break;
 
             default:
@@ -8456,17 +8519,19 @@ var controls = {
             list = pane && pane.querySelector('ul');
         }
 
-        // Update the label
-        if (!utils.is.empty(value)) {
-            var label = this.elements.settings.tabs[setting].querySelector('.' + this.config.classNames.menu.value);
-            label.innerHTML = controls.getLabel.call(this, setting, value);
+        // If there's no list it means it's not been rendered...
+        if (!utils.is.element(list)) {
+            return;
         }
 
-        // Find the radio option
+        // Update the label
+        var label = this.elements.settings.tabs[setting].querySelector('.' + this.config.classNames.menu.value);
+        label.innerHTML = controls.getLabel.call(this, setting, value);
+
+        // Find the radio option and check it
         var target = list && list.querySelector('input[value="' + value + '"]');
 
         if (utils.is.element(target)) {
-            // Check it
             target.checked = true;
         }
     },
@@ -8510,21 +8575,6 @@ var controls = {
 
     // Get current selected caption language
     // TODO: rework this to user the getter in the API?
-    getLanguage: function getLanguage() {
-        if (!this.supported.ui) {
-            return null;
-        }
-
-        if (support.textTracks && captions.getTracks.call(this).length && this.captions.active) {
-            var currentTrack = captions.getCurrentTrack.call(this);
-
-            if (utils.is.track(currentTrack)) {
-                return currentTrack.label;
-            }
-        }
-
-        return i18n.get('disabled', this.config);
-    },
 
 
     // Set a list of available captions languages
@@ -8542,6 +8592,9 @@ var controls = {
         // Empty the menu
         utils.emptyElement(list);
 
+        // Check if we need to toggle the parent
+        controls.checkMenu.call(this);
+
         // If there's no captions, bail
         if (!toggle) {
             return;
@@ -8550,8 +8603,8 @@ var controls = {
         // Re-map the tracks into just the data we need
         var tracks = captions.getTracks.call(this).map(function (track) {
             return {
-                language: track.language,
-                label: !utils.is.empty(track.label) ? track.label : track.language.toUpperCase()
+                language: !utils.is.empty(track.language) ? track.language : 'enabled',
+                label: captions.getLabel.call(_this3, track)
             };
         });
 
@@ -8563,7 +8616,12 @@ var controls = {
 
         // Generate options
         tracks.forEach(function (track) {
-            controls.createMenuItem.call(_this3, track.language, list, 'language', track.label || track.language, controls.createBadge.call(_this3, track.language.toUpperCase()), track.language.toLowerCase() === _this3.captions.language.toLowerCase());
+            controls.createMenuItem.call(_this3, track.language, list, 'language', track.label, track.language !== 'enabled' ? controls.createBadge.call(_this3, track.language.toUpperCase()) : null, track.language.toLowerCase() === _this3.captions.language.toLowerCase());
+        });
+
+        // Store reference
+        this.options.captions = tracks.map(function (track) {
+            return track.language;
         });
 
         controls.updateSetting.call(this, type, list);
@@ -9082,7 +9140,7 @@ var controls = {
                 seektime: this.config.seekTime,
                 speed: this.speed,
                 quality: this.quality,
-                captions: controls.getLanguage.call(this)
+                captions: captions.getLabel.call(this)
                 // TODO: Looping
                 // loop: 'None',
             });
@@ -9104,7 +9162,7 @@ var controls = {
         // Inject controls HTML
         if (utils.is.element(container)) {
             target.appendChild(container);
-        } else {
+        } else if (container) {
             target.insertAdjacentHTML('beforeend', container);
         }
 
@@ -9436,6 +9494,10 @@ var Listeners = function () {
             // If autoplay, then load advertisement if required
             // TODO: Show some sort of loading state while the ad manager loads else there's a delay before ad shows
             utils.on(this.player.media, 'playing', function () {
+                if (!_this3.player.ads) {
+                    return;
+                }
+
                 // If ads are enabled, wait for them first
                 if (_this3.player.ads.enabled && !_this3.player.ads.initialized) {
                     // Wait for manager response
@@ -10763,7 +10825,11 @@ var youtube = {
                             return Number(instance.getCurrentTime());
                         },
                         set: function set(time) {
+                            // Vimeo will automatically play on seek
+                            var paused = player.media.paused;
+
                             // Set seeking flag
+
                             player.media.seeking = true;
 
                             // Trigger seeking
@@ -10771,6 +10837,11 @@ var youtube = {
 
                             // Seek after events sent
                             instance.seekTo(time);
+
+                            // Restore pause state
+                            if (paused) {
+                                player.pause();
+                            }
                         }
                     });
 
@@ -11008,10 +11079,14 @@ var vimeo = {
     setAspectRatio: function setAspectRatio(input) {
         var ratio = utils.is.string(input) ? input.split(':') : this.config.ratio.split(':');
         var padding = 100 / ratio[0] * ratio[1];
+        this.elements.wrapper.style.paddingBottom = padding + '%';
+
+        if (this.supported.ui) {
             var height = 240;
             var offset = (height - padding) / (height / 50);
-        this.elements.wrapper.style.paddingBottom = padding + '%';
+
             this.media.style.transform = 'translateY(-' + offset + '%)';
+        }
     },
 
 
@@ -11030,7 +11105,8 @@ var vimeo = {
             title: false,
             speed: true,
             transparent: 0,
-            gesture: 'media'
+            gesture: 'media',
+            playsinline: !this.config.fullscreen.iosNative
         };
         var params = utils.buildUrlParams(options);
 
@@ -11064,6 +11140,11 @@ var vimeo = {
         player.media.paused = true;
         player.media.currentTime = 0;
 
+        // Disable native text track rendering
+        if (player.supported.ui) {
+            player.embed.disableTextTrack();
+        }
+
         // Create a faux HTML5 API using the Vimeo API
         player.media.play = function () {
             player.embed.play().then(function () {
@@ -11433,7 +11514,7 @@ var source = {
             _this2.provider = !utils.is.empty(input.sources[0].provider) ? input.sources[0].provider : providers.html5;
 
             // Check for support
-            _this2.supported = support.check(_this2.type, _this2.provider, _this2.config.inline);
+            _this2.supported = support.check(_this2.type, _this2.provider, _this2.config.playsinline);
 
             // Create new markup
             switch (_this2.provider + ':' + _this2.type) {
@@ -11481,7 +11562,7 @@ var source = {
                 if (_this2.config.muted) {
                     _this2.media.setAttribute('muted', '');
                 }
-                if (_this2.config.inline) {
+                if (_this2.config.playsinline) {
                     _this2.media.setAttribute('playsinline', '');
                 }
             }
@@ -11562,7 +11643,7 @@ var Plyr = function () {
         }
 
         // Set config
-        this.config = utils.extend({}, defaults, options, function () {
+        this.config = utils.extend({}, defaults, options || {}, function () {
             try {
                 return JSON.parse(_this.media.getAttribute('data-plyr-config'));
             } catch (e) {
@@ -11599,7 +11680,8 @@ var Plyr = function () {
         // Options
         this.options = {
             speed: [],
-            quality: []
+            quality: [],
+            captions: []
         };
 
         // Debugging
@@ -11684,12 +11766,17 @@ var Plyr = function () {
                         if (truthy.includes(params.autoplay)) {
                             this.config.autoplay = true;
                         }
-                        if (truthy.includes(params.playsinline)) {
-                            this.config.inline = true;
-                        }
                         if (truthy.includes(params.loop)) {
                             this.config.loop.active = true;
                         }
+
+                        // TODO: replace fullscreen.iosNative with this playsinline config option
+                        // YouTube requires the playsinline in the URL
+                        if (this.isYouTube) {
+                            this.config.playsinline = truthy.includes(params.playsinline);
+                        } else {
+                            this.config.playsinline = true;
+                        }
                     }
                 } else {
                     // <div> with attributes
@@ -11723,7 +11810,7 @@ var Plyr = function () {
                     this.config.autoplay = true;
                 }
                 if (this.media.hasAttribute('playsinline')) {
-                    this.config.inline = true;
+                    this.config.playsinline = true;
                 }
                 if (this.media.hasAttribute('muted')) {
                     this.config.muted = true;
@@ -11740,7 +11827,7 @@ var Plyr = function () {
         }
 
         // Check for support again but with type
-        this.supported = support.check(this.type, this.provider, this.config.inline);
+        this.supported = support.check(this.type, this.provider, this.config.playsinline);
 
         // If no support for even API, bail
         if (!this.supported.api) {
@@ -11966,7 +12053,7 @@ var Plyr = function () {
             }
 
             // If the method is called without parameter, toggle based on current value
-            var show = utils.is.boolean(input) ? input : this.elements.container.className.indexOf(this.config.classNames.captions.active) === -1;
+            var show = utils.is.boolean(input) ? input : !this.elements.container.classList.contains(this.config.classNames.captions.active);
 
             // Nothing to change...
             if (this.captions.active === show) {
@@ -12325,7 +12412,7 @@ var Plyr = function () {
     }, {
         key: 'playing',
         get: function get() {
-            return Boolean(!this.paused && !this.ended && (this.isHTML5 ? this.media.readyState > 2 : true));
+            return Boolean(this.ready && !this.paused && !this.ended && (this.isHTML5 ? this.media.readyState > 2 : true));
         }
 
         /**
@@ -12762,17 +12849,29 @@ var Plyr = function () {
                 return;
             }
 
-            // Toggle captions based on input
-            this.toggleCaptions(!utils.is.empty(input));
-
             // If empty string is passed, assume disable captions
             if (utils.is.empty(input)) {
+                this.toggleCaptions(false);
                 return;
             }
 
             // Normalize
             var language = input.toLowerCase();
 
+            // Check for support
+            if (!this.options.captions.includes(language)) {
+                this.debug.warn('Unsupported language option: ' + language);
+                return;
+            }
+
+            // Ensure captions are enabled
+            this.toggleCaptions(true);
+
+            // Enabled only
+            if (language === 'enabled') {
+                return;
+            }
+
             // If nothing to change, bail
             if (this.language === language) {
                 return;

package.json

@@ -1,6 +1,6 @@
 {
     "name": "plyr",
-    "version": "3.1.0-beta.2",
+    "version": "3.2.0",
     "description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
     "homepage": "https://plyr.io",
     "main": "./dist/plyr.js",
@@ -9,14 +9,14 @@
     "style": "./dist/plyr.css",
     "devDependencies": {
         "babel-core": "^6.26.0",
-        "babel-eslint": "^8.2.2",
+        "babel-eslint": "^8.2.3",
         "babel-plugin-external-helpers": "^6.22.0",
         "babel-preset-env": "^1.6.1",
         "del": "^3.0.0",
         "eslint": "^4.19.1",
         "eslint-config-airbnb-base": "^12.1.0",
         "eslint-config-prettier": "^2.9.0",
-        "eslint-plugin-import": "^2.10.0",
+        "eslint-plugin-import": "^2.11.0",
         "git-branch": "^2.0.1",
         "gulp": "^3.9.1",
         "gulp-autoprefixer": "^5.0.0",
@@ -28,7 +28,7 @@
         "gulp-rename": "^1.2.2",
         "gulp-replace": "^0.6.1",
         "gulp-s3": "^0.11.0",
-        "gulp-sass": "^3.2.1",
+        "gulp-sass": "^4.0.1",
         "gulp-size": "^3.0.0",
         "gulp-sourcemaps": "^2.6.4",
         "gulp-svgmin": "^1.2.4",
@@ -42,7 +42,7 @@
         "rollup-plugin-node-resolve": "^3.3.0",
         "run-sequence": "^2.2.1",
         "stylelint": "^9.2.0",
-        "stylelint-config-prettier": "^3.0.4",
+        "stylelint-config-prettier": "^3.2.0",
         "stylelint-config-recommended": "^2.1.0",
         "stylelint-config-sass-guidelines": "^5.0.0",
         "stylelint-order": "^0.8.1",

readme.md

@@ -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.1.0-beta.2/plyr.js"></script>
+<script src="https://cdn.plyr.io/3.2.0/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.1.0-beta.2/plyr.css">
+<link rel="stylesheet" href="https://cdn.plyr.io/3.2.0/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.1.0-beta.2/plyr.svg`.
+reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.2.0/plyr.svg`.
 
 ## Ads
 

src/js/captions.js

@@ -6,6 +6,7 @@
 import support from './support';
 import utils from './utils';
 import controls from './controls';
+import i18n from './i18n';
 
 const captions = {
     // Setup captions
@@ -46,6 +47,7 @@ const captions = {
 
             return;
         }
+
         // Inject the container
         if (!utils.is.element(this.elements.captions)) {
             this.elements.captions = utils.createElement('div', utils.getAttributesFromSelector(this.config.selectors.captions));
@@ -148,7 +150,49 @@ const captions = {
 
     // Get the current track for the current language
     getCurrentTrack() {
-        return captions.getTracks.call(this).find(track => track.language.toLowerCase() === this.language);
+        const tracks = captions.getTracks.call(this);
+
+        if (!tracks.length) {
+            return null;
+        }
+
+        // Get track based on current language
+        let track = tracks.find(track => track.language.toLowerCase() === this.language);
+
+        // Get the <track> with default attribute
+        if (!track) {
+            track = utils.getElement.call(this, 'track[default]');
+        }
+
+        // Get the first track
+        if (!track) {
+            [track] = tracks;
+        }
+
+        return track;
+    },
+
+    // Get UI label for track
+    getLabel(track) {
+        let currentTrack = track;
+
+        if (!utils.is.track(currentTrack) && support.textTracks && this.captions.active) {
+            currentTrack = captions.getCurrentTrack.call(this);
+        }
+
+        if (utils.is.track(currentTrack)) {
+            if (!utils.is.empty(currentTrack.label)) {
+                return currentTrack.label;
+            }
+
+            if (!utils.is.empty(currentTrack.language)) {
+                return track.language.toUpperCase();
+            }
+
+            return i18n.get('enabled', this.config);
+        }
+
+        return i18n.get('disabled', this.config);
     },
 
     // Display active caption if it contains text

src/js/controls.js

@@ -456,6 +456,9 @@ const controls = {
         const toggle = !utils.is.empty(this.options.quality) && this.options.quality.length > 1;
         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;
@@ -495,10 +498,12 @@ const controls = {
         };
 
         // Sort options by the config and then render options
-        this.options.quality.sort((a, b) => {
+        this.options.quality
+            .sort((a, b) => {
                 const sorting = this.config.quality.options;
                 return sorting.indexOf(a) > sorting.indexOf(b) ? 1 : -1;
-        }).forEach(quality => {
+            })
+            .forEach(quality => {
                 const label = controls.getLabel.call(this, 'quality', quality);
                 controls.createMenuItem.call(this, quality, list, type, label, getBadge(quality));
             });
@@ -511,16 +516,17 @@ const controls = {
     getLabel(setting, value) {
         switch (setting) {
             case 'speed':
-                return value === 1 ? 'Normal' : `${value}×`;
+                return value === 1 ? i18n.get('normal', this.config) : `${value}×`;
 
             case 'quality':
                 if (utils.is.number(value)) {
                     return `${value}p`;
                 }
+
                 return utils.toTitleCase(value);
 
             case 'captions':
-                return controls.getLanguage.call(this);
+                return captions.getLabel.call(this);
 
             default:
                 return null;
@@ -535,7 +541,16 @@ const controls = {
 
         switch (setting) {
             case 'captions':
-                value = this.captions.active ? this.captions.language : i18n.get('disabled', this.config);
+                if (this.captions.active) {
+                    if (this.options.captions.length > 2 || !this.options.captions.some(lang => lang === 'enabled')) {
+                        value = this.captions.language;
+                    } else {
+                        value = 'enabled';
+                    }
+                } else {
+                    value = '';
+                }
+
                 break;
 
             default:
@@ -566,17 +581,19 @@ const controls = {
             list = pane && pane.querySelector('ul');
         }
 
-        // Update the label
-        if (!utils.is.empty(value)) {
-            const label = this.elements.settings.tabs[setting].querySelector(`.${this.config.classNames.menu.value}`);
-            label.innerHTML = controls.getLabel.call(this, setting, value);
+        // If there's no list it means it's not been rendered...
+        if (!utils.is.element(list)) {
+            return;
         }
 
-        // Find the radio option
+        // Update the label
+        const label = this.elements.settings.tabs[setting].querySelector(`.${this.config.classNames.menu.value}`);
+        label.innerHTML = controls.getLabel.call(this, setting, value);
+
+        // Find the radio option and check it
         const target = list && list.querySelector(`input[value="${value}"]`);
 
         if (utils.is.element(target)) {
-            // Check it
             target.checked = true;
         }
     },
@@ -627,21 +644,7 @@ const controls = {
 
     // Get current selected caption language
     // TODO: rework this to user the getter in the API?
-    getLanguage() {
-        if (!this.supported.ui) {
-            return null;
-        }
 
-        if (support.textTracks && captions.getTracks.call(this).length && this.captions.active) {
-            const currentTrack = captions.getCurrentTrack.call(this);
-
-            if (utils.is.track(currentTrack)) {
-                return currentTrack.label;
-            }
-        }
-
-        return i18n.get('disabled', this.config);
-    },
 
     // Set a list of available captions languages
     setCaptionsMenu() {
@@ -656,6 +659,9 @@ const controls = {
         // Empty the menu
         utils.emptyElement(list);
 
+        // Check if we need to toggle the parent
+        controls.checkMenu.call(this);
+
         // If there's no captions, bail
         if (!toggle) {
             return;
@@ -663,8 +669,8 @@ const controls = {
 
         // Re-map the tracks into just the data we need
         const tracks = captions.getTracks.call(this).map(track => ({
-            language: track.language,
-            label: !utils.is.empty(track.label) ? track.label : track.language.toUpperCase(),
+            language: !utils.is.empty(track.language) ? track.language : 'enabled',
+            label: captions.getLabel.call(this, track),
         }));
 
         // Add the "Disabled" option to turn off captions
@@ -680,12 +686,15 @@ const controls = {
                 track.language,
                 list,
                 'language',
-                track.label || track.language,
-                controls.createBadge.call(this, track.language.toUpperCase()),
+                track.label,
+                track.language !== 'enabled' ? controls.createBadge.call(this, track.language.toUpperCase()) : null,
                 track.language.toLowerCase() === this.captions.language.toLowerCase(),
             );
         });
 
+        // Store reference
+        this.options.captions = tracks.map(track => track.language);
+
         controls.updateSetting.call(this, type, list);
     },
 
@@ -1211,7 +1220,7 @@ const controls = {
                 seektime: this.config.seekTime,
                 speed: this.speed,
                 quality: this.quality,
-                captions: controls.getLanguage.call(this),
+                captions: captions.getLabel.call(this),
                 // TODO: Looping
                 // loop: 'None',
             });
@@ -1233,7 +1242,7 @@ const controls = {
         // Inject controls HTML
         if (utils.is.element(container)) {
             target.appendChild(container);
-        } else {
+        } else if (container) {
             target.insertAdjacentHTML('beforeend', container);
         }
 

src/js/defaults.js

@@ -56,7 +56,7 @@ const defaults = {
     // Sprite (for icons)
     loadSprite: true,
     iconPrefix: 'plyr',
-    iconUrl: 'https://cdn.plyr.io/3.1.0-beta.2/plyr.svg',
+    iconUrl: 'https://cdn.plyr.io/3.2.0/plyr.svg',
 
     // Blank video (used to prevent errors on source change)
     blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
@@ -115,7 +115,7 @@ const defaults = {
     // Captions settings
     captions: {
         active: false,
-        language: window.navigator.language.split('-')[0],
+        language: (navigator.language || navigator.userLanguage).split('-')[0],
     },
 
     // Fullscreen settings
@@ -177,6 +177,7 @@ const defaults = {
         captions: 'Captions',
         settings: 'Settings',
         speed: 'Speed',
+        normal: 'Normal',
         quality: 'Quality',
         loop: 'Loop',
         start: 'Start',
@@ -184,6 +185,7 @@ const defaults = {
         all: 'All',
         reset: 'Reset',
         disabled: 'Disabled',
+        enabled: 'Enabled',
         advertisement: 'Ad',
     },
 

src/js/fullscreen.js

@@ -193,7 +193,7 @@ class Fullscreen {
         } else if (!Fullscreen.native) {
             toggleFallback.call(this, false);
         } else if (!this.prefix) {
-            document.cancelFullScreen();
+            (document.cancelFullScreen || document.exitFullscreen).call(document);
         } else if (!utils.is.empty(this.prefix)) {
             const action = this.prefix === 'moz' ? 'Cancel' : 'Exit';
             document[`${this.prefix}${action}${this.name}`]();

src/js/listeners.js

@@ -2,7 +2,6 @@
 // Plyr Event Listeners
 // ==========================================================================
 
-import support from './support';
 import utils from './utils';
 import controls from './controls';
 import ui from './ui';
@@ -293,6 +292,10 @@ class Listeners {
         // If autoplay, then load advertisement if required
         // TODO: Show some sort of loading state while the ad manager loads else there's a delay before ad shows
         utils.on(this.player.media, 'playing', () => {
+            if (!this.player.ads) {
+                return;
+            }
+
             // If ads are enabled, wait for them first
             if (this.player.ads.enabled && !this.player.ads.initialized) {
                 // Wait for manager response

src/js/plugins/vimeo.js

@@ -35,10 +35,14 @@ const vimeo = {
     setAspectRatio(input) {
         const ratio = utils.is.string(input) ? input.split(':') : this.config.ratio.split(':');
         const padding = 100 / ratio[0] * ratio[1];
+        this.elements.wrapper.style.paddingBottom = `${padding}%`;
+
+        if (this.supported.ui) {
             const height = 240;
             const offset = (height - padding) / (height / 50);
-        this.elements.wrapper.style.paddingBottom = `${padding}%`;
+
             this.media.style.transform = `translateY(-${offset}%)`;
+        }
     },
 
     // API Ready
@@ -55,6 +59,7 @@ const vimeo = {
             speed: true,
             transparent: 0,
             gesture: 'media',
+            playsinline: !this.config.fullscreen.iosNative,
         };
         const params = utils.buildUrlParams(options);
 
@@ -88,6 +93,11 @@ const vimeo = {
         player.media.paused = true;
         player.media.currentTime = 0;
 
+        // Disable native text track rendering
+        if (player.supported.ui) {
+            player.embed.disableTextTrack();
+        }
+
         // Create a faux HTML5 API using the Vimeo API
         player.media.play = () => {
             player.embed.play().then(() => {

src/js/plugins/youtube.js

@@ -270,6 +270,9 @@ const youtube = {
                             return Number(instance.getCurrentTime());
                         },
                         set(time) {
+                            // Vimeo will automatically play on seek
+                            const { paused } = player.media;
+
                             // Set seeking flag
                             player.media.seeking = true;
 
@@ -278,6 +281,11 @@ const youtube = {
 
                             // Seek after events sent
                             instance.seekTo(time);
+
+                            // Restore pause state
+                            if (paused) {
+                                player.pause();
+                            }
                         },
                     });
 

src/js/plyr.js

@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr
-// plyr.js v3.1.0-beta.2
+// plyr.js v3.2.0
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
@@ -57,7 +57,7 @@ class Plyr {
         this.config = utils.extend(
             {},
             defaults,
-            options,
+            options || {},
             (() => {
                 try {
                     return JSON.parse(this.media.getAttribute('data-plyr-config'));
@@ -97,6 +97,7 @@ class Plyr {
         this.options = {
             speed: [],
             quality: [],
+            captions: [],
         };
 
         // Debugging
@@ -184,12 +185,17 @@ class Plyr {
                         if (truthy.includes(params.autoplay)) {
                             this.config.autoplay = true;
                         }
-                        if (truthy.includes(params.playsinline)) {
-                            this.config.inline = true;
-                        }
                         if (truthy.includes(params.loop)) {
                             this.config.loop.active = true;
                         }
+
+                        // TODO: replace fullscreen.iosNative with this playsinline config option
+                        // YouTube requires the playsinline in the URL
+                        if (this.isYouTube) {
+                            this.config.playsinline = truthy.includes(params.playsinline);
+                        } else {
+                            this.config.playsinline = true;
+                        }
                     }
                 } else {
                     // <div> with attributes
@@ -223,7 +229,7 @@ class Plyr {
                     this.config.autoplay = true;
                 }
                 if (this.media.hasAttribute('playsinline')) {
-                    this.config.inline = true;
+                    this.config.playsinline = true;
                 }
                 if (this.media.hasAttribute('muted')) {
                     this.config.muted = true;
@@ -240,7 +246,7 @@ class Plyr {
         }
 
         // Check for support again but with type
-        this.supported = support.check(this.type, this.provider, this.config.inline);
+        this.supported = support.check(this.type, this.provider, this.config.playsinline);
 
         // If no support for even API, bail
         if (!this.supported.api) {
@@ -368,7 +374,7 @@ class Plyr {
      * Get playing state
      */
     get playing() {
-        return Boolean(!this.paused && !this.ended && (this.isHTML5 ? this.media.readyState > 2 : true));
+        return Boolean(this.ready && !this.paused && !this.ended && (this.isHTML5 ? this.media.readyState > 2 : true));
     }
 
     /**
@@ -845,7 +851,7 @@ class Plyr {
         }
 
         // If the method is called without parameter, toggle based on current value
-        const show = utils.is.boolean(input) ? input : this.elements.container.className.indexOf(this.config.classNames.captions.active) === -1;
+        const show = utils.is.boolean(input) ? input : !this.elements.container.classList.contains(this.config.classNames.captions.active);
 
         // Nothing to change...
         if (this.captions.active === show) {
@@ -875,17 +881,29 @@ class Plyr {
             return;
         }
 
-        // Toggle captions based on input
-        this.toggleCaptions(!utils.is.empty(input));
-
         // If empty string is passed, assume disable captions
         if (utils.is.empty(input)) {
+            this.toggleCaptions(false);
             return;
         }
 
         // Normalize
         const language = input.toLowerCase();
 
+        // Check for support
+        if (!this.options.captions.includes(language)) {
+            this.debug.warn(`Unsupported language option: ${language}`);
+            return;
+        }
+
+        // Ensure captions are enabled
+        this.toggleCaptions(true);
+
+        // Enabled only
+        if (language === 'enabled') {
+            return;
+        }
+
         // If nothing to change, bail
         if (this.language === language) {
             return;

src/js/plyr.polyfilled.js

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

src/js/source.js

@@ -55,7 +55,7 @@ const source = {
                 this.provider = !utils.is.empty(input.sources[0].provider) ? input.sources[0].provider : providers.html5;
 
                 // Check for support
-                this.supported = support.check(this.type, this.provider, this.config.inline);
+                this.supported = support.check(this.type, this.provider, this.config.playsinline);
 
                 // Create new markup
                 switch (`${this.provider}:${this.type}`) {
@@ -103,7 +103,7 @@ const source = {
                     if (this.config.muted) {
                         this.media.setAttribute('muted', '');
                     }
-                    if (this.config.inline) {
+                    if (this.config.playsinline) {
                         this.media.setAttribute('playsinline', '');
                     }
                 }

src/js/support.js

@@ -12,16 +12,16 @@ const support = {
 
     // Check for support
     // Basic functionality vs full UI
-    check(type, provider, inline) {
+    check(type, provider, playsinline) {
         let api = false;
         let ui = false;
         const browser = utils.getBrowser();
-        const playsInline = browser.isIPhone && inline && support.inline;
+        const canPlayInline = browser.isIPhone && playsinline && support.playsinline;
 
         switch (`${provider}:${type}`) {
             case 'html5:video':
                 api = support.video;
-                ui = api && support.rangeInput && (!browser.isIPhone || playsInline);
+                ui = api && support.rangeInput && (!browser.isIPhone || canPlayInline);
                 break;
 
             case 'html5:audio':
@@ -32,7 +32,7 @@ const support = {
             case 'youtube:video':
             case 'vimeo:video':
                 api = true;
-                ui = support.rangeInput && (!browser.isIPhone || playsInline);
+                ui = support.rangeInput && (!browser.isIPhone || canPlayInline);
                 break;
 
             default:
@@ -59,7 +59,7 @@ const support = {
 
     // Inline playback support
     // https://webkit.org/blog/6784/new-video-policies-for-ios/
-    inline: 'playsInline' in document.createElement('video'),
+    playsinline: 'playsInline' in document.createElement('video'),
 
     // Check for mime type support against a player instance
     // Credits: http://diveintohtml5.info/everything.html

src/sass/base.scss

@@ -26,6 +26,11 @@
         width: 100%;
     }
 
+    button {
+        font: inherit;
+        line-height: inherit;
+    }
+
     // Ignore focus
     &:focus {
         outline: 0;

src/sass/components/embed.scss

@@ -3,14 +3,12 @@
 // YouTube, Vimeo, etc
 // --------------------------------------------------------------
 
-.plyr__video-embed {
-    // Default to 16:9 ratio but this is set by JavaScript based on config
-    $padding: ((100 / 16) * 9);
-    $height: 240;
-    $offset: to-percentage(($height - $padding) / ($height / 50));
+// Default to 16:9 ratio but this is set by JavaScript based on config
+$embed-padding: ((100 / 16) * 9);
 
+.plyr__video-embed {
     height: 0;
-    padding-bottom: to-percentage($padding);
+    padding-bottom: to-percentage($embed-padding);
     position: relative;
 
     iframe {
@@ -22,6 +20,17 @@
         user-select: none;
         width: 100%;
     }
+}
+
+// If the full custom UI is supported
+.plyr--full-ui .plyr__video-embed {
+    $height: 240;
+    $offset: to-percentage(($height - $embed-padding) / ($height / 50));
+
+    // To allow mouse events to be captured if full support
+    iframe {
+        pointer-events: none;
+    }
 
     // Vimeo hack
     > div {
@@ -30,7 +39,3 @@
         transform: translateY(-$offset);
     }
 }
-// To allow mouse events to be captured if full support
-.plyr--full-ui .plyr__video-embed iframe {
-    pointer-events: none;
-}

src/sass/components/menus.scss

@@ -35,7 +35,7 @@
         right: -3px;
         text-align: left;
         white-space: nowrap;
-        z-index: 1;
+        z-index: 3;
 
         > div {
             overflow: hidden;
@@ -74,6 +74,7 @@
             align-items: center;
             color: $plyr-menu-color;
             display: flex;
+            font-size: $plyr-font-size-menu;
             padding: ceil($plyr-control-padding / 2) ($plyr-control-padding * 2);
             user-select: none;
             width: 100%;

src/sass/components/sliders.scss

@@ -19,7 +19,7 @@
 
     &::-webkit-slider-runnable-track {
         @include plyr-range-track();
-        background-image: linear-gradient(to right, currentColor var(--value), transparent var(--value));
+        background-image: linear-gradient(to right, currentColor var(--value, 0%), transparent var(--value, 0%));
     }
 
     &::-webkit-slider-thumb {

src/sass/settings/type.scss

@@ -8,8 +8,9 @@ $plyr-font-size-small: 14px !default;
 $plyr-font-size-large: 18px !default;
 $plyr-font-size-xlarge: 21px !default;
 
-$plyr-font-size-time: 14px !default;
+$plyr-font-size-time: $plyr-font-size-small !default;
 $plyr-font-size-badge: 9px !default;
+$plyr-font-size-menu: $plyr-font-size-small !default;
 
 $plyr-font-weight-regular: 500 !default;
 $plyr-font-weight-bold: 600 !default;