From f05f25af0c42e7ff8738a9da31faae2e54d0e777 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

(cherry picked from commit 8fbbe21d814ccdeda7727b5fb83f99ea81f5b225)
---
 frontend/src/MovieFile/MediaInfo.js           |  2 +-
 .../src/Utilities/String/getLanguageName.js   | 27 ------------
 .../src/Utilities/String/getLanguageName.ts   | 41 +++++++++++++++++++
 3 files changed, 42 insertions(+), 28 deletions(-)
 delete mode 100644 frontend/src/Utilities/String/getLanguageName.js
 create mode 100644 frontend/src/Utilities/String/getLanguageName.ts

diff --git a/frontend/src/MovieFile/MediaInfo.js b/frontend/src/MovieFile/MediaInfo.js
index 9aa4d1d7f..b622c1706 100644
--- a/frontend/src/MovieFile/MediaInfo.js
+++ b/frontend/src/MovieFile/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 db957e643..000000000
--- a/frontend/src/Utilities/String/getLanguageName.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import createAjaxRequest from 'Utilities/createAjaxRequest';
-
-function getTranslations() {
-  return createAjaxRequest({
-    global: false,
-    dataType: 'json',
-    url: '/localization/language'
-  }).request;
-}
-
-let languageNames = new Intl.DisplayNames(['en'], { type: 'language' });
-
-getTranslations().then((data) => {
-  const names = new Intl.DisplayNames([data.identifier], { type: 'language' });
-
-  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;
+  }
+}