feat(synced-lyrics): Add Simplified/Traditional Chinese converter and improve Romanization to display tone

package.json

@@ -88,6 +88,7 @@
     "bgutils-js": "3.2.0",
     "butterchurn": "3.0.0-beta.5",
     "butterchurn-presets": "3.0.0-beta.4",
+    "chinese-conv": "^4.0.0",
     "color": "5.0.0",
     "conf": "14.0.0",
     "custom-electron-prompt": "1.5.8",
@@ -121,6 +122,7 @@
     "node-html-parser": "7.0.1",
     "node-id3": "0.2.9",
     "peerjs": "1.5.5",
+    "pinyin-pro": "^3.27.0",
     "semver": "7.7.2",
     "serve": "14.2.5",
     "socks": "2.8.7",
@@ -129,7 +131,6 @@
     "solid-js": "1.9.9",
     "solid-styled-components": "0.28.5",
     "solid-transition-group": "0.3.0",
-    "tiny-pinyin": "1.3.2",
     "tinyld": "1.3.4",
     "virtua": "0.42.3",
     "vudio": "2.1.1",

src/i18n/resources/en.json

@@ -862,6 +862,24 @@
         "show-time-codes": {
           "label": "Show time codes",
           "tooltip": "Show the time codes next to the lyrics"
+        },
+        "convert-chinese-character": {
+          "label": "Convert Chinese character",
+          "submenu": {
+            "disabled": {
+              "label": "Disabled",
+              "tooltip": "Disable Chinese character conversion"
+            },
+            "simplified-to-traditional": {
+              "label": "Simplified to Traditional",
+              "tooltip": "Convert Simplified Chinese to Traditional Chinese"
+            },
+            "traditional-to-simplified": {
+              "label": "Traditional to Simplified",
+              "tooltip": "Convert Traditional Chinese to Simplified Chinese"
+            }
+          },
+          "tooltip": "Convert Chinese character to Traditional or Simplified"
         }
       },
       "name": "Synced Lyrics",

src/menu.ts

@@ -481,7 +481,12 @@ export const mainMenuTemplate = async (
             availableLanguages
               .map(
                 (lang): Electron.MenuItemConstructorOptions => ({
-                  label: `${langResources[lang].translation.language?.name ?? 'Unknown'} (${langResources[lang].translation.language?.['local-name'] ?? 'Unknown'})`,
+                  label: `${
+                    langResources[lang].translation.language?.name ?? 'Unknown'
+                  } (${
+                    langResources[lang].translation.language?.['local-name'] ??
+                    'Unknown'
+                  })`,
                   type: 'checkbox',
                   checked: (config.get('options.language') ?? 'en') === lang,
                   click() {

src/plugins/synced-lyrics/menu.ts

@@ -153,6 +153,62 @@ export const menu = async (
         });
       },
     },
+    {
+      label: t('plugins.synced-lyrics.menu.convert-chinese-character.label'),
+      toolTip: t(
+        'plugins.synced-lyrics.menu.convert-chinese-character.tooltip',
+      ),
+      type: 'submenu',
+      submenu: [
+        {
+          label: t(
+            'plugins.synced-lyrics.menu.convert-chinese-character.submenu.disabled.label',
+          ),
+          toolTip: t(
+            'plugins.synced-lyrics.menu.convert-chinese-character.submenu.disabled.tooltip',
+          ),
+          type: 'radio',
+          checked:
+            config.convertChineseCharacter === 'disabled' ||
+            config.convertChineseCharacter === undefined,
+          click() {
+            ctx.setConfig({
+              convertChineseCharacter: 'disabled',
+            });
+          },
+        },
+        {
+          label: t(
+            'plugins.synced-lyrics.menu.convert-chinese-character.submenu.simplified-to-traditional.label',
+          ),
+          toolTip: t(
+            'plugins.synced-lyrics.menu.convert-chinese-character.submenu.simplified-to-traditional.tooltip',
+          ),
+          type: 'radio',
+          checked: config.convertChineseCharacter === 'simplifiedToTraditional',
+          click() {
+            ctx.setConfig({
+              convertChineseCharacter: 'simplifiedToTraditional',
+            });
+          },
+        },
+        {
+          label: t(
+            'plugins.synced-lyrics.menu.convert-chinese-character.submenu.traditional-to-simplified.label',
+          ),
+          toolTip: t(
+            'plugins.synced-lyrics.menu.convert-chinese-character.submenu.traditional-to-simplified.tooltip',
+          ),
+          type: 'radio',
+          checked: config.convertChineseCharacter === 'traditionalToSimplified',
+          click() {
+            ctx.setConfig({
+              convertChineseCharacter: 'traditionalToSimplified',
+            });
+          },
+        },
+      ],
+    },
     {
       label: t('plugins.synced-lyrics.menu.show-time-codes.label'),
       toolTip: t('plugins.synced-lyrics.menu.show-time-codes.tooltip'),

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

@@ -1,6 +1,11 @@
-import { createEffect, createSignal, Show } from 'solid-js';
+import { createEffect, createMemo, createSignal, Show } from 'solid-js';
 
-import { canonicalize, romanize, simplifyUnicode } from '../utils';
+import {
+  canonicalize,
+  convertChineseCharacter,
+  romanize,
+  simplifyUnicode,
+} from '../utils';
 import { config } from '../renderer';
 
 interface PlainLyricsProps {
@@ -9,11 +14,19 @@ interface PlainLyricsProps {
 
 export const PlainLyrics = (props: PlainLyricsProps) => {
   const [romanization, setRomanization] = createSignal('');
+  const text = createMemo(() => {
+    let line = props.line;
+    const convertChineseText = config()?.convertChineseCharacter;
+    if (convertChineseText && convertChineseText !== 'disabled') {
+      line = convertChineseCharacter(line, convertChineseText);
+    }
+    return line;
+  });
 
   createEffect(() => {
     if (!config()?.romanization) return;
 
-    const input = canonicalize(props.line);
+    const input = canonicalize(text());
     romanize(input).then((result) => {
       setRomanization(canonicalize(result));
     });
@@ -31,13 +44,13 @@ export const PlainLyrics = (props: PlainLyricsProps) => {
     >
       <yt-formatted-string
         text={{
-          runs: [{ text: props.line }],
+          runs: [{ text: text() }],
         }}
       />
       <Show
         when={
           config()?.romanization &&
-          simplifyUnicode(props.line) !== simplifyUnicode(romanization())
+          simplifyUnicode(text()) !== simplifyUnicode(romanization())
         }
       >
         <yt-formatted-string

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

@@ -7,7 +7,12 @@ import { type LineLyrics } from '@/plugins/synced-lyrics/types';
 import { config, currentTime } from '../renderer';
 import { _ytAPI } from '..';
 
-import { canonicalize, romanize, simplifyUnicode } from '../utils';
+import {
+  canonicalize,
+  convertChineseCharacter,
+  romanize,
+  simplifyUnicode,
+} from '../utils';
 
 interface SyncedLineProps {
   scroller: VirtualizerHandle;
@@ -81,7 +86,14 @@ const EmptyLine = (props: SyncedLineProps) => {
 };
 
 export const SyncedLine = (props: SyncedLineProps) => {
-  const text = createMemo(() => props.line.text.trim());
+  const text = createMemo(() => {
+    let line = props.line.text;
+    const convertChineseText = config()?.convertChineseCharacter;
+    if (convertChineseText && convertChineseText !== 'disabled') {
+      line = convertChineseCharacter(line, convertChineseText);
+    }
+    return line;
+  });
 
   const [romanization, setRomanization] = createSignal('');
   createEffect(() => {

src/plugins/synced-lyrics/renderer/utils.tsx

@@ -3,10 +3,11 @@ import KuromojiAnalyzer from 'kuroshiro-analyzer-kuromoji';
 import Kuroshiro from 'kuroshiro';
 import { romanize as esHangulRomanize } from 'es-hangul';
 import hanja from 'hanja';
-import * as pinyin from 'tiny-pinyin';
+import { pinyin } from 'pinyin-pro';
 import { romanize as romanizeThaiFrag } from '@dehoist/romanize-thai';
 import { lazy } from 'lazy-var';
 import { detect } from 'tinyld';
+import { sify, tify } from 'chinese-conv';
 
 import { waitForElement } from '@/utils/wait-for-element';
 import { LyricsRenderer, setIsVisible } from './renderer';
@@ -84,6 +85,22 @@ export const canonicalize = (text: string) => {
   );
 };
 
+export const convertChineseCharacter = (
+  text: string,
+  mode: 'simplifiedToTraditional' | 'traditionalToSimplified',
+) => {
+  if (!hasChinese([text])) return text;
+
+  switch (mode) {
+    case 'simplifiedToTraditional':
+      return tify(text);
+    case 'traditionalToSimplified':
+      return sify(text);
+    default:
+      return text;
+  }
+};
+
 export const simplifyUnicode = (text?: string) =>
   text
     ? text
@@ -165,9 +182,7 @@ export const romanizeHangul = (line: string) =>
   esHangulRomanize(hanja.translate(line, 'SUBSTITUTION'));
 
 export const romanizeChinese = (line: string) => {
-  return line.replaceAll(/[\u4E00-\u9FFF]+/g, (match) =>
-    pinyin.convertToPinyin(match, ' ', true),
-  );
+  return line.replaceAll(/[\u4E00-\u9FFF]+/g, (match) => pinyin(match));
 };
 
 const thaiSegmenter = Intl.Segmenter.supportedLocalesOf('th').includes('th')

src/plugins/synced-lyrics/types.ts

@@ -10,6 +10,10 @@ export type SyncedLyricsPluginConfig = {
   showLyricsEvenIfInexact: boolean;
   lineEffect: LineEffect;
   romanization: boolean;
+  convertChineseCharacter:
+    | 'simplifiedToTraditional'
+    | 'traditionalToSimplified'
+    | 'disabled';
 };
 
 export type LineLyricsStatus = 'previous' | 'current' | 'upcoming';