Add support for 3 letter language codes

and fallback to label specified in playlist

package.json

@@ -53,6 +53,7 @@
     "hls.js": "^1.5.15",
     "i18next": "^23.15.1",
     "immer": "^10.1.1",
+    "iso-639-3": "^3.0.1",
     "jwt-decode": "^4.0.0",
     "lodash.isequal": "^4.5.0",
     "lodash.merge": "^4.6.2",

pnpm-lock.yaml

@@ -93,6 +93,9 @@ importers:
       immer:
         specifier: ^10.1.1
         version: 10.1.1
+      iso-639-3:
+        specifier: ^3.0.1
+        version: 3.0.1
       jwt-decode:
         specifier: ^4.0.0
         version: 4.0.0
@@ -291,7 +294,7 @@ importers:
         version: 0.5.14(prettier@3.3.3)
       rollup-plugin-visualizer:
         specifier: ^5.12.0
-        version: 5.12.0(@rollup/wasm-node@4.32.1)
+        version: 5.12.0(@rollup/wasm-node@4.34.6)
       tailwind-scrollbar:
         specifier: ^3.1.0
         version: 3.1.0(tailwindcss@3.4.12)
@@ -1327,8 +1330,8 @@ packages:
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
     hasBin: true
 
-  '@rollup/wasm-node@4.32.1':
+  '@rollup/wasm-node@4.34.6':
-    resolution: {integrity: sha512-uRPAWjmJRKS5pLGIy6ZCf+wVMjwkt6FSLBl3uv5GIda5UYY+XEemeJxl0+/D8ZBWbLTap+Nlx7/9FiJU56Baog==}
+    resolution: {integrity: sha512-ox1r6gJiOoyuma9h02LMtMtkyjBvYx3PezgTIk5SL+7Nn1pX0foieMHKDoRw510R8qZ/V2brd/7kQYVda+EDMg==}
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
     hasBin: true
 
@@ -2712,6 +2715,9 @@ packages:
     resolution: {integrity: sha512-1jz0Wh9hyLMRwqEPchb/KZCiTqfFWtc9R3nm7GHPygBAKS8wdKJ3FH4lvLsri6UtAE5Kz5SnowtXZa//6bqMyw==}
     engines: {node: '>=6.0'}
 
+  iso-639-3@3.0.1:
+    resolution: {integrity: sha512-SdljCYXOexv/JmbQ0tvigHN43yECoscVpe2y2hlEqy/CStXQlroPhZLj7zKLRiGqLJfw8k7B973UAMDoQczVgQ==}
+
   iterator.prototype@1.1.2:
     resolution: {integrity: sha512-DR33HMMr8EzwuRL8Y9D3u2BMj8+RqSE850jfGu59kS7tbmPLzGkZmVSfyCFSDxuZiEY6Rzt3T2NA/qU+NwVj1w==}
 
@@ -5368,55 +5374,55 @@ snapshots:
 
   '@remix-run/router@1.19.2': {}
 
-  '@rollup/plugin-babel@5.3.1(@babel/core@7.25.2)(@rollup/wasm-node@4.32.1)(@types/babel__core@7.20.5)':
+  '@rollup/plugin-babel@5.3.1(@babel/core@7.25.2)(@rollup/wasm-node@4.34.6)(@types/babel__core@7.20.5)':
     dependencies:
       '@babel/core': 7.25.2
       '@babel/helper-module-imports': 7.24.7
-      '@rollup/pluginutils': 3.1.0(@rollup/wasm-node@4.32.1)
+      '@rollup/pluginutils': 3.1.0(@rollup/wasm-node@4.34.6)
-      rollup: '@rollup/wasm-node@4.32.1'
+      rollup: '@rollup/wasm-node@4.34.6'
     optionalDependencies:
       '@types/babel__core': 7.20.5
     transitivePeerDependencies:
       - supports-color
 
-  '@rollup/plugin-node-resolve@15.2.4(@rollup/wasm-node@4.32.1)':
+  '@rollup/plugin-node-resolve@15.2.4(@rollup/wasm-node@4.34.6)':
     dependencies:
-      '@rollup/pluginutils': 5.1.1(@rollup/wasm-node@4.32.1)
+      '@rollup/pluginutils': 5.1.1(@rollup/wasm-node@4.34.6)
       '@types/resolve': 1.20.2
       deepmerge: 4.3.1
       is-module: 1.0.0
       resolve: 1.22.8
     optionalDependencies:
-      rollup: '@rollup/wasm-node@4.32.1'
+      rollup: '@rollup/wasm-node@4.34.6'
 
-  '@rollup/plugin-replace@2.4.2(@rollup/wasm-node@4.32.1)':
+  '@rollup/plugin-replace@2.4.2(@rollup/wasm-node@4.34.6)':
     dependencies:
-      '@rollup/pluginutils': 3.1.0(@rollup/wasm-node@4.32.1)
+      '@rollup/pluginutils': 3.1.0(@rollup/wasm-node@4.34.6)
       magic-string: 0.25.9
-      rollup: '@rollup/wasm-node@4.32.1'
+      rollup: '@rollup/wasm-node@4.34.6'
 
-  '@rollup/plugin-terser@0.4.4(@rollup/wasm-node@4.32.1)':
+  '@rollup/plugin-terser@0.4.4(@rollup/wasm-node@4.34.6)':
     dependencies:
       serialize-javascript: 6.0.2
       smob: 1.5.0
       terser: 5.33.0
     optionalDependencies:
-      rollup: '@rollup/wasm-node@4.32.1'
+      rollup: '@rollup/wasm-node@4.34.6'
 
-  '@rollup/pluginutils@3.1.0(@rollup/wasm-node@4.32.1)':
+  '@rollup/pluginutils@3.1.0(@rollup/wasm-node@4.34.6)':
     dependencies:
       '@types/estree': 0.0.39
       estree-walker: 1.0.1
       picomatch: 2.3.1
-      rollup: '@rollup/wasm-node@4.32.1'
+      rollup: '@rollup/wasm-node@4.34.6'
 
-  '@rollup/pluginutils@5.1.1(@rollup/wasm-node@4.32.1)':
+  '@rollup/pluginutils@5.1.1(@rollup/wasm-node@4.34.6)':
     dependencies:
       '@types/estree': 1.0.6
       estree-walker: 2.0.2
       picomatch: 2.3.1
     optionalDependencies:
-      rollup: '@rollup/wasm-node@4.32.1'
+      rollup: '@rollup/wasm-node@4.34.6'
 
   '@rollup/wasm-node@4.22.4':
     dependencies:
@@ -5424,7 +5430,7 @@ snapshots:
     optionalDependencies:
       fsevents: 2.3.3
 
-  '@rollup/wasm-node@4.32.1':
+  '@rollup/wasm-node@4.34.6':
     dependencies:
       '@types/estree': 1.0.6
     optionalDependencies:
@@ -7082,6 +7088,8 @@ snapshots:
 
   iso-639-1@3.1.3: {}
 
+  iso-639-3@3.0.1: {}
+
   iterator.prototype@1.1.2:
     dependencies:
       define-properties: 1.2.1
@@ -7273,7 +7281,7 @@ snapshots:
       '@babel/plugin-syntax-typescript': 7.25.4(@babel/core@7.25.2)
       '@babel/types': 7.25.6
       kleur: 4.1.5
-      rollup: '@rollup/wasm-node@4.32.1'
+      rollup: '@rollup/wasm-node@4.34.6'
       unplugin: 1.14.1(webpack-sources@3.2.3)
     transitivePeerDependencies:
       - supports-color
@@ -7773,14 +7781,14 @@ snapshots:
     dependencies:
       glob: 7.2.3
 
-  rollup-plugin-visualizer@5.12.0(@rollup/wasm-node@4.32.1):
+  rollup-plugin-visualizer@5.12.0(@rollup/wasm-node@4.34.6):
     dependencies:
       open: 8.4.2
       picomatch: 2.3.1
       source-map: 0.7.4
       yargs: 17.7.2
     optionalDependencies:
-      rollup: '@rollup/wasm-node@4.32.1'
+      rollup: '@rollup/wasm-node@4.34.6'
 
   rrweb-cssom@0.6.0: {}
 
@@ -8346,7 +8354,7 @@ snapshots:
     dependencies:
       esbuild: 0.21.5
       postcss: 8.4.47
-      rollup: '@rollup/wasm-node@4.32.1'
+      rollup: '@rollup/wasm-node@4.34.6'
     optionalDependencies:
       '@types/node': 20.16.5
       fsevents: 2.3.3
@@ -8510,10 +8518,10 @@ snapshots:
       '@babel/core': 7.25.2
       '@babel/preset-env': 7.25.4(@babel/core@7.25.2)
       '@babel/runtime': 7.25.6
-      '@rollup/plugin-babel': 5.3.1(@babel/core@7.25.2)(@rollup/wasm-node@4.32.1)(@types/babel__core@7.20.5)
+      '@rollup/plugin-babel': 5.3.1(@babel/core@7.25.2)(@rollup/wasm-node@4.34.6)(@types/babel__core@7.20.5)
-      '@rollup/plugin-node-resolve': 15.2.4(@rollup/wasm-node@4.32.1)
+      '@rollup/plugin-node-resolve': 15.2.4(@rollup/wasm-node@4.34.6)
-      '@rollup/plugin-replace': 2.4.2(@rollup/wasm-node@4.32.1)
+      '@rollup/plugin-replace': 2.4.2(@rollup/wasm-node@4.34.6)
-      '@rollup/plugin-terser': 0.4.4(@rollup/wasm-node@4.32.1)
+      '@rollup/plugin-terser': 0.4.4(@rollup/wasm-node@4.34.6)
       '@surma/rollup-plugin-off-main-thread': 2.2.3
       ajv: 8.17.1
       common-tags: 1.8.2
@@ -8522,7 +8530,7 @@ snapshots:
       glob: 7.2.3
       lodash: 4.17.21
       pretty-bytes: 5.6.0
-      rollup: '@rollup/wasm-node@4.32.1'
+      rollup: '@rollup/wasm-node@4.34.6'
       source-map: 0.8.0-beta.0
       stringify-object: 3.3.0
       strip-comments: 2.0.1

src/components/player/atoms/settings/AudioView.tsx

@@ -1,3 +1,4 @@
+import { iso6393To1 } from "iso-639-3";
 import { useCallback } from "react";
 import { useTranslation } from "react-i18next";
 
@@ -53,10 +54,16 @@ export function AudioView({ id }: { id: string }) {
           <AudioOption
             key={v.id}
             selected={v.id === currentAudioTrack?.id}
-            langCode={v.language}
+            langCode={
+              v.language.length === 3
+                ? (iso6393To1[v.language] ?? v.language)
+                : v.language
+            }
             onClick={audioTracks.includes(v) ? () => change(v) : undefined}
           >
-            {getPrettyLanguageNameFromLocale(v.language) ?? unknownChoice}
+            {getPrettyLanguageNameFromLocale(v.language) ??
+              v.label ??
+              unknownChoice}
           </AudioOption>
         ))}
       </Menu.Section>

src/components/player/atoms/settings/SettingsMenu.tsx

@@ -41,6 +41,7 @@ export function SettingsMenu({ id }: { id: string }) {
 
   const selectedAudioLanguagePretty = currentAudioTrack
     ? (getPrettyLanguageNameFromLocale(currentAudioTrack.language) ??
+      currentAudioTrack.label ??
       t("player.menus.subtitles.unknownLanguage"))
     : undefined;
 

src/utils/language.ts

@@ -1,5 +1,6 @@
 import countryLanguages, { LanguageObj } from "@ladjs/country-language";
 import { getTag } from "@sozialhelden/ietf-language-tags";
+import { iso6393To1 } from "iso-639-3";
 
 const languageOrder = ["en", "hi", "fr", "de", "nl", "pt"];
 
@@ -99,7 +100,10 @@ function populateLanguageCode(language: string): string {
  * @returns pretty format for language, null if it no info can be found for language
  */
 export function getPrettyLanguageNameFromLocale(locale: string): string | null {
-  const tag = getTag(locale, true);
+  const tag =
+    locale.length === 3
+      ? getTag(iso6393To1[locale] ?? locale, true)
+      : getTag(locale, true);
   const lang = tag?.language?.Description?.[0] ?? null;
   if (!lang) return null;