feat(synced-lyrics): romanization (#2790)

* feat(synced-lyrics): init romanization!

* remove debug logs and add TODO

* feat(synced-lyrics/romanization): Mandarin!

* feat(synced-lyrics/romanization): improve japanese detection

* feat(synced-lyrics/romanization): Korean!

* qol(synced-lyrics/romanization): canonicalize punctuation and symbols

* feat(synced-lyrics/romanization): handle japanese+korean and korean+chinese lyrics

* revert formatting on electron.vite.config.mts

* feat(synced-lyrics/romanization): romanize plain lyrics

* apply fix by @kimjammer

* fix lockfile due to rebase

* feat(synced-lyrics): improve lyric processing and formatting;

* feat(synced-lyrics/romanization): add option to enable/disable romanization

* chore: move default value for --lyrics-duration to the declaration

* update lockfile

* fix: improvement

1. improved language detection logic
2. changed code to work in the renderer process

* fix: fix regression (canonicalize)

---------

Co-authored-by: JellyBrick <shlee1503@naver.com>

src/plugins/synced-lyrics/renderer/components/PlainLyrics.tsx

@@ -1,28 +1,91 @@
-import { createMemo, For } from 'solid-js';
+import { createEffect, createMemo, createSignal, For, Show } from 'solid-js';
+
+import {
+  canonicalize,
+  romanizeChinese,
+  romanizeHangul,
+  romanizeJapanese,
+  romanizeJapaneseOrHangul,
+  simplifyUnicode,
+} from '../utils';
+import { config } from '../renderer';
 
 interface PlainLyricsProps {
   lyrics: string;
+  hasJapanese: boolean;
+  hasKorean: boolean;
 }
 
 export const PlainLyrics = (props: PlainLyricsProps) => {
-  const lines = createMemo(() => props.lyrics.split('\n'));
+  const lines = props.lyrics.split('\n').filter((line) => line.trim());
+  const [romanizedLines, setRomanizedLines] = createSignal<
+    Record<string, string>
+  >({});
+
+  const combinedLines = createMemo(() => {
+    const out = [];
+
+    for (let i = 0; i < lines.length; i++) {
+      out.push([lines[i], romanizedLines()[i]]);
+    }
+
+    return out;
+  });
+
+  createEffect(async () => {
+    if (!config()?.romanization) return;
+
+    for (let i = 0; i < lines.length; i++) {
+      let romanized: string;
+
+      if (props.hasJapanese) {
+        if (props.hasKorean)
+          romanized = await romanizeJapaneseOrHangul(lines[i]);
+        else romanized = await romanizeJapanese(lines[i]);
+      } else if (props.hasKorean) romanized = romanizeHangul(lines[i]);
+      else romanized = romanizeChinese(lines[i]);
+
+      setRomanizedLines((prev) => ({
+        ...prev,
+        [i]: canonicalize(romanized),
+      }));
+    }
+  });
 
   return (
     <div class="plain-lyrics">
-      <For each={lines()}>
-        {(line) => {
-          if (line.trim() === '') {
-            return <br />;
-          } else {
-            return (
+      <For each={combinedLines()}>
+        {([line, romanized]) => {
+          return (
+            <div
+              class={`${
+                line.match(/^\[.+\]$/s) ? 'lrc-header' : ''
+              } text-lyrics description ytmusic-description-shelf-renderer`}
+              style={{
+                'display': 'flex',
+                'flex-direction': 'column',
+              }}
+            >
               <yt-formatted-string
-                class="text-lyrics description ytmusic-description-shelf-renderer"
                 text={{
                   runs: [{ text: line }],
                 }}
               />
-            );
-          }
+              <Show
+                when={
+                  config()?.romanization &&
+                  simplifyUnicode(line) !== simplifyUnicode(romanized)
+                }
+              >
+                <yt-formatted-string
+                  class="romaji"
+                  text={{
+                    runs: [{ text: romanized }],
+                  }}
+                />
+              </Show>
+            </div>
+          );
         }}
       </For>
     </div>