fix: use format error fn / fallback error title

examples/vanilla/control-elements/media-error-dialog.html

@@ -73,7 +73,7 @@ <h2>Custom error code for custom media elements</h2>
     <script>
       function setError() {
         const video = document.querySelector('custom-video');
-        const customError = new Error('Custom Error: This is a custom error!');
+        const customError = new Error('This is a custom error with code 42!');
         customError.code = 42;
         video.error = customError;
         video.dispatchEvent(new Event('error'));
@@ -96,7 +96,8 @@ <h2>Error 5 (MEDIA_ERR_ENCRYPTED)</h2>
 
       <h2>Error 2 with custom message via <code>error-2</code> slot</h2>
       <media-error-dialog mediaerrorcode="2">
-        <div slot="error-2">This is a custom message</div>
+        <h3 slot="error-2">Custom Error 2</h3>
+        <p slot="error-2">This is a custom message</p>
       </media-error-dialog>
     </div>
 

src/js/labels/labels.ts

@@ -1,26 +1,34 @@
 export type LabelOptions = { seekOffset?: number; playbackRate?: number };
 
-// Setting a code explicitely to null makes the error not show up in the UI.
-export const errors = {
-  1: null,
-  2: {
-    title: 'Network Error',
-    message: 'A network error caused the media download to fail.',
-  },
-  3: {
-    title: 'Decode Error',
-    message: 'A media error caused playback to be aborted. The media could be corrupt or your browser does not support this format.',
-  },
-  4: {
-    title: 'Source Not Supported',
-    message: 'An unsupported error occurred. The server or network failed, or your browser does not support this format.',
-  },
-  5: {
-    title: 'Encryption Error',
-    message: 'The media is encrypted and there are no keys to decrypt it.',
-  },
+export type MediaErrorLike = {
+  code: number;
+  message: string;
+  [key: string]: any;
 };
 
+const defaultErrorTitles = {
+  2: 'Network Error',
+  3: 'Decode Error',
+  4: 'Source Not Supported',
+  5: 'Encryption Error',
+};
+
+const defaultErrorMessages = {
+  2: 'A network error caused the media download to fail.',
+  3: 'A media error caused playback to be aborted. The media could be corrupt or your browser does not support this format.',
+  4: 'An unsupported error occurred. The server or network failed, or your browser does not support this format.',
+  5: 'The media is encrypted and there are no keys to decrypt it.',
+};
+
+// Returning null makes the error not show up in the UI.
+export const formatError = (error: MediaErrorLike) => {
+  if (error.code === 1) return null;
+  return {
+    title: defaultErrorTitles[error.code] ?? `Error ${error.code}`,
+    message: defaultErrorMessages[error.code] ?? error.message
+  };
+}
+
 export const tooltipLabels = {
   ENTER_AIRPLAY: 'Start airplay',
   EXIT_AIRPLAY: 'Stop airplay',

src/js/media-error-dialog.ts

@@ -1,6 +1,6 @@
 import { globalThis } from './utils/server-safe-globals.js';
 import { MediaUIAttributes } from './constants.js';
-import { errors } from './labels/labels.js';
+import { formatError } from './labels/labels.js';
 import { MediaChromeDialog } from './media-chrome-dialog.js';
 import {
   getNumericAttr,
@@ -38,13 +38,12 @@ function getSlotTemplateHTML(attrs: Record<string, string>) {
   `;
 }
 
-function shouldOpenErrorDialog(errorCode?: number) {
-  return errorCode && errors[errorCode] !== null;
+function shouldOpenErrorDialog(error: MediaErrorLike) {
+  return formatError(error) !== null;
 }
 
 function formatErrorMessage(error: MediaErrorLike) {
-  const title: string = errors[error.code]?.title ?? '';
-  const message: string = errors[error.code]?.message ?? error.message ?? '';
+  const { title, message } = formatError(error) ?? {};
   let html = '';
   if (title) html += `<h3>${title}</h3>`;
   if (message) html += `<p>${message}</p>`;
@@ -82,16 +81,16 @@ class MediaErrorDialog extends MediaChromeDialog {
     // Add this conditional to prevent endless loop by setting the open attribute.
     if (!observedAttributes.includes(attrName)) return;
 
-    this.open = shouldOpenErrorDialog(this.mediaErrorCode);
+    const mediaError = this.mediaError ?? {
+      code: this.mediaErrorCode,
+      message: this.mediaErrorMessage,
+    };
+
+    this.open = shouldOpenErrorDialog(mediaError);
 
     if (this.open) {
       this.shadowRoot.querySelector('slot').name = `error-${this.mediaErrorCode}`;
-      this.shadowRoot.querySelector('#content').innerHTML = this.formatErrorMessage(
-        this.mediaError ?? {
-          code: this.mediaErrorCode,
-          message: this.mediaErrorMessage,
-        }
-      );
+      this.shadowRoot.querySelector('#content').innerHTML = this.formatErrorMessage(mediaError);
     }
   }