fix: use separate title + message in labels

src/js/labels/labels.ts

@@ -3,10 +3,22 @@ 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: 'Network Error: A network error caused the media download to fail.',
-  3: 'Decode Error: A media error caused playback to be aborted. The media could be corrupt or your browser does not support this format.',
-  4: 'Source Not Supported: An unsupported error occurred. The server or network failed, or your browser does not support this format.',
-  5: 'Encryption Error: The media is encrypted and there are no keys to decrypt it.',
+  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 const tooltipLabels = {

src/js/media-error-dialog.ts

@@ -45,16 +45,12 @@ function shouldOpenErrorDialog(errorCode?: number) {
 }
 
 function formatErrorMessage(error: MediaErrorLike) {
-  const message: string = errors[error.code] ?? error.message ?? '';
-  const parts = message.split(':', 2);
-
-  if (parts.length === 2) {
-    return /*html*/ `
-      <h3>${parts[0]}</h3>
-      <p>${parts[1]}</p>
-    `;
-  }
-  return /*html*/ `<p>${message}</p> `;
+  const title: string = errors[error.code]?.title ?? '';
+  const message: string = errors[error.code]?.message ?? error.message ?? '';
+  let html = '';
+  if (title) html += `<h3>${title}</h3>`;
+  if (message) html += `<p>${message}</p>`;
+  return html;
 }
 
 const observedAttributes: string[] = [