web: fix border rounding of video on share page

[ameer2468]

Summary by CodeRabbit

• Style
  • Updated video player interface with refined rounded corners for a smoother visual appearance.

[coderabbitai]

Walkthrough

Visual styling updates applied to the video player component, adding rounded corner Tailwind classes to the main overlay container and controls overlay for improved visual presentation.

Changes

Cohort / File(s)	Summary
Video Player Styling apps/web/app/s/[videoId]/_components/CapVideoPlayer.tsx	Added rounded-xl class to main video overlay container and rounded-b-xl class to MediaPlayerControlsOverlay for rounded corner styling

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Poem

🐰 The player now glows with corners so round,
Where pixels and frames dance without a sound,
A touch of smoothness, a Tailwind delight,
Making your videos feel just right! ✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The title succinctly summarizes the primary change by indicating a fix to the video border rounding on the share page and uses the “web:” scope to clearly denote the affected area without extraneous details.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix-border-rounding

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 3e0b703 and c45611b.

📒 Files selected for processing (1)

• apps/web/app/s/[videoId]/_components/CapVideoPlayer.tsx (2 hunks)

🧰 Additional context used

📓 Path-based instructions (5)

**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

**/*.{ts,tsx}: Use a 2-space indent for TypeScript code.
Use Biome for formatting and linting TypeScript/JavaScript files by running pnpm format.

Use strict TypeScript and avoid any; leverage shared types

Files:

• apps/web/app/s/[videoId]/_components/CapVideoPlayer.tsx

**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (AGENTS.md)

**/*.{ts,tsx,js,jsx}: Use kebab-case for filenames for TypeScript/JavaScript modules (e.g., user-menu.tsx).
Use PascalCase for React/Solid components.

Files:

• apps/web/app/s/[videoId]/_components/CapVideoPlayer.tsx

apps/web/**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (AGENTS.md)

On the client, always use useEffectQuery or useEffectMutation from @/lib/EffectRuntime; never call EffectRuntime.run* directly in components.

Files:

• apps/web/app/s/[videoId]/_components/CapVideoPlayer.tsx

apps/web/**/*.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

apps/web/**/*.{ts,tsx}: Use TanStack Query v5 for all client-side server state and fetching in the web app
Mutations should call Server Actions directly and perform targeted cache updates with setQueryData/setQueriesData
Run server-side effects via the ManagedRuntime from apps/web/lib/server.ts using EffectRuntime.runPromise/runPromiseExit; do not create runtimes ad hoc
Client code should use helpers from apps/web/lib/EffectRuntime.ts (useEffectQuery, useEffectMutation, useRpcClient); never call ManagedRuntime.make inside components

Files:

• apps/web/app/s/[videoId]/_components/CapVideoPlayer.tsx

apps/web/app/**/*.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

Server components needing Effect services must call EffectRuntime.runPromise(effect.pipe(provideOptionalAuth))

Files:

• apps/web/app/s/[videoId]/_components/CapVideoPlayer.tsx

🧬 Code graph analysis (1)

apps/web/app/s/[videoId]/_components/CapVideoPlayer.tsx (1)

apps/web/app/s/[videoId]/_components/video/media-player.tsx (2)

• MediaPlayerControlsOverlay (3130-3130)
• MediaPlayerControlsOverlay (3154-3154)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)

• GitHub Check: Build Desktop (x86_64-pc-windows-msvc, windows-latest)
• GitHub Check: Build Desktop (aarch64-apple-darwin, macos-latest)
• GitHub Check: Analyze (rust)

🔇 Additional comments (2)

apps/web/app/s/[videoId]/_components/CapVideoPlayer.tsx (2)

523-528: Rounded loading overlay keeps UI polished.

The added rounded-xl keeps the blackout/loading layer aligned with the rounded video frame, fixing the visible square corners.

---

663-663: Control overlay radius matches container.

Passing rounded-b-xl ensures the controls gradient follows the player’s bottom curvature—nice visual consistency.

---

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.}