feat(lyrics-plus): add select language translation for Musixmatch provider (#3288)

Author: ianz56

CustomApps/lyrics-plus/OptionsMenu.js

@@ -100,12 +100,18 @@ const TranslationMenu = react.memo(({ friendlyLanguage, hasTranslation }) => {
 			ko: "Korean",
 		};
 
-		let modeOptions = {};
+		let modeOptions = {
+			none: "None",
+		};
 
 		if (hasTranslation.musixmatch) {
+			const selectedLanguage = CONFIG.visual["musixmatch-translation-language"];
+			const languageName = new Intl.DisplayNames([selectedLanguage], {
+				type: "language",
+			}).of(selectedLanguage);
 			sourceOptions = {
 				...sourceOptions,
-				musixmatchTranslation: "English (Musixmatch)",
+				musixmatchTranslation: `${languageName} (Musixmatch)`,
 			};
 		}
 

CustomApps/lyrics-plus/ProviderMusixmatch.js

@@ -162,11 +162,15 @@ const ProviderMusixmatch = (() => {
 		const track_id = body?.["matcher.track.get"]?.message?.body?.track?.track_id;
 		if (!track_id) return null;
 
+		const selectedLanguage = CONFIG.visual["musixmatch-translation-language"] || "none";
+		if (selectedLanguage === "none") return null;
+
 		const baseURL =
-			"https://apic-desktop.musixmatch.com/ws/1.1/crowd.track.translations.get?translation_fields_set=minimal&selected_language=en&comment_format=text&format=json&app_id=web-desktop-app-v1.0&";
+			"https://apic-desktop.musixmatch.com/ws/1.1/crowd.track.translations.get?translation_fields_set=minimal&comment_format=text&format=json&app_id=web-desktop-app-v1.0&";
 
 		const params = {
 			track_id,
+			selected_language: selectedLanguage,
 			usertoken: CONFIG.providers.musixmatch.token,
 		};
 
@@ -184,7 +188,10 @@ const ProviderMusixmatch = (() => {
 
 		if (!result.translations_list?.length) return null;
 
-		return result.translations_list.map(({ translation }) => ({ translation: translation.description, matchedLine: translation.matched_line }));
+		return result.translations_list.map(({ translation }) => ({
+			translation: translation.description,
+			matchedLine: translation.matched_line,
+		}));
 	}
 
 	return { findLyrics, getKaraoke, getSynced, getUnsynced, getTranslation };

CustomApps/lyrics-plus/Settings.js

@@ -512,6 +512,19 @@ const OptionList = ({ type, items, onChange }) => {
 		);
 	});
 };
+const languageCodes =
+	"none,en,af,ar,bg,bn,ca,zh,cs,da,de,el,es,et,fa,fi,fr,gu,he,hi,hr,hu,id,is,it,ja,jv,kn,ko,lt,lv,ml,mr,ms,nl,no,pl,pt,ro,ru,sk,sl,sr,su,sv,ta,te,th,tr,uk,ur,vi,zu".split(
+		","
+	);
+
+const displayNames = new Intl.DisplayNames(["en"], { type: "language" });
+const languageOptions = languageCodes.reduce((acc, code) => {
+	acc[code] = code === "none" ? "None" : displayNames.of(code);
+	return acc;
+}, {});
+
+const savedLanguage = localStorage.getItem(`${APP_NAME}:visual:musixmatch-translation-language`) || "none";
+CONFIG.visual["musixmatch-translation-language"] = savedLanguage;
 
 function openConfig() {
 	const configContainer = react.createElement(
@@ -630,6 +643,14 @@ function openConfig() {
 					max: thresholdSizeLimit.max,
 					step: thresholdSizeLimit.step,
 				},
+				{
+					desc: "Musixmatch Translation Language.",
+					info: "Choose the language you want to translate the lyrics to. Changes will take effect after the next track.",
+					key: "musixmatch-translation-language",
+					type: ConfigSelection,
+					options: languageOptions,
+					defaultValue: savedLanguage,
+				},
 			],
 			onChange: (name, value) => {
 				CONFIG.visual[name] = value;