From 2fc9a4d47e476fc1bb591c35f64291e6774f498e Mon Sep 17 00:00:00 2001
From: Wesley Luyten <me@wesleyluyten.com>
Date: Wed, 4 Dec 2024 14:13:36 -0600
Subject: [PATCH] fix: use separate title + message in labels

---
 src/js/labels/labels.ts      | 20 ++++++++++++++++----
 src/js/media-error-dialog.ts | 16 ++++++----------
 2 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/src/js/labels/labels.ts b/src/js/labels/labels.ts
index 9d73d4229..297b62184 100644
--- a/src/js/labels/labels.ts
+++ b/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 = {
diff --git a/src/js/media-error-dialog.ts b/src/js/media-error-dialog.ts
index ae4967ed3..2693d9d97 100644
--- a/src/js/media-error-dialog.ts
+++ b/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[] = [