From 2b0b0b5f487851462a14090409ad41dca1e493ec Mon Sep 17 00:00:00 2001
From: Adam Jaggard <ajaggard@mux.com>
Date: Wed, 3 May 2023 12:35:49 +0100
Subject: [PATCH 01/31] props for airplay button

---
 src/js/media-airplay-button.js | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/src/js/media-airplay-button.js b/src/js/media-airplay-button.js
index 30da6024e..893b60622 100644
--- a/src/js/media-airplay-button.js
+++ b/src/js/media-airplay-button.js
@@ -39,6 +39,28 @@ class MediaAirplayButton extends MediaChromeButton {
     super.connectedCallback();
   }
 
+  /**
+   * @type {string | undefined} Airplay unavailability state
+   */
+  get mediaAirplayUnavailable() {
+    return (
+      this.getAttribute(MediaUIAttributes.MEDIA_AIRPLAY_UNAVAILABLE) ??
+      undefined
+    );
+  }
+
+  set mediaAirplayUnavailable(value) {
+    // avoid triggering a set if no change
+    if (this.mediaAirplayUnavailable === value) return;
+
+    if (value === undefined) {
+      this.removeAttribute(MediaUIAttributes.MEDIA_AIRPLAY_UNAVAILABLE);
+      return;
+    }
+
+    this.setAttribute(MediaUIAttributes.MEDIA_AIRPLAY_UNAVAILABLE, value);
+  }
+
   handleClick() {
     const evt = new window.CustomEvent(MediaUIEvents.MEDIA_AIRPLAY_REQUEST, {
       composed: true,

From fefbaacdf4be1007cb32cfe0a59e4be57d4ade16 Mon Sep 17 00:00:00 2001
From: Adam Jaggard <ajaggard@mux.com>
Date: Wed, 3 May 2023 14:55:31 +0100
Subject: [PATCH 02/31] media captions button props

---
 src/js/media-captions-button.js | 47 ++++++++++++++++++++++++++++++---
 1 file changed, 43 insertions(+), 4 deletions(-)

diff --git a/src/js/media-captions-button.js b/src/js/media-captions-button.js
index b130e4922..6b179051b 100644
--- a/src/js/media-captions-button.js
+++ b/src/js/media-captions-button.js
@@ -2,7 +2,11 @@ import MediaChromeButton from './media-chrome-button.js';
 import { window, document } from './utils/server-safe-globals.js';
 import { MediaUIAttributes } from './constants.js';
 import { nouns } from './labels/labels.js';
-import { areSubsOn, toggleSubsCaps } from './utils/captions.js';
+import {
+  areSubsOn,
+  splitTextTracksStr,
+  toggleSubsCaps,
+} from './utils/captions.js';
 
 const ccIconOn = `<svg aria-hidden="true" viewBox="0 0 26 24">
   <path d="M22.83 5.68a2.58 2.58 0 0 0-2.3-2.5c-3.62-.24-11.44-.24-15.06 0a2.58 2.58 0 0 0-2.3 2.5c-.23 4.21-.23 8.43 0 12.64a2.58 2.58 0 0 0 2.3 2.5c3.62.24 11.44.24 15.06 0a2.58 2.58 0 0 0 2.3-2.5c.23-4.21.23-8.43 0-12.64Zm-11.39 9.45a3.07 3.07 0 0 1-1.91.57 3.06 3.06 0 0 1-2.34-1 3.75 3.75 0 0 1-.92-2.67 3.92 3.92 0 0 1 .92-2.77 3.18 3.18 0 0 1 2.43-1 2.94 2.94 0 0 1 2.13.78c.364.359.62.813.74 1.31l-1.43.35a1.49 1.49 0 0 0-1.51-1.17 1.61 1.61 0 0 0-1.29.58 2.79 2.79 0 0 0-.5 1.89 3 3 0 0 0 .49 1.93 1.61 1.61 0 0 0 1.27.58 1.48 1.48 0 0 0 1-.37 2.1 2.1 0 0 0 .59-1.14l1.4.44a3.23 3.23 0 0 1-1.07 1.69Zm7.22 0a3.07 3.07 0 0 1-1.91.57 3.06 3.06 0 0 1-2.34-1 3.75 3.75 0 0 1-.92-2.67 3.88 3.88 0 0 1 .93-2.77 3.14 3.14 0 0 1 2.42-1 3 3 0 0 1 2.16.82 2.8 2.8 0 0 1 .73 1.31l-1.43.35a1.49 1.49 0 0 0-1.51-1.21 1.61 1.61 0 0 0-1.29.58A2.79 2.79 0 0 0 15 12a3 3 0 0 0 .49 1.93 1.61 1.61 0 0 0 1.27.58 1.44 1.44 0 0 0 1-.37 2.1 2.1 0 0 0 .6-1.15l1.4.44a3.17 3.17 0 0 1-1.1 1.7Z"/>
@@ -13,15 +17,14 @@ const ccIconOff = `<svg aria-hidden="true" viewBox="0 0 26 24">
 </svg>`;
 
 const slotTemplate = document.createElement('template');
-slotTemplate.innerHTML = /*html*/`
+slotTemplate.innerHTML = /*html*/ `
   <style>
   :host([aria-checked="true"]) slot:not([name=on]) > *,
   :host([aria-checked="true"]) ::slotted(:not([slot=on])) {
     display: none !important;
   }
 
-  ${/* Double negative, but safer if display doesn't equal 'block' */ ''
-  }
+  ${/* Double negative, but safer if display doesn't equal 'block' */ ''}
   :host(:not([aria-checked="true"])) slot:not([name=off]) > *,
   :host(:not([aria-checked="true"])) ::slotted(:not([slot=off])) {
     display: none !important;
@@ -76,6 +79,42 @@ class MediaCaptionsButton extends MediaChromeButton {
     super.attributeChangedCallback(attrName, oldValue, newValue);
   }
 
+  /**
+   * @type {Array<string>} An array of string serialised text tracks
+   */
+  get mediaSubtitlesList() {
+    const attrVal = this.getAttribute(MediaUIAttributes.MEDIA_SUBTITLES_LIST);
+    return attrVal ? splitTextTracksStr(attrVal) : [];
+  }
+
+  set mediaSubtitlesList(list) {
+    const newVal = list.join(' ');
+    // avoid triggering a set if no change
+    if (newVal === this.getAttribute(MediaUIAttributes.MEDIA_SUBTITLES_LIST)) {
+      return;
+    }
+    this.setAttribute(MediaUIAttributes.MEDIA_SUBTITLES_LIST, newVal);
+  }
+
+  /**
+   * @type {string | undefined} A text track represented as a string
+   */
+  get mediaSubtitlesShowing() {
+    return (
+      this.getAttribute(MediaUIAttributes.MEDIA_SUBTITLES_SHOWING) ?? undefined
+    );
+  }
+
+  set mediaSubtitlesShowing(value) {
+    // avoid triggering a set if no change
+    if (value === this.mediaSubtitlesShowing) return;
+    if (value === undefined) {
+      this.removeAttribute(MediaUIAttributes.MEDIA_SUBTITLES_SHOWING);
+      return;
+    }
+    this.setAttribute(MediaUIAttributes.MEDIA_SUBTITLES_SHOWING, value);
+  }
+
   handleClick() {
     toggleSubsCaps(this);
   }

From dcf6bd24ab361dcb3335ec1a7089e38579716b39 Mon Sep 17 00:00:00 2001
From: Adam Jaggard <ajaggard@mux.com>
Date: Wed, 3 May 2023 16:08:32 +0100
Subject: [PATCH 03/31] media captions account for null and comments

---
 src/js/media-captions-button.js | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/js/media-captions-button.js b/src/js/media-captions-button.js
index 6b179051b..bb3dde026 100644
--- a/src/js/media-captions-button.js
+++ b/src/js/media-captions-button.js
@@ -84,10 +84,17 @@ class MediaCaptionsButton extends MediaChromeButton {
    */
   get mediaSubtitlesList() {
     const attrVal = this.getAttribute(MediaUIAttributes.MEDIA_SUBTITLES_LIST);
+    // an empty string can return an array with an empty string as an item
+    // e.g. splitTextTracksStr('') will return [""]
+    // so we explicitly return an empty array for falsy values
     return attrVal ? splitTextTracksStr(attrVal) : [];
   }
 
   set mediaSubtitlesList(list) {
+    if (list == null) {
+      this.removeAttribute(MediaUIAttributes.MEDIA_SUBTITLES_LIST);
+      return;
+    }
     const newVal = list.join(' ');
     // avoid triggering a set if no change
     if (newVal === this.getAttribute(MediaUIAttributes.MEDIA_SUBTITLES_LIST)) {
@@ -108,10 +115,12 @@ class MediaCaptionsButton extends MediaChromeButton {
   set mediaSubtitlesShowing(value) {
     // avoid triggering a set if no change
     if (value === this.mediaSubtitlesShowing) return;
-    if (value === undefined) {
+
+    if (value == null) {
       this.removeAttribute(MediaUIAttributes.MEDIA_SUBTITLES_SHOWING);
       return;
     }
+
     this.setAttribute(MediaUIAttributes.MEDIA_SUBTITLES_SHOWING, value);
   }
 

From b68cd4db52179810cb9b128a4c2e7564bce1d788 Mon Sep 17 00:00:00 2001
From: Adam Jaggard <ajaggard@mux.com>
Date: Wed, 3 May 2023 16:10:02 +0100
Subject: [PATCH 04/31] airplay button handle null

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

diff --git a/src/js/media-airplay-button.js b/src/js/media-airplay-button.js
index 893b60622..dd445d877 100644
--- a/src/js/media-airplay-button.js
+++ b/src/js/media-airplay-button.js
@@ -53,7 +53,7 @@ class MediaAirplayButton extends MediaChromeButton {
     // avoid triggering a set if no change
     if (this.mediaAirplayUnavailable === value) return;
 
-    if (value === undefined) {
+    if (value == null) {
       this.removeAttribute(MediaUIAttributes.MEDIA_AIRPLAY_UNAVAILABLE);
       return;
     }

From d58130ab889a294bfef4330e2b4bf8fbe75787bb Mon Sep 17 00:00:00 2001
From: Adam Jaggard <ajaggard@mux.com>
Date: Wed, 3 May 2023 16:14:33 +0100
Subject: [PATCH 05/31] cast to string for anything remaining

---
 src/js/media-airplay-button.js  | 2 +-
 src/js/media-captions-button.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/js/media-airplay-button.js b/src/js/media-airplay-button.js
index dd445d877..ededd0b80 100644
--- a/src/js/media-airplay-button.js
+++ b/src/js/media-airplay-button.js
@@ -58,7 +58,7 @@ class MediaAirplayButton extends MediaChromeButton {
       return;
     }
 
-    this.setAttribute(MediaUIAttributes.MEDIA_AIRPLAY_UNAVAILABLE, value);
+    this.setAttribute(MediaUIAttributes.MEDIA_AIRPLAY_UNAVAILABLE, `${value}`);
   }
 
   handleClick() {
diff --git a/src/js/media-captions-button.js b/src/js/media-captions-button.js
index bb3dde026..83a0d7111 100644
--- a/src/js/media-captions-button.js
+++ b/src/js/media-captions-button.js
@@ -121,7 +121,7 @@ class MediaCaptionsButton extends MediaChromeButton {
       return;
     }
 
-    this.setAttribute(MediaUIAttributes.MEDIA_SUBTITLES_SHOWING, value);
+    this.setAttribute(MediaUIAttributes.MEDIA_SUBTITLES_SHOWING, `${value}`);
   }
 
   handleClick() {

From bc66b6bb25f225273abacead5012ea40d316475d Mon Sep 17 00:00:00 2001
From: Adam Jaggard <ajaggard@mux.com>
Date: Wed, 3 May 2023 16:20:23 +0100
Subject: [PATCH 06/31] cast button props

---
 src/js/media-cast-button.js | 32 ++++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/src/js/media-cast-button.js b/src/js/media-cast-button.js
index dbdd93037..f291cc906 100644
--- a/src/js/media-cast-button.js
+++ b/src/js/media-cast-button.js
@@ -69,6 +69,38 @@ class MediaCastButton extends MediaChromeButton {
     super.attributeChangedCallback(attrName, oldValue, newValue);
   }
 
+  /**
+   * @type {boolean} Are we currently casting
+   */
+  get mediaIsCasting() {
+    return this.hasAttribute(MediaUIAttributes.MEDIA_IS_CASTING);
+  }
+
+  set mediaIsCasting(value) {
+    this.toggleAttribute(MediaUIAttributes.MEDIA_IS_CASTING, !!value);
+  }
+
+  /**
+   * @type {string | undefined} Cast unavailability state
+   */
+  get mediaCastUnavailable() {
+    return (
+      this.getAttribute(MediaUIAttributes.MEDIA_CAST_UNAVAILABLE) ?? undefined
+    );
+  }
+
+  set mediaCastUnavailable(value) {
+    // avoid triggering a set if no change
+    if (this.mediaCastUnavailable === value) return;
+
+    if (value == null) {
+      this.removeAttribute(MediaUIAttributes.MEDIA_CAST_UNAVAILABLE);
+      return;
+    }
+
+    this.setAttribute(MediaUIAttributes.MEDIA_CAST_UNAVAILABLE, `${value}`);
+  }
+
   handleClick() {
     const eventName =
       this.getAttribute(MediaUIAttributes.MEDIA_IS_CASTING) != null

From c62e3cc8188e6661b69dfa2720fa7381a069ce72 Mon Sep 17 00:00:00 2001
From: Adam Jaggard <ajaggard@mux.com>
Date: Thu, 4 May 2023 16:03:37 +0100
Subject: [PATCH 07/31] fix attr type

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

diff --git a/src/js/media-captions-button.js b/src/js/media-captions-button.js
index 83a0d7111..528e3cf32 100644
--- a/src/js/media-captions-button.js
+++ b/src/js/media-captions-button.js
@@ -44,7 +44,7 @@ const updateAriaChecked = (el) => {
  * @slot off - An element that will be shown while closed captions or subtitles are off.
  *
  * @attr {string} mediasubtitleslist - (read-only) A list of all subtitles and captions.
- * @attr {boolean} mediasubtitlesshowing - (read-only) A list of the showing subtitles and captions.
+ * @attr {string} mediasubtitlesshowing - (read-only) A list of the showing subtitles and captions.
  *
  * @cssproperty [--media-captions-button-display = inline-flex] - `display` property of button.
  */

From 22379830d0b2df9ce69086edb114900db800e163 Mon Sep 17 00:00:00 2001
From: Adam Jaggard <ajaggard@mux.com>
Date: Fri, 5 May 2023 15:49:49 +0100
Subject: [PATCH 08/31] treat subtitlesshowing the same as subtitleslist, move
 to utils in same file

---
 src/js/media-captions-button.js | 72 ++++++++++++++++++++-------------
 1 file changed, 43 insertions(+), 29 deletions(-)

diff --git a/src/js/media-captions-button.js b/src/js/media-captions-button.js
index 528e3cf32..c7039839c 100644
--- a/src/js/media-captions-button.js
+++ b/src/js/media-captions-button.js
@@ -39,6 +39,43 @@ const updateAriaChecked = (el) => {
   el.setAttribute('aria-checked', areSubsOn(el));
 };
 
+/**
+ * @param {any} el Should be HTMLElement but issues with window shim
+ * @param {string} attrName
+ * @returns {Array<string>}
+ */
+const getCaptionListAttr = (el, attrName) => {
+  const attrVal = el.getAttribute(attrName);
+
+  // an empty attribute can return an array with an empty string as an item
+  // e.g. splitTextTracksStr('') will return [""]
+  // so we explicitly return an empty array for falsy values
+  return attrVal ? splitTextTracksStr(attrVal) : [];
+};
+
+/**
+ *
+ * @param {any} el Should be HTMLElement but issues with window shim
+ * @param {string} attrName
+ * @param {Array<string>} list
+ */
+const setCaptionListAttr = (el, attrName, list) => {
+  // null, undefined, and empty arrays are treated as "no value" here
+  if (!list) {
+    el.removeAttribute(attrName);
+    return;
+  }
+
+  const newVal = list.join(' ');
+
+  // don't set if the new value is the same as existing
+  const oldList = getCaptionListAttr(el, attrName);
+  const oldVal = oldList.join(' ');
+  if (oldVal === newVal) return;
+
+  el.setAttribute(attrName, newVal);
+};
+
 /**
  * @slot on - An element that will be shown while closed captions or subtitles are on.
  * @slot off - An element that will be shown while closed captions or subtitles are off.
@@ -83,45 +120,22 @@ class MediaCaptionsButton extends MediaChromeButton {
    * @type {Array<string>} An array of string serialised text tracks
    */
   get mediaSubtitlesList() {
-    const attrVal = this.getAttribute(MediaUIAttributes.MEDIA_SUBTITLES_LIST);
-    // an empty string can return an array with an empty string as an item
-    // e.g. splitTextTracksStr('') will return [""]
-    // so we explicitly return an empty array for falsy values
-    return attrVal ? splitTextTracksStr(attrVal) : [];
+    return getCaptionListAttr(this, MediaUIAttributes.MEDIA_SUBTITLES_LIST);
   }
 
   set mediaSubtitlesList(list) {
-    if (list == null) {
-      this.removeAttribute(MediaUIAttributes.MEDIA_SUBTITLES_LIST);
-      return;
-    }
-    const newVal = list.join(' ');
-    // avoid triggering a set if no change
-    if (newVal === this.getAttribute(MediaUIAttributes.MEDIA_SUBTITLES_LIST)) {
-      return;
-    }
-    this.setAttribute(MediaUIAttributes.MEDIA_SUBTITLES_LIST, newVal);
+    setCaptionListAttr(this, MediaUIAttributes.MEDIA_SUBTITLES_LIST, list);
   }
 
   /**
-   * @type {string | undefined} A text track represented as a string
+   * @type {Array<string>} An array of string serialised text tracks
    */
   get mediaSubtitlesShowing() {
-    return (
-      this.getAttribute(MediaUIAttributes.MEDIA_SUBTITLES_SHOWING) ?? undefined
-    );
+    return getCaptionListAttr(this, MediaUIAttributes.MEDIA_SUBTITLES_SHOWING);
   }
 
-  set mediaSubtitlesShowing(value) {
-    // avoid triggering a set if no change
-    if (value === this.mediaSubtitlesShowing) return;
-
-    if (value == null) {
-      this.removeAttribute(MediaUIAttributes.MEDIA_SUBTITLES_SHOWING);
-      return;
-    }
-
-    this.setAttribute(MediaUIAttributes.MEDIA_SUBTITLES_SHOWING, `${value}`);
+  set mediaSubtitlesShowing(list) {
+    setCaptionListAttr(this, MediaUIAttributes.MEDIA_SUBTITLES_SHOWING, list);
   }
 
   handleClick() {

From d896e0f7164debfb18f1e0586493674ce254278c Mon Sep 17 00:00:00 2001
From: Adam Jaggard <ajaggard@mux.com>
Date: Thu, 20 Apr 2023 15:38:02 +0100
Subject: [PATCH 09/31] remove random slashes

---
 src/js/media-time-display.js | 121 +++++++++++------------------------
 1 file changed, 36 insertions(+), 85 deletions(-)

diff --git a/src/js/media-time-display.js b/src/js/media-time-display.js
index 2da8eaf84..ec535adcb 100644
--- a/src/js/media-time-display.js
+++ b/src/js/media-time-display.js
@@ -1,11 +1,5 @@
 import MediaTextDisplay from './media-text-display.js';
-import {
-  getBooleanAttr,
-  getNumericAttr,
-  getOrInsertCSSRule,
-  setBooleanAttr,
-  setNumericAttr,
-} from './utils/element-utils.js';
+import { getOrInsertCSSRule } from './utils/element-utils.js';
 import { window } from './utils/server-safe-globals.js';
 import { formatAsTimePhrase, formatTime } from './utils/time.js';
 import { MediaUIAttributes } from './constants.js';
@@ -16,13 +10,6 @@ export const Attributes = {
   SHOW_DURATION: 'showduration',
 };
 
-const CombinedAttributes = [
-  ...Object.values(Attributes),
-  MediaUIAttributes.MEDIA_CURRENT_TIME,
-  MediaUIAttributes.MEDIA_DURATION,
-  MediaUIAttributes.MEDIA_SEEKABLE,
-];
-
 // Todo: Use data locals: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString
 
 const ButtonPressedKeys = ['Enter', ' '];
@@ -33,8 +20,7 @@ const formatTimesLabel = (el, { timesSep = DEFAULT_TIMES_SEP } = {}) => {
   const showRemaining = el.hasAttribute(Attributes.REMAINING);
   const showDuration = el.hasAttribute(Attributes.SHOW_DURATION);
   const currentTime = el.mediaCurrentTime ?? 0;
-  const [, seekableEnd] = el.mediaSeekable ?? [];
-  const endTime = el.mediaDuration ?? seekableEnd ?? 0;
+  const endTime = el.mediaDuration ?? el.mediaSeekableEnd ?? 0;
 
   const timeLabel = showRemaining
     ? formatTime(0 - (endTime - currentTime))
@@ -48,8 +34,7 @@ const DEFAULT_MISSING_TIME_PHRASE = 'video not loaded, unknown time.';
 
 const updateAriaValueText = (el) => {
   const currentTime = el.mediaCurrentTime;
-  const [, seekableEnd] = el.mediaSeekable ?? [];
-  const endTime = el.mediaDuration || seekableEnd;
+  const endTime = el.mediaDuration || el.mediaSeekableEnd;
   if (currentTime == null || endTime == null) {
     el.setAttribute('aria-valuetext', DEFAULT_MISSING_TIME_PHRASE);
     return;
@@ -82,11 +67,18 @@ const updateAriaValueText = (el) => {
  * @cssproperty --media-control-hover-background - `background` of control hover state.
  */
 class MediaTimeDisplay extends MediaTextDisplay {
-  /** @type {HTMLSlotElement} */
   #slot;
 
   static get observedAttributes() {
-    return [...super.observedAttributes, ...CombinedAttributes, 'disabled'];
+    return [
+      ...super.observedAttributes,
+      MediaUIAttributes.MEDIA_CURRENT_TIME,
+      MediaUIAttributes.MEDIA_DURATION,
+      MediaUIAttributes.MEDIA_SEEKABLE,
+      Attributes.REMAINING,
+      Attributes.SHOW_DURATION,
+      'disabled',
+    ];
   }
 
   constructor() {
@@ -98,14 +90,9 @@ class MediaTimeDisplay extends MediaTextDisplay {
     const { style } = getOrInsertCSSRule(this.shadowRoot, ':host');
     style.setProperty('cursor', 'pointer');
 
-    const { style: hoverStyle } = getOrInsertCSSRule(
-      this.shadowRoot,
-      ':host(:hover)'
-    );
-    hoverStyle.setProperty(
-      'background',
-      'var(--media-control-hover-background, rgba(50 50 70 / .7))'
-    );
+    const { style: hoverStyle } = getOrInsertCSSRule(this.shadowRoot, ':host(:hover)');
+    hoverStyle.setProperty('background', 'var(--media-control-hover-background, rgba(50 50 70 / .7))');
+
   }
 
   connectedCallback() {
@@ -154,7 +141,15 @@ class MediaTimeDisplay extends MediaTextDisplay {
   }
 
   attributeChangedCallback(attrName, oldValue, newValue) {
-    if (CombinedAttributes.includes(attrName)) {
+    if (
+      [
+        Attributes.SHOW_DURATION,
+        Attributes.REMAINING,
+        MediaUIAttributes.MEDIA_CURRENT_TIME,
+        MediaUIAttributes.MEDIA_DURATION,
+        MediaUIAttributes.MEDIA_SEEKABLE,
+      ].includes(attrName)
+    ) {
       this.update();
     } else if (attrName === 'disabled' && newValue !== oldValue) {
       if (newValue == null) {
@@ -175,62 +170,16 @@ class MediaTimeDisplay extends MediaTextDisplay {
     this.tabIndex = -1;
   }
 
-  // Own props
-
-  /**
-   * Whether to show the remaining time
-   * @type {boolean}
-   */
-  get remaining() {
-    return getBooleanAttr(this, Attributes.REMAINING);
-  }
-
-  set remaining(show) {
-    setBooleanAttr(this, Attributes.REMAINING, show);
-  }
-
-  /**
-   * Whether to show the duration
-   * @type {boolean}
-   */
-  get showDuration() {
-    return getBooleanAttr(this, Attributes.SHOW_DURATION);
-  }
-
-  set showDuration(show) {
-    setBooleanAttr(this, Attributes.SHOW_DURATION, show);
-  }
-
-  // Props derived from media UI attributes
-
-  /**
-   * Get the duration
-   * @type {number | undefined} In seconds
-   */
   get mediaDuration() {
-    return getNumericAttr(this, MediaUIAttributes.MEDIA_DURATION);
+    const attrVal = this.getAttribute(MediaUIAttributes.MEDIA_DURATION);
+    return attrVal != null ? +attrVal : undefined;
   }
 
-  set mediaDuration(time) {
-    setNumericAttr(this, MediaUIAttributes.MEDIA_DURATION, time);
-  }
-
-  /**
-   * The current time
-   * @type {number | undefined} In seconds
-   */
   get mediaCurrentTime() {
-    return getNumericAttr(this, MediaUIAttributes.MEDIA_CURRENT_TIME);
+    const attrVal = this.getAttribute(MediaUIAttributes.MEDIA_CURRENT_TIME);
+    return attrVal != null ? +attrVal : undefined;
   }
 
-  set mediaCurrentTime(time) {
-    setNumericAttr(this, MediaUIAttributes.MEDIA_CURRENT_TIME, time);
-  }
-
-  /**
-   * Range of values that can be seeked to
-   * @type {[number, number] | undefined} An array of two numbers [start, end]
-   */
   get mediaSeekable() {
     const seekable = this.getAttribute(MediaUIAttributes.MEDIA_SEEKABLE);
     if (!seekable) return undefined;
@@ -238,12 +187,14 @@ class MediaTimeDisplay extends MediaTextDisplay {
     return seekable.split(':').map((time) => +time);
   }
 
-  set mediaSeekable(range) {
-    if (range == null) {
-      this.removeAttribute(MediaUIAttributes.MEDIA_SEEKABLE);
-      return;
-    }
-    this.setAttribute(MediaUIAttributes.MEDIA_SEEKABLE, range.join(':'));
+  get mediaSeekableEnd() {
+    const [, end] = this.mediaSeekable ?? [];
+    return end;
+  }
+
+  get mediaSeekableStart() {
+    const [start] = this.mediaSeekable ?? [];
+    return start;
   }
 
   update() {

From e1762c8afaa50a8f9ac3f8337672da68f96d2fe9 Mon Sep 17 00:00:00 2001
From: Adam Jaggard <ajaggard@mux.com>
Date: Thu, 20 Apr 2023 17:42:09 +0100
Subject: [PATCH 10/31] remove informal public getters mediaSeekableEnd and
 mediaSeekableStart

---
 src/js/media-time-display.js | 16 ++++------------
 1 file changed, 4 insertions(+), 12 deletions(-)

diff --git a/src/js/media-time-display.js b/src/js/media-time-display.js
index ec535adcb..8b5e9ba7c 100644
--- a/src/js/media-time-display.js
+++ b/src/js/media-time-display.js
@@ -20,7 +20,8 @@ const formatTimesLabel = (el, { timesSep = DEFAULT_TIMES_SEP } = {}) => {
   const showRemaining = el.hasAttribute(Attributes.REMAINING);
   const showDuration = el.hasAttribute(Attributes.SHOW_DURATION);
   const currentTime = el.mediaCurrentTime ?? 0;
-  const endTime = el.mediaDuration ?? el.mediaSeekableEnd ?? 0;
+  const [, seekableEnd] = el.mediaSeekable ?? [];
+  const endTime = el.mediaDuration ?? seekableEnd ?? 0;
 
   const timeLabel = showRemaining
     ? formatTime(0 - (endTime - currentTime))
@@ -34,7 +35,8 @@ const DEFAULT_MISSING_TIME_PHRASE = 'video not loaded, unknown time.';
 
 const updateAriaValueText = (el) => {
   const currentTime = el.mediaCurrentTime;
-  const endTime = el.mediaDuration || el.mediaSeekableEnd;
+  const [, seekableEnd] = el.mediaSeekable ?? [];
+  const endTime = el.mediaDuration || seekableEnd;
   if (currentTime == null || endTime == null) {
     el.setAttribute('aria-valuetext', DEFAULT_MISSING_TIME_PHRASE);
     return;
@@ -187,16 +189,6 @@ class MediaTimeDisplay extends MediaTextDisplay {
     return seekable.split(':').map((time) => +time);
   }
 
-  get mediaSeekableEnd() {
-    const [, end] = this.mediaSeekable ?? [];
-    return end;
-  }
-
-  get mediaSeekableStart() {
-    const [start] = this.mediaSeekable ?? [];
-    return start;
-  }
-
   update() {
     const timesLabel = formatTimesLabel(this);
     updateAriaValueText(this);

From 7e0901eef6e173aeb7a4f17cc10338014706ea02 Mon Sep 17 00:00:00 2001
From: Adam Jaggard <ajaggard@mux.com>
Date: Fri, 21 Apr 2023 10:40:43 +0100
Subject: [PATCH 11/31] define attribute lists up front

---
 src/js/media-time-display.js | 27 +++++++++------------------
 1 file changed, 9 insertions(+), 18 deletions(-)

diff --git a/src/js/media-time-display.js b/src/js/media-time-display.js
index 8b5e9ba7c..85bd1c337 100644
--- a/src/js/media-time-display.js
+++ b/src/js/media-time-display.js
@@ -10,6 +10,13 @@ export const Attributes = {
   SHOW_DURATION: 'showduration',
 };
 
+const CombinedAttributes = [
+  ...Object.values(Attributes),
+  MediaUIAttributes.MEDIA_CURRENT_TIME,
+  MediaUIAttributes.MEDIA_DURATION,
+  MediaUIAttributes.MEDIA_SEEKABLE
+];
+
 // Todo: Use data locals: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString
 
 const ButtonPressedKeys = ['Enter', ' '];
@@ -72,15 +79,7 @@ class MediaTimeDisplay extends MediaTextDisplay {
   #slot;
 
   static get observedAttributes() {
-    return [
-      ...super.observedAttributes,
-      MediaUIAttributes.MEDIA_CURRENT_TIME,
-      MediaUIAttributes.MEDIA_DURATION,
-      MediaUIAttributes.MEDIA_SEEKABLE,
-      Attributes.REMAINING,
-      Attributes.SHOW_DURATION,
-      'disabled',
-    ];
+    return [...super.observedAttributes, ...CombinedAttributes, 'disabled'];
   }
 
   constructor() {
@@ -143,15 +142,7 @@ class MediaTimeDisplay extends MediaTextDisplay {
   }
 
   attributeChangedCallback(attrName, oldValue, newValue) {
-    if (
-      [
-        Attributes.SHOW_DURATION,
-        Attributes.REMAINING,
-        MediaUIAttributes.MEDIA_CURRENT_TIME,
-        MediaUIAttributes.MEDIA_DURATION,
-        MediaUIAttributes.MEDIA_SEEKABLE,
-      ].includes(attrName)
-    ) {
+    if (CombinedAttributes.includes(attrName)) {
       this.update();
     } else if (attrName === 'disabled' && newValue !== oldValue) {
       if (newValue == null) {

From d92d6c4d9334dc668a59fce1f9823fa686d00cce Mon Sep 17 00:00:00 2001
From: Adam Jaggard <ajaggard@mux.com>
Date: Fri, 21 Apr 2023 11:24:48 +0100
Subject: [PATCH 12/31] lint

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

diff --git a/src/js/media-time-display.js b/src/js/media-time-display.js
index 85bd1c337..ee1d86fb1 100644
--- a/src/js/media-time-display.js
+++ b/src/js/media-time-display.js
@@ -14,7 +14,7 @@ const CombinedAttributes = [
   ...Object.values(Attributes),
   MediaUIAttributes.MEDIA_CURRENT_TIME,
   MediaUIAttributes.MEDIA_DURATION,
-  MediaUIAttributes.MEDIA_SEEKABLE
+  MediaUIAttributes.MEDIA_SEEKABLE,
 ];
 
 // Todo: Use data locals: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString

From 9ea3c879ebd7b80ab203689be2d03ea7bbc044f9 Mon Sep 17 00:00:00 2001
From: Adam Jaggard <ajaggard@mux.com>
Date: Fri, 21 Apr 2023 11:25:28 +0100
Subject: [PATCH 13/31] new setters and jsdoc comments

---
 src/js/media-time-display.js | 83 ++++++++++++++++++++++++++++++++++++
 1 file changed, 83 insertions(+)

diff --git a/src/js/media-time-display.js b/src/js/media-time-display.js
index ee1d86fb1..ff79902f4 100644
--- a/src/js/media-time-display.js
+++ b/src/js/media-time-display.js
@@ -163,16 +163,91 @@ class MediaTimeDisplay extends MediaTextDisplay {
     this.tabIndex = -1;
   }
 
+  // Own props
+
+  /**
+   * Whether to show the remaining time
+   * @returns {boolean}
+   */
+  get remaining() {
+    return this.hasAttribute(Attributes.REMAINING);
+  }
+
+  /**
+   * Whether to show the remaining time
+   * @param {boolean} show
+   */
+  set remaining(show) {
+    if (show && !this.hasAttribute(Attributes.REMAINING)) {
+      this.setAttribute(Attributes.REMAINING, '');
+    } else if (!show && this.hasAttribute(Attributes.REMAINING)) {
+      this.removeAttribute(Attributes.REMAINING);
+    }
+    this.update();
+  }
+
+  /**
+   * Whether to show the duration
+   * @returns {boolean}
+   */
+  get showDuration() {
+    return this.hasAttribute(Attributes.SHOW_DURATION);
+  }
+
+  /**
+   * Whether to show the duration
+   * @param {boolean} show
+   */
+  set showDuration(show) {
+    if (show && !this.hasAttribute(Attributes.SHOW_DURATION)) {
+      this.setAttribute(Attributes.SHOW_DURATION, '');
+    } else if (!show && this.hasAttribute(Attributes.SHOW_DURATION)) {
+      this.removeAttribute(Attributes.SHOW_DURATION);
+    }
+    this.update();
+  }
+
+  // Props derived from media UI attributes
+
+  /**
+   * Get the duration
+   * @returns {number | undefined}
+   */
   get mediaDuration() {
     const attrVal = this.getAttribute(MediaUIAttributes.MEDIA_DURATION);
     return attrVal != null ? +attrVal : undefined;
   }
 
+  /**
+   * Set the duration
+   * @param {number} time the new duration in seconds
+   */
+  set setMediaDuration(time) {
+    this.setAttribute(MediaUIAttributes.MEDIA_DURATION, time.toString(10));
+  }
+
+  /**
+   * The current time
+   * @returns {number | undefined} Time in seconds or undefined if not available
+   */
   get mediaCurrentTime() {
     const attrVal = this.getAttribute(MediaUIAttributes.MEDIA_CURRENT_TIME);
     return attrVal != null ? +attrVal : undefined;
   }
 
+  /**
+   * The current time
+   * @param {number} time in seconds
+   */
+  set mediaCurrentTime(time) {
+    this.setAttribute(MediaUIAttributes.MEDIA_CURRENT_TIME, time.toString(10));
+  }
+
+  /**
+   * Range of values that can be seeked to
+   * @returns {[number, number] | undefined} An array of two numbers [start, end]
+   * or undefined if not available
+   */
   get mediaSeekable() {
     const seekable = this.getAttribute(MediaUIAttributes.MEDIA_SEEKABLE);
     if (!seekable) return undefined;
@@ -180,6 +255,14 @@ class MediaTimeDisplay extends MediaTextDisplay {
     return seekable.split(':').map((time) => +time);
   }
 
+  /**
+   * Range of values that can be seeked to
+   * @param {[number, number]} range An array of two numbers [start, end]
+   */
+  set mediaSeekable(range) {
+    this.setAttribute(range.join(':'));
+  }
+
   update() {
     const timesLabel = formatTimesLabel(this);
     updateAriaValueText(this);

From 5014127443bcdfe0a990cacae269b5093415422f Mon Sep 17 00:00:00 2001
From: Adam Jaggard <ajaggard@mux.com>
Date: Fri, 21 Apr 2023 11:38:02 +0100
Subject: [PATCH 14/31] type private prop

---
 src/js/media-time-display.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/js/media-time-display.js b/src/js/media-time-display.js
index ff79902f4..b9498ff9f 100644
--- a/src/js/media-time-display.js
+++ b/src/js/media-time-display.js
@@ -76,6 +76,7 @@ const updateAriaValueText = (el) => {
  * @cssproperty --media-control-hover-background - `background` of control hover state.
  */
 class MediaTimeDisplay extends MediaTextDisplay {
+  /** @type {HTMLSlotElement} */
   #slot;
 
   static get observedAttributes() {

From 0478f38317cf5aa32efdcef83fe0b334ed58238c Mon Sep 17 00:00:00 2001
From: Adam Jaggard <ajaggard@mux.com>
Date: Tue, 25 Apr 2023 16:06:36 +0100
Subject: [PATCH 15/31] remove unneeded manual updates

---
 src/js/media-time-display.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/js/media-time-display.js b/src/js/media-time-display.js
index b9498ff9f..354e5c6a2 100644
--- a/src/js/media-time-display.js
+++ b/src/js/media-time-display.js
@@ -184,7 +184,6 @@ class MediaTimeDisplay extends MediaTextDisplay {
     } else if (!show && this.hasAttribute(Attributes.REMAINING)) {
       this.removeAttribute(Attributes.REMAINING);
     }
-    this.update();
   }
 
   /**
@@ -205,7 +204,6 @@ class MediaTimeDisplay extends MediaTextDisplay {
     } else if (!show && this.hasAttribute(Attributes.SHOW_DURATION)) {
       this.removeAttribute(Attributes.SHOW_DURATION);
     }
-    this.update();
   }
 
   // Props derived from media UI attributes

From 074f5a762d890addf581922fa5fc5909d66718a0 Mon Sep 17 00:00:00 2001
From: Adam Jaggard <ajaggard@mux.com>
Date: Tue, 25 Apr 2023 16:08:36 +0100
Subject: [PATCH 16/31] simplify attribute toggling

---
 src/js/media-time-display.js | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

diff --git a/src/js/media-time-display.js b/src/js/media-time-display.js
index 354e5c6a2..f878f9214 100644
--- a/src/js/media-time-display.js
+++ b/src/js/media-time-display.js
@@ -179,11 +179,7 @@ class MediaTimeDisplay extends MediaTextDisplay {
    * @param {boolean} show
    */
   set remaining(show) {
-    if (show && !this.hasAttribute(Attributes.REMAINING)) {
-      this.setAttribute(Attributes.REMAINING, '');
-    } else if (!show && this.hasAttribute(Attributes.REMAINING)) {
-      this.removeAttribute(Attributes.REMAINING);
-    }
+    this.toggleAttribute(Attributes.REMAINING, show);
   }
 
   /**
@@ -199,11 +195,7 @@ class MediaTimeDisplay extends MediaTextDisplay {
    * @param {boolean} show
    */
   set showDuration(show) {
-    if (show && !this.hasAttribute(Attributes.SHOW_DURATION)) {
-      this.setAttribute(Attributes.SHOW_DURATION, '');
-    } else if (!show && this.hasAttribute(Attributes.SHOW_DURATION)) {
-      this.removeAttribute(Attributes.SHOW_DURATION);
-    }
+    this.toggleAttribute(Attributes.SHOW_DURATION, show);
   }
 
   // Props derived from media UI attributes

From 678a9bdf67ba78f7b16a4e68556ec44e23470328 Mon Sep 17 00:00:00 2001
From: Adam Jaggard <ajaggard@mux.com>
Date: Tue, 25 Apr 2023 16:12:04 +0100
Subject: [PATCH 17/31] don't update attribute if value hasn't changed

---
 src/js/media-time-display.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/js/media-time-display.js b/src/js/media-time-display.js
index f878f9214..ff1a6faac 100644
--- a/src/js/media-time-display.js
+++ b/src/js/media-time-display.js
@@ -179,6 +179,8 @@ class MediaTimeDisplay extends MediaTextDisplay {
    * @param {boolean} show
    */
   set remaining(show) {
+    // don't set unless needed, could trigger an attr change event
+    if (show === this.remaining) return;
     this.toggleAttribute(Attributes.REMAINING, show);
   }
 
@@ -195,6 +197,8 @@ class MediaTimeDisplay extends MediaTextDisplay {
    * @param {boolean} show
    */
   set showDuration(show) {
+    // don't set unless needed, could trigger an attr change event
+    if (show === this.showDuration) return;
     this.toggleAttribute(Attributes.SHOW_DURATION, show);
   }
 

From 83a321f90c9fd4d6411d54f1cc88a3ff8cfa6aa6 Mon Sep 17 00:00:00 2001
From: Adam Jaggard <ajaggard@mux.com>
Date: Tue, 25 Apr 2023 17:12:46 +0100
Subject: [PATCH 18/31] use @type and remove unnecessary setter annotations

---
 src/js/media-time-display.js | 33 ++++++---------------------------
 1 file changed, 6 insertions(+), 27 deletions(-)

diff --git a/src/js/media-time-display.js b/src/js/media-time-display.js
index ff1a6faac..508fea4ba 100644
--- a/src/js/media-time-display.js
+++ b/src/js/media-time-display.js
@@ -168,16 +168,12 @@ class MediaTimeDisplay extends MediaTextDisplay {
 
   /**
    * Whether to show the remaining time
-   * @returns {boolean}
+   * @type {boolean}
    */
   get remaining() {
     return this.hasAttribute(Attributes.REMAINING);
   }
 
-  /**
-   * Whether to show the remaining time
-   * @param {boolean} show
-   */
   set remaining(show) {
     // don't set unless needed, could trigger an attr change event
     if (show === this.remaining) return;
@@ -186,16 +182,12 @@ class MediaTimeDisplay extends MediaTextDisplay {
 
   /**
    * Whether to show the duration
-   * @returns {boolean}
+   * @type {boolean}
    */
   get showDuration() {
     return this.hasAttribute(Attributes.SHOW_DURATION);
   }
 
-  /**
-   * Whether to show the duration
-   * @param {boolean} show
-   */
   set showDuration(show) {
     // don't set unless needed, could trigger an attr change event
     if (show === this.showDuration) return;
@@ -206,42 +198,33 @@ class MediaTimeDisplay extends MediaTextDisplay {
 
   /**
    * Get the duration
-   * @returns {number | undefined}
+   * @type {number | undefined} In seconds
    */
   get mediaDuration() {
     const attrVal = this.getAttribute(MediaUIAttributes.MEDIA_DURATION);
     return attrVal != null ? +attrVal : undefined;
   }
 
-  /**
-   * Set the duration
-   * @param {number} time the new duration in seconds
-   */
-  set setMediaDuration(time) {
+  set mediaDuration(time) {
     this.setAttribute(MediaUIAttributes.MEDIA_DURATION, time.toString(10));
   }
 
   /**
    * The current time
-   * @returns {number | undefined} Time in seconds or undefined if not available
+   * @type {number | undefined} In seconds
    */
   get mediaCurrentTime() {
     const attrVal = this.getAttribute(MediaUIAttributes.MEDIA_CURRENT_TIME);
     return attrVal != null ? +attrVal : undefined;
   }
 
-  /**
-   * The current time
-   * @param {number} time in seconds
-   */
   set mediaCurrentTime(time) {
     this.setAttribute(MediaUIAttributes.MEDIA_CURRENT_TIME, time.toString(10));
   }
 
   /**
    * Range of values that can be seeked to
-   * @returns {[number, number] | undefined} An array of two numbers [start, end]
-   * or undefined if not available
+   * @type {[number, number] | undefined} An array of two numbers [start, end]
    */
   get mediaSeekable() {
     const seekable = this.getAttribute(MediaUIAttributes.MEDIA_SEEKABLE);
@@ -250,10 +233,6 @@ class MediaTimeDisplay extends MediaTextDisplay {
     return seekable.split(':').map((time) => +time);
   }
 
-  /**
-   * Range of values that can be seeked to
-   * @param {[number, number]} range An array of two numbers [start, end]
-   */
   set mediaSeekable(range) {
     this.setAttribute(range.join(':'));
   }

From d7ebc2178fc0159084082a9e86d797dab61eecb1 Mon Sep 17 00:00:00 2001
From: Adam Jaggard <ajaggard@mux.com>
Date: Tue, 25 Apr 2023 17:54:43 +0100
Subject: [PATCH 19/31] allow undefined in mediaSeekable setter

---
 src/js/media-time-display.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/js/media-time-display.js b/src/js/media-time-display.js
index 508fea4ba..e06db5425 100644
--- a/src/js/media-time-display.js
+++ b/src/js/media-time-display.js
@@ -234,6 +234,10 @@ class MediaTimeDisplay extends MediaTextDisplay {
   }
 
   set mediaSeekable(range) {
+    if (range === undefined) {
+      this.removeAttribute(MediaUIAttributes.MEDIA_SEEKABLE);
+      return;
+    }
     this.setAttribute(range.join(':'));
   }
 

From a234c089f35e7e7efb974a3a7fe98569575c99a1 Mon Sep 17 00:00:00 2001
From: Adam Jaggard <ajaggard@mux.com>
Date: Wed, 3 May 2023 10:56:40 +0100
Subject: [PATCH 20/31] allow undefined for setting current time

---
 src/js/media-time-display.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/js/media-time-display.js b/src/js/media-time-display.js
index e06db5425..3b92b072f 100644
--- a/src/js/media-time-display.js
+++ b/src/js/media-time-display.js
@@ -219,6 +219,10 @@ class MediaTimeDisplay extends MediaTextDisplay {
   }
 
   set mediaCurrentTime(time) {
+    if (time === undefined) {
+      this.removeAttribute(MediaUIAttributes.MEDIA_CURRENT_TIME);
+      return;
+    }
     this.setAttribute(MediaUIAttributes.MEDIA_CURRENT_TIME, time.toString(10));
   }
 

From fd207d2afb8a102f1699dad10cb27e5850cebe12 Mon Sep 17 00:00:00 2001
From: Adam Jaggard <ajaggard@mux.com>
Date: Thu, 4 May 2023 11:11:46 +0100
Subject: [PATCH 21/31] update current time getter and setter

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

diff --git a/src/js/media-time-display.js b/src/js/media-time-display.js
index 3b92b072f..198391c17 100644
--- a/src/js/media-time-display.js
+++ b/src/js/media-time-display.js
@@ -215,15 +215,15 @@ class MediaTimeDisplay extends MediaTextDisplay {
    */
   get mediaCurrentTime() {
     const attrVal = this.getAttribute(MediaUIAttributes.MEDIA_CURRENT_TIME);
-    return attrVal != null ? +attrVal : undefined;
+    return attrVal ? +attrVal : undefined;
   }
 
   set mediaCurrentTime(time) {
-    if (time === undefined) {
+    if (time == null) {
       this.removeAttribute(MediaUIAttributes.MEDIA_CURRENT_TIME);
       return;
     }
-    this.setAttribute(MediaUIAttributes.MEDIA_CURRENT_TIME, time.toString(10));
+    this.setAttribute(MediaUIAttributes.MEDIA_CURRENT_TIME, `${+time}`);
   }
 
   /**

From 1af079895248ecd7ff21aa3313fe9c448dbdcd97 Mon Sep 17 00:00:00 2001
From: Adam Jaggard <ajaggard@mux.com>
Date: Thu, 4 May 2023 11:13:19 +0100
Subject: [PATCH 22/31] update duration getter and setter

---
 src/js/media-time-display.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/js/media-time-display.js b/src/js/media-time-display.js
index 198391c17..656b38857 100644
--- a/src/js/media-time-display.js
+++ b/src/js/media-time-display.js
@@ -202,11 +202,15 @@ class MediaTimeDisplay extends MediaTextDisplay {
    */
   get mediaDuration() {
     const attrVal = this.getAttribute(MediaUIAttributes.MEDIA_DURATION);
-    return attrVal != null ? +attrVal : undefined;
+    return attrVal ? +attrVal : undefined;
   }
 
   set mediaDuration(time) {
-    this.setAttribute(MediaUIAttributes.MEDIA_DURATION, time.toString(10));
+    if (time == null) {
+      this.removeAttribute(MediaUIAttributes.MEDIA_DURATION);
+      return;
+    }
+    this.setAttribute(MediaUIAttributes.MEDIA_DURATION, `${+time}`);
   }
 
   /**

From 1bda9fac1d038dbc9cb87adb88440dd364615fd6 Mon Sep 17 00:00:00 2001
From: Adam Jaggard <ajaggard@mux.com>
Date: Thu, 4 May 2023 16:49:54 +0100
Subject: [PATCH 23/31] element attr utility functions

---
 src/js/media-time-display.js | 42 +++++++++++++++---------------------
 1 file changed, 17 insertions(+), 25 deletions(-)

diff --git a/src/js/media-time-display.js b/src/js/media-time-display.js
index 656b38857..97328d2f9 100644
--- a/src/js/media-time-display.js
+++ b/src/js/media-time-display.js
@@ -1,5 +1,11 @@
 import MediaTextDisplay from './media-text-display.js';
-import { getOrInsertCSSRule } from './utils/element-utils.js';
+import {
+  getBooleanAttr,
+  getNumericAttr,
+  getOrInsertCSSRule,
+  setBooleanAttr,
+  setNumericAttr,
+} from './utils/element-utils.js';
 import { window } from './utils/server-safe-globals.js';
 import { formatAsTimePhrase, formatTime } from './utils/time.js';
 import { MediaUIAttributes } from './constants.js';
@@ -171,13 +177,11 @@ class MediaTimeDisplay extends MediaTextDisplay {
    * @type {boolean}
    */
   get remaining() {
-    return this.hasAttribute(Attributes.REMAINING);
+    return getBooleanAttr(this, Attributes.REMAINING);
   }
 
   set remaining(show) {
-    // don't set unless needed, could trigger an attr change event
-    if (show === this.remaining) return;
-    this.toggleAttribute(Attributes.REMAINING, show);
+    setBooleanAttr(this, Attributes.REMAINING, show);
   }
 
   /**
@@ -185,13 +189,11 @@ class MediaTimeDisplay extends MediaTextDisplay {
    * @type {boolean}
    */
   get showDuration() {
-    return this.hasAttribute(Attributes.SHOW_DURATION);
+    return getBooleanAttr(this, Attributes.SHOW_DURATION);
   }
 
   set showDuration(show) {
-    // don't set unless needed, could trigger an attr change event
-    if (show === this.showDuration) return;
-    this.toggleAttribute(Attributes.SHOW_DURATION, show);
+    setBooleanAttr(this, Attributes.SHOW_DURATION, show);
   }
 
   // Props derived from media UI attributes
@@ -201,16 +203,11 @@ class MediaTimeDisplay extends MediaTextDisplay {
    * @type {number | undefined} In seconds
    */
   get mediaDuration() {
-    const attrVal = this.getAttribute(MediaUIAttributes.MEDIA_DURATION);
-    return attrVal ? +attrVal : undefined;
+    return getNumericAttr(this, MediaUIAttributes.MEDIA_DURATION);
   }
 
   set mediaDuration(time) {
-    if (time == null) {
-      this.removeAttribute(MediaUIAttributes.MEDIA_DURATION);
-      return;
-    }
-    this.setAttribute(MediaUIAttributes.MEDIA_DURATION, `${+time}`);
+    setNumericAttr(this, MediaUIAttributes.MEDIA_DURATION, time);
   }
 
   /**
@@ -218,16 +215,11 @@ class MediaTimeDisplay extends MediaTextDisplay {
    * @type {number | undefined} In seconds
    */
   get mediaCurrentTime() {
-    const attrVal = this.getAttribute(MediaUIAttributes.MEDIA_CURRENT_TIME);
-    return attrVal ? +attrVal : undefined;
+    return getNumericAttr(this, MediaUIAttributes.MEDIA_CURRENT_TIME);
   }
 
   set mediaCurrentTime(time) {
-    if (time == null) {
-      this.removeAttribute(MediaUIAttributes.MEDIA_CURRENT_TIME);
-      return;
-    }
-    this.setAttribute(MediaUIAttributes.MEDIA_CURRENT_TIME, `${+time}`);
+    setNumericAttr(this, MediaUIAttributes.MEDIA_CURRENT_TIME, time);
   }
 
   /**
@@ -242,11 +234,11 @@ class MediaTimeDisplay extends MediaTextDisplay {
   }
 
   set mediaSeekable(range) {
-    if (range === undefined) {
+    if (range == null) {
       this.removeAttribute(MediaUIAttributes.MEDIA_SEEKABLE);
       return;
     }
-    this.setAttribute(range.join(':'));
+    this.setAttribute(MediaUIAttributes.MEDIA_SEEKABLE, range.join(':'));
   }
 
   update() {

From 0a040b3513b720251a3482e06c911fcd3e0e2c8f Mon Sep 17 00:00:00 2001
From: Adam Jaggard <ajaggard@mux.com>
Date: Thu, 4 May 2023 16:50:16 +0100
Subject: [PATCH 24/31] prettier lint

---
 src/js/media-time-display.js | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/js/media-time-display.js b/src/js/media-time-display.js
index 97328d2f9..2da8eaf84 100644
--- a/src/js/media-time-display.js
+++ b/src/js/media-time-display.js
@@ -98,9 +98,14 @@ class MediaTimeDisplay extends MediaTextDisplay {
     const { style } = getOrInsertCSSRule(this.shadowRoot, ':host');
     style.setProperty('cursor', 'pointer');
 
-    const { style: hoverStyle } = getOrInsertCSSRule(this.shadowRoot, ':host(:hover)');
-    hoverStyle.setProperty('background', 'var(--media-control-hover-background, rgba(50 50 70 / .7))');
-
+    const { style: hoverStyle } = getOrInsertCSSRule(
+      this.shadowRoot,
+      ':host(:hover)'
+    );
+    hoverStyle.setProperty(
+      'background',
+      'var(--media-control-hover-background, rgba(50 50 70 / .7))'
+    );
   }
 
   connectedCallback() {

From 2f5d47746e47104f1a1e9f5a339776f33ddf2776 Mon Sep 17 00:00:00 2001
From: Adam Jaggard <ajaggard@mux.com>
Date: Tue, 9 May 2023 10:28:48 +0100
Subject: [PATCH 25/31] string attr utils

---
 src/js/media-airplay-button.js | 16 +++-------------
 src/js/utils/element-utils.js  | 27 ++++++++++++++++++++++++++-
 2 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/src/js/media-airplay-button.js b/src/js/media-airplay-button.js
index ededd0b80..76d67ae4f 100644
--- a/src/js/media-airplay-button.js
+++ b/src/js/media-airplay-button.js
@@ -2,6 +2,7 @@ import MediaChromeButton from './media-chrome-button.js';
 import { window, document } from './utils/server-safe-globals.js';
 import { MediaUIEvents, MediaUIAttributes } from './constants.js';
 import { verbs } from './labels/labels.js';
+import { getStringAttr, setStringAttr } from './utils/element-utils';
 
 const airplayIcon = `<svg aria-hidden="true" viewBox="0 0 26 24">
   <path d="M22.13 3H3.87a.87.87 0 0 0-.87.87v13.26a.87.87 0 0 0 .87.87h3.4L9 16H5V5h16v11h-4l1.72 2h3.4a.87.87 0 0 0 .87-.87V3.87a.87.87 0 0 0-.86-.87Zm-8.75 11.44a.5.5 0 0 0-.76 0l-4.91 5.73a.5.5 0 0 0 .38.83h9.82a.501.501 0 0 0 .38-.83l-4.91-5.73Z"/>
@@ -43,22 +44,11 @@ class MediaAirplayButton extends MediaChromeButton {
    * @type {string | undefined} Airplay unavailability state
    */
   get mediaAirplayUnavailable() {
-    return (
-      this.getAttribute(MediaUIAttributes.MEDIA_AIRPLAY_UNAVAILABLE) ??
-      undefined
-    );
+    return getStringAttr(this, MediaUIAttributes.MEDIA_AIRPLAY_UNAVAILABLE);
   }
 
   set mediaAirplayUnavailable(value) {
-    // avoid triggering a set if no change
-    if (this.mediaAirplayUnavailable === value) return;
-
-    if (value == null) {
-      this.removeAttribute(MediaUIAttributes.MEDIA_AIRPLAY_UNAVAILABLE);
-      return;
-    }
-
-    this.setAttribute(MediaUIAttributes.MEDIA_AIRPLAY_UNAVAILABLE, `${value}`);
+    setStringAttr(this, MediaUIAttributes.MEDIA_AIRPLAY_UNAVAILABLE, value);
   }
 
   handleClick() {
diff --git a/src/js/utils/element-utils.js b/src/js/utils/element-utils.js
index ea74b31d5..63506a136 100644
--- a/src/js/utils/element-utils.js
+++ b/src/js/utils/element-utils.js
@@ -112,7 +112,6 @@ export function getBooleanAttr(el, attrName) {
 }
 
 /**
- *
  * @param {any} el (Should be an HTMLElement, but need any for SSR cases)
  * @param {string} attrName
  * @param {boolean} value
@@ -129,3 +128,29 @@ export function setBooleanAttr(el, attrName, value) {
 
   el.toggleAttribute(attrName, value);
 }
+
+/**
+ * @param {any} el (Should be an HTMLElement, but need any for SSR cases)
+ * @param {string} attrName
+ */
+export function getStringAttr(el, attrName) {
+  return el.getAttribute(attrName) ?? undefined;
+}
+
+/**
+ * @param {*} el (Should be an HTMLElement, but need any for SSR cases)
+ * @param {string} attrName
+ * @param {string} value
+ */
+export function setStringAttr(el, attrName, value) {
+  // avoid triggering a set if no change
+  if (getStringAttr(el, attrName) == value) return;
+
+  // also handles undefined
+  if (value == null) {
+    el.removeAttribute(attrName);
+    return;
+  }
+
+  el.setAttribute(attrName, `${value}`);
+}

From 4bab8063caa76490eef67b59b431621c9534639b Mon Sep 17 00:00:00 2001
From: Adam Jaggard <ajaggard@mux.com>
Date: Tue, 9 May 2023 11:00:35 +0100
Subject: [PATCH 26/31] use new utils

---
 src/js/media-airplay-button.js |  2 +-
 src/js/media-cast-button.js    | 37 ++++++++++++++--------------------
 2 files changed, 16 insertions(+), 23 deletions(-)

diff --git a/src/js/media-airplay-button.js b/src/js/media-airplay-button.js
index 76d67ae4f..b362b4082 100644
--- a/src/js/media-airplay-button.js
+++ b/src/js/media-airplay-button.js
@@ -2,7 +2,7 @@ import MediaChromeButton from './media-chrome-button.js';
 import { window, document } from './utils/server-safe-globals.js';
 import { MediaUIEvents, MediaUIAttributes } from './constants.js';
 import { verbs } from './labels/labels.js';
-import { getStringAttr, setStringAttr } from './utils/element-utils';
+import { getStringAttr, setStringAttr } from './utils/element-utils.js';
 
 const airplayIcon = `<svg aria-hidden="true" viewBox="0 0 26 24">
   <path d="M22.13 3H3.87a.87.87 0 0 0-.87.87v13.26a.87.87 0 0 0 .87.87h3.4L9 16H5V5h16v11h-4l1.72 2h3.4a.87.87 0 0 0 .87-.87V3.87a.87.87 0 0 0-.86-.87Zm-8.75 11.44a.5.5 0 0 0-.76 0l-4.91 5.73a.5.5 0 0 0 .38.83h9.82a.501.501 0 0 0 .38-.83l-4.91-5.73Z"/>
diff --git a/src/js/media-cast-button.js b/src/js/media-cast-button.js
index f291cc906..7e5c81cbc 100644
--- a/src/js/media-cast-button.js
+++ b/src/js/media-cast-button.js
@@ -2,13 +2,15 @@ import MediaChromeButton from './media-chrome-button.js';
 import { window, document } from './utils/server-safe-globals.js';
 import { MediaUIEvents, MediaUIAttributes } from './constants.js';
 import { verbs } from './labels/labels.js';
+import { getBooleanAttr, setBooleanAttr } from './utils/element-utils';
+import { getStringAttr, setStringAttr } from './utils/element-utils.js';
 
 const enterIcon = `<svg aria-hidden="true" viewBox="0 0 24 24"><g><path class="cast_caf_icon_arch0" d="M1,18 L1,21 L4,21 C4,19.3 2.66,18 1,18 L1,18 Z"/><path class="cast_caf_icon_arch1" d="M1,14 L1,16 C3.76,16 6,18.2 6,21 L8,21 C8,17.13 4.87,14 1,14 L1,14 Z"/><path class="cast_caf_icon_arch2" d="M1,10 L1,12 C5.97,12 10,16.0 10,21 L12,21 C12,14.92 7.07,10 1,10 L1,10 Z"/><path class="cast_caf_icon_box" d="M21,3 L3,3 C1.9,3 1,3.9 1,5 L1,8 L3,8 L3,5 L21,5 L21,19 L14,19 L14,21 L21,21 C22.1,21 23,20.1 23,19 L23,5 C23,3.9 22.1,3 21,3 L21,3 Z"/></g></svg>`;
 
 const exitIcon = `<svg aria-hidden="true" viewBox="0 0 24 24"><g><path class="cast_caf_icon_arch0" d="M1,18 L1,21 L4,21 C4,19.3 2.66,18 1,18 L1,18 Z"/><path class="cast_caf_icon_arch1" d="M1,14 L1,16 C3.76,16 6,18.2 6,21 L8,21 C8,17.13 4.87,14 1,14 L1,14 Z"/><path class="cast_caf_icon_arch2" d="M1,10 L1,12 C5.97,12 10,16.0 10,21 L12,21 C12,14.92 7.07,10 1,10 L1,10 Z"/><path class="cast_caf_icon_box" d="M21,3 L3,3 C1.9,3 1,3.9 1,5 L1,8 L3,8 L3,5 L21,5 L21,19 L14,19 L14,21 L21,21 C22.1,21 23,20.1 23,19 L23,5 C23,3.9 22.1,3 21,3 L21,3 Z"/><path class="cast_caf_icon_boxfill" d="M5,7 L5,8.63 C8,8.6 13.37,14 13.37,17 L19,17 L19,7 Z"/></g></svg>`;
 
 const slotTemplate = document.createElement('template');
-slotTemplate.innerHTML = /*html*/`
+slotTemplate.innerHTML = /*html*/ `
   <style>
   :host([${MediaUIAttributes.MEDIA_IS_CASTING}]) slot:not([name=exit]) > *,
   :host([${MediaUIAttributes.MEDIA_IS_CASTING}]) ::slotted(:not([slot=exit])) {
@@ -16,8 +18,12 @@ slotTemplate.innerHTML = /*html*/`
   }
 
   ${/* Double negative, but safer if display doesn't equal 'block' */ ''}
-  :host(:not([${MediaUIAttributes.MEDIA_IS_CASTING}])) slot:not([name=enter]) > *,
-  :host(:not([${MediaUIAttributes.MEDIA_IS_CASTING}])) ::slotted(:not([slot=enter])) {
+  :host(:not([${
+    MediaUIAttributes.MEDIA_IS_CASTING
+  }])) slot:not([name=enter]) > *,
+  :host(:not([${
+    MediaUIAttributes.MEDIA_IS_CASTING
+  }])) ::slotted(:not([slot=enter])) {
     display: none !important;
   }
   </style>
@@ -27,11 +33,8 @@ slotTemplate.innerHTML = /*html*/`
 `;
 
 const updateAriaLabel = (el) => {
-  const isCast =
-    el.getAttribute(MediaUIAttributes.MEDIA_IS_CASTING) != null;
-  const label = isCast
-    ? verbs.EXIT_CAST()
-    : verbs.ENTER_CAST();
+  const isCast = el.getAttribute(MediaUIAttributes.MEDIA_IS_CASTING) != null;
+  const label = isCast ? verbs.EXIT_CAST() : verbs.ENTER_CAST();
   el.setAttribute('aria-label', label);
 };
 
@@ -73,32 +76,22 @@ class MediaCastButton extends MediaChromeButton {
    * @type {boolean} Are we currently casting
    */
   get mediaIsCasting() {
-    return this.hasAttribute(MediaUIAttributes.MEDIA_IS_CASTING);
+    return getBooleanAttr(this, MediaUIAttributes.MEDIA_IS_CASTING);
   }
 
   set mediaIsCasting(value) {
-    this.toggleAttribute(MediaUIAttributes.MEDIA_IS_CASTING, !!value);
+    setBooleanAttr(this, MediaUIAttributes.MEDIA_IS_CASTING, value);
   }
 
   /**
    * @type {string | undefined} Cast unavailability state
    */
   get mediaCastUnavailable() {
-    return (
-      this.getAttribute(MediaUIAttributes.MEDIA_CAST_UNAVAILABLE) ?? undefined
-    );
+    return getStringAttr(this, MediaUIAttributes.MEDIA_CAST_UNAVAILABLE);
   }
 
   set mediaCastUnavailable(value) {
-    // avoid triggering a set if no change
-    if (this.mediaCastUnavailable === value) return;
-
-    if (value == null) {
-      this.removeAttribute(MediaUIAttributes.MEDIA_CAST_UNAVAILABLE);
-      return;
-    }
-
-    this.setAttribute(MediaUIAttributes.MEDIA_CAST_UNAVAILABLE, `${value}`);
+    setStringAttr(this, MediaUIAttributes.MEDIA_CAST_UNAVAILABLE, value);
   }
 
   handleClick() {

From 33f55d6f55f0d8d118ff9d937166c34235c9fcac Mon Sep 17 00:00:00 2001
From: Adam Jaggard <ajaggard@mux.com>
Date: Wed, 10 May 2023 11:35:00 +0100
Subject: [PATCH 27/31] fix import

---
 src/js/media-cast-button.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/js/media-cast-button.js b/src/js/media-cast-button.js
index 7e5c81cbc..6cac73d78 100644
--- a/src/js/media-cast-button.js
+++ b/src/js/media-cast-button.js
@@ -2,8 +2,12 @@ import MediaChromeButton from './media-chrome-button.js';
 import { window, document } from './utils/server-safe-globals.js';
 import { MediaUIEvents, MediaUIAttributes } from './constants.js';
 import { verbs } from './labels/labels.js';
-import { getBooleanAttr, setBooleanAttr } from './utils/element-utils';
-import { getStringAttr, setStringAttr } from './utils/element-utils.js';
+import {
+  getBooleanAttr,
+  setBooleanAttr,
+  getStringAttr,
+  setStringAttr,
+} from './utils/element-utils.js';
 
 const enterIcon = `<svg aria-hidden="true" viewBox="0 0 24 24"><g><path class="cast_caf_icon_arch0" d="M1,18 L1,21 L4,21 C4,19.3 2.66,18 1,18 L1,18 Z"/><path class="cast_caf_icon_arch1" d="M1,14 L1,16 C3.76,16 6,18.2 6,21 L8,21 C8,17.13 4.87,14 1,14 L1,14 Z"/><path class="cast_caf_icon_arch2" d="M1,10 L1,12 C5.97,12 10,16.0 10,21 L12,21 C12,14.92 7.07,10 1,10 L1,10 Z"/><path class="cast_caf_icon_box" d="M21,3 L3,3 C1.9,3 1,3.9 1,5 L1,8 L3,8 L3,5 L21,5 L21,19 L14,19 L14,21 L21,21 C22.1,21 23,20.1 23,19 L23,5 C23,3.9 22.1,3 21,3 L21,3 Z"/></g></svg>`;
 

From 88193bc5bf8a4daf4c36f7361b7700c008f9fe96 Mon Sep 17 00:00:00 2001
From: Adam Jaggard <ajaggard@mux.com>
Date: Wed, 10 May 2023 11:35:06 +0100
Subject: [PATCH 28/31] comments

---
 src/js/media-captions-button.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/js/media-captions-button.js b/src/js/media-captions-button.js
index c7039839c..6980b08e4 100644
--- a/src/js/media-captions-button.js
+++ b/src/js/media-captions-button.js
@@ -118,6 +118,7 @@ class MediaCaptionsButton extends MediaChromeButton {
 
   /**
    * @type {Array<string>} An array of string serialised text tracks
+   * e.g. ["cc:en:English"]
    */
   get mediaSubtitlesList() {
     return getCaptionListAttr(this, MediaUIAttributes.MEDIA_SUBTITLES_LIST);
@@ -129,6 +130,7 @@ class MediaCaptionsButton extends MediaChromeButton {
 
   /**
    * @type {Array<string>} An array of string serialised text tracks
+   * * e.g. ["cc:en:English"]
    */
   get mediaSubtitlesShowing() {
     return getCaptionListAttr(this, MediaUIAttributes.MEDIA_SUBTITLES_SHOWING);

From d9be1c68680e12f9206ee849ce179076ae2f056a Mon Sep 17 00:00:00 2001
From: Adam Jaggard <ajaggard@mux.com>
Date: Wed, 10 May 2023 11:41:41 +0100
Subject: [PATCH 29/31] captions -> subtitles

---
 src/js/media-captions-button.js | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/js/media-captions-button.js b/src/js/media-captions-button.js
index 6980b08e4..7f501e960 100644
--- a/src/js/media-captions-button.js
+++ b/src/js/media-captions-button.js
@@ -44,7 +44,7 @@ const updateAriaChecked = (el) => {
  * @param {string} attrName
  * @returns {Array<string>}
  */
-const getCaptionListAttr = (el, attrName) => {
+const getSubtitlesListAttr = (el, attrName) => {
   const attrVal = el.getAttribute(attrName);
 
   // an empty attribute can return an array with an empty string as an item
@@ -59,7 +59,7 @@ const getCaptionListAttr = (el, attrName) => {
  * @param {string} attrName
  * @param {Array<string>} list
  */
-const setCaptionListAttr = (el, attrName, list) => {
+const setSubtitlesListAttr = (el, attrName, list) => {
   // null, undefined, and empty arrays are treated as "no value" here
   if (!list) {
     el.removeAttribute(attrName);
@@ -69,7 +69,7 @@ const setCaptionListAttr = (el, attrName, list) => {
   const newVal = list.join(' ');
 
   // don't set if the new value is the same as existing
-  const oldList = getCaptionListAttr(el, attrName);
+  const oldList = getSubtitlesListAttr(el, attrName);
   const oldVal = oldList.join(' ');
   if (oldVal === newVal) return;
 
@@ -121,11 +121,11 @@ class MediaCaptionsButton extends MediaChromeButton {
    * e.g. ["cc:en:English"]
    */
   get mediaSubtitlesList() {
-    return getCaptionListAttr(this, MediaUIAttributes.MEDIA_SUBTITLES_LIST);
+    return getSubtitlesListAttr(this, MediaUIAttributes.MEDIA_SUBTITLES_LIST);
   }
 
   set mediaSubtitlesList(list) {
-    setCaptionListAttr(this, MediaUIAttributes.MEDIA_SUBTITLES_LIST, list);
+    setSubtitlesListAttr(this, MediaUIAttributes.MEDIA_SUBTITLES_LIST, list);
   }
 
   /**
@@ -133,11 +133,14 @@ class MediaCaptionsButton extends MediaChromeButton {
    * * e.g. ["cc:en:English"]
    */
   get mediaSubtitlesShowing() {
-    return getCaptionListAttr(this, MediaUIAttributes.MEDIA_SUBTITLES_SHOWING);
+    return getSubtitlesListAttr(
+      this,
+      MediaUIAttributes.MEDIA_SUBTITLES_SHOWING
+    );
   }
 
   set mediaSubtitlesShowing(list) {
-    setCaptionListAttr(this, MediaUIAttributes.MEDIA_SUBTITLES_SHOWING, list);
+    setSubtitlesListAttr(this, MediaUIAttributes.MEDIA_SUBTITLES_SHOWING, list);
   }
 
   handleClick() {

From 0f53da750d3e45953a7a9c65d66c2bafeebf50fb Mon Sep 17 00:00:00 2001
From: Adam Jaggard <ajaggard@mux.com>
Date: Thu, 11 May 2023 10:47:52 +0100
Subject: [PATCH 30/31] accept array of texttrack-like objects

---
 src/js/media-captions-button.js | 31 +++++++++++++------------------
 1 file changed, 13 insertions(+), 18 deletions(-)

diff --git a/src/js/media-captions-button.js b/src/js/media-captions-button.js
index 7f501e960..0f67627a1 100644
--- a/src/js/media-captions-button.js
+++ b/src/js/media-captions-button.js
@@ -4,7 +4,8 @@ import { MediaUIAttributes } from './constants.js';
 import { nouns } from './labels/labels.js';
 import {
   areSubsOn,
-  splitTextTracksStr,
+  parseTextTracksStr,
+  stringifyTextTrackList,
   toggleSubsCaps,
 } from './utils/captions.js';
 
@@ -42,22 +43,18 @@ const updateAriaChecked = (el) => {
 /**
  * @param {any} el Should be HTMLElement but issues with window shim
  * @param {string} attrName
- * @returns {Array<string>}
+ * @returns {Array<Object>} An array of TextTrack-like objects.
  */
 const getSubtitlesListAttr = (el, attrName) => {
   const attrVal = el.getAttribute(attrName);
-
-  // an empty attribute can return an array with an empty string as an item
-  // e.g. splitTextTracksStr('') will return [""]
-  // so we explicitly return an empty array for falsy values
-  return attrVal ? splitTextTracksStr(attrVal) : [];
+  return attrVal ? parseTextTracksStr(attrVal) : [];
 };
 
 /**
  *
  * @param {any} el Should be HTMLElement but issues with window shim
  * @param {string} attrName
- * @param {Array<string>} list
+ * @param {Array<Object>} list An array of TextTrack-like objects
  */
 const setSubtitlesListAttr = (el, attrName, list) => {
   // null, undefined, and empty arrays are treated as "no value" here
@@ -66,14 +63,12 @@ const setSubtitlesListAttr = (el, attrName, list) => {
     return;
   }
 
-  const newVal = list.join(' ');
-
   // don't set if the new value is the same as existing
-  const oldList = getSubtitlesListAttr(el, attrName);
-  const oldVal = oldList.join(' ');
-  if (oldVal === newVal) return;
+  const newValStr = stringifyTextTrackList(list);
+  const oldValStr = stringifyTextTrackList(el.getAttribute(attrName) ?? '');
+  if (oldValStr === newValStr) return;
 
-  el.setAttribute(attrName, newVal);
+  el.setAttribute(attrName, newValStr);
 };
 
 /**
@@ -117,8 +112,8 @@ class MediaCaptionsButton extends MediaChromeButton {
   }
 
   /**
-   * @type {Array<string>} An array of string serialised text tracks
-   * e.g. ["cc:en:English"]
+   * @type {Array<object>} An array of TextTrack-like objects.
+   * Objects must have the properties: kind, language, and label.
    */
   get mediaSubtitlesList() {
     return getSubtitlesListAttr(this, MediaUIAttributes.MEDIA_SUBTITLES_LIST);
@@ -129,8 +124,8 @@ class MediaCaptionsButton extends MediaChromeButton {
   }
 
   /**
-   * @type {Array<string>} An array of string serialised text tracks
-   * * e.g. ["cc:en:English"]
+   * @type {Array<object>} An array of TextTrack-like objects.
+   * Objects must have the properties: kind, language, and label.
    */
   get mediaSubtitlesShowing() {
     return getSubtitlesListAttr(

From 9b87af6c213f322dcde026dfed09f1775e836ef2 Mon Sep 17 00:00:00 2001
From: Adam Jaggard <ajaggard@mux.com>
Date: Thu, 11 May 2023 10:51:24 +0100
Subject: [PATCH 31/31] remove getAttribute

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

diff --git a/src/js/media-cast-button.js b/src/js/media-cast-button.js
index 6cac73d78..a0e726fdd 100644
--- a/src/js/media-cast-button.js
+++ b/src/js/media-cast-button.js
@@ -100,7 +100,7 @@ class MediaCastButton extends MediaChromeButton {
 
   handleClick() {
     const eventName =
-      this.getAttribute(MediaUIAttributes.MEDIA_IS_CASTING) != null
+      this.mediaIsCasting != null
         ? MediaUIEvents.MEDIA_EXIT_CAST_REQUEST
         : MediaUIEvents.MEDIA_ENTER_CAST_REQUEST;
     this.dispatchEvent(