fix(subtitles): optimize loading state message position and visual effect

[taiiiyang]

Type of Changes

• 🐛 Bug fix (fix)

Description

Optimize the subtitle loading state message display:

• Center the message horizontally for better visual presentation
• Raise the vertical position (bottom-4 → bottom-18) for improved visibility
• Add animate-pulse effect on loading state
• Use semi-transparent background (bg-black/50) with backdrop blur

How Has This Been Tested?

• Verified through manual testing

Checklist

• I have tested these changes locally
• My code follows the code style of this project
• My changes do not break existing functionality

[changeset-bot]

🦋 Changeset detected

Latest commit: baba305

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@read-frog/extension	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[cubic-dev-ai]

No issues found across 2 files

[dosubot]

Related Documentation

Checked 14 published document(s) in 1 knowledge base(s). No updates required.

^{How did I do? Any feedback?}  

[mengxi-ream]

这个放在左下角会不会更好，然后不要闪烁，因为闪烁的话，反而会比较扰乱注意力，反而有被用户弃用功能或者卸载的风险

[claude]

PR Review: fix(subtitles): optimize loading state message position and visual effect

Summary

Small, focused fix that repositions the subtitle loading/error state message from bottom-center to bottom-left and adjusts the background opacity. The change is clean and the scope is appropriate.

---

Code Quality & Best Practices

🟢 Good taste

• Change is minimal and focused — does exactly what it says.
• Commit history shows iteration: centered → bottom-left, removed pulse animation. Final result is the simplest approach. Good.

Observations

1. Background opacity change: bg-black/85 → bg-black/50

The opacity dropped from 85% to 50%. At 50% opacity, the text readability against bright video content could suffer — especially for the error state (reddish text on semi-transparent dark background). Was this intentional? Consider testing with light/bright video backgrounds to ensure the message remains legible.

2. bottom-18 is a magic number

The value bottom-18 (4.5rem / 72px) works for YouTube's control bar, but other video platforms may have different control bar heights. This is acceptable for now since it's already an improvement over the previous position, but worth noting. A comment like /* clear YouTube control bar (~60px) */ could help future maintainers understand the rationale.

3. Minor: justify-center on inner div

With the outer container now using left-4 (left-aligned), justify-center on the inner flex div is a no-op since there's only one text child and no explicit width constraint. Not a bug, just dead weight — no action needed.

Potential Issues

• No bugs found. The logic is unchanged; only positioning and styling updated.
• The message prop for error state could be undefined, rendering nothing. This is pre-existing behavior and not introduced by this PR.

Performance

No concerns — pure CSS class changes, no runtime impact.

Security

No concerns — no user input handling changes.

Test Coverage

PR description states manual testing only. Given this is a visual/CSS-only change, that's reasonable. No unit test changes needed.

---

Verdict: Approve. Clean, minimal fix. The only thing worth double-checking is text readability at 50% background opacity on bright videos.

🤖 Generated with Claude Code

[cubic-dev-ai]

1 issue found across 1 file (changes from recent commits).

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="src/entrypoints/subtitles.content/ui/state-message.tsx">

<violation number="1" location="src/entrypoints/subtitles.content/ui/state-message.tsx:37">
P3: `animate-pulse` is no longer applied for the loading state, so the loading visual cue is missing.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}