fix: use createOption helper

muxinc · Jul 20, 2023 · f4285ab · f4285ab
1 parent 4eb0ae3
commit f4285ab
Show file tree

Hide file tree

Showing 9 changed files with 53 additions and 68 deletions.
diff --git a/src/js/experimental/media-captions-listbox.js b/src/js/experimental/media-captions-listbox.js
@@ -1,4 +1,4 @@
-import MediaChromeListbox from './media-chrome-listbox.js';
+import { MediaChromeListbox, createOption } from './media-chrome-listbox.js';
 import './media-chrome-option.js';
 import { globalThis, document } from '../utils/server-safe-globals.js';
 import { MediaUIAttributes, MediaUIEvents } from '../constants.js';
@@ -54,10 +54,7 @@ class MediaCaptionsListbox extends MediaChromeListbox {
     this.#selectedIndicator = this.getSlottedIndicator('selected-indicator');
     this.#captionsIndicator = this.getSlottedIndicator('captions-indicator');
 
-    const offOption = document.createElement('media-chrome-option');
-    offOption.part.add('option');
-    offOption.value = 'off';
-    offOption.innerHTML = '<span>Off</span>';
+    const offOption = createOption('Off', 'off');
     offOption.prepend(this.#selectedIndicator.cloneNode(true));
     this.#offOption = offOption;
   }
@@ -126,6 +123,23 @@ class MediaCaptionsListbox extends MediaChromeListbox {
     return oldItems.filter(track => !removedTracks.includes(track)).concat(newTracks);
   }
 
+  #render() {
+    const container = this.shadowRoot.querySelector('slot');
+    if (!container.contains(this.#offOption)) {
+      container.append(this.#offOption);
+    }
+
+    if (!this.hasAttribute(MediaUIAttributes.MEDIA_SUBTITLES_SHOWING)) {
+      this.#offOption.setAttribute('aria-selected', 'true');
+      this.#offOption.setAttribute('tabindex', '0');
+    } else {
+      this.#offOption.setAttribute('aria-selected', 'false');
+      this.#offOption.setAttribute('tabindex', '-1');
+    }
+
+    this.#renderTracks(this.#subs);
+  }
+
   #renderTracks(tracks) {
     const container = this.shadowRoot.querySelector('slot');
 
@@ -135,24 +149,17 @@ class MediaCaptionsListbox extends MediaChromeListbox {
       const type = track.kind ?? 'subs';
 
       if (!option) {
-        option = document.createElement('media-chrome-option');
-        option.prepend(this.#selectedIndicator.cloneNode(true));
         alreadyInDom = false;
 
-        option.part.add('option');
-        option.value = formatTextTrackObj(track);
-
-        const label = document.createElement('span');
-        label.textContent = track.label;
-        option.append(label);
+        option = createOption(track.label, formatTextTrackObj(track));
+        option.prepend(this.#selectedIndicator.cloneNode(true));
 
         // add CC icon for captions
         if (type === 'captions') {
           option.append(this.#captionsIndicator.cloneNode(true));
         }
       }
 
-
       if (track.selected) {
         option.setAttribute('aria-selected', 'true');
       } else {
@@ -166,23 +173,6 @@ class MediaCaptionsListbox extends MediaChromeListbox {
     });
   }
 
-  #render() {
-    const container = this.shadowRoot.querySelector('slot');
-    if (!container.contains(this.#offOption)) {
-      container.append(this.#offOption);
-    }
-
-    if (!this.hasAttribute(MediaUIAttributes.MEDIA_SUBTITLES_SHOWING)) {
-      this.#offOption.setAttribute('aria-selected', 'true');
-      this.#offOption.setAttribute('tabindex', '0');
-    } else {
-      this.#offOption.setAttribute('aria-selected', 'false');
-      this.#offOption.setAttribute('tabindex', '-1');
-    }
-
-    this.#renderTracks(this.#subs);
-  }
-
   #onChange() {
     const selectedOption = this.selectedOptions[0]?.value;
 

diff --git a/src/js/experimental/media-captions-selectmenu.js b/src/js/experimental/media-captions-selectmenu.js
@@ -1,4 +1,4 @@
-import MediaChromeSelectMenu from './media-chrome-selectmenu.js';
+import { MediaChromeSelectMenu } from './media-chrome-selectmenu.js';
 import '../media-captions-button.js';
 import './media-captions-listbox.js';
 import { globalThis, document, } from '../utils/server-safe-globals.js';

diff --git a/src/js/experimental/media-chrome-listbox.js b/src/js/experimental/media-chrome-listbox.js
@@ -6,6 +6,23 @@ const checkIcon = /*html*/`
   <path fill="currentColor" d="m10 15.17 9.193-9.191 1.414 1.414-10.606 10.606-6.364-6.364 1.414-1.414 4.95 4.95Z"/>
 </svg>`;
 
+export function createOption(text, value, selected) {
+  const option = document.createElement('media-chrome-option');
+  option.part.add('option');
+  option.value = value;
+
+  if (selected) {
+    option.setAttribute('aria-selected', 'true');
+  } else {
+    option.setAttribute('aria-selected', 'false');
+  }
+
+  const label = document.createElement('span');
+  label.textContent = text;
+  option.append(label);
+
+  return option;
+}
 
 const template = document.createElement('template');
 template.innerHTML = /*html*/`
@@ -443,4 +460,5 @@ if (!globalThis.customElements.get('media-chrome-listbox')) {
   globalThis.customElements.define('media-chrome-listbox', MediaChromeListbox);
 }
 
+export { MediaChromeListbox };
 export default MediaChromeListbox;
diff --git a/src/js/experimental/media-chrome-option.js b/src/js/experimental/media-chrome-option.js
@@ -152,4 +152,5 @@ if (!globalThis.customElements.get('media-chrome-option')) {
   globalThis.customElements.define('media-chrome-option', MediaChromeOption);
 }
 
+export { MediaChromeOption };
 export default MediaChromeOption;
diff --git a/src/js/experimental/media-chrome-selectmenu.js b/src/js/experimental/media-chrome-selectmenu.js
@@ -306,4 +306,5 @@ if (!globalThis.customElements.get('media-chrome-selectmenu')) {
   globalThis.customElements.define('media-chrome-selectmenu', MediaChromeSelectMenu);
 }
 
+export { MediaChromeSelectMenu };
 export default MediaChromeSelectMenu;
diff --git a/src/js/experimental/media-playback-rate-listbox.js b/src/js/experimental/media-playback-rate-listbox.js
@@ -1,4 +1,4 @@
-import MediaChromeListbox from './media-chrome-listbox.js';
+import { MediaChromeListbox, createOption } from './media-chrome-listbox.js';
 import './media-chrome-option.js';
 import { DEFAULT_RATES, DEFAULT_RATE } from '../media-playback-rate-button.js';
 import { MediaUIAttributes, MediaUIEvents } from '../constants.js';
@@ -94,20 +94,7 @@ class MediaPlaybackRateListbox extends MediaChromeListbox {
 
     for (const rate of this.rates) {
       /** @type {HTMLOptionElement} */
-      const option = document.createElement('media-chrome-option');
-      option.part.add('option');
-      option.value = rate;
-
-      const label = document.createElement('span');
-      label.textContent = `${rate}x`;
-      option.append(label);
-
-      if (this.mediaPlaybackRate == rate) {
-        option.setAttribute('aria-selected', 'true');
-      } else {
-        option.setAttribute('aria-selected', 'false');
-      }
-
+      const option = createOption(`${rate}x`, rate, this.mediaPlaybackRate == rate);
       option.prepend(this.#selectedIndicator.cloneNode(true));
       container.append(option);
     }

diff --git a/src/js/experimental/media-playback-rate-selectmenu.js b/src/js/experimental/media-playback-rate-selectmenu.js
@@ -1,4 +1,4 @@
-import MediaChromeSelectMenu from './media-chrome-selectmenu.js';
+import { MediaChromeSelectMenu } from './media-chrome-selectmenu.js';
 import '../media-playback-rate-button.js';
 import './media-playback-rate-listbox.js';
 import { globalThis, document, } from '../utils/server-safe-globals.js';

diff --git a/src/js/experimental/media-rendition-listbox.js b/src/js/experimental/media-rendition-listbox.js
@@ -1,4 +1,4 @@
-import MediaChromeListbox from './media-chrome-listbox.js';
+import { MediaChromeListbox, createOption } from './media-chrome-listbox.js';
 import './media-chrome-option.js';
 import { globalThis, document } from '../utils/server-safe-globals.js';
 import { parseRenditionList } from '../utils/utils.js';
@@ -30,10 +30,7 @@ class MediaRenditionListbox extends MediaChromeListbox {
 
     this.#selectedIndicator = this.getSlottedIndicator('selected-indicator');
 
-    const autoOption = document.createElement('media-chrome-option');
-    autoOption.part.add('option');
-    autoOption.value = 'auto';
-    autoOption.innerHTML = '<span>Auto</span>';
+    const autoOption = createOption('Auto', 'auto');
     autoOption.prepend(this.#selectedIndicator.cloneNode(true));
     this.#autoOption = autoOption;
   }
@@ -111,20 +108,11 @@ class MediaRenditionListbox extends MediaChromeListbox {
     for (const rendition of renditionList) {
 
       /** @type {HTMLOptionElement} */
-      const option = document.createElement('media-chrome-option');
-      option.part.add('option');
-      option.value = `${rendition.id}`;
-
-      const label = document.createElement('span');
-      label.textContent = `${Math.min(rendition.width, rendition.height)}p`;
-      option.append(label);
-
-      if (rendition.enabled && !isAuto) {
-        option.setAttribute('aria-selected', 'true');
-      } else {
-        option.setAttribute('aria-selected', 'false');
-      }
-
+      const option = createOption(
+        `${Math.min(rendition.width, rendition.height)}p`,
+        `${rendition.id}`,
+        rendition.enabled && !isAuto
+      );
       option.prepend(this.#selectedIndicator.cloneNode(true));
       container.append(option);
     }

diff --git a/src/js/experimental/media-rendition-selectmenu.js b/src/js/experimental/media-rendition-selectmenu.js
@@ -1,4 +1,4 @@
-import MediaChromeSelectMenu from './media-chrome-selectmenu.js';
+import { MediaChromeSelectMenu } from './media-chrome-selectmenu.js';
 import './media-rendition-button.js';
 import './media-rendition-listbox.js';
 import { globalThis, document, } from '../utils/server-safe-globals.js';