From 8fbbe21d814ccdeda7727b5fb83f99ea81f5b225 Mon Sep 17 00:00:00 2001
From: Mark McDowall <mark@mcdowall.ca>
Date: Sat, 19 Aug 2023 23:48:05 -0700
Subject: [PATCH] Fixed: Invalid audio language leading to UI error

Closes #5702
---
 frontend/src/EpisodeFile/MediaInfo.js         |  2 +-
 .../src/Utilities/String/getLanguageName.js   | 33 ---------------
 .../src/Utilities/String/getLanguageName.ts   | 41 +++++++++++++++++++
 3 files changed, 42 insertions(+), 34 deletions(-)
 delete mode 100644 frontend/src/Utilities/String/getLanguageName.js
 create mode 100644 frontend/src/Utilities/String/getLanguageName.ts

diff --git a/frontend/src/EpisodeFile/MediaInfo.js b/frontend/src/EpisodeFile/MediaInfo.js
index 562a720b7..59f6ffcfd 100644
--- a/frontend/src/EpisodeFile/MediaInfo.js
+++ b/frontend/src/EpisodeFile/MediaInfo.js
@@ -9,7 +9,7 @@ function formatLanguages(languages) {
     return null;
   }
 
-  const splitLanguages = _.uniq(languages.split('/')).map((l) => getLanguageName(l));
+  const splitLanguages = _.uniq(languages.split('/')).map((l) => getLanguageName(l.split('_')[0]));
 
   if (splitLanguages.length > 3) {
     return (
diff --git a/frontend/src/Utilities/String/getLanguageName.js b/frontend/src/Utilities/String/getLanguageName.js
deleted file mode 100644
index 67bd2fe37..000000000
--- a/frontend/src/Utilities/String/getLanguageName.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import createAjaxRequest from 'Utilities/createAjaxRequest';
-
-function getLanguage() {
-  return createAjaxRequest({
-    global: false,
-    dataType: 'json',
-    url: '/localization/language'
-  }).request;
-}
-
-function getDisplayName(code) {
-  return Intl.DisplayNames ?
-    new Intl.DisplayNames([code], { type: 'language' }) :
-    null;
-}
-
-let languageNames = getDisplayName('en');
-
-getLanguage().then((data) => {
-  const names = getDisplayName(data.identifier);
-
-  if (names) {
-    languageNames = names;
-  }
-});
-
-export default function getLanguageName(code) {
-  if (!languageNames) {
-    return code;
-  }
-
-  return languageNames.of(code) ?? code;
-}
diff --git a/frontend/src/Utilities/String/getLanguageName.ts b/frontend/src/Utilities/String/getLanguageName.ts
new file mode 100644
index 000000000..bf1b5451e
--- /dev/null
+++ b/frontend/src/Utilities/String/getLanguageName.ts
@@ -0,0 +1,41 @@
+import createAjaxRequest from 'Utilities/createAjaxRequest';
+
+interface LanguageResponse {
+  identifier: string;
+}
+
+function getLanguage() {
+  return createAjaxRequest({
+    global: false,
+    dataType: 'json',
+    url: '/localization/language',
+  }).request;
+}
+
+function getDisplayName(code: string) {
+  return Intl.DisplayNames
+    ? new Intl.DisplayNames([code], { type: 'language' })
+    : null;
+}
+
+let languageNames = getDisplayName('en');
+
+getLanguage().then((data: LanguageResponse) => {
+  const names = getDisplayName(data.identifier);
+
+  if (names) {
+    languageNames = names;
+  }
+});
+
+export default function getLanguageName(code: string) {
+  if (!languageNames) {
+    return code;
+  }
+
+  try {
+    return languageNames.of(code) ?? code;
+  } catch (error) {
+    return code;
+  }
+}