feat(lyrics-plus): translation on kara

[ianz56]

Summary by CodeRabbit

• New Features

  • Translation display options now dynamically adapt based on the current playback mode for better context-specific rendering
  • Improved karaoke mode with enhanced original text and translation synchronization

• Bug Fixes

  • Fixed translation merging accuracy in karaoke mode to properly display original text alongside translations

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 5705cebc-f0c7-4d0f-89cc-6939bab91361

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch kara-translate

---

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 and usage tips.}

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@CustomApps/lyrics-plus/index.js`:
- Around line 1219-1223: The render() method currently logs, triggers
Utils.triggerOptionsMenuUpdate(mode), and mutates this.state.mode when mode
changes; move these side effects and the state mutation out of render into
componentDidUpdate(prevProps, prevState) so they run after render: detect the
mode change by comparing prevState.mode (or prevProps if mode comes from props)
to the new mode, call console.log and Utils.triggerOptionsMenuUpdate(mode), and
perform the state update via this.setState({ mode }) instead of assigning
this.state.mode directly. Ensure you reference the existing render(),
componentDidUpdate(), this.state.mode, mode variable, and
Utils.triggerOptionsMenuUpdate when applying the change.

In `@CustomApps/lyrics-plus/OptionsMenu.js`:
- Around line 100-107: The local state localMode (created via react.useState and
updated by setLocalMode in the effect that registers
Utils.registerOptionsMenuTrigger) must be kept in sync with the incoming prop
mode and included in the useMemo dependencies for translationDisplayOptions to
avoid stale values; add an effect that watches the prop mode and calls
setLocalMode(mode) when it changes, and add localMode to the dependency array of
the useMemo that computes translationDisplayOptions (reference the useMemo block
and translationDisplayOptions variable) so the memo recalculates whenever
localMode updates.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 88b6b627-bdd1-4f6c-ac2c-b12a43179018

📥 Commits

Reviewing files that changed from the base of the PR and between a0ff30e and 43962ea.

📒 Files selected for processing (4)

• CustomApps/lyrics-plus/OptionsMenu.js
• CustomApps/lyrics-plus/Pages.js
• CustomApps/lyrics-plus/Utils.js
• CustomApps/lyrics-plus/index.js