Controls cleanup, work on captions bug, click to invert time

1 files changed, 82 insertions, 89 deletions

diff --git a/src/js/controls.js b/src/js/controls.js
index 022fab0d..7df41371 100644
--- a/src/js/controls.js
+++ b/src/js/controls.js
@@ -115,6 +115,10 @@ const controls = {
 
     // Create a badge
     createBadge(text) {
+        if (utils.is.empty(text)) {
+            return null;
+        }
+
         const badge = utils.createElement('span', {
             class: this.config.classNames.menu.value,
         });
@@ -319,6 +323,39 @@ const controls = {
         return container;
     },
 
+    // Create a settings menu item
+    createMenuItem(value, list, type, title, badge = null, checked = false) {
+        const item = utils.createElement('li');
+
+        const label = utils.createElement('label', {
+            class: this.config.classNames.control,
+        });
+
+        const radio = utils.createElement(
+            'input',
+            utils.extend(utils.getAttributesFromSelector(this.config.selectors.inputs[type]), {
+                type: 'radio',
+                name: `plyr-${type}`,
+                value,
+                checked,
+                class: 'plyr__sr-only',
+            })
+        );
+
+        const faux = utils.createElement('span', { 'aria-hidden': true });
+
+        label.appendChild(radio);
+        label.appendChild(faux);
+        label.insertAdjacentHTML('beforeend', title);
+
+        if (utils.is.htmlElement(badge)) {
+            label.appendChild(badge);
+        }
+
+        item.appendChild(label);
+        list.appendChild(item);
+    },
+
     // Update hover tooltip for seeking
     updateSeekTooltip(event) {
         // Bail if setting not true
@@ -353,7 +390,7 @@ const controls = {
         }
 
         // Display the time a click would seek to
-        ui.updateTimeDisplay.call(this, this.duration / 100 * percent, this.elements.display.seekTooltip);
+        ui.updateTimeDisplay.call(this, this.elements.display.seekTooltip, this.duration / 100 * percent);
 
         // Set position
         this.elements.display.seekTooltip.style.left = `${percent}%`;
@@ -390,6 +427,7 @@ const controls = {
     // Set the YouTube quality menu
     // TODO: Support for HTML5
     setQualityMenu(options) {
+        const type = 'quality';
         const list = this.elements.settings.panes.quality.querySelector('ul');
 
         // Set options if passed and filter based on config
@@ -401,7 +439,7 @@ const controls = {
 
         // Toggle the pane and tab
         const toggle = !utils.is.empty(this.options.quality) && this.type === 'youtube';
-        controls.toggleTab.call(this, 'quality', toggle);
+        controls.toggleTab.call(this, type, toggle);
 
         // If we're hiding, nothing more to do
         if (!toggle) {
@@ -443,35 +481,18 @@ const controls = {
             return controls.createBadge.call(this, label);
         };
 
-        this.options.quality.forEach(quality => {
-            const item = utils.createElement('li');
-
-            const label = utils.createElement('label', {
-                class: this.config.classNames.control,
-            });
-
-            const radio = utils.createElement(
-                'input',
-                utils.extend(utils.getAttributesFromSelector(this.config.selectors.inputs.quality), {
-                    type: 'radio',
-                    name: 'plyr-quality',
-                    value: quality,
-                })
-            );
-
-            label.appendChild(radio);
-            label.appendChild(document.createTextNode(controls.getLabel.call(this, 'quality', quality)));
-
-            const badge = getBadge(quality);
-            if (utils.is.htmlElement(badge)) {
-                label.appendChild(badge);
-            }
-
-            item.appendChild(label);
-            list.appendChild(item);
-        });
+        this.options.quality.forEach(quality =>
+            controls.createMenuItem.call(
+                this,
+                quality,
+                list,
+                type,
+                controls.getLabel.call(this, 'quality', quality),
+                getBadge(quality)
+            )
+        );
 
-        controls.updateSetting.call(this, 'quality', list);
+        controls.updateSetting.call(this, type, list);
     },
 
     // Translate a value into a nice label
@@ -573,7 +594,7 @@ const controls = {
     },
 
     // Set the looping options
-    setLoopMenu() {
+    /* setLoopMenu() {
         const options = ['start', 'end', 'all', 'reset'];
         const list = this.elements.settings.panes.loop.querySelector('ul');
 
@@ -609,7 +630,7 @@ const controls = {
             item.appendChild(button);
             list.appendChild(item);
         });
-    },
+    }, */
 
     // Get current selected caption language
     // TODO: rework this to user the getter in the API?
@@ -631,11 +652,13 @@ const controls = {
 
     // Set a list of available captions languages
     setCaptionsMenu() {
+        // TODO: Captions or language? Currently it's mixed
+        const type = 'captions';
         const list = this.elements.settings.panes.captions.querySelector('ul');
 
         // Toggle the pane and tab
         const toggle = !utils.is.empty(this.captions.tracks);
-        controls.toggleTab.call(this, 'captions', toggle);
+        controls.toggleTab.call(this, type, toggle);
 
         // Empty the menu
         utils.emptyElement(list);
@@ -648,7 +671,6 @@ const controls = {
         // Re-map the tracks into just the data we need
         const tracks = Array.from(this.captions.tracks).map(track => ({
             language: track.language,
-            badge: true,
             label: !utils.is.empty(track.label) ? track.label : track.language.toUpperCase(),
         }));
 
@@ -660,41 +682,24 @@ const controls = {
 
         // Generate options
         tracks.forEach(track => {
-            const item = utils.createElement('li');
-
-            const label = utils.createElement('label', {
-                class: this.config.classNames.control,
-            });
-
-            const radio = utils.createElement(
-                'input',
-                utils.extend(utils.getAttributesFromSelector(this.config.selectors.inputs.language), {
-                    type: 'radio',
-                    name: 'plyr-language',
-                    value: track.language,
-                })
+            controls.createMenuItem.call(
+                this,
+                track.language,
+                list,
+                'language',
+                track.label || track.language,
+                controls.createBadge.call(this, track.language.toUpperCase()),
+                track.language.toLowerCase() === this.captions.language.toLowerCase()
             );
-
-            if (track.language.toLowerCase() === this.captions.language.toLowerCase()) {
-                radio.checked = true;
-            }
-
-            label.appendChild(radio);
-            label.appendChild(document.createTextNode(track.label || track.language));
-
-            if (track.badge) {
-                label.appendChild(controls.createBadge.call(this, track.language.toUpperCase()));
-            }
-
-            item.appendChild(label);
-            list.appendChild(item);
         });
 
-        controls.updateSetting.call(this, 'captions', list);
+        controls.updateSetting.call(this, type, list);
     },
 
     // Set a list of available captions languages
     setSpeedMenu(options) {
+        const type = 'speed';
+
         // Set options if passed and filter based on config
         if (utils.is.array(options)) {
             this.options.speed = options.filter(speed => this.config.speed.options.includes(speed));
@@ -704,7 +709,7 @@ const controls = {
 
         // Toggle the pane and tab
         const toggle = !utils.is.empty(this.options.speed);
-        controls.toggleTab.call(this, 'speed', toggle);
+        controls.toggleTab.call(this, type, toggle);
 
         // If we're hiding, nothing more to do
         if (!toggle) {
@@ -722,39 +727,23 @@ const controls = {
         utils.emptyElement(list);
 
         // Create items
-        this.options.speed.forEach(speed => {
-            const item = utils.createElement('li');
-
-            const label = utils.createElement('label', {
-                class: this.config.classNames.control,
-            });
-
-            const radio = utils.createElement(
-                'input',
-                utils.extend(utils.getAttributesFromSelector(this.config.selectors.inputs.speed), {
-                    type: 'radio',
-                    name: 'plyr-speed',
-                    value: speed,
-                })
-            );
-
-            label.appendChild(radio);
-            label.insertAdjacentHTML('beforeend', controls.getLabel.call(this, 'speed', speed));
-            item.appendChild(label);
-            list.appendChild(item);
-        });
+        this.options.speed.forEach(speed =>
+            controls.createMenuItem.call(this, speed, list, type, controls.getLabel.call(this, 'speed', speed))
+        );
 
-        controls.updateSetting.call(this, 'speed', list);
+        controls.updateSetting.call(this, type, list);
     },
 
     // Show/hide menu
     toggleMenu(event) {
         const { form } = this.elements.settings;
         const button = this.elements.buttons.settings;
-        const show = utils.is.boolean(event) ? event : form && form.getAttribute('aria-hidden') === 'true';
+        const show = utils.is.boolean(event)
+            ? event
+            : utils.is.htmlElement(form) && form.getAttribute('aria-hidden') === 'true';
 
         if (utils.is.event(event)) {
-            const isMenuItem = form && form.contains(event.target);
+            const isMenuItem = utils.is.htmlElement(form) && form.contains(event.target);
             const isButton = event.target === this.elements.buttons.settings;
 
             // If the click was inside the form or if the click
@@ -771,10 +760,11 @@ const controls = {
         }
 
         // Set form and button attributes
-        if (button) {
+        if (utils.is.htmlElement(button)) {
             button.setAttribute('aria-expanded', show);
         }
-        if (form) {
+
+        if (utils.is.htmlElement(form)) {
             form.setAttribute('aria-hidden', !show);
 
             if (show) {
@@ -882,6 +872,9 @@ const controls = {
         pane.setAttribute('aria-hidden', !show);
         tab.setAttribute('aria-expanded', show);
         pane.removeAttribute('tabindex');
+
+        // Focus the first item
+        pane.querySelectorAll('button:not(:disabled), input:not(:disabled), [tabindex]')[0].focus();
     },
 
     // Build the default HTML