feat: Implement lyric language autodetection (#1480)

* feat: Implement lyric language auto detection

* refactor: Remove console.log

* refactor: Use one setState call

VocaDbWeb/Scripts/Components/extendedUserLanguageCultures.ts

@@ -1,6 +1,6 @@
-import { iso6393 } from 'iso-639-3';
+import { iso6393, iso6393To1 } from 'iso-639-3';
 
-export const extendedUserLanguageCultures = Object.fromEntries(
+const extendedUserLanguageCultures = Object.fromEntries(
 	iso6393.map((lang) => [
 		lang.iso6391 ?? lang.iso6392B ?? lang.iso6392T ?? lang.iso6393,
 		{
@@ -9,3 +9,5 @@ export const extendedUserLanguageCultures = Object.fromEntries(
 		},
 	]),
 );
+
+export { extendedUserLanguageCultures, iso6393To1 };

VocaDbWeb/Scripts/CultureCodesContext.tsx

@@ -3,50 +3,59 @@ import React, { useEffect, useState } from 'react';
 import { userLanguageCultures } from './Components/userLanguageCultures';
 
 type CodeDescription = { englishName: string; nativeName: string };
-type Codes = { [k: string]: CodeDescription };
+type Codes = Record<string, CodeDescription>;
 
-const CultureCodesContext = React.createContext<Codes | undefined>(undefined);
+const CultureCodesContext = React.createContext<CultureCodeData | undefined>(
+	undefined,
+);
 
 interface CultureCodesProviderProps {
 	children?: React.ReactNode;
 }
 
+interface CultureCodeData {
+	codes?: Codes;
+	iso639to1?: Record<string, string>;
+}
+
 interface CultureCodeTools {
 	codes?: Codes;
 	getCodeDescription: (code: string) => CodeDescription | undefined;
+	iso639to1?: Record<string, string>;
 }
 
 // Lazily loads extendedUserLanguageCultures
 export const CultureCodesProvider = ({
 	children,
 }: CultureCodesProviderProps): React.ReactElement => {
-	const [cultureCodes, setCultureCodes] = useState<Codes | undefined>(
+	const [codeData, setCodeData] = useState<CultureCodeData | undefined>(
 		undefined,
 	);
 
 	useEffect(() => {
-		import('./Components/extendedUserLanguageCultures').then((resp) =>
-			setCultureCodes(resp.extendedUserLanguageCultures),
-		);
+		import('./Components/extendedUserLanguageCultures').then((resp) => {
+			setCodeData({
+				codes: resp.extendedUserLanguageCultures,
+				iso639to1: resp.iso6393To1,
+			});
+		});
 	}, []);
 
 	return (
-		<CultureCodesContext.Provider value={cultureCodes}>
+		<CultureCodesContext.Provider value={codeData}>
 			{children}
 		</CultureCodesContext.Provider>
 	);
 };
 
 export const useCultureCodes = (): CultureCodeTools => {
 	const codes = React.useContext(CultureCodesContext);
-
 	const getCodeDescription = (code: string): CodeDescription | undefined => {
 		if (!(code in userLanguageCultures)) {
-			return codes === undefined ? undefined : codes[code];
+			return codes?.codes === undefined ? undefined : codes.codes[code];
 		}
 
 		return userLanguageCultures[code];
 	};
-
-	return { codes, getCodeDescription };
+	return { ...codes, getCodeDescription };
 };

VocaDbWeb/Scripts/Pages/Song/Partials/LyricsForSongEdit.tsx

@@ -7,6 +7,7 @@ import {
 	LyricsForSongEditStore,
 	LyricsForSongListEditStore,
 } from '@/Stores/Song/LyricsForSongListEditStore';
+import { franc } from 'franc-min';
 import { runInAction } from 'mobx';
 import { observer } from 'mobx-react-lite';
 import React, { useState } from 'react';
@@ -34,7 +35,7 @@ const LyricsForSongEdit = observer(
 				(c) => c.length > 2 && c !== 'fil',
 			).length > 0,
 		);
-		const { getCodeDescription } = useCultureCodes();
+		const { getCodeDescription, iso639to1 } = useCultureCodes();
 
 		return (
 			<Accordion.Item eventKey={eventKey}>
@@ -201,6 +202,16 @@ const LyricsForSongEdit = observer(
 							}
 							cols={65}
 							rows={30}
+							onBlur={(): void => {
+								if (
+									lyricsForSongEditStore.cultureCodes.length === 1 &&
+									lyricsForSongEditStore.cultureCodes[0] === '' &&
+									iso639to1 !== undefined
+								) {
+									lyricsForSongEditStore.cultureCodes[0] =
+										iso639to1[franc(lyricsForSongEditStore.value)];
+								}
+							}}
 							className="input-xxlarge withMargin"
 						/>
 						<br />

VocaDbWeb/package.json

@@ -67,6 +67,7 @@
 		"classnames": "^2.3.1",
 		"dayjs": "^1.11.7",
 		"decimal.js-light": "^2.5.1",
+		"franc-min": "^6.1.0",
 		"highcharts": "^10.0.0",
 		"highcharts-react-official": "^3.1.0",
 		"http-status-codes": "^2.2.0",