v3.2.2

Show captions even if toggle button is omitted from controls

changelog.md

@@ -1,3 +1,14 @@
+## v3.2.2
+
+*   Fix for regression in 3.2.1 resulting in hidden buffer display
+*   Cleaned up incorrect use of `aria-hidden` attribute
+
+## v3.2.1
+
+*   Accessibility improvements for the controls (part of #905 fixes)
+*   Fix for context menu showing on YouTube (thanks Anthony Recenello in Slack)
+*   Vimeo fix for their API not returning the right duration until playback begins (fixes #891)
+
 ## v3.2.0
 
 *   Fullscreen fixes (thanks @friday)

demo/dist/demo.js

@@ -4011,7 +4011,6 @@ singleton.Client = Client;
                     case types.youtube:
                         player.source = {
                             type: 'video',
-                            title: 'View From A Blue Moon',
                             sources: [{
                                 src: 'https://youtube.com/watch?v=bTqVqk7FSmY',
                                 provider: 'youtube'

demo/index.html

@@ -141,7 +141,7 @@
                 </li>
                 <li class="plyr__cite plyr__cite--vimeo" hidden>
                     <small>
-                        <a href="https://vimeo.com/ondemand/viewfromabluemoon4k" target="_blank">View From A Blue Moon</a> on&nbsp;
+                        <a href="https://vimeo.com/76979871" target="_blank">The New Vimeo Player</a> on&nbsp;
                         <span class="color--vimeo">
                             <svg class="icon" role="presentation">
                                 <title>Vimeo</title>

demo/src/js/demo.js

@@ -182,7 +182,6 @@ import Raven from 'raven-js';
                     case types.youtube:
                         player.source = {
                             type: 'video',
-                            title: 'View From A Blue Moon',
                             sources: [{
                                 src: 'https://youtube.com/watch?v=bTqVqk7FSmY',
                                 provider: 'youtube',

dist/plyr.js

@@ -77,7 +77,7 @@ var defaults = {
     // Sprite (for icons)
     loadSprite: true,
     iconPrefix: 'plyr',
-    iconUrl: 'https://cdn.plyr.io/3.1.0/plyr.svg',
+    iconUrl: 'https://cdn.plyr.io/3.2.1/plyr.svg',
 
     // Blank video (used to prevent errors on source change)
     blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
@@ -1101,6 +1101,26 @@ var utils = {
     },
 
 
+    // Toggle hidden
+    toggleHidden: function toggleHidden(element, hidden) {
+        if (!utils.is.element(element)) {
+            return;
+        }
+
+        var hide = hidden;
+
+        if (!utils.is.boolean(hide)) {
+            hide = !element.hasAttribute('hidden');
+        }
+
+        if (hide) {
+            element.setAttribute('hidden', '');
+        } else {
+            element.removeAttribute('hidden');
+        }
+    },
+
+
     // Toggle class on an element
     toggleClass: function toggleClass(element, className, toggle) {
         if (utils.is.element(element)) {
@@ -1121,20 +1141,6 @@ var utils = {
     },
 
 
-    // Toggle hidden attribute on an element
-    toggleHidden: function toggleHidden(element, toggle) {
-        if (!utils.is.element(element)) {
-            return;
-        }
-
-        if (toggle) {
-            element.setAttribute('hidden', '');
-        } else {
-            element.removeAttribute('hidden');
-        }
-    },
-
-
     // Element matches selector
     matches: function matches(element, selector) {
         var prototype = { Element: Element };
@@ -2102,7 +2108,7 @@ var Fullscreen = function () {
         get: function get$$1() {
             // No prefix
             if (utils.is.function(document.exitFullscreen)) {
-                return false;
+                return '';
             }
 
             // Check for fullscreen support by vendor prefix
@@ -2414,11 +2420,6 @@ var captions = {
 
     // Display captions container and button (for initialization)
     show: function show() {
-        // If there's no caption toggle, bail
-        if (!utils.is.element(this.elements.buttons.captions)) {
-            return;
-        }
-
         // Try to load the value from storage
         var active = this.storage.get('captions');
 
@@ -2940,11 +2941,6 @@ var browser$1 = utils.getBrowser();
 var controls = {
     // Webkit polyfill for lower fill range
     updateRangeFill: function updateRangeFill(target) {
-        // WebKit only
-        if (!browser$1.isWebkit) {
-            return;
-        }
-
         // Get range from event if event passed
         var range = utils.is.event(target) ? target.target : target;
 
@@ -2953,6 +2949,14 @@ var controls = {
             return;
         }
 
+        // Set aria value for https://github.com/sampotts/plyr/issues/905
+        range.setAttribute('aria-valuenow', range.value);
+
+        // WebKit only
+        if (!browser$1.isWebkit) {
+            return;
+        }
+
         // Set CSS custom property
         range.style.setProperty('--value', range.value / range.max * 100 + '%');
     },
@@ -2976,7 +2980,8 @@ var controls = {
         // Create <svg>
         var icon = document.createElementNS(namespace, 'svg');
         utils.setAttributes(icon, utils.extend(attributes, {
-            role: 'presentation'
+            role: 'presentation',
+            focusable: 'false'
         }));
 
         // Create the <use> to reference sprite
@@ -3158,6 +3163,7 @@ var controls = {
         // Seek label
         var label = utils.createElement('label', {
             for: attributes.id,
+            id: attributes.id + '-label',
             class: this.config.classNames.hidden
         }, i18n.get(type, this.config));
 
@@ -3168,7 +3174,13 @@ var controls = {
             max: 100,
             step: 0.01,
             value: 0,
-            autocomplete: 'off'
+            autocomplete: 'off',
+            // A11y fixes for https://github.com/sampotts/plyr/issues/905
+            role: 'slider',
+            'aria-labelledby': attributes.id + '-label',
+            'aria-valuemin': 0,
+            'aria-valuemax': 100,
+            'aria-valuenow': 0
         }, attributes));
 
         this.elements.inputs[type] = input;
@@ -3188,7 +3200,9 @@ var controls = {
         var progress = utils.createElement('progress', utils.extend(utils.getAttributesFromSelector(this.config.selectors.display[type]), {
             min: 0,
             max: 100,
-            value: 0
+            value: 0,
+            role: 'presentation',
+            'aria-hidden': true
         }, attributes));
 
         // Create the label inside
@@ -3255,7 +3269,7 @@ var controls = {
             class: 'plyr__sr-only'
         }));
 
-        var faux = utils.createElement('span', { 'aria-hidden': true });
+        var faux = utils.createElement('span', { hidden: '' });
 
         label.appendChild(radio);
         label.appendChild(faux);
@@ -3326,11 +3340,7 @@ var controls = {
 
     // Hide/show a tab
     toggleTab: function toggleTab(setting, toggle) {
-        var tab = this.elements.settings.tabs[setting];
+        utils.toggleHidden(this.elements.settings.tabs[setting], !toggle);
-        var pane = this.elements.settings.panes[setting];
-
-        utils.toggleHidden(tab, !toggle);
-        utils.toggleHidden(pane, !toggle);
     },
 
 
@@ -3542,7 +3552,6 @@ var controls = {
     // Get current selected caption language
     // TODO: rework this to user the getter in the API?
 
-
     // Set a list of available captions languages
     setCaptionsMenu: function setCaptionsMenu() {
         var _this3 = this;
@@ -3637,10 +3646,6 @@ var controls = {
         // Get the list to populate
         var list = this.elements.settings.panes.speed.querySelector('ul');
 
-        // Show the pane and tab
-        utils.toggleHidden(this.elements.settings.tabs.speed, false);
-        utils.toggleHidden(this.elements.settings.panes.speed, false);
-
         // Empty the menu
         utils.emptyElement(list);
 
@@ -3677,7 +3682,7 @@ var controls = {
             return;
         }
 
-        var show = utils.is.boolean(event) ? event : utils.is.element(form) && form.getAttribute('aria-hidden') === 'true';
+        var show = utils.is.boolean(event) ? event : utils.is.element(form) && form.hasAttribute('hidden');
 
         if (utils.is.event(event)) {
             var isMenuItem = utils.is.element(form) && form.contains(event.target);
@@ -3702,7 +3707,7 @@ var controls = {
         }
 
         if (utils.is.element(form)) {
-            form.setAttribute('aria-hidden', !show);
+            utils.toggleHidden(form, !show);
             utils.toggleClass(this.elements.container, this.config.classNames.menu.open, show);
 
             if (show) {
@@ -3719,7 +3724,7 @@ var controls = {
         var clone = tab.cloneNode(true);
         clone.style.position = 'absolute';
         clone.style.opacity = 0;
-        clone.setAttribute('aria-hidden', false);
+        clone.removeAttribute('hidden');
 
         // Prevent input's being unchecked due to the name being identical
         Array.from(clone.querySelectorAll('input[name]')).forEach(function (input) {
@@ -3765,7 +3770,7 @@ var controls = {
 
         // Hide all other tabs
         // Get other tabs
-        var current = menu.querySelector('[role="tabpanel"][aria-hidden="false"]');
+        var current = menu.querySelector('[role="tabpanel"]:not([hidden])');
         var container = current.parentNode;
 
         // Set other toggles to be expanded false
@@ -3806,11 +3811,11 @@ var controls = {
         }
 
         // Set attributes on current tab
-        current.setAttribute('aria-hidden', true);
+        utils.toggleHidden(current, true);
         current.setAttribute('tabindex', -1);
 
         // Set attributes on target
-        pane.setAttribute('aria-hidden', !show);
+        utils.toggleHidden(pane, !show);
         tab.setAttribute('aria-expanded', show);
         pane.removeAttribute('tabindex');
 
@@ -3945,7 +3950,7 @@ var controls = {
             var form = utils.createElement('form', {
                 class: 'plyr__menu__container',
                 id: 'plyr-settings-' + data.id,
-                'aria-hidden': true,
+                hidden: '',
                 'aria-labelled-by': 'plyr-settings-toggle-' + data.id,
                 role: 'tablist',
                 tabindex: -1
@@ -3955,7 +3960,6 @@ var controls = {
 
             var home = utils.createElement('div', {
                 id: 'plyr-settings-' + data.id + '-home',
-                'aria-hidden': false,
                 'aria-labelled-by': 'plyr-settings-toggle-' + data.id,
                 role: 'tabpanel'
             });
@@ -4002,11 +4006,10 @@ var controls = {
             this.config.settings.forEach(function (type) {
                 var pane = utils.createElement('div', {
                     id: 'plyr-settings-' + data.id + '-' + type,
-                    'aria-hidden': true,
+                    hidden: '',
                     'aria-labelled-by': 'plyr-settings-' + data.id + '-' + type + '-tab',
                     role: 'tabpanel',
-                    tabindex: -1,
+                    tabindex: -1
-                    hidden: ''
                 });
 
                 var back = utils.createElement('button', {
@@ -4505,7 +4508,7 @@ var Listeners = function () {
 
             // Disable right click
             if (this.player.supported.ui && this.player.config.disableContextMenu) {
-                utils.on(this.player.media, 'contextmenu', function (event) {
+                utils.on(this.player.elements.wrapper, 'contextmenu', function (event) {
                     event.preventDefault();
                 }, false);
             }
@@ -6149,7 +6152,9 @@ var vimeo = {
                 utils.dispatchEvent.call(player, player.media, 'seeking');
 
                 // Seek after events
-                player.embed.setCurrentTime(time);
+                player.embed.setCurrentTime(time).catch(function () {
+                    // Do nothing
+                });
 
                 // Restore pause state
                 if (paused) {
@@ -6329,6 +6334,15 @@ var vimeo = {
             if (parseInt(data.percent, 10) === 1) {
                 utils.dispatchEvent.call(player, player.media, 'canplaythrough');
             }
+
+            // Get duration as if we do it before load, it gives an incorrect value
+            // https://github.com/sampotts/plyr/issues/891
+            player.embed.getDuration().then(function (value) {
+                if (value !== player.media.duration) {
+                    player.media.duration = value;
+                    utils.dispatchEvent.call(player, player.media, 'durationchange');
+                }
+            });
         });
 
         player.embed.on('seeked', function () {
@@ -7013,8 +7027,8 @@ var Plyr = function () {
          * @param {boolean} input - Whether to enable captions
          */
         value: function toggleCaptions(input) {
-            // If there's no full support, or there's no caption toggle
+            // If there's no full support
-            if (!this.supported.ui || !utils.is.element(this.elements.buttons.captions)) {
+            if (!this.supported.ui) {
                 return;
             }
 
@@ -7407,7 +7421,7 @@ var Plyr = function () {
             }
 
             // Set
-            this.media.currentTime = parseFloat(targetTime.toFixed(4));
+            this.media.currentTime = targetTime;
 
             // Logging
             this.debug.log('Seeking to ' + this.currentTime + ' seconds');
@@ -7464,7 +7478,7 @@ var Plyr = function () {
         key: 'duration',
         get: function get$$1() {
             // Faux duration set via config
-            var fauxDuration = parseInt(this.config.duration, 10);
+            var fauxDuration = parseFloat(this.config.duration);
 
             // True duration
             var realDuration = this.media ? Number(this.media.duration) : 0;

dist/plyr.polyfilled.js

@@ -5117,7 +5117,7 @@ var defaults = {
     // Sprite (for icons)
     loadSprite: true,
     iconPrefix: 'plyr',
-    iconUrl: 'https://cdn.plyr.io/3.2.0/plyr.svg',
+    iconUrl: 'https://cdn.plyr.io/3.2.2/plyr.svg',
 
     // Blank video (used to prevent errors on source change)
     blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
@@ -6135,6 +6135,26 @@ var utils = {
     },
 
 
+    // Toggle hidden
+    toggleHidden: function toggleHidden(element, hidden) {
+        if (!utils.is.element(element)) {
+            return;
+        }
+
+        var hide = hidden;
+
+        if (!utils.is.boolean(hide)) {
+            hide = !element.hasAttribute('hidden');
+        }
+
+        if (hide) {
+            element.setAttribute('hidden', '');
+        } else {
+            element.removeAttribute('hidden');
+        }
+    },
+
+
     // Toggle class on an element
     toggleClass: function toggleClass(element, className, toggle) {
         if (utils.is.element(element)) {
@@ -6155,20 +6175,6 @@ var utils = {
     },
 
 
-    // Toggle hidden attribute on an element
-    toggleHidden: function toggleHidden(element, toggle) {
-        if (!utils.is.element(element)) {
-            return;
-        }
-
-        if (toggle) {
-            element.setAttribute('hidden', '');
-        } else {
-            element.removeAttribute('hidden');
-        }
-    },
-
-
     // Element matches selector
     matches: function matches(element, selector) {
         var prototype = { Element: Element };
@@ -7136,7 +7142,7 @@ var Fullscreen = function () {
         get: function get() {
             // No prefix
             if (utils.is.function(document.exitFullscreen)) {
-                return false;
+                return '';
             }
 
             // Check for fullscreen support by vendor prefix
@@ -7448,11 +7454,6 @@ var captions = {
 
     // Display captions container and button (for initialization)
     show: function show() {
-        // If there's no caption toggle, bail
-        if (!utils.is.element(this.elements.buttons.captions)) {
-            return;
-        }
-
         // Try to load the value from storage
         var active = this.storage.get('captions');
 
@@ -7974,11 +7975,6 @@ var browser$1 = utils.getBrowser();
 var controls = {
     // Webkit polyfill for lower fill range
     updateRangeFill: function updateRangeFill(target) {
-        // WebKit only
-        if (!browser$1.isWebkit) {
-            return;
-        }
-
         // Get range from event if event passed
         var range = utils.is.event(target) ? target.target : target;
 
@@ -7987,6 +7983,14 @@ var controls = {
             return;
         }
 
+        // Set aria value for https://github.com/sampotts/plyr/issues/905
+        range.setAttribute('aria-valuenow', range.value);
+
+        // WebKit only
+        if (!browser$1.isWebkit) {
+            return;
+        }
+
         // Set CSS custom property
         range.style.setProperty('--value', range.value / range.max * 100 + '%');
     },
@@ -8010,7 +8014,8 @@ var controls = {
         // Create <svg>
         var icon = document.createElementNS(namespace, 'svg');
         utils.setAttributes(icon, utils.extend(attributes, {
-            role: 'presentation'
+            role: 'presentation',
+            focusable: 'false'
         }));
 
         // Create the <use> to reference sprite
@@ -8192,6 +8197,7 @@ var controls = {
         // Seek label
         var label = utils.createElement('label', {
             for: attributes.id,
+            id: attributes.id + '-label',
             class: this.config.classNames.hidden
         }, i18n.get(type, this.config));
 
@@ -8202,7 +8208,13 @@ var controls = {
             max: 100,
             step: 0.01,
             value: 0,
-            autocomplete: 'off'
+            autocomplete: 'off',
+            // A11y fixes for https://github.com/sampotts/plyr/issues/905
+            role: 'slider',
+            'aria-labelledby': attributes.id + '-label',
+            'aria-valuemin': 0,
+            'aria-valuemax': 100,
+            'aria-valuenow': 0
         }, attributes));
 
         this.elements.inputs[type] = input;
@@ -8222,7 +8234,9 @@ var controls = {
         var progress = utils.createElement('progress', utils.extend(utils.getAttributesFromSelector(this.config.selectors.display[type]), {
             min: 0,
             max: 100,
-            value: 0
+            value: 0,
+            role: 'presentation',
+            'aria-hidden': true
         }, attributes));
 
         // Create the label inside
@@ -8289,7 +8303,7 @@ var controls = {
             class: 'plyr__sr-only'
         }));
 
-        var faux = utils.createElement('span', { 'aria-hidden': true });
+        var faux = utils.createElement('span', { hidden: '' });
 
         label.appendChild(radio);
         label.appendChild(faux);
@@ -8360,11 +8374,7 @@ var controls = {
 
     // Hide/show a tab
     toggleTab: function toggleTab(setting, toggle) {
-        var tab = this.elements.settings.tabs[setting];
+        utils.toggleHidden(this.elements.settings.tabs[setting], !toggle);
-        var pane = this.elements.settings.panes[setting];
-
-        utils.toggleHidden(tab, !toggle);
-        utils.toggleHidden(pane, !toggle);
     },
 
 
@@ -8576,7 +8586,6 @@ var controls = {
     // Get current selected caption language
     // TODO: rework this to user the getter in the API?
 
-
     // Set a list of available captions languages
     setCaptionsMenu: function setCaptionsMenu() {
         var _this3 = this;
@@ -8671,10 +8680,6 @@ var controls = {
         // Get the list to populate
         var list = this.elements.settings.panes.speed.querySelector('ul');
 
-        // Show the pane and tab
-        utils.toggleHidden(this.elements.settings.tabs.speed, false);
-        utils.toggleHidden(this.elements.settings.panes.speed, false);
-
         // Empty the menu
         utils.emptyElement(list);
 
@@ -8711,7 +8716,7 @@ var controls = {
             return;
         }
 
-        var show = utils.is.boolean(event) ? event : utils.is.element(form) && form.getAttribute('aria-hidden') === 'true';
+        var show = utils.is.boolean(event) ? event : utils.is.element(form) && form.hasAttribute('hidden');
 
         if (utils.is.event(event)) {
             var isMenuItem = utils.is.element(form) && form.contains(event.target);
@@ -8736,7 +8741,7 @@ var controls = {
         }
 
         if (utils.is.element(form)) {
-            form.setAttribute('aria-hidden', !show);
+            utils.toggleHidden(form, !show);
             utils.toggleClass(this.elements.container, this.config.classNames.menu.open, show);
 
             if (show) {
@@ -8753,7 +8758,7 @@ var controls = {
         var clone = tab.cloneNode(true);
         clone.style.position = 'absolute';
         clone.style.opacity = 0;
-        clone.setAttribute('aria-hidden', false);
+        clone.removeAttribute('hidden');
 
         // Prevent input's being unchecked due to the name being identical
         Array.from(clone.querySelectorAll('input[name]')).forEach(function (input) {
@@ -8799,7 +8804,7 @@ var controls = {
 
         // Hide all other tabs
         // Get other tabs
-        var current = menu.querySelector('[role="tabpanel"][aria-hidden="false"]');
+        var current = menu.querySelector('[role="tabpanel"]:not([hidden])');
         var container = current.parentNode;
 
         // Set other toggles to be expanded false
@@ -8840,11 +8845,11 @@ var controls = {
         }
 
         // Set attributes on current tab
-        current.setAttribute('aria-hidden', true);
+        utils.toggleHidden(current, true);
         current.setAttribute('tabindex', -1);
 
         // Set attributes on target
-        pane.setAttribute('aria-hidden', !show);
+        utils.toggleHidden(pane, !show);
         tab.setAttribute('aria-expanded', show);
         pane.removeAttribute('tabindex');
 
@@ -8979,7 +8984,7 @@ var controls = {
             var form = utils.createElement('form', {
                 class: 'plyr__menu__container',
                 id: 'plyr-settings-' + data.id,
-                'aria-hidden': true,
+                hidden: '',
                 'aria-labelled-by': 'plyr-settings-toggle-' + data.id,
                 role: 'tablist',
                 tabindex: -1
@@ -8989,7 +8994,6 @@ var controls = {
 
             var home = utils.createElement('div', {
                 id: 'plyr-settings-' + data.id + '-home',
-                'aria-hidden': false,
                 'aria-labelled-by': 'plyr-settings-toggle-' + data.id,
                 role: 'tabpanel'
             });
@@ -9036,11 +9040,10 @@ var controls = {
             this.config.settings.forEach(function (type) {
                 var pane = utils.createElement('div', {
                     id: 'plyr-settings-' + data.id + '-' + type,
-                    'aria-hidden': true,
+                    hidden: '',
                     'aria-labelled-by': 'plyr-settings-' + data.id + '-' + type + '-tab',
                     role: 'tabpanel',
-                    tabindex: -1,
+                    tabindex: -1
-                    hidden: ''
                 });
 
                 var back = utils.createElement('button', {
@@ -9539,7 +9542,7 @@ var Listeners = function () {
 
             // Disable right click
             if (this.player.supported.ui && this.player.config.disableContextMenu) {
-                utils.on(this.player.media, 'contextmenu', function (event) {
+                utils.on(this.player.elements.wrapper, 'contextmenu', function (event) {
                     event.preventDefault();
                 }, false);
             }
@@ -11183,7 +11186,9 @@ var vimeo = {
                 utils.dispatchEvent.call(player, player.media, 'seeking');
 
                 // Seek after events
-                player.embed.setCurrentTime(time);
+                player.embed.setCurrentTime(time).catch(function () {
+                    // Do nothing
+                });
 
                 // Restore pause state
                 if (paused) {
@@ -11363,6 +11368,15 @@ var vimeo = {
             if (parseInt(data.percent, 10) === 1) {
                 utils.dispatchEvent.call(player, player.media, 'canplaythrough');
             }
+
+            // Get duration as if we do it before load, it gives an incorrect value
+            // https://github.com/sampotts/plyr/issues/891
+            player.embed.getDuration().then(function (value) {
+                if (value !== player.media.duration) {
+                    player.media.duration = value;
+                    utils.dispatchEvent.call(player, player.media, 'durationchange');
+                }
+            });
         });
 
         player.embed.on('seeked', function () {
@@ -12047,8 +12061,8 @@ var Plyr = function () {
          * @param {boolean} input - Whether to enable captions
          */
         value: function toggleCaptions(input) {
-            // If there's no full support, or there's no caption toggle
+            // If there's no full support
-            if (!this.supported.ui || !utils.is.element(this.elements.buttons.captions)) {
+            if (!this.supported.ui) {
                 return;
             }
 
@@ -12441,7 +12455,7 @@ var Plyr = function () {
             }
 
             // Set
-            this.media.currentTime = parseFloat(targetTime.toFixed(4));
+            this.media.currentTime = targetTime;
 
             // Logging
             this.debug.log('Seeking to ' + this.currentTime + ' seconds');
@@ -12498,7 +12512,7 @@ var Plyr = function () {
         key: 'duration',
         get: function get() {
             // Faux duration set via config
-            var fauxDuration = parseInt(this.config.duration, 10);
+            var fauxDuration = parseFloat(this.config.duration);
 
             // True duration
             var realDuration = this.media ? Number(this.media.duration) : 0;

package.json

@@ -1,6 +1,6 @@
 {
     "name": "plyr",
-    "version": "3.2.0",
+    "version": "3.2.2",
     "description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
     "homepage": "https://plyr.io",
     "main": "./dist/plyr.js",
@@ -37,7 +37,7 @@
         "gulp-util": "^3.0.8",
         "prettier-eslint": "^8.8.1",
         "prettier-stylelint": "^0.4.2",
-        "rollup-plugin-babel": "^3.0.3",
+        "rollup-plugin-babel": "^3.0.4",
         "rollup-plugin-commonjs": "^9.1.0",
         "rollup-plugin-node-resolve": "^3.3.0",
         "run-sequence": "^2.2.1",
@@ -46,7 +46,7 @@
         "stylelint-config-recommended": "^2.1.0",
         "stylelint-config-sass-guidelines": "^5.0.0",
         "stylelint-order": "^0.8.1",
-        "stylelint-scss": "^3.0.0",
+        "stylelint-scss": "^3.0.1",
         "stylelint-selector-bem-pattern": "^2.0.0"
     },
     "keywords": ["HTML5 Video", "HTML5 Audio", "Media Player", "DASH", "Shaka", "WordPress", "HLS"],

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

src/js/captions.js

@@ -250,11 +250,6 @@ const captions = {
 
     // Display captions container and button (for initialization)
     show() {
-        // If there's no caption toggle, bail
-        if (!utils.is.element(this.elements.buttons.captions)) {
-            return;
-        }
-
         // Try to load the value from storage
         let active = this.storage.get('captions');
 

src/js/controls.js

@@ -15,11 +15,6 @@ const browser = utils.getBrowser();
 const controls = {
     // Webkit polyfill for lower fill range
     updateRangeFill(target) {
-        // WebKit only
-        if (!browser.isWebkit) {
-            return;
-        }
-
         // Get range from event if event passed
         const range = utils.is.event(target) ? target.target : target;
 
@@ -28,6 +23,14 @@ const controls = {
             return;
         }
 
+        // Set aria value for https://github.com/sampotts/plyr/issues/905
+        range.setAttribute('aria-valuenow', range.value);
+
+        // WebKit only
+        if (!browser.isWebkit) {
+            return;
+        }
+
         // Set CSS custom property
         range.style.setProperty('--value', `${range.value / range.max * 100}%`);
     },
@@ -52,6 +55,7 @@ const controls = {
             icon,
             utils.extend(attributes, {
                 role: 'presentation',
+                focusable: 'false',
             }),
         );
 
@@ -238,6 +242,7 @@ const controls = {
             'label',
             {
                 for: attributes.id,
+                id: `${attributes.id}-label`,
                 class: this.config.classNames.hidden,
             },
             i18n.get(type, this.config),
@@ -255,6 +260,12 @@ const controls = {
                     step: 0.01,
                     value: 0,
                     autocomplete: 'off',
+                    // A11y fixes for https://github.com/sampotts/plyr/issues/905
+                    role: 'slider',
+                    'aria-labelledby': `${attributes.id}-label`,
+                    'aria-valuemin': 0,
+                    'aria-valuemax': 100,
+                    'aria-valuenow': 0,
                 },
                 attributes,
             ),
@@ -281,6 +292,8 @@ const controls = {
                     min: 0,
                     max: 100,
                     value: 0,
+                    role: 'presentation',
+                    'aria-hidden': true,
                 },
                 attributes,
             ),
@@ -354,7 +367,7 @@ const controls = {
             }),
         );
 
-        const faux = utils.createElement('span', { 'aria-hidden': true });
+        const faux = utils.createElement('span', { hidden: '' });
 
         label.appendChild(radio);
         label.appendChild(faux);
@@ -429,11 +442,7 @@ const controls = {
 
     // Hide/show a tab
     toggleTab(setting, toggle) {
-        const tab = this.elements.settings.tabs[setting];
+        utils.toggleHidden(this.elements.settings.tabs[setting], !toggle);
-        const pane = this.elements.settings.panes[setting];
-
-        utils.toggleHidden(tab, !toggle);
-        utils.toggleHidden(pane, !toggle);
     },
 
     // Set the quality menu
@@ -645,7 +654,6 @@ const controls = {
     // Get current selected caption language
     // TODO: rework this to user the getter in the API?
 
-
     // Set a list of available captions languages
     setCaptionsMenu() {
         // TODO: Captions or language? Currently it's mixed
@@ -745,10 +753,6 @@ const controls = {
         // Get the list to populate
         const list = this.elements.settings.panes.speed.querySelector('ul');
 
-        // Show the pane and tab
-        utils.toggleHidden(this.elements.settings.tabs.speed, false);
-        utils.toggleHidden(this.elements.settings.panes.speed, false);
-
         // Empty the menu
         utils.emptyElement(list);
 
@@ -779,7 +783,7 @@ const controls = {
             return;
         }
 
-        const show = utils.is.boolean(event) ? event : utils.is.element(form) && form.getAttribute('aria-hidden') === 'true';
+        const show = utils.is.boolean(event) ? event : utils.is.element(form) && form.hasAttribute('hidden');
 
         if (utils.is.event(event)) {
             const isMenuItem = utils.is.element(form) && form.contains(event.target);
@@ -804,7 +808,7 @@ const controls = {
         }
 
         if (utils.is.element(form)) {
-            form.setAttribute('aria-hidden', !show);
+            utils.toggleHidden(form, !show);
             utils.toggleClass(this.elements.container, this.config.classNames.menu.open, show);
 
             if (show) {
@@ -820,7 +824,7 @@ const controls = {
         const clone = tab.cloneNode(true);
         clone.style.position = 'absolute';
         clone.style.opacity = 0;
-        clone.setAttribute('aria-hidden', false);
+        clone.removeAttribute('hidden');
 
         // Prevent input's being unchecked due to the name being identical
         Array.from(clone.querySelectorAll('input[name]')).forEach(input => {
@@ -864,7 +868,7 @@ const controls = {
 
         // Hide all other tabs
         // Get other tabs
-        const current = menu.querySelector('[role="tabpanel"][aria-hidden="false"]');
+        const current = menu.querySelector('[role="tabpanel"]:not([hidden])');
         const container = current.parentNode;
 
         // Set other toggles to be expanded false
@@ -908,11 +912,11 @@ const controls = {
         }
 
         // Set attributes on current tab
-        current.setAttribute('aria-hidden', true);
+        utils.toggleHidden(current, true);
         current.setAttribute('tabindex', -1);
 
         // Set attributes on target
-        pane.setAttribute('aria-hidden', !show);
+        utils.toggleHidden(pane, !show);
         tab.setAttribute('aria-expanded', show);
         pane.removeAttribute('tabindex');
 
@@ -1054,7 +1058,7 @@ const controls = {
             const form = utils.createElement('form', {
                 class: 'plyr__menu__container',
                 id: `plyr-settings-${data.id}`,
-                'aria-hidden': true,
+                hidden: '',
                 'aria-labelled-by': `plyr-settings-toggle-${data.id}`,
                 role: 'tablist',
                 tabindex: -1,
@@ -1064,7 +1068,6 @@ const controls = {
 
             const home = utils.createElement('div', {
                 id: `plyr-settings-${data.id}-home`,
-                'aria-hidden': false,
                 'aria-labelled-by': `plyr-settings-toggle-${data.id}`,
                 role: 'tabpanel',
             });
@@ -1115,11 +1118,10 @@ const controls = {
             this.config.settings.forEach(type => {
                 const pane = utils.createElement('div', {
                     id: `plyr-settings-${data.id}-${type}`,
-                    'aria-hidden': true,
+                    hidden: '',
                     'aria-labelled-by': `plyr-settings-${data.id}-${type}-tab`,
                     role: 'tabpanel',
                     tabindex: -1,
-                    hidden: '',
                 });
 
                 const back = utils.createElement(

src/js/defaults.js

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

src/js/fullscreen.js

@@ -90,7 +90,7 @@ class Fullscreen {
     static get prefix() {
         // No prefix
         if (utils.is.function(document.exitFullscreen)) {
-            return false;
+            return '';
         }
 
         // Check for fullscreen support by vendor prefix

src/js/listeners.js

@@ -334,7 +334,7 @@ class Listeners {
         // Disable right click
         if (this.player.supported.ui && this.player.config.disableContextMenu) {
             utils.on(
-                this.player.media,
+                this.player.elements.wrapper,
                 'contextmenu',
                 event => {
                     event.preventDefault();

src/js/plugins/vimeo.js

@@ -134,7 +134,9 @@ const vimeo = {
                 utils.dispatchEvent.call(player, player.media, 'seeking');
 
                 // Seek after events
-                player.embed.setCurrentTime(time);
+                player.embed.setCurrentTime(time).catch(() => {
+                    // Do nothing
+                });
 
                 // Restore pause state
                 if (paused) {
@@ -320,6 +322,15 @@ const vimeo = {
             if (parseInt(data.percent, 10) === 1) {
                 utils.dispatchEvent.call(player, player.media, 'canplaythrough');
             }
+
+            // Get duration as if we do it before load, it gives an incorrect value
+            // https://github.com/sampotts/plyr/issues/891
+            player.embed.getDuration().then(value => {
+                if (value !== player.media.duration) {
+                    player.media.duration = value;
+                    utils.dispatchEvent.call(player, player.media, 'durationchange');
+                }
+            });
         });
 
         player.embed.on('seeked', () => {

src/js/plyr.js

@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr
-// plyr.js v3.2.0
+// plyr.js v3.2.2
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
@@ -452,7 +452,7 @@ class Plyr {
         }
 
         // Set
-        this.media.currentTime = parseFloat(targetTime.toFixed(4));
+        this.media.currentTime = targetTime;
 
         // Logging
         this.debug.log(`Seeking to ${this.currentTime} seconds`);
@@ -498,7 +498,7 @@ class Plyr {
      */
     get duration() {
         // Faux duration set via config
-        const fauxDuration = parseInt(this.config.duration, 10);
+        const fauxDuration = parseFloat(this.config.duration);
 
         // True duration
         const realDuration = this.media ? Number(this.media.duration) : 0;
@@ -845,8 +845,8 @@ class Plyr {
      * @param {boolean} input - Whether to enable captions
      */
     toggleCaptions(input) {
-        // If there's no full support, or there's no caption toggle
+        // If there's no full support
-        if (!this.supported.ui || !utils.is.element(this.elements.buttons.captions)) {
+        if (!this.supported.ui) {
             return;
         }
 

src/js/plyr.polyfilled.js

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

src/js/utils.js

@@ -375,6 +375,25 @@ const utils = {
         return attributes;
     },
 
+    // Toggle hidden
+    toggleHidden(element, hidden) {
+        if (!utils.is.element(element)) {
+            return;
+        }
+
+        let hide = hidden;
+
+        if (!utils.is.boolean(hide)) {
+            hide = !element.hasAttribute('hidden');
+        }
+
+        if (hide) {
+            element.setAttribute('hidden', '');
+        } else {
+            element.removeAttribute('hidden');
+        }
+    },
+
     // Toggle class on an element
     toggleClass(element, className, toggle) {
         if (utils.is.element(element)) {
@@ -393,19 +412,6 @@ const utils = {
         return utils.is.element(element) && element.classList.contains(className);
     },
 
-    // Toggle hidden attribute on an element
-    toggleHidden(element, toggle) {
-        if (!utils.is.element(element)) {
-            return;
-        }
-
-        if (toggle) {
-            element.setAttribute('hidden', '');
-        } else {
-            element.removeAttribute('hidden');
-        }
-    },
-
     // Element matches selector
     matches(element, selector) {
         const prototype = { Element };
@@ -752,7 +758,7 @@ const utils = {
             return null;
         }
 
-        return array.reduce((prev, curr) => Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev);
+        return array.reduce((prev, curr) => (Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev));
     },
 
     // Get the provider for a given URL

src/sass/utils/hidden.scss

@@ -2,15 +2,6 @@
 // Hiding content nicely
 // --------------------------------------------------------------
 
-// Attributes
-.plyr--full-ui [hidden] {
-    display: none;
-}
-
-.plyr--full-ui [aria-hidden='true'] {
-    display: none;
-}
-
 // Screen reader only elements
 .plyr__sr-only {
     clip: rect(1px, 1px, 1px, 1px);

yarn.lock

@@ -2,12 +2,18 @@
 # yarn lockfile v1
 
 
-"@babel/code-frame@7.0.0-beta.42", "@babel/code-frame@^7.0.0-beta.40":
+"@babel/code-frame@7.0.0-beta.42":
   version "7.0.0-beta.42"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.0.0-beta.42.tgz#a9c83233fa7cd06b39dc77adbb908616ff4f1962"
   dependencies:
     "@babel/highlight" "7.0.0-beta.42"
 
+"@babel/code-frame@7.0.0-beta.44":
+  version "7.0.0-beta.44"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.0.0-beta.44.tgz#2a02643368de80916162be70865c97774f3adbd9"
+  dependencies:
+    "@babel/highlight" "7.0.0-beta.44"
+
 "@babel/core@^7.0.0-beta.42":
   version "7.0.0-beta.42"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.0.0-beta.42.tgz#b3a838fddbd19663369a0b4892189fd8d3f82001"
@@ -38,6 +44,16 @@
     source-map "^0.5.0"
     trim-right "^1.0.1"
 
+"@babel/generator@7.0.0-beta.44":
+  version "7.0.0-beta.44"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.0.0-beta.44.tgz#c7e67b9b5284afcf69b309b50d7d37f3e5033d42"
+  dependencies:
+    "@babel/types" "7.0.0-beta.44"
+    jsesc "^2.5.1"
+    lodash "^4.2.0"
+    source-map "^0.5.0"
+    trim-right "^1.0.1"
+
 "@babel/helper-function-name@7.0.0-beta.42":
   version "7.0.0-beta.42"
   resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.0.0-beta.42.tgz#b38b8f4f85168d1812c543dd700b5d549b0c4658"
@@ -46,18 +62,38 @@
     "@babel/template" "7.0.0-beta.42"
     "@babel/types" "7.0.0-beta.42"
 
+"@babel/helper-function-name@7.0.0-beta.44":
+  version "7.0.0-beta.44"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.0.0-beta.44.tgz#e18552aaae2231100a6e485e03854bc3532d44dd"
+  dependencies:
+    "@babel/helper-get-function-arity" "7.0.0-beta.44"
+    "@babel/template" "7.0.0-beta.44"
+    "@babel/types" "7.0.0-beta.44"
+
 "@babel/helper-get-function-arity@7.0.0-beta.42":
   version "7.0.0-beta.42"
   resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.0.0-beta.42.tgz#ad072e32f912c033053fc80478169aeadc22191e"
   dependencies:
     "@babel/types" "7.0.0-beta.42"
 
+"@babel/helper-get-function-arity@7.0.0-beta.44":
+  version "7.0.0-beta.44"
+  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.0.0-beta.44.tgz#d03ca6dd2b9f7b0b1e6b32c56c72836140db3a15"
+  dependencies:
+    "@babel/types" "7.0.0-beta.44"
+
 "@babel/helper-split-export-declaration@7.0.0-beta.42":
   version "7.0.0-beta.42"
   resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.0.0-beta.42.tgz#0d0d5254220a9cc4e7e226240306b939dc210ee7"
   dependencies:
     "@babel/types" "7.0.0-beta.42"
 
+"@babel/helper-split-export-declaration@7.0.0-beta.44":
+  version "7.0.0-beta.44"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.0.0-beta.44.tgz#c0b351735e0fbcb3822c8ad8db4e583b05ebd9dc"
+  dependencies:
+    "@babel/types" "7.0.0-beta.44"
+
 "@babel/helpers@7.0.0-beta.42":
   version "7.0.0-beta.42"
   resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.0.0-beta.42.tgz#151c1c4e9da1b6ce83d54c1be5fb8c9c57aa5044"
@@ -74,6 +110,14 @@
     esutils "^2.0.2"
     js-tokens "^3.0.0"
 
+"@babel/highlight@7.0.0-beta.44":
+  version "7.0.0-beta.44"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.0.0-beta.44.tgz#18c94ce543916a80553edcdcf681890b200747d5"
+  dependencies:
+    chalk "^2.0.0"
+    esutils "^2.0.2"
+    js-tokens "^3.0.0"
+
 "@babel/template@7.0.0-beta.42":
   version "7.0.0-beta.42"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.0.0-beta.42.tgz#7186d4e70d44cdec975049ba0a73bdaf5cdee052"
@@ -83,7 +127,16 @@
     babylon "7.0.0-beta.42"
     lodash "^4.2.0"
 
-"@babel/traverse@7.0.0-beta.42", "@babel/traverse@^7.0.0-beta.40", "@babel/traverse@^7.0.0-beta.42":
+"@babel/template@7.0.0-beta.44":
+  version "7.0.0-beta.44"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.0.0-beta.44.tgz#f8832f4fdcee5d59bf515e595fc5106c529b394f"
+  dependencies:
+    "@babel/code-frame" "7.0.0-beta.44"
+    "@babel/types" "7.0.0-beta.44"
+    babylon "7.0.0-beta.44"
+    lodash "^4.2.0"
+
+"@babel/traverse@7.0.0-beta.42", "@babel/traverse@^7.0.0-beta.42":
   version "7.0.0-beta.42"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.0.0-beta.42.tgz#f4bf4d1e33d41baf45205e2d0463591d57326285"
   dependencies:
@@ -98,7 +151,22 @@
     invariant "^2.2.0"
     lodash "^4.2.0"
 
-"@babel/types@7.0.0-beta.42", "@babel/types@^7.0.0-beta.40":
+"@babel/traverse@7.0.0-beta.44":
+  version "7.0.0-beta.44"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.0.0-beta.44.tgz#a970a2c45477ad18017e2e465a0606feee0d2966"
+  dependencies:
+    "@babel/code-frame" "7.0.0-beta.44"
+    "@babel/generator" "7.0.0-beta.44"
+    "@babel/helper-function-name" "7.0.0-beta.44"
+    "@babel/helper-split-export-declaration" "7.0.0-beta.44"
+    "@babel/types" "7.0.0-beta.44"
+    babylon "7.0.0-beta.44"
+    debug "^3.1.0"
+    globals "^11.1.0"
+    invariant "^2.2.0"
+    lodash "^4.2.0"
+
+"@babel/types@7.0.0-beta.42":
   version "7.0.0-beta.42"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.0.0-beta.42.tgz#1e2118767684880f6963801b272fd2b3348efacc"
   dependencies:
@@ -106,6 +174,14 @@
     lodash "^4.2.0"
     to-fast-properties "^2.0.0"
 
+"@babel/types@7.0.0-beta.44":
+  version "7.0.0-beta.44"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.0.0-beta.44.tgz#6b1b164591f77dec0a0342aca995f2d046b3a757"
+  dependencies:
+    esutils "^2.0.2"
+    lodash "^4.2.0"
+    to-fast-properties "^2.0.0"
+
 "@gulp-sourcemaps/identity-map@1.X":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@gulp-sourcemaps/identity-map/-/identity-map-1.0.1.tgz#cfa23bc5840f9104ce32a65e74db7e7a974bbee1"
@@ -441,14 +517,14 @@ babel-core@^6.26.0:
     slash "^1.0.0"
     source-map "^0.5.6"
 
-babel-eslint@^8.2.2:
+babel-eslint@^8.2.3:
-  version "8.2.2"
+  version "8.2.3"
-  resolved "http://registry.npmjs.org/babel-eslint/-/babel-eslint-8.2.2.tgz#1102273354c6f0b29b4ea28a65f97d122296b68b"
+  resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-8.2.3.tgz#1a2e6681cc9bc4473c32899e59915e19cd6733cf"
   dependencies:
-    "@babel/code-frame" "^7.0.0-beta.40"
+    "@babel/code-frame" "7.0.0-beta.44"
-    "@babel/traverse" "^7.0.0-beta.40"
+    "@babel/traverse" "7.0.0-beta.44"
-    "@babel/types" "^7.0.0-beta.40"
+    "@babel/types" "7.0.0-beta.44"
-    babylon "^7.0.0-beta.40"
+    babylon "7.0.0-beta.44"
     eslint-scope "~3.7.1"
     eslint-visitor-keys "^1.0.0"
 
@@ -888,10 +964,14 @@ babel-types@^6.19.0, babel-types@^6.24.1, babel-types@^6.26.0:
     lodash "^4.17.4"
     to-fast-properties "^1.0.3"
 
-babylon@7.0.0-beta.42, babylon@^7.0.0-beta.40, babylon@^7.0.0-beta.42:
+babylon@7.0.0-beta.42, babylon@^7.0.0-beta.42:
   version "7.0.0-beta.42"
   resolved "https://registry.yarnpkg.com/babylon/-/babylon-7.0.0-beta.42.tgz#67cfabcd4f3ec82999d29031ccdea89d0ba99657"
 
+babylon@7.0.0-beta.44:
+  version "7.0.0-beta.44"
+  resolved "https://registry.yarnpkg.com/babylon/-/babylon-7.0.0-beta.44.tgz#89159e15e6e30c5096e22d738d8c0af8a0e8ca1d"
+
 babylon@^6.18.0:
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.18.0.tgz#af2f3b88fa6f5c1e4c634d1a0f8eac4f55b395e3"
@@ -1016,7 +1096,7 @@ browserslist@^3.1.1:
     caniuse-lite "^1.0.30000813"
     electron-to-chromium "^1.3.36"
 
-builtin-modules@^1.0.0, builtin-modules@^1.1.1:
+builtin-modules@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-1.1.1.tgz#270f076c5a72c02f5b65a47df94c5fe3a278892f"
 
@@ -1784,11 +1864,10 @@ eslint-module-utils@^2.2.0:
     debug "^2.6.8"
     pkg-dir "^1.0.0"
 
-eslint-plugin-import@^2.10.0:
+eslint-plugin-import@^2.11.0:
-  version "2.10.0"
+  version "2.11.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.10.0.tgz#fa09083d5a75288df9c6c7d09fe12255985655e7"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.11.0.tgz#15aeea37a67499d848e8e981806d4627b5503816"
   dependencies:
-    builtin-modules "^1.1.1"
     contains-path "^0.1.0"
     debug "^2.6.8"
     doctrine "1.5.0"
@@ -1798,6 +1877,7 @@ eslint-plugin-import@^2.10.0:
     lodash "^4.17.4"
     minimatch "^3.0.3"
     read-pkg-up "^2.0.0"
+    resolve "^1.6.0"
 
 eslint-restricted-globals@^0.1.1:
   version "0.1.1"
@@ -2629,13 +2709,16 @@ gulp-s3@^0.11.0:
     knox ""
     mime "~1.2.11"
 
-gulp-sass@^3.2.1:
+gulp-sass@^4.0.1:
-  version "3.2.1"
+  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/gulp-sass/-/gulp-sass-3.2.1.tgz#2e3688a96fd8be1c0c01340750c191b2e79fab94"
+  resolved "https://registry.yarnpkg.com/gulp-sass/-/gulp-sass-4.0.1.tgz#7f43d117eb2d303524968a1b48494af1bc64d1d9"
   dependencies:
-    gulp-util "^3.0"
+    chalk "^2.3.0"
     lodash.clonedeep "^4.3.2"
     node-sass "^4.8.3"
+    plugin-error "^1.0.1"
+    replace-ext "^1.0.0"
+    strip-ansi "^4.0.0"
     through2 "^2.0.0"
     vinyl-sourcemaps-apply "^0.2.0"
 
@@ -2693,7 +2776,7 @@ gulp-uglify-es@^1.0.1:
     vinyl "^2.1.0"
     vinyl-sourcemaps-apply "^0.2.1"
 
-gulp-util@^3.0, gulp-util@^3.0.0, gulp-util@^3.0.4, gulp-util@^3.0.8:
+gulp-util@^3.0.0, gulp-util@^3.0.4, gulp-util@^3.0.8:
   version "3.0.8"
   resolved "https://registry.yarnpkg.com/gulp-util/-/gulp-util-3.0.8.tgz#0054e1e744502e27c04c187c3ecc505dd54bbb4f"
   dependencies:
@@ -5254,6 +5337,12 @@ resolve@^1.3.2:
   dependencies:
     path-parse "^1.0.5"
 
+resolve@^1.6.0:
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.7.1.tgz#aadd656374fd298aee895bc026b8297418677fd3"
+  dependencies:
+    path-parse "^1.0.5"
+
 restore-cursor@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-2.0.0.tgz#9f7ee287f82fd326d4fd162923d62129eee0dfaf"
@@ -5271,9 +5360,9 @@ rimraf@2, rimraf@^2.2.8:
   dependencies:
     glob "^7.0.5"
 
-rollup-plugin-babel@^3.0.3:
+rollup-plugin-babel@^3.0.4:
-  version "3.0.3"
+  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/rollup-plugin-babel/-/rollup-plugin-babel-3.0.3.tgz#63adedc863130327512a4a9006efc2241c5b7c15"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-babel/-/rollup-plugin-babel-3.0.4.tgz#41b3e762fe64450dd61da3105a2cf7ad76be4edc"
   dependencies:
     rollup-pluginutils "^1.5.0"
 
@@ -5730,9 +5819,9 @@ style-search@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/style-search/-/style-search-0.1.0.tgz#7958c793e47e32e07d2b5cafe5c0bf8e12e77902"
 
-stylelint-config-prettier@^3.0.4:
+stylelint-config-prettier@^3.2.0:
-  version "3.0.4"
+  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/stylelint-config-prettier/-/stylelint-config-prettier-3.0.4.tgz#1259093c1db2d5e8dfff7d9672f6f41db2101845"
+  resolved "https://registry.yarnpkg.com/stylelint-config-prettier/-/stylelint-config-prettier-3.2.0.tgz#af32b7845adeeddbf0a0bd642ace4ca1e68958e2"
   dependencies:
     stylelint "^9.1.1"
 
@@ -5765,9 +5854,9 @@ stylelint-scss@^2.0.0:
     postcss-selector-parser "^3.1.1"
     postcss-value-parser "^3.3.0"
 
-stylelint-scss@^3.0.0:
+stylelint-scss@^3.0.1:
-  version "3.0.0"
+  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/stylelint-scss/-/stylelint-scss-3.0.0.tgz#15beb887117ccef20668a3f4728eb5be5fbda045"
+  resolved "https://registry.yarnpkg.com/stylelint-scss/-/stylelint-scss-3.0.1.tgz#bc062e818add985f19dee98f7f5b4bff4f38706e"
   dependencies:
     lodash "^4.17.4"
     postcss-media-query-parser "^0.2.3"