From 5285b6ce04b6f78fb48a8f9e708918da6526ee9c Mon Sep 17 00:00:00 2001
From: Adam Jaggard <ajaggard@mux.com>
Date: Thu, 11 May 2023 15:27:36 +0100
Subject: [PATCH 1/5] lint

---
 src/js/media-poster-image.js         |  8 ++++----
 src/js/media-preview-thumbnail.js    | 15 +++++++++++----
 src/js/media-preview-time-display.js |  5 ++++-
 3 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/js/media-poster-image.js b/src/js/media-poster-image.js
index d868d2c2a..96266a315 100644
--- a/src/js/media-poster-image.js
+++ b/src/js/media-poster-image.js
@@ -3,11 +3,11 @@ import { window, document } from './utils/server-safe-globals.js';
 export const Attributes = {
   PLACEHOLDER_SRC: 'placeholdersrc',
   SRC: 'src',
-}
+};
 
 const template = document.createElement('template');
 
-template.innerHTML = /*html*/`
+template.innerHTML = /*html*/ `
   <style>
     :host {
       pointer-events: none;
@@ -33,10 +33,10 @@ template.innerHTML = /*html*/`
 
 const unsetBackgroundImage = (el) => {
   el.style.removeProperty('background-image');
-}
+};
 const setBackgroundImage = (el, image) => {
   el.style['background-image'] = `url('${image}')`;
-}
+};
 
 /**
  * @attr {string} placeholdersrc - Placeholder image source URL, often a blurhash data URL.
diff --git a/src/js/media-preview-thumbnail.js b/src/js/media-preview-thumbnail.js
index 742e21940..56b60f733 100644
--- a/src/js/media-preview-thumbnail.js
+++ b/src/js/media-preview-thumbnail.js
@@ -1,9 +1,12 @@
 import { window, document } from './utils/server-safe-globals.js';
-import { MediaUIAttributes, MediaStateReceiverAttributes } from './constants.js';
+import {
+  MediaUIAttributes,
+  MediaStateReceiverAttributes,
+} from './constants.js';
 import { getOrInsertCSSRule } from './utils/element-utils.js';
 
 const template = document.createElement('template');
-template.innerHTML = /*html*/`
+template.innerHTML = /*html*/ `
   <style>
     :host {
       box-sizing: border-box;
@@ -56,7 +59,8 @@ class MediaPreviewThumbnail extends window.HTMLElement {
     );
     if (mediaControllerId) {
       // @ts-ignore
-      this.#mediaController = this.getRootNode()?.getElementById(mediaControllerId);
+      this.#mediaController =
+        this.getRootNode()?.getElementById(mediaControllerId);
       this.#mediaController?.associateElement?.(this);
     }
   }
@@ -145,7 +149,10 @@ class MediaPreviewThumbnail extends window.HTMLElement {
 }
 
 if (!window.customElements.get('media-preview-thumbnail')) {
-  window.customElements.define('media-preview-thumbnail', MediaPreviewThumbnail);
+  window.customElements.define(
+    'media-preview-thumbnail',
+    MediaPreviewThumbnail
+  );
 }
 
 export default MediaPreviewThumbnail;
diff --git a/src/js/media-preview-time-display.js b/src/js/media-preview-time-display.js
index 48e0d6b95..94c86d408 100644
--- a/src/js/media-preview-time-display.js
+++ b/src/js/media-preview-time-display.js
@@ -31,7 +31,10 @@ class MediaPreviewTimeDisplay extends MediaTextDisplay {
 }
 
 if (!window.customElements.get('media-preview-time-display')) {
-  window.customElements.define('media-preview-time-display', MediaPreviewTimeDisplay);
+  window.customElements.define(
+    'media-preview-time-display',
+    MediaPreviewTimeDisplay
+  );
 }
 
 export default MediaPreviewTimeDisplay;

From f1169223a6c155380870796678dbb18e4fbf49da Mon Sep 17 00:00:00 2001
From: Adam Jaggard <ajaggard@mux.com>
Date: Thu, 11 May 2023 15:33:08 +0100
Subject: [PATCH 2/5] poster image props

---
 src/js/media-poster-image.js | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/src/js/media-poster-image.js b/src/js/media-poster-image.js
index 96266a315..a0ca8e2a7 100644
--- a/src/js/media-poster-image.js
+++ b/src/js/media-poster-image.js
@@ -1,4 +1,5 @@
 import { window, document } from './utils/server-safe-globals.js';
+import { getStringAttr, setStringAttr } from './utils/element-utils.js';
 
 export const Attributes = {
   PLACEHOLDER_SRC: 'placeholdersrc',
@@ -82,6 +83,28 @@ class MediaPosterImage extends window.HTMLElement {
       }
     }
   }
+
+  /**
+   * @type {string | undefined}
+   */
+  get placeholderSrc() {
+    return getStringAttr(this, Attributes.PLACEHOLDER_SRC);
+  }
+
+  set placeholderSrc(value) {
+    setStringAttr(this, Attributes.SRC, value);
+  }
+
+  /**
+   * @type {string | undefined}
+   */
+  get src() {
+    return getStringAttr(this, Attributes.SRC);
+  }
+
+  set src(value) {
+    setStringAttr(this, Attributes.SRC, value);
+  }
 }
 
 if (!window.customElements.get('media-poster-image')) {

From 16cfe74a88ffdacf56b239e282c3fe785e834741 Mon Sep 17 00:00:00 2001
From: Adam Jaggard <ajaggard@mux.com>
Date: Thu, 11 May 2023 15:51:45 +0100
Subject: [PATCH 3/5] preview thumb props

---
 src/js/media-preview-thumbnail.js | 54 ++++++++++++++++++++++++-------
 1 file changed, 42 insertions(+), 12 deletions(-)

diff --git a/src/js/media-preview-thumbnail.js b/src/js/media-preview-thumbnail.js
index 56b60f733..320fc455d 100644
--- a/src/js/media-preview-thumbnail.js
+++ b/src/js/media-preview-thumbnail.js
@@ -3,7 +3,11 @@ import {
   MediaUIAttributes,
   MediaStateReceiverAttributes,
 } from './constants.js';
-import { getOrInsertCSSRule } from './utils/element-utils.js';
+import {
+  getOrInsertCSSRule,
+  getStringAttr,
+  setStringAttr,
+} from './utils/element-utils.js';
 
 const template = document.createElement('template');
 template.innerHTML = /*html*/ `
@@ -93,19 +97,45 @@ class MediaPreviewThumbnail extends window.HTMLElement {
     }
   }
 
+  /**
+   * @type {string | undefined} The url of the preview image
+   */
+  get mediaPreviewImage() {
+    return getStringAttr(this, MediaUIAttributes.MEDIA_PREVIEW_IMAGE);
+  }
+
+  set mediaPreviewImage(value) {
+    setStringAttr(this, MediaUIAttributes.MEDIA_PREVIEW_IMAGE, value);
+  }
+
+  /**
+   * @type {Array<number> | undefined} Fixed length array [x, y, width, height] or undefined
+   */
+  get mediaPreviewCoords() {
+    const attrVal = this.getAttribute(MediaUIAttributes.MEDIA_PREVIEW_COORDS);
+
+    if (!attrVal) return undefined;
+
+    return attrVal.split(/\s+/).map((coord) => +coord);
+  }
+
+  set mediaPreviewCoords(value) {
+    if (!value) {
+      this.removeAttribute(MediaUIAttributes.MEDIA_PREVIEW_COORDS);
+      return;
+    }
+
+    this.setAttribute(MediaUIAttributes.MEDIA_PREVIEW_COORDS, value.join(' '));
+  }
+
   update() {
-    const mediaPreviewCoordsStr = this.getAttribute(
-      MediaUIAttributes.MEDIA_PREVIEW_COORDS
-    );
-    const mediaPreviewImage = this.getAttribute(
-      MediaUIAttributes.MEDIA_PREVIEW_IMAGE
-    );
-    if (!(mediaPreviewCoordsStr && mediaPreviewImage)) return;
+    const coords = this.mediaPreviewCoords;
+    const previewImage = this.mediaPreviewImage;
+
+    if (!(coords && previewImage)) return;
 
-    const [x, y, w, h] = mediaPreviewCoordsStr
-      .split(/\s+/)
-      .map((coord) => +coord);
-    const src = mediaPreviewImage.split('#')[0];
+    const [x, y, w, h] = coords;
+    const src = previewImage.split('#')[0];
 
     const computedStyle = getComputedStyle(this);
     const { maxWidth, maxHeight, minWidth, minHeight } = computedStyle;

From 196aaecef2373cac813abcadf1f2fd10f5f798e2 Mon Sep 17 00:00:00 2001
From: Adam Jaggard <ajaggard@mux.com>
Date: Thu, 11 May 2023 15:54:35 +0100
Subject: [PATCH 4/5] preview time display props

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

diff --git a/src/js/media-preview-time-display.js b/src/js/media-preview-time-display.js
index 94c86d408..b582a14dd 100644
--- a/src/js/media-preview-time-display.js
+++ b/src/js/media-preview-time-display.js
@@ -2,6 +2,7 @@ import MediaTextDisplay from './media-text-display.js';
 import { window } from './utils/server-safe-globals.js';
 import { formatTime } from './utils/time.js';
 import { MediaUIAttributes } from './constants.js';
+import { getNumericAttr, setNumericAttr } from './utils/element-utils.js';
 // Todo: Use data locals: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString
 
 /**
@@ -10,6 +11,7 @@ import { MediaUIAttributes } from './constants.js';
  * @cssproperty [--media-preview-time-display-display = inline-flex] - `display` property of display.
  */
 class MediaPreviewTimeDisplay extends MediaTextDisplay {
+  /** @type {HTMLSlotElement} */
   #slot;
 
   static get observedAttributes() {
@@ -28,6 +30,17 @@ class MediaPreviewTimeDisplay extends MediaTextDisplay {
     }
     super.attributeChangedCallback(attrName, oldValue, newValue);
   }
+
+  /**
+   * @type {number | undefined} Timeline preview time
+   */
+  get mediaPreviewTime() {
+    return getNumericAttr(this, MediaUIAttributes.MEDIA_PREVIEW_TIME);
+  }
+
+  set mediaPreviewTime(value) {
+    setNumericAttr(this, MediaUIAttributes.MEDIA_PREVIEW_TIME, value);
+  }
 }
 
 if (!window.customElements.get('media-preview-time-display')) {

From 2f2b3ccee2295a6527b038b33994e0f747c3655c Mon Sep 17 00:00:00 2001
From: Adam Jaggard <ajaggard@mux.com>
Date: Thu, 11 May 2023 20:50:02 +0100
Subject: [PATCH 5/5] move ts-ignore

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

diff --git a/src/js/media-preview-thumbnail.js b/src/js/media-preview-thumbnail.js
index 320fc455d..8e240ccac 100644
--- a/src/js/media-preview-thumbnail.js
+++ b/src/js/media-preview-thumbnail.js
@@ -62,8 +62,8 @@ class MediaPreviewThumbnail extends window.HTMLElement {
       MediaStateReceiverAttributes.MEDIA_CONTROLLER
     );
     if (mediaControllerId) {
-      // @ts-ignore
       this.#mediaController =
+        // @ts-ignore
         this.getRootNode()?.getElementById(mediaControllerId);
       this.#mediaController?.associateElement?.(this);
     }