From a86b28852d65b3f11509c1a7f87fa54148100a20 Mon Sep 17 00:00:00 2001
From: FinnRG <finngaertner@protonmail.com>
Date: Fri, 26 May 2023 15:30:18 +0200
Subject: [PATCH] feat: Extend language options

---
 VocaDbWeb/Scripts/App.tsx                     |  3 ++
 .../Shared/Partials/Knockout/DropdownList.tsx | 20 +++++--
 .../Shared/Partials/Song/LyricsInfo.tsx       |  6 +--
 .../extendedUserLanguageCultures.ts           | 11 ++++
 VocaDbWeb/Scripts/CultureCodesContext.tsx     | 52 +++++++++++++++++++
 .../Pages/Song/Partials/LyricsForSongEdit.tsx | 26 ++++++++--
 .../Scripts/Pages/Song/SongDetailsRoutes.tsx  |  5 +-
 VocaDbWeb/Scripts/Pages/Song/SongLyrics.tsx   |  5 +-
 VocaDbWeb/Scripts/i18n.ts                     |  2 +-
 VocaDbWeb/package-lock.json                   | 29 ++++++-----
 VocaDbWeb/package.json                        |  1 +
 VocaDbWeb/public/locales/en/ViewRes.Song.json |  1 +
 12 files changed, 132 insertions(+), 29 deletions(-)
 create mode 100644 VocaDbWeb/Scripts/Components/extendedUserLanguageCultures.ts
 create mode 100644 VocaDbWeb/Scripts/CultureCodesContext.tsx

diff --git a/VocaDbWeb/Scripts/App.tsx b/VocaDbWeb/Scripts/App.tsx
index f4401704ea..63d8badde1 100644
--- a/VocaDbWeb/Scripts/App.tsx
+++ b/VocaDbWeb/Scripts/App.tsx
@@ -18,6 +18,8 @@ import React from 'react';
 import { Toaster } from 'react-hot-toast';
 import { BrowserRouter } from 'react-router-dom';
 
+import { CultureCodesProvider } from './CultureCodesContext';
+
 const TetoDB = React.lazy(() => import('./styles/tetoDb'));
 const DarkAngel = React.lazy(() => import('./styles/darkAngel'));
 
@@ -72,6 +74,7 @@ const App = (): React.ReactElement => {
 				NostalgicDivaProvider,
 				VdbPlayerProvider,
 				MutedUsersProvider,
+				CultureCodesProvider,
 			]}
 		>
 			<ScrollToTop />
diff --git a/VocaDbWeb/Scripts/Components/Shared/Partials/Knockout/DropdownList.tsx b/VocaDbWeb/Scripts/Components/Shared/Partials/Knockout/DropdownList.tsx
index 6578801433..64a2b40d58 100644
--- a/VocaDbWeb/Scripts/Components/Shared/Partials/Knockout/DropdownList.tsx
+++ b/VocaDbWeb/Scripts/Components/Shared/Partials/Knockout/DropdownList.tsx
@@ -13,7 +13,7 @@ import { SongListFeaturedCategory } from '@/Models/SongLists/SongListFeaturedCat
 import { UserEmailOptions } from '@/Models/Users/UserEmailOptions';
 import { UserGroup } from '@/Models/Users/UserGroup';
 import { useVdb } from '@/VdbContext';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 let nextEventCategoryOrder = 1;
@@ -119,14 +119,28 @@ export const CultureDropdownList = React.memo(
 	},
 );
 
+interface UserLanguageCultureDropdownListProps extends DropdownListProps {
+	extended?: boolean;
+}
+
 export const UserLanguageCultureDropdownList = React.memo(
-	(props: DropdownListProps): React.ReactElement => {
+	(props: UserLanguageCultureDropdownListProps): React.ReactElement => {
+		const [cultures, setCultures] = useState(userLanguageCultures);
+
+		useEffect(() => {
+			if (props.extended) {
+				import('../../../extendedUserLanguageCultures').then((res) => {
+					setCultures(res.extendedUserLanguageCultures);
+				});
+			}
+		}, [props.extended]);
+
 		return (
 			<select {...props}>
 				{props.placeholder !== undefined && (
 					<option value="">{props.placeholder}</option>
 				)}
-				{Object.entries(userLanguageCultures).map(([key, value]) => (
+				{Object.entries(cultures).map(([key, value]) => (
 					<option value={key} key={key}>
 						{value.nativeName} ({value.englishName /* LOC */})
 					</option>
diff --git a/VocaDbWeb/Scripts/Components/Shared/Partials/Song/LyricsInfo.tsx b/VocaDbWeb/Scripts/Components/Shared/Partials/Song/LyricsInfo.tsx
index 0b96166ec3..07d838b72c 100644
--- a/VocaDbWeb/Scripts/Components/Shared/Partials/Song/LyricsInfo.tsx
+++ b/VocaDbWeb/Scripts/Components/Shared/Partials/Song/LyricsInfo.tsx
@@ -1,4 +1,4 @@
-import { userLanguageCultures } from '@/Components/userLanguageCultures';
+import { useCultureCodes } from '@/CultureCodesContext';
 import { LyricsForSongContract } from '@/DataContracts/Song/LyricsForSongContract';
 import React from 'react';
 
@@ -8,6 +8,7 @@ interface LyricsInfoProps {
 
 export const LyricsInfo = React.memo(
 	({ lyrics }: LyricsInfoProps): React.ReactElement => {
+		const { getCodeDescription } = useCultureCodes();
 		return (
 			<>
 				{lyrics.translationType}
@@ -15,8 +16,7 @@ export const LyricsInfo = React.memo(
 					<>
 						{' '}
 						(
-						{userLanguageCultures[lyrics.cultureCodes[0]]?.englishName ??
-							'Other'}
+						{getCodeDescription(lyrics.cultureCodes[0])?.englishName ?? 'Other'}
 						)
 					</>
 				)}
diff --git a/VocaDbWeb/Scripts/Components/extendedUserLanguageCultures.ts b/VocaDbWeb/Scripts/Components/extendedUserLanguageCultures.ts
new file mode 100644
index 0000000000..eb75a420ef
--- /dev/null
+++ b/VocaDbWeb/Scripts/Components/extendedUserLanguageCultures.ts
@@ -0,0 +1,11 @@
+import { iso6393 } from 'iso-639-3';
+
+export const extendedUserLanguageCultures = Object.fromEntries(
+	iso6393.map((lang) => [
+		lang.iso6391 ?? lang.iso6392B ?? lang.iso6392T ?? lang.iso6393,
+		{
+			englishName: lang.name,
+			nativeName: lang.name,
+		},
+	]),
+);
diff --git a/VocaDbWeb/Scripts/CultureCodesContext.tsx b/VocaDbWeb/Scripts/CultureCodesContext.tsx
new file mode 100644
index 0000000000..3ddef3fbcd
--- /dev/null
+++ b/VocaDbWeb/Scripts/CultureCodesContext.tsx
@@ -0,0 +1,52 @@
+import React, { useEffect, useState } from 'react';
+
+import { userLanguageCultures } from './Components/userLanguageCultures';
+
+type CodeDescription = { englishName: string; nativeName: string };
+type Codes = { [k: string]: CodeDescription };
+
+const CultureCodesContext = React.createContext<Codes | undefined>(undefined);
+
+interface CultureCodesProviderProps {
+	children?: React.ReactNode;
+}
+
+interface CultureCodeTools {
+	codes?: Codes;
+	getCodeDescription: (code: string) => CodeDescription | undefined;
+}
+
+// Lazily loads extendedUserLanguageCultures
+export const CultureCodesProvider = ({
+	children,
+}: CultureCodesProviderProps): React.ReactElement => {
+	const [cultureCodes, setCultureCodes] = useState<Codes | undefined>(
+		undefined,
+	);
+
+	useEffect(() => {
+		import('./Components/extendedUserLanguageCultures').then((resp) =>
+			setCultureCodes(resp.extendedUserLanguageCultures),
+		);
+	}, []);
+
+	return (
+		<CultureCodesContext.Provider value={cultureCodes}>
+			{children}
+		</CultureCodesContext.Provider>
+	);
+};
+
+export const useCultureCodes = (): CultureCodeTools => {
+	const codes = React.useContext(CultureCodesContext);
+
+	const getCodeDescription = (code: string): CodeDescription | undefined => {
+		if (code.length > 2 && code !== 'fil') {
+			return codes === undefined ? undefined : codes[code];
+		}
+
+		return userLanguageCultures[code];
+	};
+
+	return { codes, getCodeDescription };
+};
diff --git a/VocaDbWeb/Scripts/Pages/Song/Partials/LyricsForSongEdit.tsx b/VocaDbWeb/Scripts/Pages/Song/Partials/LyricsForSongEdit.tsx
index a2f5bc0f3b..b6f9aa3b5d 100644
--- a/VocaDbWeb/Scripts/Pages/Song/Partials/LyricsForSongEdit.tsx
+++ b/VocaDbWeb/Scripts/Pages/Song/Partials/LyricsForSongEdit.tsx
@@ -2,14 +2,14 @@ import Accordion from '@/Bootstrap/Accordion';
 import SafeAnchor from '@/Bootstrap/SafeAnchor';
 import { UserLanguageCultureDropdownList } from '@/Components/Shared/Partials/Knockout/DropdownList';
 import { HelpLabel } from '@/Components/Shared/Partials/Shared/HelpLabel';
-import { userLanguageCultures } from '@/Components/userLanguageCultures';
+import { useCultureCodes } from '@/CultureCodesContext';
 import {
 	LyricsForSongEditStore,
 	LyricsForSongListEditStore,
 } from '@/Stores/Song/LyricsForSongListEditStore';
 import { runInAction } from 'mobx';
 import { observer } from 'mobx-react-lite';
-import React from 'react';
+import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 interface LyricsForSongEditProps {
@@ -29,6 +29,12 @@ const LyricsForSongEdit = observer(
 			'ViewRes.Song',
 			'VocaDb.Web.Resources.Domain.Globalization',
 		]);
+		const [languageOptionsExtended, setLanguageOptionsExtended] = useState(
+			lyricsForSongEditStore.cultureCodes.filter(
+				(c) => c.length > 2 && c !== 'fil',
+			).length > 0,
+		);
+		const { getCodeDescription } = useCultureCodes();
 
 		return (
 			<Accordion.Item eventKey={eventKey}>
@@ -43,8 +49,10 @@ const LyricsForSongEdit = observer(
 								{lyricsForSongEditStore.cultureCodes
 									.map(
 										(code) =>
-											userLanguageCultures[code]
-												? `${userLanguageCultures[code].nativeName} (${userLanguageCultures[code].englishName})`
+											getCodeDescription(code)
+												? `${getCodeDescription(code)?.nativeName} (${
+														getCodeDescription(code)?.englishName
+												  })`
 												: 'Other/Unknown' /* LOC */,
 									)
 									.join(' / ')}
@@ -85,6 +93,7 @@ const LyricsForSongEdit = observer(
 																'VocaDb.Web.Resources.Domain.Globalization:InterfaceLanguage.Other',
 															)}
 															value={cultureCode}
+															extended={languageOptionsExtended}
 															onChange={(e): void =>
 																runInAction(() => {
 																	lyricsForSongEditStore.replaceCultureCode(
@@ -126,6 +135,15 @@ const LyricsForSongEdit = observer(
 												{t('ViewRes:Shared.Add')}
 											</SafeAnchor>
 										)}
+									{!languageOptionsExtended && (
+										<SafeAnchor
+											onClick={(): void => setLanguageOptionsExtended(true)}
+											href="#"
+											className="textLink addLink"
+										>
+											{t('ViewRes.Song:Edit.LyExtendLanguages')}{' '}
+										</SafeAnchor>
+									)}
 								</p>
 							)}
 							<div>
diff --git a/VocaDbWeb/Scripts/Pages/Song/SongDetailsRoutes.tsx b/VocaDbWeb/Scripts/Pages/Song/SongDetailsRoutes.tsx
index f8dce9abdd..da2dd0db01 100644
--- a/VocaDbWeb/Scripts/Pages/Song/SongDetailsRoutes.tsx
+++ b/VocaDbWeb/Scripts/Pages/Song/SongDetailsRoutes.tsx
@@ -1,4 +1,4 @@
-import { userLanguageCultures } from '@/Components/userLanguageCultures';
+import { useCultureCodes } from '@/CultureCodesContext';
 import { SongDetailsForApi } from '@/DataContracts/Song/SongDetailsForApi';
 import { JQueryUINavItemComponent } from '@/JQueryUI/JQueryUITabs';
 import { useLoginManager } from '@/LoginManagerContext';
@@ -29,6 +29,7 @@ export const SongDetailsTabs = React.memo(
 		children,
 	}: SongDetailsTabsProps): React.ReactElement => {
 		const loginManager = useLoginManager();
+		const { getCodeDescription } = useCultureCodes();
 
 		const { t } = useTranslation([
 			'ViewRes',
@@ -45,7 +46,7 @@ export const SongDetailsTabs = React.memo(
 			)
 			.map((l) =>
 				l.translationType !== 'Romanized'
-					? userLanguageCultures[l.cultureCodes![0]]?.nativeName ??
+					? getCodeDescription(l.cultureCodes![0])?.nativeName ??
 					  t('ViewRes.Song:Details.LyricsLanguageOther')
 					: t(
 							'VocaDb.Web.Resources.Domain.Globalization:TranslationTypeNames.Romanized',
diff --git a/VocaDbWeb/Scripts/Pages/Song/SongLyrics.tsx b/VocaDbWeb/Scripts/Pages/Song/SongLyrics.tsx
index 8d6f622c9d..d0f7930150 100644
--- a/VocaDbWeb/Scripts/Pages/Song/SongLyrics.tsx
+++ b/VocaDbWeb/Scripts/Pages/Song/SongLyrics.tsx
@@ -1,5 +1,5 @@
 import SafeAnchor from '@/Bootstrap/SafeAnchor';
-import { userLanguageCultures } from '@/Components/userLanguageCultures';
+import { useCultureCodes } from '@/CultureCodesContext';
 import { SongDetailsForApi } from '@/DataContracts/Song/SongDetailsForApi';
 import { SongDetailsTabs } from '@/Pages/Song/SongDetailsRoutes';
 import { EntryUrlMapper } from '@/Shared/EntryUrlMapper';
@@ -24,6 +24,7 @@ const SongLyrics = observer(
 			'ViewRes.Song',
 			'VocaDb.Web.Resources.Domain.Globalization',
 		]);
+		const { getCodeDescription } = useCultureCodes();
 
 		useLocationStateStore(songDetailsStore.lyricsStore);
 
@@ -65,7 +66,7 @@ const SongLyrics = observer(
 												.map((c) =>
 													c === ''
 														? t('ViewRes.Song:Details.LyricsLanguageOther')
-														: userLanguageCultures[c]?.nativeName,
+														: getCodeDescription(c)?.nativeName,
 												)
 												.join(', ')
 										: t('ViewRes.Song:Details.LyricsLanguageOther')}
diff --git a/VocaDbWeb/Scripts/i18n.ts b/VocaDbWeb/Scripts/i18n.ts
index 1e4e660023..87ed7647e4 100644
--- a/VocaDbWeb/Scripts/i18n.ts
+++ b/VocaDbWeb/Scripts/i18n.ts
@@ -27,7 +27,7 @@ i18n
 						es: 'v1.1',
 						fi: 'v1.2',
 						ja: 'v1.2',
-						en: 'v1.2',
+						en: 'v1.3',
 						ru: 'v1.2',
 					},
 				},
diff --git a/VocaDbWeb/package-lock.json b/VocaDbWeb/package-lock.json
index b0aa69c06c..45801169c7 100644
--- a/VocaDbWeb/package-lock.json
+++ b/VocaDbWeb/package-lock.json
@@ -23,13 +23,13 @@
 				"i18next-chained-backend": "^4.2.0",
 				"i18next-http-backend": "^1.4.1",
 				"i18next-localstorage-backend": "^4.1.1",
+				"iso-639-3": "^3.0.1",
 				"jquery": "^2.2.1",
 				"jquery-ui": "^1.10.4",
 				"jqwidgets-scripts": "^13.2.0",
 				"lodash-es": "^4.17.21",
 				"mobx": "^6.3.2",
 				"mobx-react-lite": "^3.2.0",
-				"moment": "^2.29.4",
 				"nprogress": "^0.2.0",
 				"qs": "^6.11.0",
 				"react": "^17.0.2",
@@ -10577,6 +10577,15 @@
 			"integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=",
 			"dev": true
 		},
+		"node_modules/iso-639-3": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/iso-639-3/-/iso-639-3-3.0.1.tgz",
+			"integrity": "sha512-SdljCYXOexv/JmbQ0tvigHN43yECoscVpe2y2hlEqy/CStXQlroPhZLj7zKLRiGqLJfw8k7B973UAMDoQczVgQ==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
 		"node_modules/isobject": {
 			"version": "3.0.1",
 			"resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
@@ -14104,14 +14113,6 @@
 				}
 			}
 		},
-		"node_modules/moment": {
-			"version": "2.29.4",
-			"resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
-			"integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==",
-			"engines": {
-				"node": "*"
-			}
-		},
 		"node_modules/mri": {
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
@@ -27229,6 +27230,11 @@
 			"integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=",
 			"dev": true
 		},
+		"iso-639-3": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/iso-639-3/-/iso-639-3-3.0.1.tgz",
+			"integrity": "sha512-SdljCYXOexv/JmbQ0tvigHN43yECoscVpe2y2hlEqy/CStXQlroPhZLj7zKLRiGqLJfw8k7B973UAMDoQczVgQ=="
+		},
 		"isobject": {
 			"version": "3.0.1",
 			"resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
@@ -29754,11 +29760,6 @@
 			"integrity": "sha512-bRuZp3C0itgLKHu/VNxi66DN/XVkQG7xtoBVWxpvC5FhAqbOCP21+nPhULjnzEqd7xBMybp6KwytdUpZKEgpIQ==",
 			"requires": {}
 		},
-		"moment": {
-			"version": "2.29.4",
-			"resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
-			"integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w=="
-		},
 		"mri": {
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
diff --git a/VocaDbWeb/package.json b/VocaDbWeb/package.json
index d63c35320d..7812ba5e5b 100644
--- a/VocaDbWeb/package.json
+++ b/VocaDbWeb/package.json
@@ -74,6 +74,7 @@
 		"i18next-chained-backend": "^4.2.0",
 		"i18next-http-backend": "^1.4.1",
 		"i18next-localstorage-backend": "^4.1.1",
+		"iso-639-3": "^3.0.1",
 		"jquery": "^2.2.1",
 		"jquery-ui": "^1.10.4",
 		"jqwidgets-scripts": "^13.2.0",
diff --git a/VocaDbWeb/public/locales/en/ViewRes.Song.json b/VocaDbWeb/public/locales/en/ViewRes.Song.json
index f30c661f89..ecf7f20ba7 100644
--- a/VocaDbWeb/public/locales/en/ViewRes.Song.json
+++ b/VocaDbWeb/public/locales/en/ViewRes.Song.json
@@ -102,6 +102,7 @@
     "BaUsePvDate": "Use PV date",
     "EditTitle": "Edit song {{0}}",
     "LyAddRow": "Add translation",
+    "LyExtendLanguages": "More language options",
     "LyInheritanceNote": "Lyrics are by default inherited from the original version. They do not need to be specified for the derived versions unless they are different.",
     "LyLanguage": "Language:",
     "LySource": "Source:",