feat(lyrics-plus): implement pinyin romanization for Chinese lyrics

[heinthanth]

This is one of the features I really wanted to have. So, I implemented Pinyin romanization using pinyin-pro package.
This PR will resolves #3575

Romanization can be turned on or off in the "Conversions" menu. Romanized lyrics will be displayed under original lyrics or "translated" lyrics (if enabled). Also font size for romanized line can be changed in "Adjustments" menu.

Summary by CodeRabbit

• New Features
  • Added optional Chinese lyric romanization (Pinyin) for synced and unsynced lyrics.
  • Introduced a Romanization selection for Chinese mode, with an additional “Romanization font size” adjustment.
  • Romanized text is displayed per line when it differs from the primary lyric text.
  • Romanization is generated when applicable and refreshes automatically when switching tracks or lyric sources.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: a1f86fa1-3b8f-47bc-aa05-73c831c766ec

📥 Commits

Reviewing files that changed from the base of the PR and between a0ac2cd and 82eb323.

📒 Files selected for processing (1)

• CustomApps/lyrics-plus/index.js

🚧 Files skipped from review as they are similar to previous changes (1)

• CustomApps/lyrics-plus/index.js

---

📝 Walkthrough

Walkthrough

Adds configurable Chinese lyric romanization using pinyin-pro, including romanization settings, conversion state management, and rendering for synced, expanded synced, and unsynced lyrics.

Changes

Chinese lyric romanization

Layer / File(s)	Summary
Romanization controls and visual settings CustomApps/lyrics-plus/OptionsMenu.js, CustomApps/lyrics-plus/index.js	Adds Chinese romanization choices and a configurable romanization font-size setting exposed through CSS variables.
Pinyin resource loading and conversion CustomApps/lyrics-plus/Translator.js	Conditionally loads pinyin-pro, tracks Chinese conversion readiness, and converts lyric text to pinyin.
Romanization generation and state flow CustomApps/lyrics-plus/index.js	Generates pinyin for supported Chinese synced or unsynced lyrics, resets state across lyric changes, and passes mode-matched romanization lines to lyric pages.
Romanized lyric rendering CustomApps/lyrics-plus/Pages.js	Matches romanized lines by timestamp or index and renders differing romanized text with dedicated styling across lyric page variants.

Estimated code review effort: 3 (Moderate) | ~25 minutes

Sequence Diagram(s)

sequenceDiagram
  participant LyricsContainer
  participant Translator
  participant pinyin-pro
  participant SyncedLyricsPage
  participant UnsyncedLyricsPage
  LyricsContainer->>Translator: convert Chinese lyric lines
  Translator->>pinyin-pro: pinyin(text, options)
  pinyin-pro-->>Translator: romanized lines
  Translator-->>LyricsContainer: converted lyric lines
  LyricsContainer->>SyncedLyricsPage: pass romanization prop
  LyricsContainer->>UnsyncedLyricsPage: pass romanization prop
  SyncedLyricsPage-->>LyricsContainer: render romanized paragraphs
  UnsyncedLyricsPage-->>LyricsContainer: render romanized paragraphs

Loading

Suggested reviewers: rxri

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the main change: adding Pinyin romanization support for Chinese lyrics.
Linked Issues check	✅ Passed	The PR implements native Pinyin transliteration for Chinese lyrics and integrates it into the lyrics panel as requested in #3575.
Out of Scope Changes check	✅ Passed	The changes stay focused on romanization, related settings, and lyrics rendering with no clear unrelated additions.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[Copilot]

Pull request overview

Adds Chinese (Pinyin) romanization support to the Lyrics Plus custom app by introducing a new conversion option and rendering a secondary romanized line under the main lyric line when enabled.

Changes:

• Load pinyin-pro on-demand and add a convertToPinyin() path in Translator.
• Add “Romanization” selection (Chinese-only) plus a configurable romanization font size in the options UI.
• Generate romanized lyric lines in LyricsContainer and render them in synced/expanded/unsynced lyric pages.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.

File	Description
CustomApps/lyrics-plus/Translator.js	Adds pinyin-pro external loading + convertToPinyin() for Chinese romanization.
CustomApps/lyrics-plus/Pages.js	Renders romanized lines under lyrics for synced/expanded/unsynced views.
CustomApps/lyrics-plus/OptionsMenu.js	Adds Romanization selector and romanization font-size adjustment option.
CustomApps/lyrics-plus/index.js	Stores new config values, performs romanization conversion, and passes romanization lines into pages.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.