fix: add error object to formatErrorMessage

package.json

@@ -163,7 +163,8 @@
     ],
     "rules": {
       "@typescript-eslint/ban-ts-comment": "off",
-      "@typescript-eslint/no-explicit-any": "off"
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/no-unused-vars": ["error", { "argsIgnorePattern": "^_" }]
     },
     "parserOptions": {
       "ecmaVersion": 2022,

src/js/constants.ts

@@ -46,6 +46,7 @@ export const MediaUIProps = {
   MEDIA_CURRENT_TIME: 'mediaCurrentTime',
   MEDIA_DURATION: 'mediaDuration',
   MEDIA_ENDED: 'mediaEnded',
+  MEDIA_ERROR: 'mediaError',
   MEDIA_ERROR_CODE: 'mediaErrorCode',
   MEDIA_ERROR_MESSAGE: 'mediaErrorMessage',
   MEDIA_FULLSCREEN_UNAVAILABLE: 'mediaFullscreenUnavailable',

src/js/media-chrome-dialog.ts

@@ -8,7 +8,6 @@ import {
 } from './utils/element-utils.js';
 import { InvokeEvent } from './utils/events.js';
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 function getTemplateHTML(_attrs: Record<string, string>) {
   return /*html*/ `
     <style>
@@ -56,7 +55,6 @@ function getTemplateHTML(_attrs: Record<string, string>) {
   `;
 }
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 function getSlotTemplateHTML(_attrs: Record<string, string>) {
   return /*html*/ `
     <slot id="content"></slot>

src/js/media-error-dialog.ts

@@ -38,7 +38,7 @@ function shouldOpenErrorDialog(errorCode?: number) {
   return errorCode && errors[errorCode] !== null;
 }
 
-function formatErrorMessage(errorCode?: number, errorMessage?: string) {
+function formatErrorMessage(errorCode?: number, errorMessage?: string, _error?: any) {
   const message: string = errors[errorCode] ?? errorMessage ?? '';
   const parts = message.split(':', 2);
 
@@ -70,6 +70,8 @@ class MediaErrorDialog extends MediaChromeDialog {
     return [...super.observedAttributes, ...observedAttributes];
   }
 
+  #mediaError = null;
+
   attributeChangedCallback(attrName: string, oldValue: string | null, newValue: string | null) {
     super.attributeChangedCallback(attrName, oldValue, newValue);
 
@@ -82,10 +84,18 @@ class MediaErrorDialog extends MediaChromeDialog {
       this.shadowRoot.querySelector('slot').name = `error-${this.mediaErrorCode}`;
       this.shadowRoot.querySelector('#content').innerHTML = (
         this.constructor as typeof MediaErrorDialog
-      ).formatErrorMessage(this.mediaErrorCode, this.mediaErrorMessage);
+      ).formatErrorMessage(this.mediaErrorCode, this.mediaErrorMessage, this.mediaError);
     }
   }
 
+  get mediaError() {
+    return this.#mediaError;
+  }
+
+  set mediaError(value) {
+    this.#mediaError = value;
+  }
+
   get mediaErrorCode() {
     return getNumericAttr(this, 'mediaerrorcode');
   }

src/js/media-store/state-mediator.ts

@@ -196,6 +196,7 @@ export type FacadeProp<T, S = T, D = T> = ReadonlyFacadeProp<T, D> & {
 export type StateMediator = {
   mediaErrorCode: ReadonlyFacadeProp<MediaError['code']>;
   mediaErrorMessage: ReadonlyFacadeProp<MediaError['message']>;
+  mediaError: ReadonlyFacadeProp<MediaError>;
   mediaWidth: ReadonlyFacadeProp<number>;
   mediaHeight: ReadonlyFacadeProp<number>;
   mediaPaused: FacadeProp<HTMLMediaElement['paused']>;
@@ -286,6 +287,15 @@ export const prepareStateOwners = async (
 };
 
 export const stateMediator: StateMediator = {
+  mediaError: {
+    get(stateOwners) {
+      const { media } = stateOwners;
+      // Add additional error info via the `mediaError` element property only.
+      // This can be used in the MediaErrorDialog.formatErrorMessage() method.
+      return media?.error;
+    },
+    mediaEvents: ['emptied', 'error'],
+  },
   mediaErrorCode: {
     get(stateOwners) {
       const { media } = stateOwners;

src/js/media-store/util.ts

@@ -85,6 +85,8 @@ export const toggleSubtitleTracks = (stateOwners, force: boolean): void => {
 export const areValuesEq = (x: any, y: any): boolean => {
   // If both are strictly equal, they're equal
   if (x === y) return true;
+  // If either is null, they're not equal
+  if (x == null || y == null) return false;
   // If their types don't match, they're not equal
   if (typeof x !== typeof y) return false;
   // Treat NaNs as equal

src/js/utils/server-safe-globals.ts

@@ -29,12 +29,7 @@ const documentShim = {
   },
   addEventListener() { },
   removeEventListener() { },
-  /**
-   *
-   * @param {Event} event
-   * @returns {boolean}
-   */
-  dispatchEvent(event /* eslint-disable-line @typescript-eslint/no-unused-vars */) {
+  dispatchEvent(_event: Event) {
     return false;
   },
 } as unknown as typeof globalThis['document'];
@@ -57,22 +52,11 @@ const globalThisShim = {
     whenDefined: function () { },
   },
   localStorage: {
-    /**
-     * @param {string} key
-     * @returns {string|null}
-     */
-    getItem(key /* eslint-disable-line @typescript-eslint/no-unused-vars */) {
+    getItem(_key: string) {
       return null;
     },
-    /**
-     * @param {string} key
-     * @param {string} value
-     */
-    setItem(key, value) { }, // eslint-disable-line @typescript-eslint/no-unused-vars
-    /**
-     * @param {string} key
-     */
-    removeItem(key) { }, // eslint-disable-line @typescript-eslint/no-unused-vars
+    setItem(_key: string, _value: string) { },
+    removeItem(_key: string) { },
   },
   CustomEvent: function CustomEvent() { },
   getComputedStyle: function () { },
@@ -82,10 +66,7 @@ const globalThisShim = {
       return '';
     },
   },
-  /**
-   * @param {string} media
-   */
-  matchMedia(media) {
+  matchMedia(media: string) {
     return {
       matches: false,
       media,

test/unit/media-store/util.spec.ts

@@ -0,0 +1,67 @@
+import { assert } from '@open-wc/testing';
+import { areValuesEq } from '../../../src/js/media-store/util.js';
+
+describe('areValuesEq', () => {
+  it('returns false on different nil values', () => {
+    assert(!areValuesEq(null, undefined));
+  });
+
+  it('returns true on equal nil values', () => {
+    assert(areValuesEq(null, null));
+    assert(areValuesEq(undefined, undefined));
+  });
+
+  it('returns false on different types', () => {
+    assert(!areValuesEq(1, '1'));
+  });
+
+  it('returns false on different values', () => {
+    assert(!areValuesEq(1, 2));
+  });
+
+  it('returns true on equal values', () => {
+    assert(areValuesEq(1, 1));
+  });
+
+  it('returns true on equal NaN values', () => {
+    assert(areValuesEq(NaN, NaN));
+  });
+
+  it('returns false on different number values', () => {
+    assert(!areValuesEq(NaN, 1));
+  });
+
+  it('returns false on different array lengths', () => {
+    assert(!areValuesEq([1], [1, 2]));
+  });
+
+  it('returns false on different array values', () => {
+    assert(!areValuesEq([1], [2]));
+  });
+
+  it('returns true on equal array values', () => {
+    assert(areValuesEq([1], [1]));
+  });
+
+  it('returns false on different object values', () => {
+    assert(!areValuesEq({ a: 1 }, { a: 2 }));
+  });
+
+  it('returns true on equal object values', () => {
+    assert(areValuesEq({ a: 1 }, { a: 1 }));
+  });
+
+  it('returns false on different object keys', () => {
+    assert(!areValuesEq({ a: 1 }, { b: 1 }));
+  });
+
+  it('returns false on different object key values', () => {
+    assert(!areValuesEq({ a: 1 }, { a: 2 }));
+    assert(!areValuesEq({ a: 1 }, null));
+    assert(!areValuesEq(null, { a: 2 }));
+  });
+
+  it('returns false on different object key types', () => {
+    assert(!areValuesEq({ a: 1 }, { a: '1' }));
+  });
+});