feat(lyrics-plus): optimize convert performance & improve code quality (#3311)

Author: Lseoksee

CustomApps/lyrics-plus/OptionsMenu.js

@@ -139,7 +139,6 @@ const TranslationMenu = react.memo(({ friendlyLanguage, hasTranslation }) => {
 			}
 			case "korean": {
 				modeOptions = {
-					hangul: "Hangul",
 					romaja: "Romaja",
 				};
 				break;

CustomApps/lyrics-plus/Pages.js

@@ -173,8 +173,8 @@ const SyncedLyricsPage = react.memo(({ lyrics = [], provider, copyright, isKara
 				const lineText = originalText && showTranslatedBelow ? originalText : text;
 
 				// Convert lyrics to text for comparison
-				const belowOrigin = typeof originalText === "object" ? originalText?.props?.children?.[0] : originalText;
-				const belowTxt = typeof text === "object" ? text?.props?.children?.[0] : text;
+				const belowOrigin = (typeof originalText === "object" ? originalText?.props?.children?.[0] : originalText)?.replace(/\s+/g, "");
+				const belowTxt = (typeof text === "object" ? text?.props?.children?.[0] : text)?.replace(/\s+/g, "");
 
 				const belowMode = showTranslatedBelow && originalText && belowOrigin !== belowTxt;
 
@@ -455,8 +455,8 @@ const SyncedExpandedLyricsPage = react.memo(({ lyrics, provider, copyright, isKa
 			const lineText = originalText && showTranslatedBelow ? originalText : text;
 
 			// Convert lyrics to text for comparison
-			const belowOrigin = typeof originalText === "object" ? originalText?.props?.children?.[0] : originalText;
-			const belowTxt = typeof text === "object" ? text?.props?.children?.[0] : text;
+			const belowOrigin = (typeof originalText === "object" ? originalText?.props?.children?.[0] : originalText)?.replace(/\s+/g, "");
+			const belowTxt = (typeof text === "object" ? text?.props?.children?.[0] : text)?.replace(/\s+/g, "");
 
 			const belowMode = showTranslatedBelow && originalText && belowOrigin !== belowTxt;
 
@@ -531,8 +531,8 @@ const UnsyncedLyricsPage = react.memo(({ lyrics, provider, copyright }) => {
 			const lineText = originalText && showTranslatedBelow ? originalText : text;
 
 			// Convert lyrics to text for comparison
-			const belowOrigin = typeof originalText === "object" ? originalText?.props?.children?.[0] : originalText;
-			const belowTxt = typeof text === "object" ? text?.props?.children?.[0] : text;
+			const belowOrigin = (typeof originalText === "object" ? originalText?.props?.children?.[0] : originalText)?.replace(/\s+/g, "");
+			const belowTxt = (typeof text === "object" ? text?.props?.children?.[0] : text)?.replace(/\s+/g, "");
 
 			const belowMode = showTranslatedBelow && originalText && belowOrigin !== belowTxt;
 

CustomApps/lyrics-plus/Providers.js

@@ -36,7 +36,10 @@ const Providers = {
 			}));
 		}
 
-		result.provider = lyrics.provider;
+		/**
+		 * to distinguish it from the existing Musixmatch, the provider will remain as Spotify.
+		 * if Spotify official lyrics support multiple providers besides Musixmatch in the future, please uncomment the under section. */
+		// result.provider = lyrics.provider;
 
 		return result;
 	},

CustomApps/lyrics-plus/Settings.js

@@ -51,7 +51,7 @@ const CacheButton = () => {
 	}
 
 	const [count, setCount] = useState(Object.keys(lyrics).length);
-	const text = count ? "Clear cached lyrics" : "No cached lyrics";
+	const text = count ? "Clear all cached lyrics" : "No cached lyrics";
 
 	return react.createElement(
 		"button",
@@ -106,6 +106,36 @@ const RefreshTokenButton = ({ setTokenCallback }) => {
 	);
 };
 
+const ConfigButton = ({ name, text, onChange = () => {} }) => {
+	return react.createElement(
+		"div",
+		{
+			className: "setting-row",
+		},
+		react.createElement(
+			"label",
+			{
+				className: "col description",
+			},
+			name
+		),
+		react.createElement(
+			"div",
+			{
+				className: "col action",
+			},
+			react.createElement(
+				"button",
+				{
+					className: "btn",
+					onClick: onChange,
+				},
+				text
+			)
+		)
+	);
+};
+
 const ConfigSlider = ({ name, defaultValue, onChange = () => {} }) => {
 	const [active, setActive] = useState(defaultValue);
 
@@ -652,6 +682,16 @@ function openConfig() {
 					type: ConfigSelection,
 					options: languageOptions,
 				},
+				{
+					desc: "Clear Memory Cache",
+					info: "Loaded lyrics are cached in memory for faster reloading. Press this button to clear the cached lyrics from memory without restarting Spotify.",
+					key: "clear-memore-cache",
+					text: "Clear memory cache",
+					type: ConfigButton,
+					onChange: () => {
+						reloadLyrics?.();
+					},
+				},
 			],
 			onChange: (name, value) => {
 				CONFIG.visual[name] = value;

CustomApps/lyrics-plus/Translator.js

@@ -42,6 +42,21 @@ class Translator {
 		}
 	}
 
+	async awaitFinished(language) {
+		return new Promise((resolve) => {
+			const interval = setInterval(() => {
+				this.injectExternals(language);
+				this.createTranslator(language);
+
+				const lan = language.slice(0, 2);
+				if (this.finished[lan]) {
+					clearInterval(interval);
+					resolve();
+				}
+			}, 100);
+		});
+	}
+
 	/**
 	 * Fix an issue with kuromoji when loading dict from external urls
 	 * Adapted from: https://github.com/mobilusoss/textlint-browser-runner/pull/7

CustomApps/lyrics-plus/Utils.js

@@ -132,17 +132,12 @@ const Utils = {
 
 		return ((simpPercentage - tradPercentage + 1) / 2) * 100 >= CONFIG.visual["hans-detect-threshold"] ? "zh-hans" : "zh-hant";
 	},
-	processTranslatedLyrics(result, lyricsToTranslate, { state, stateName }) {
-		const translatedLines = result.split("\n");
-		state[stateName] = [];
-		for (let i = 0; i < lyricsToTranslate.length; i++) {
-			const lyric = {
-				startTime: lyricsToTranslate[i].startTime || 0,
-				text: this.rubyTextToReact(translatedLines[i]),
-				originalText: lyricsToTranslate[i].text,
-			};
-			state[stateName].push(lyric);
-		}
+	processTranslatedLyrics(translated, original) {
+		return original.map((lyric, index) => ({
+			startTime: lyric.startTime || 0,
+			text: this.rubyTextToReact(translated[index]),
+			originalText: lyric.text,
+		}));
 	},
 	/** It seems that this function is not being used, but I'll keep it just in case it’s needed in the future.*/
 	processTranslatedOriginalLyrics(lyrics, synced) {