From cdacae669786a76d821e828573f996b97ec4df9e Mon Sep 17 00:00:00 2001
From: Sam Potts <sam@potts.es>
Date: Fri, 12 Apr 2019 19:00:17 +1000
Subject: Set download URL via setter

---
 src/js/controls.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

(limited to 'src/js/controls.js')

diff --git a/src/js/controls.js b/src/js/controls.js
index 73903e16..78d3144f 100644
--- a/src/js/controls.js
+++ b/src/js/controls.js
@@ -1244,8 +1244,8 @@ const controls = {
         controls.focusFirstMenuItem.call(this, target, tabFocus);
     },
 
-    // Set the download link
-    setDownloadLink() {
+    // Set the download URL
+    setDownloadUrl() {
         const button = this.elements.buttons.download;
 
         // Bail if no button
@@ -1253,7 +1253,7 @@ const controls = {
             return;
         }
 
-        // Set download link
+        // Set attribute
         button.setAttribute('href', this.download);
     },
 
-- 
cgit v1.2.3


From 2cf44c236d586ca07f03744a3df8ffeff425b8f7 Mon Sep 17 00:00:00 2001
From: Emiel Beinema <emiel.beinema@gmail.com>
Date: Mon, 15 Apr 2019 12:16:48 +0200
Subject: Use querySelector on container for showMenuPanel

---
 src/js/controls.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/js/controls.js')

diff --git a/src/js/controls.js b/src/js/controls.js
index 78d3144f..104f5c95 100644
--- a/src/js/controls.js
+++ b/src/js/controls.js
@@ -1191,7 +1191,7 @@ const controls = {
 
     // Show a panel in the menu
     showMenuPanel(type = '', tabFocus = false) {
-        const target = document.getElementById(`plyr-settings-${this.id}-${type}`);
+        const target = this.elements.container.querySelector(`#plyr-settings-${this.id}-${type}`);
 
         // Nothing to show, bail
         if (!is.element(target)) {
-- 
cgit v1.2.3


From a91652287b10237552b6b1ac87c8286aff4f583d Mon Sep 17 00:00:00 2001
From: Emiel Beinema <emiel.beinema@gmail.com>
Date: Mon, 15 Apr 2019 12:17:10 +0200
Subject: Don't close menu on click in menu in webcomponent

---
 src/js/controls.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

(limited to 'src/js/controls.js')

diff --git a/src/js/controls.js b/src/js/controls.js
index 104f5c95..275ffb3f 100644
--- a/src/js/controls.js
+++ b/src/js/controls.js
@@ -1138,7 +1138,9 @@ const controls = {
         } else if (is.keyboardEvent(input) && input.which === 27) {
             show = false;
         } else if (is.event(input)) {
-            const isMenuItem = popup.contains(input.target);
+            // If Plyr is in a shadowDOM, the event target is set to the component, instead of the
+            // element in the shadowDOM. The path, however, is complete.
+            const isMenuItem = popup.contains(input.path[0]);
 
             // If the click was inside the menu or if the click
             // wasn't the button or menu item and we're trying to
-- 
cgit v1.2.3


From f0d3e8c3b95886f64ef5216a665f5644929359b6 Mon Sep 17 00:00:00 2001
From: Sam Potts <sam@potts.es>
Date: Thu, 25 Apr 2019 12:01:52 +1000
Subject: Fix for className being wiped out

---
 src/js/controls.js | 534 ++++++++++++++++++++++++++++-------------------------
 1 file changed, 284 insertions(+), 250 deletions(-)

(limited to 'src/js/controls.js')

diff --git a/src/js/controls.js b/src/js/controls.js
index 78d3144f..d836184c 100644
--- a/src/js/controls.js
+++ b/src/js/controls.js
@@ -172,7 +172,7 @@ const controls = {
 
     // Create a <button>
     createButton(buttonType, attr) {
-        const attributes = Object.assign({}, attr);
+        const attributes = extend({}, attr);
         let type = toCamelCase(buttonType);
 
         const props = {
@@ -198,8 +198,10 @@ const controls = {
 
         // Set class name
         if (Object.keys(attributes).includes('class')) {
-            if (!attributes.class.includes(this.config.classNames.control)) {
-                attributes.class += ` ${this.config.classNames.control}`;
+            if (!attributes.class.split(' ').some(c => c === this.config.classNames.control)) {
+                extend(attributes, {
+                    class: `${attributes.class} ${this.config.classNames.control}`,
+                });
             }
         } else {
             attributes.class = this.config.classNames.control;
@@ -377,13 +379,13 @@ const controls = {
     },
 
     // Create time display
-    createTime(type) {
-        const attributes = getAttributesFromSelector(this.config.selectors.display[type]);
+    createTime(type, attrs) {
+        const attributes = getAttributesFromSelector(this.config.selectors.display[type], attrs);
 
         const container = createElement(
             'div',
             extend(attributes, {
-                class: `${this.config.classNames.display.time} ${attributes.class ? attributes.class : ''}`.trim(),
+                class: `${attributes.class ? attributes.class : ''} ${this.config.classNames.display.time} `.trim(),
                 'aria-label': i18n.get(type, this.config),
             }),
             '00:00',
@@ -1258,319 +1260,351 @@ const controls = {
     },
 
     // Build the default HTML
-    // TODO: Set order based on order in the config.controls array?
     create(data) {
-        // Create the container
-        const container = createElement('div', getAttributesFromSelector(this.config.selectors.controls.wrapper));
+        const {
+            bindMenuItemShortcuts,
+            createButton,
+            createProgress,
+            createRange,
+            createTime,
+            setQualityMenu,
+            setSpeedMenu,
+            showMenuPanel,
+        } = controls;
+        this.elements.controls = null;
 
-        // Restart button
-        if (this.config.controls.includes('restart')) {
-            container.appendChild(controls.createButton.call(this, 'restart'));
+        // Larger overlaid play button
+        if (this.config.controls.includes('play-large')) {
+            this.elements.container.appendChild(createButton.call(this, 'play-large'));
         }
 
-        // Rewind button
-        if (this.config.controls.includes('rewind')) {
-            container.appendChild(controls.createButton.call(this, 'rewind'));
-        }
+        // Create the container
+        const container = createElement('div', getAttributesFromSelector(this.config.selectors.controls.wrapper));
+        this.elements.controls = container;
 
-        // Play/Pause button
-        if (this.config.controls.includes('play')) {
-            container.appendChild(controls.createButton.call(this, 'play'));
-        }
+        // Default item attributes
+        const defaultAttributes = { class: 'plyr__controls__item' };
 
-        // Fast forward button
-        if (this.config.controls.includes('fast-forward')) {
-            container.appendChild(controls.createButton.call(this, 'fast-forward'));
-        }
+        // Loop through controls in order
+        dedupe(this.config.controls).forEach(control => {
+            // Restart button
+            if (control === 'restart') {
+                container.appendChild(createButton.call(this, 'restart', defaultAttributes));
+            }
 
-        // Progress
-        if (this.config.controls.includes('progress')) {
-            const progress = createElement('div', getAttributesFromSelector(this.config.selectors.progress));
+            // Rewind button
+            if (control === 'rewind') {
+                container.appendChild(createButton.call(this, 'rewind', defaultAttributes));
+            }
 
-            // Seek range slider
-            progress.appendChild(
-                controls.createRange.call(this, 'seek', {
-                    id: `plyr-seek-${data.id}`,
-                }),
-            );
+            // Play/Pause button
+            if (control === 'play') {
+                container.appendChild(createButton.call(this, 'play', defaultAttributes));
+            }
 
-            // Buffer progress
-            progress.appendChild(controls.createProgress.call(this, 'buffer'));
+            // Fast forward button
+            if (control === 'fast-forward') {
+                container.appendChild(createButton.call(this, 'fast-forward', defaultAttributes));
+            }
 
-            // TODO: Add loop display indicator
+            // Progress
+            if (control === 'progress') {
+                const progressContainer = createElement('div', {
+                    class: `${defaultAttributes.class} plyr__progress__container`,
+                });
 
-            // Seek tooltip
-            if (this.config.tooltips.seek) {
-                const tooltip = createElement(
-                    'span',
-                    {
-                        class: this.config.classNames.tooltip,
-                    },
-                    '00:00',
-                );
+                const progress = createElement('div', getAttributesFromSelector(this.config.selectors.progress));
 
-                progress.appendChild(tooltip);
-                this.elements.display.seekTooltip = tooltip;
-            }
+                // Seek range slider
+                progress.appendChild(
+                    createRange.call(this, 'seek', {
+                        id: `plyr-seek-${data.id}`,
+                    }),
+                );
 
-            this.elements.progress = progress;
-            container.appendChild(this.elements.progress);
-        }
+                // Buffer progress
+                progress.appendChild(createProgress.call(this, 'buffer'));
 
-        // Media current time display
-        if (this.config.controls.includes('current-time')) {
-            container.appendChild(controls.createTime.call(this, 'currentTime'));
-        }
+                // TODO: Add loop display indicator
 
-        // Media duration display
-        if (this.config.controls.includes('duration')) {
-            container.appendChild(controls.createTime.call(this, 'duration'));
-        }
+                // Seek tooltip
+                if (this.config.tooltips.seek) {
+                    const tooltip = createElement(
+                        'span',
+                        {
+                            class: this.config.classNames.tooltip,
+                        },
+                        '00:00',
+                    );
 
-        // Volume controls
-        if (this.config.controls.includes('mute') || this.config.controls.includes('volume')) {
-            const volume = createElement('div', {
-                class: 'plyr__volume',
-            });
+                    progress.appendChild(tooltip);
+                    this.elements.display.seekTooltip = tooltip;
+                }
 
-            // Toggle mute button
-            if (this.config.controls.includes('mute')) {
-                volume.appendChild(controls.createButton.call(this, 'mute'));
+                this.elements.progress = progress;
+                progressContainer.appendChild(this.elements.progress);
+                container.appendChild(progressContainer);
             }
 
-            // Volume range control
-            if (this.config.controls.includes('volume')) {
-                // Set the attributes
-                const attributes = {
-                    max: 1,
-                    step: 0.05,
-                    value: this.config.volume,
-                };
-
-                // Create the volume range slider
-                volume.appendChild(
-                    controls.createRange.call(
-                        this,
-                        'volume',
-                        extend(attributes, {
-                            id: `plyr-volume-${data.id}`,
-                        }),
-                    ),
-                );
-
-                this.elements.volume = volume;
+            // Media current time display
+            if (control === 'current-time') {
+                container.appendChild(createTime.call(this, 'currentTime', defaultAttributes));
             }
 
-            container.appendChild(volume);
-        }
-
-        // Toggle captions button
-        if (this.config.controls.includes('captions')) {
-            container.appendChild(controls.createButton.call(this, 'captions'));
-        }
+            // Media duration display
+            if (control === 'duration') {
+                container.appendChild(createTime.call(this, 'duration', defaultAttributes));
+            }
 
-        // Settings button / menu
-        if (this.config.controls.includes('settings') && !is.empty(this.config.settings)) {
-            const control = createElement('div', {
-                class: 'plyr__menu',
-                hidden: '',
-            });
+            // Volume controls
+            if (control === 'mute' || control === 'volume') {
+                let { volume } = this.elements;
 
-            control.appendChild(
-                controls.createButton.call(this, 'settings', {
-                    'aria-haspopup': true,
-                    'aria-controls': `plyr-settings-${data.id}`,
-                    'aria-expanded': false,
-                }),
-            );
+                // Create the volume container if needed
+                if (!is.element(volume) || !container.contains(volume)) {
+                    volume = createElement(
+                        'div',
+                        extend({}, defaultAttributes, {
+                            class: `${defaultAttributes.class} plyr__volume`.trim(),
+                        }),
+                    );
 
-            const popup = createElement('div', {
-                class: 'plyr__menu__container',
-                id: `plyr-settings-${data.id}`,
-                hidden: '',
-            });
+                    this.elements.volume = volume;
 
-            const inner = createElement('div');
+                    container.appendChild(volume);
+                }
 
-            const home = createElement('div', {
-                id: `plyr-settings-${data.id}-home`,
-            });
+                // Toggle mute button
+                if (control === 'mute') {
+                    volume.appendChild(createButton.call(this, 'mute'));
+                }
 
-            // Create the menu
-            const menu = createElement('div', {
-                role: 'menu',
-            });
+                // Volume range control
+                if (control === 'volume') {
+                    // Set the attributes
+                    const attributes = {
+                        max: 1,
+                        step: 0.05,
+                        value: this.config.volume,
+                    };
+
+                    // Create the volume range slider
+                    volume.appendChild(
+                        createRange.call(
+                            this,
+                            'volume',
+                            extend(attributes, {
+                                id: `plyr-volume-${data.id}`,
+                            }),
+                        ),
+                    );
+                }
+            }
 
-            home.appendChild(menu);
-            inner.appendChild(home);
-            this.elements.settings.panels.home = home;
+            // Toggle captions button
+            if (control === 'captions') {
+                container.appendChild(createButton.call(this, 'captions', defaultAttributes));
+            }
 
-            // Build the menu items
-            this.config.settings.forEach(type => {
-                // TODO: bundle this with the createMenuItem helper and bindings
-                const menuItem = createElement(
-                    'button',
-                    extend(getAttributesFromSelector(this.config.selectors.buttons.settings), {
-                        type: 'button',
-                        class: `${this.config.classNames.control} ${this.config.classNames.control}--forward`,
-                        role: 'menuitem',
-                        'aria-haspopup': true,
+            // Settings button / menu
+            if (control === 'settings' && !is.empty(this.config.settings)) {
+                const control = createElement(
+                    'div',
+                    extend({}, defaultAttributes, {
+                        class: `${defaultAttributes.class} plyr__menu`.trim(),
                         hidden: '',
                     }),
                 );
 
-                // Bind menu shortcuts for keyboard users
-                controls.bindMenuItemShortcuts.call(this, menuItem, type);
+                control.appendChild(
+                    createButton.call(this, 'settings', {
+                        'aria-haspopup': true,
+                        'aria-controls': `plyr-settings-${data.id}`,
+                        'aria-expanded': false,
+                    }),
+                );
 
-                // Show menu on click
-                on(menuItem, 'click', () => {
-                    controls.showMenuPanel.call(this, type, false);
+                const popup = createElement('div', {
+                    class: 'plyr__menu__container',
+                    id: `plyr-settings-${data.id}`,
+                    hidden: '',
                 });
 
-                const flex = createElement('span', null, i18n.get(type, this.config));
+                const inner = createElement('div');
 
-                const value = createElement('span', {
-                    class: this.config.classNames.menu.value,
+                const home = createElement('div', {
+                    id: `plyr-settings-${data.id}-home`,
                 });
 
-                // Speed contains HTML entities
-                value.innerHTML = data[type];
+                // Create the menu
+                const menu = createElement('div', {
+                    role: 'menu',
+                });
 
-                flex.appendChild(value);
-                menuItem.appendChild(flex);
-                menu.appendChild(menuItem);
+                home.appendChild(menu);
+                inner.appendChild(home);
+                this.elements.settings.panels.home = home;
+
+                // Build the menu items
+                this.config.settings.forEach(type => {
+                    // TODO: bundle this with the createMenuItem helper and bindings
+                    const menuItem = createElement(
+                        'button',
+                        extend(getAttributesFromSelector(this.config.selectors.buttons.settings), {
+                            type: 'button',
+                            class: `${this.config.classNames.control} ${this.config.classNames.control}--forward`,
+                            role: 'menuitem',
+                            'aria-haspopup': true,
+                            hidden: '',
+                        }),
+                    );
 
-                // Build the panes
-                const pane = createElement('div', {
-                    id: `plyr-settings-${data.id}-${type}`,
-                    hidden: '',
-                });
+                    // Bind menu shortcuts for keyboard users
+                    bindMenuItemShortcuts.call(this, menuItem, type);
 
-                // Back button
-                const backButton = createElement('button', {
-                    type: 'button',
-                    class: `${this.config.classNames.control} ${this.config.classNames.control}--back`,
-                });
+                    // Show menu on click
+                    on(menuItem, 'click', () => {
+                        showMenuPanel.call(this, type, false);
+                    });
 
-                // Visible label
-                backButton.appendChild(
-                    createElement(
-                        'span',
-                        {
-                            'aria-hidden': true,
-                        },
-                        i18n.get(type, this.config),
-                    ),
-                );
+                    const flex = createElement('span', null, i18n.get(type, this.config));
 
-                // Screen reader label
-                backButton.appendChild(
-                    createElement(
-                        'span',
-                        {
-                            class: this.config.classNames.hidden,
-                        },
-                        i18n.get('menuBack', this.config),
-                    ),
-                );
+                    const value = createElement('span', {
+                        class: this.config.classNames.menu.value,
+                    });
 
-                // Go back via keyboard
-                on(
-                    pane,
-                    'keydown',
-                    event => {
-                        // We only care about <-
-                        if (event.which !== 37) {
-                            return;
-                        }
+                    // Speed contains HTML entities
+                    value.innerHTML = data[type];
 
-                        // Prevent seek
-                        event.preventDefault();
-                        event.stopPropagation();
+                    flex.appendChild(value);
+                    menuItem.appendChild(flex);
+                    menu.appendChild(menuItem);
 
-                        // Show the respective menu
-                        controls.showMenuPanel.call(this, 'home', true);
-                    },
-                    false,
-                );
+                    // Build the panes
+                    const pane = createElement('div', {
+                        id: `plyr-settings-${data.id}-${type}`,
+                        hidden: '',
+                    });
 
-                // Go back via button click
-                on(backButton, 'click', () => {
-                    controls.showMenuPanel.call(this, 'home', false);
-                });
+                    // Back button
+                    const backButton = createElement('button', {
+                        type: 'button',
+                        class: `${this.config.classNames.control} ${this.config.classNames.control}--back`,
+                    });
+
+                    // Visible label
+                    backButton.appendChild(
+                        createElement(
+                            'span',
+                            {
+                                'aria-hidden': true,
+                            },
+                            i18n.get(type, this.config),
+                        ),
+                    );
+
+                    // Screen reader label
+                    backButton.appendChild(
+                        createElement(
+                            'span',
+                            {
+                                class: this.config.classNames.hidden,
+                            },
+                            i18n.get('menuBack', this.config),
+                        ),
+                    );
+
+                    // Go back via keyboard
+                    on(
+                        pane,
+                        'keydown',
+                        event => {
+                            // We only care about <-
+                            if (event.which !== 37) {
+                                return;
+                            }
 
-                // Add to pane
-                pane.appendChild(backButton);
+                            // Prevent seek
+                            event.preventDefault();
+                            event.stopPropagation();
 
-                // Menu
-                pane.appendChild(
-                    createElement('div', {
-                        role: 'menu',
-                    }),
-                );
+                            // Show the respective menu
+                            showMenuPanel.call(this, 'home', true);
+                        },
+                        false,
+                    );
 
-                inner.appendChild(pane);
+                    // Go back via button click
+                    on(backButton, 'click', () => {
+                        showMenuPanel.call(this, 'home', false);
+                    });
 
-                this.elements.settings.buttons[type] = menuItem;
-                this.elements.settings.panels[type] = pane;
-            });
+                    // Add to pane
+                    pane.appendChild(backButton);
 
-            popup.appendChild(inner);
-            control.appendChild(popup);
-            container.appendChild(control);
+                    // Menu
+                    pane.appendChild(
+                        createElement('div', {
+                            role: 'menu',
+                        }),
+                    );
 
-            this.elements.settings.popup = popup;
-            this.elements.settings.menu = control;
-        }
+                    inner.appendChild(pane);
 
-        // Picture in picture button
-        if (this.config.controls.includes('pip') && support.pip) {
-            container.appendChild(controls.createButton.call(this, 'pip'));
-        }
+                    this.elements.settings.buttons[type] = menuItem;
+                    this.elements.settings.panels[type] = pane;
+                });
 
-        // Airplay button
-        if (this.config.controls.includes('airplay') && support.airplay) {
-            container.appendChild(controls.createButton.call(this, 'airplay'));
-        }
+                popup.appendChild(inner);
+                control.appendChild(popup);
+                container.appendChild(control);
 
-        // Download button
-        if (this.config.controls.includes('download')) {
-            const attributes = {
-                element: 'a',
-                href: this.download,
-                target: '_blank',
-            };
+                this.elements.settings.popup = popup;
+                this.elements.settings.menu = control;
+            }
 
-            const { download } = this.config.urls;
+            // Picture in picture button
+            if (control === 'pip' && support.pip) {
+                container.appendChild(createButton.call(this, 'pip', defaultAttributes));
+            }
 
-            if (!is.url(download) && this.isEmbed) {
-                extend(attributes, {
-                    icon: `logo-${this.provider}`,
-                    label: this.provider,
-                });
+            // Airplay button
+            if (control === 'airplay' && support.airplay) {
+                container.appendChild(createButton.call(this, 'airplay', defaultAttributes));
             }
 
-            container.appendChild(controls.createButton.call(this, 'download', attributes));
-        }
+            // Download button
+            if (control === 'download') {
+                const attributes = extend({}, defaultAttributes, {
+                    element: 'a',
+                    href: this.download,
+                    target: '_blank',
+                });
 
-        // Toggle fullscreen button
-        if (this.config.controls.includes('fullscreen')) {
-            container.appendChild(controls.createButton.call(this, 'fullscreen'));
-        }
+                const { download } = this.config.urls;
 
-        // Larger overlaid play button
-        if (this.config.controls.includes('play-large')) {
-            this.elements.container.appendChild(controls.createButton.call(this, 'play-large'));
-        }
+                if (!is.url(download) && this.isEmbed) {
+                    extend(attributes, {
+                        icon: `logo-${this.provider}`,
+                        label: this.provider,
+                    });
+                }
 
-        this.elements.controls = container;
+                container.appendChild(createButton.call(this, 'download', attributes));
+            }
+
+            // Toggle fullscreen button
+            if (control === 'fullscreen') {
+                container.appendChild(createButton.call(this, 'fullscreen', defaultAttributes));
+            }
+        });
 
         // Set available quality levels
         if (this.isHTML5) {
-            controls.setQualityMenu.call(this, html5.getQualityOptions.call(this));
+            setQualityMenu.call(this, html5.getQualityOptions.call(this));
         }
 
-        controls.setSpeedMenu.call(this);
+        setSpeedMenu.call(this);
 
         return container;
     },
-- 
cgit v1.2.3


From 5ddd9e02def654bb677c988403dbefbc4a32787c Mon Sep 17 00:00:00 2001
From: Sam Potts <sam@potts.es>
Date: Thu, 25 Apr 2019 12:09:46 +1000
Subject: Fix for the menu in the shadow DOM

---
 src/js/controls.js | 20 ++++----------------
 1 file changed, 4 insertions(+), 16 deletions(-)

(limited to 'src/js/controls.js')

diff --git a/src/js/controls.js b/src/js/controls.js
index 150dcdd2..9a960b38 100644
--- a/src/js/controls.js
+++ b/src/js/controls.js
@@ -10,20 +10,7 @@ import support from './support';
 import { repaint, transitionEndEvent } from './utils/animation';
 import { dedupe } from './utils/arrays';
 import browser from './utils/browser';
-import {
-    createElement,
-    emptyElement,
-    getAttributesFromSelector,
-    getElement,
-    getElements,
-    hasClass,
-    matches,
-    removeElement,
-    setAttributes,
-    setFocus,
-    toggleClass,
-    toggleHidden,
-} from './utils/elements';
+import { createElement, emptyElement, getAttributesFromSelector, getElement, getElements, hasClass, matches, removeElement, setAttributes, setFocus, toggleClass, toggleHidden } from './utils/elements';
 import { off, on } from './utils/events';
 import i18n from './utils/i18n';
 import is from './utils/is';
@@ -1141,8 +1128,9 @@ const controls = {
             show = false;
         } else if (is.event(input)) {
             // If Plyr is in a shadowDOM, the event target is set to the component, instead of the
-            // element in the shadowDOM. The path, however, is complete.
-            const isMenuItem = popup.contains(input.path[0]);
+            // Element in the shadowDOM. The path, if available, is complete.
+            const target = is.function(input.composedPath) ? input.composedPath()[0] : input.target;
+            const isMenuItem = popup.contains(target);
 
             // If the click was inside the menu or if the click
             // wasn't the button or menu item and we're trying to
-- 
cgit v1.2.3


From c9055f391b3782d96d16fb6efa4337dc90120635 Mon Sep 17 00:00:00 2001
From: Sam Potts <sam@potts.es>
Date: Sat, 1 Jun 2019 18:45:07 +1000
Subject: Linting changes

---
 src/js/controls.js | 52 +++++++++++++++++++++++++++++++---------------------
 1 file changed, 31 insertions(+), 21 deletions(-)

(limited to 'src/js/controls.js')

diff --git a/src/js/controls.js b/src/js/controls.js
index 9a960b38..43a92140 100644
--- a/src/js/controls.js
+++ b/src/js/controls.js
@@ -4,13 +4,27 @@
 // ==========================================================================
 
 import RangeTouch from 'rangetouch';
+
 import captions from './captions';
 import html5 from './html5';
 import support from './support';
 import { repaint, transitionEndEvent } from './utils/animation';
 import { dedupe } from './utils/arrays';
 import browser from './utils/browser';
-import { createElement, emptyElement, getAttributesFromSelector, getElement, getElements, hasClass, matches, removeElement, setAttributes, setFocus, toggleClass, toggleHidden } from './utils/elements';
+import {
+    createElement,
+    emptyElement,
+    getAttributesFromSelector,
+    getElement,
+    getElements,
+    hasClass,
+    matches,
+    removeElement,
+    setAttributes,
+    setFocus,
+    toggleClass,
+    toggleHidden,
+} from './utils/elements';
 import { off, on } from './utils/events';
 import i18n from './utils/i18n';
 import is from './utils/is';
@@ -92,7 +106,6 @@ const controls = {
         const namespace = 'http://www.w3.org/2000/svg';
         const iconUrl = controls.getIconUrl.call(this);
         const iconPath = `${!iconUrl.cors ? iconUrl.url : ''}#${this.config.iconPrefix}`;
-
         // Create <svg>
         const icon = document.createElementNS(namespace, 'svg');
         setAttributes(
@@ -480,15 +493,15 @@ const controls = {
             get() {
                 return menuItem.getAttribute('aria-checked') === 'true';
             },
-            set(checked) {
+            set(check) {
                 // Ensure exclusivity
-                if (checked) {
+                if (check) {
                     Array.from(menuItem.parentNode.children)
                         .filter(node => matches(node, '[role="menuitemradio"]'))
                         .forEach(node => node.setAttribute('aria-checked', 'false'));
                 }
 
-                menuItem.setAttribute('aria-checked', checked ? 'true' : 'false');
+                menuItem.setAttribute('aria-checked', check ? 'true' : 'false');
             },
         });
 
@@ -596,17 +609,17 @@ const controls = {
         let value = 0;
 
         const setProgress = (target, input) => {
-            const value = is.number(input) ? input : 0;
+            const val = is.number(input) ? input : 0;
             const progress = is.element(target) ? target : this.elements.display.buffer;
 
             // Update value and label
             if (is.element(progress)) {
-                progress.value = value;
+                progress.value = val;
 
                 // Update text label inside
                 const label = progress.getElementsByTagName('span')[0];
                 if (is.element(label)) {
-                    label.childNodes[0].nodeValue = value;
+                    label.childNodes[0].nodeValue = val;
                 }
             }
         };
@@ -688,14 +701,8 @@ const controls = {
             return;
         }
 
-        // Calculate percentage
-        let percent = 0;
-        const clientRect = this.elements.progress.getBoundingClientRect();
         const visible = `${this.config.classNames.tooltip}--visible`;
-
-        const toggle = toggle => {
-            toggleClass(this.elements.display.seekTooltip, visible, toggle);
-        };
+        const toggle = show => toggleClass(this.elements.display.seekTooltip, visible, show);
 
         // Hide on touch
         if (this.touch) {
@@ -704,6 +711,9 @@ const controls = {
         }
 
         // Determine percentage, if already visible
+        let percent = 0;
+        const clientRect = this.elements.progress.getBoundingClientRect();
+
         if (is.event(event)) {
             percent = (100 / clientRect.width) * (event.pageX - clientRect.left);
         } else if (hasClass(this.elements.display.seekTooltip, visible)) {
@@ -1100,7 +1110,7 @@ const controls = {
         let target = pane;
 
         if (!is.element(target)) {
-            target = Object.values(this.elements.settings.panels).find(pane => !pane.hidden);
+            target = Object.values(this.elements.settings.panels).find(p => !p.hidden);
         }
 
         const firstItem = target.querySelector('[role^="menuitem"]');
@@ -1398,7 +1408,7 @@ const controls = {
 
             // Settings button / menu
             if (control === 'settings' && !is.empty(this.config.settings)) {
-                const control = createElement(
+                const wrapper = createElement(
                     'div',
                     extend({}, defaultAttributes, {
                         class: `${defaultAttributes.class} plyr__menu`.trim(),
@@ -1406,7 +1416,7 @@ const controls = {
                     }),
                 );
 
-                control.appendChild(
+                wrapper.appendChild(
                     createButton.call(this, 'settings', {
                         'aria-haspopup': true,
                         'aria-controls': `plyr-settings-${data.id}`,
@@ -1546,11 +1556,11 @@ const controls = {
                 });
 
                 popup.appendChild(inner);
-                control.appendChild(popup);
-                container.appendChild(control);
+                wrapper.appendChild(popup);
+                container.appendChild(wrapper);
 
                 this.elements.settings.popup = popup;
-                this.elements.settings.menu = control;
+                this.elements.settings.menu = wrapper;
             }
 
             // Picture in picture button
-- 
cgit v1.2.3