Conversation
|
Warning Rate limit exceeded@rohangupta-zomato has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 10 minutes and 29 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (5)
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. 📝 WalkthroughWalkthroughSelect implementation migrated from Popup/Positioner to Radix Portal/Content primitives; Select API changed (removed SelectPositioner, added SelectScrollUpButton/SelectScrollDownButton, updated prop types); package imports renamed from "@base-ui-components/react" → "@base-ui/react"; media/player props/types changed (MediaElement src required); shaka ambient declarations removed. Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
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. Comment |
rohangupta-zomato
force-pushed
the
fix/base-ui
branch
from
e225d46 to
2ad7c5d
Compare
There was a problem hiding this comment.
Pull request overview
This PR updates the Base UI dependency from @base-ui-components/react to @base-ui/react, which appears to be a breaking change from beta to a stable v1.0.0 release. The changes also refactor several components to align with the new API structure.
Key changes:
- Updated package dependency from
@base-ui-components/react(v1.0.0-beta.6) to@base-ui/react(v1.0.0) - Refactored Select component to use new API structure with Portal and Positioner
- Removed React.forwardRef from PlaybackRate components in favor of regular function components
Reviewed changes
Copilot reviewed 9 out of 10 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| apps/www/registry/pro | Added subproject commit reference |
| apps/www/registry/default/ui/volume-control.tsx | Updated import path and reformatted interface declaration |
| apps/www/registry/default/ui/timeline-control.tsx | Updated import path and reformatted interface declarations |
| apps/www/registry/default/ui/playback-rate.tsx | Removed forwardRef wrappers and simplified SelectTrigger implementation |
| apps/www/registry/default/examples/playback-rate-demo.tsx | Removed SelectPositioner wrapper in favor of props on SelectContent |
| apps/www/registry/default/blocks/linear-player/components/playback-rate-control.tsx | Removed SelectPositioner wrapper and align prop from SelectContent |
| apps/www/registry/collection/registry-ui.ts | Updated dependency declarations |
| apps/www/registry/collection/registry-blocks.ts | Updated dependency declaration |
| apps/www/package.json | Updated package dependency version |
| apps/www/components/ui/select.tsx | Major refactor to align with new Base UI API structure |
apps/www/registry/default/blocks/linear-player/components/playback-rate-control.tsx
Outdated
Show resolved
Hide resolved
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (2)
apps/www/registry/default/ui/playback-rate.tsx (2)
15-28: Missing ref forwarding andasChildprop for composition.The refactor from
forwardRefto a plain function component removes the ability to pass refs to this component. Per coding guidelines, UI components should support composition via@radix-ui/react-slotwith anasChildprop and usecomposeRefsfor ref handling.Additionally, the inline
onValueChangecallback should be memoized withuseCallbackto prevent unnecessary re-renders in downstream components.🔎 Suggested implementation with ref forwarding and memoization
-export function SelectRoot( - props: React.ComponentProps<typeof SelectPrimitive> -) { +export const SelectRoot = React.forwardRef< + React.ComponentRef<typeof SelectPrimitive>, + React.ComponentProps<typeof SelectPrimitive> +>((props, ref) => { const playbackRate = useMediaStore((state) => state.playbackRate) const { setPlaybackRate } = usePlaybackRate() + const handleValueChange = React.useCallback( + (value: string) => setPlaybackRate(Number(value)), + [setPlaybackRate] + ) + return ( <SelectPrimitive - onValueChange={(value) => setPlaybackRate(Number(value))} + ref={ref} + onValueChange={handleValueChange} value={playbackRate.toString()} {...props} /> ) -} +})Based on learnings, ref handling should use
composeRefsfrom@radix-ui/react-compose-refs, and high-frequency components should use memoization.
32-40: Missing ref forwarding.Similar to
SelectRoot, this component lost ref forwarding capability. For UI library components, consumers often need to attach refs for focus management, measurements, or imperative actions.🔎 Suggested implementation with ref forwarding
-export function SelectTrigger( - props: React.ComponentProps<typeof SelectTriggerPrimitive> -) { +export const SelectTrigger = React.forwardRef< + React.ComponentRef<typeof SelectTriggerPrimitive>, + React.ComponentProps<typeof SelectTriggerPrimitive> +>((props, ref) => { return ( - <SelectTriggerPrimitive {...props}> + <SelectTriggerPrimitive ref={ref} {...props}> <SelectValue /> </SelectTriggerPrimitive> ) -} +})
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
bun.lockis excluded by!**/*.lock
📒 Files selected for processing (9)
apps/www/components/ui/select.tsxapps/www/package.jsonapps/www/registry/collection/registry-blocks.tsapps/www/registry/collection/registry-ui.tsapps/www/registry/default/blocks/linear-player/components/playback-rate-control.tsxapps/www/registry/default/examples/playback-rate-demo.tsxapps/www/registry/default/ui/playback-rate.tsxapps/www/registry/default/ui/timeline-control.tsxapps/www/registry/default/ui/volume-control.tsx
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{ts,tsx}: Noanytypes unless absolutely necessary - always provide proper TypeScript interfaces and properly type all media event handlers and Shaka Player configurations
Never callusePlayerStates(),useVolumeStates(),useTimelineStates(), or similar singleton hooks directly in components - always centralize them in thePlayerHookscomponent to prevent re-render performance issues
Always support composition via@radix-ui/react-slotby including anasChildprop and using the Slot pattern for mandatory component composability
UseReact.memo,useCallback, anduseMemofor high-frequency components like timeline controls to maintain performance
Centralize all media event listeners in thePlayerHookscomponent to prevent re-render performance issues
Never block event propagation - always compose events instead and allow prop spreading with proper priority
UsecomposeRefsfrom@radix-ui/react-compose-refsfor handling multiple refs in components
All media control components must include proper ARIA attributes:role(slider/button),aria-label,aria-valuemin,aria-valuemax,aria-valuenow, andaria-pressedfor buttons
Support full keyboard navigation for media controls: Space/Enter for play-pause, Arrow keys for timeline/volume, M for mute, F for fullscreen
Implement focus management with visible focus indicators usingfocus-visiblestyles and respectprefers-reduced-motionfor animations
Ensure minimum 4.5:1 contrast ratio for all UI elements against their backgrounds per WCAG AA standards
Files:
apps/www/registry/default/blocks/linear-player/components/playback-rate-control.tsxapps/www/registry/collection/registry-blocks.tsapps/www/registry/default/examples/playback-rate-demo.tsxapps/www/registry/collection/registry-ui.tsapps/www/components/ui/select.tsxapps/www/registry/default/ui/volume-control.tsxapps/www/registry/default/ui/playback-rate.tsxapps/www/registry/default/ui/timeline-control.tsx
**/registry/default/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Ensure all components, hooks, and utilities are registered in
apps/www/registry/collection/to enable CLI-based installation
Files:
apps/www/registry/default/blocks/linear-player/components/playback-rate-control.tsxapps/www/registry/default/examples/playback-rate-demo.tsxapps/www/registry/default/ui/volume-control.tsxapps/www/registry/default/ui/playback-rate.tsxapps/www/registry/default/ui/timeline-control.tsx
**/blocks/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Example block implementations (like
linear-player) must demonstrate proper Event & Action Bridge setup with centralizedPlayerHooksand complete store composition
Files:
apps/www/registry/default/blocks/linear-player/components/playback-rate-control.tsx
**/registry/default/ui/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/registry/default/ui/**/*.{ts,tsx}: UI components must not apply case-specific styles - use only base styles from globals.css (shadcn/ui base theme) and approved Limeplay-specific CSS variables
Use only approved CSS variables from shadcn/ui and the Limeplay-specific variables list (--lp-timeline-, --lp-volume-, --lp-controls-fade)
When components extend HTML element attributes (e.g., React.VideoHTMLAttributes), define a separate*PropsDocstype specifically for API documentation to avoid documentation clutter
Files:
apps/www/registry/default/ui/volume-control.tsxapps/www/registry/default/ui/playback-rate.tsxapps/www/registry/default/ui/timeline-control.tsx
🧠 Learnings (14)
📚 Learning: 2025-11-24T19:02:04.422Z
Learnt from: CR
Repo: WINOFFRG/limeplay PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:02:04.422Z
Learning: Applies to **/*.{ts,tsx} : Never call `usePlayerStates()`, `useVolumeStates()`, `useTimelineStates()`, or similar singleton hooks directly in components - always centralize them in the `PlayerHooks` component to prevent re-render performance issues
Applied to files:
apps/www/registry/default/blocks/linear-player/components/playback-rate-control.tsxapps/www/registry/default/ui/playback-rate.tsx
📚 Learning: 2025-11-24T19:02:04.422Z
Learnt from: CR
Repo: WINOFFRG/limeplay PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:02:04.422Z
Learning: Applies to **/*.{ts,tsx} : Centralize all media event listeners in the `PlayerHooks` component to prevent re-render performance issues
Applied to files:
apps/www/registry/default/blocks/linear-player/components/playback-rate-control.tsxapps/www/registry/default/examples/playback-rate-demo.tsxapps/www/registry/default/ui/playback-rate.tsx
📚 Learning: 2025-11-24T19:02:04.422Z
Learnt from: CR
Repo: WINOFFRG/limeplay PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:02:04.422Z
Learning: Applies to **/*.{ts,tsx} : All media control components must include proper ARIA attributes: `role` (slider/button), `aria-label`, `aria-valuemin`, `aria-valuemax`, `aria-valuenow`, and `aria-pressed` for buttons
Applied to files:
apps/www/registry/default/blocks/linear-player/components/playback-rate-control.tsxapps/www/registry/default/ui/volume-control.tsxapps/www/registry/default/ui/playback-rate.tsxapps/www/registry/default/ui/timeline-control.tsx
📚 Learning: 2025-11-24T19:02:04.422Z
Learnt from: CR
Repo: WINOFFRG/limeplay PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:02:04.422Z
Learning: Applies to **/blocks/**/*.{ts,tsx} : Example block implementations (like `linear-player`) must demonstrate proper Event & Action Bridge setup with centralized `PlayerHooks` and complete store composition
Applied to files:
apps/www/registry/default/blocks/linear-player/components/playback-rate-control.tsx
📚 Learning: 2025-11-24T19:02:04.422Z
Learnt from: CR
Repo: WINOFFRG/limeplay PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:02:04.422Z
Learning: Applies to **/registry/default/ui/**/*.{ts,tsx} : Use only approved CSS variables from shadcn/ui and the Limeplay-specific variables list (--lp-timeline-*, --lp-volume-*, --lp-controls-fade)
Applied to files:
apps/www/registry/default/blocks/linear-player/components/playback-rate-control.tsxapps/www/registry/collection/registry-ui.tsapps/www/registry/default/ui/volume-control.tsxapps/www/registry/default/ui/playback-rate.tsxapps/www/registry/default/ui/timeline-control.tsx
📚 Learning: 2025-11-24T19:02:04.422Z
Learnt from: CR
Repo: WINOFFRG/limeplay PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:02:04.422Z
Learning: Applies to **/*.{ts,tsx} : No `any` types unless absolutely necessary - always provide proper TypeScript interfaces and properly type all media event handlers and Shaka Player configurations
Applied to files:
apps/www/registry/default/blocks/linear-player/components/playback-rate-control.tsxapps/www/registry/default/examples/playback-rate-demo.tsx
📚 Learning: 2025-11-24T19:02:04.422Z
Learnt from: CR
Repo: WINOFFRG/limeplay PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:02:04.422Z
Learning: Applies to **/registry/default/**/*.{ts,tsx} : Ensure all components, hooks, and utilities are registered in `apps/www/registry/collection/` to enable CLI-based installation
Applied to files:
apps/www/registry/collection/registry-blocks.tsapps/www/registry/collection/registry-ui.ts
📚 Learning: 2025-11-24T19:02:04.422Z
Learnt from: CR
Repo: WINOFFRG/limeplay PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:02:04.422Z
Learning: Applies to **/registry/default/ui/**/*.{ts,tsx} : UI components must not apply case-specific styles - use only base styles from globals.css (shadcn/ui base theme) and approved Limeplay-specific CSS variables
Applied to files:
apps/www/registry/collection/registry-ui.tsapps/www/registry/default/ui/volume-control.tsxapps/www/registry/default/ui/playback-rate.tsx
📚 Learning: 2025-11-24T19:02:04.422Z
Learnt from: CR
Repo: WINOFFRG/limeplay PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:02:04.422Z
Learning: Applies to **/registry/default/ui/**/*.{ts,tsx} : When components extend HTML element attributes (e.g., React.VideoHTMLAttributes), define a separate `*PropsDocs` type specifically for API documentation to avoid documentation clutter
Applied to files:
apps/www/registry/collection/registry-ui.tsapps/www/registry/default/ui/volume-control.tsxapps/www/registry/default/ui/playback-rate.tsx
📚 Learning: 2025-11-24T19:02:04.422Z
Learnt from: CR
Repo: WINOFFRG/limeplay PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:02:04.422Z
Learning: Applies to **/*.{ts,tsx} : Use `React.memo`, `useCallback`, and `useMemo` for high-frequency components like timeline controls to maintain performance
Applied to files:
apps/www/registry/collection/registry-ui.tsapps/www/registry/default/ui/playback-rate.tsxapps/www/registry/default/ui/timeline-control.tsx
📚 Learning: 2025-11-24T19:02:04.422Z
Learnt from: CR
Repo: WINOFFRG/limeplay PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:02:04.422Z
Learning: Applies to **/*.{ts,tsx} : Use `composeRefs` from `radix-ui/react-compose-refs` for handling multiple refs in components
Applied to files:
apps/www/registry/default/ui/playback-rate.tsx
📚 Learning: 2025-11-24T19:02:04.422Z
Learnt from: CR
Repo: WINOFFRG/limeplay PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:02:04.422Z
Learning: Applies to **/*.{ts,tsx} : Implement focus management with visible focus indicators using `focus-visible` styles and respect `prefers-reduced-motion` for animations
Applied to files:
apps/www/registry/default/ui/playback-rate.tsx
📚 Learning: 2025-11-24T19:02:04.422Z
Learnt from: CR
Repo: WINOFFRG/limeplay PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:02:04.422Z
Learning: Applies to **/*.{ts,tsx} : Always support composition via `radix-ui/react-slot` by including an `asChild` prop and using the Slot pattern for mandatory component composability
Applied to files:
apps/www/registry/default/ui/playback-rate.tsx
📚 Learning: 2025-11-24T19:02:04.422Z
Learnt from: CR
Repo: WINOFFRG/limeplay PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:02:04.422Z
Learning: Applies to **/PlayerHooks.{ts,tsx} : All media event listeners and singleton hook calls (`usePlayerStates()`, `useVolumeStates()`, etc.) must be centralized in the `PlayerHooks` component with proper memoization to prevent performance issues
Applied to files:
apps/www/registry/default/ui/playback-rate.tsx
🧬 Code graph analysis (3)
apps/www/registry/collection/registry-blocks.ts (2)
scripts/utils/changeset-utils.ts (2)
getReleaseSummary(68-92)getChangesetEntries(39-62)scripts/utils/changelog-utils.ts (1)
a(144-144)
apps/www/package.json (1)
scripts/utils/changeset-utils.ts (1)
getReleaseSummary(68-92)
apps/www/registry/default/ui/timeline-control.tsx (1)
packages/limeplay-core/src/hooks/useTimelineDrag.ts (2)
SliderHandlerConfig(5-14)useTimelineDrag(25-142)
🔇 Additional comments (13)
apps/www/registry/default/ui/timeline-control.tsx (2)
3-3: Import path updated correctly.The import path change from
@base-ui-components/react/sliderto@base-ui/react/slideris consistent with the package migration.
157-172: Type definitions updated for new API surface.The interface declarations now correctly extend
React.ComponentProps<typeof SliderPrimitive.Track>andReact.ComponentProps<typeof SliderPrimitive.Thumb>, which aligns with the@base-ui/reactv1.0.0 API.apps/www/registry/collection/registry-blocks.ts (1)
10-10: Registry dependency updated correctly.The dependency string update ensures CLI-based installations will reference the correct
@base-ui/reactpackage. This is consistent with the package.json migration.apps/www/registry/default/ui/volume-control.tsx (2)
3-3: Import path updated correctly.The slider import path change is consistent with the package migration.
154-156: Type definition formatting updated.The
ThumbPropsinterface correctly extendsReact.ComponentPropsWithoutRef<typeof SliderPrimitive.Thumb>, maintaining proper type inference with the new API.apps/www/registry/collection/registry-ui.ts (2)
150-150: Volume control registry dependency updated.The dependency array correctly references
@base-ui/reactfor CLI installation.
235-235: Timeline control registry dependency updated.The dependency array correctly references
@base-ui/react, consistent with the package migration across all registry entries.apps/www/components/ui/select.tsx (4)
3-3: Import path updated for new package.The select primitive import correctly references the new
@base-ui/react/selectpath.
11-58: SelectContent now internalizes Portal/Positioner/Popup composition.This is a good architectural improvement that simplifies consumer usage. The component now accepts positioning props (
align,side,sideOffset, etc.) directly and handles the Portal/Positioner/Popup hierarchy internally.The integrated
SelectScrollUpButtonandSelectScrollDownButtonimprove UX for long lists.
93-102: ItemIndicator uses render prop pattern.The
renderprop onSelectPrimitive.ItemIndicatorcorrectly wraps the indicator in a positioned span. This pattern aligns with the Base UI v1.0.0 API for custom rendering.
227-238: SelectPositioner removal is fully migrated — no remaining usages found in the codebase.A comprehensive search across all TypeScript and TSX files confirms that
SelectPositioneris no longer referenced anywhere in the codebase. All consumers have been successfully migrated.apps/www/registry/default/examples/playback-rate-demo.tsx (1)
20-28: Correctly adapted to new SelectContent API.The
SelectPositionerwrapper has been removed, and thealign="start"prop is now passed directly toSelect.SelectContent, which handles positioning internally. This is the correct migration pattern.apps/www/registry/default/blocks/linear-player/components/playback-rate-control.tsx (1)
20-27: Correctly adapted to new SelectContent API.The
SelectPositionerwrapper has been removed. Note that this component uses the defaultalign="center"whileplayback-rate-demo.tsxexplicitly setsalign="start". Verify this is the intended positioning behavior for the linear-player block.
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
apps/www/registry/default/blocks/linear-player/components/media-element.tsx (1)
23-36: Consider removing redundant src conditionals.Since
srcis required inMediaElementProps, the conditional checksif (src)on lines 23 and 42 are redundant. TypeScript guaranteessrcis always provided.🔎 Proposed simplification
- if (src) { - try { - const parsedUrl = new URL(src) + try { + const parsedUrl = new URL(src) - if (!["http:", "https:"].includes(parsedUrl.protocol)) { - throw new Error("Invalid URL protocol") - } - } catch (error) { - console.error( - "Invalid playback URL:", - error instanceof Error ? error.message : "Unknown error" - ) + if (!["http:", "https:"].includes(parsedUrl.protocol)) { + throw new Error("Invalid URL protocol") } + } catch (error) { + console.error( + "Invalid playback URL:", + error instanceof Error ? error.message : "Unknown error" + ) } if (config) { player.configure(config) } - if (src) { - void player - .load(src) - .then(() => { - console.debug("[limeplay] media loaded") - }) - .catch((error: unknown) => { - console.error("[limeplay] error loading media:", error) - }) - } + void player + .load(src) + .then(() => { + console.debug("[limeplay] media loaded") + }) + .catch((error: unknown) => { + console.error("[limeplay] error loading media:", error) + })Also applies to: 42-51
apps/www/content/docs/components/playback-rate.mdx (1)
102-145: Add accessibility documentation section.The coding guidelines require that documentation for media controls include proper ARIA labels, keyboard navigation support, and focus management details. Consider adding an "Accessibility" section after "Understanding" that documents:
- ARIA attributes provided by the Select component
- Keyboard navigation (e.g., Arrow keys to navigate options, Enter to select, Escape to close)
- Focus management behavior
Additionally, consider using
<AutoTypeTable>for the Components API reference section instead of manual tables, as specified in the guidelines.As per coding guidelines: "Include proper ARIA labels, keyboard navigation support, and focus management details in accessibility documentation for all media controls" and "Use
<AutoTypeTable path='...' name='...' />for API reference sections."📝 Example accessibility section
## Accessibility The Playback Rate Control is built on Radix UI Select primitives and includes: - **ARIA attributes**: Proper `role`, `aria-expanded`, `aria-haspopup` attributes for screen readers - **Keyboard navigation**: - `Space`/`Enter` to open dropdown - `Arrow Up/Down` to navigate options - `Enter` to select an option - `Escape` to close dropdown - **Focus management**: Focus is automatically managed when opening/closing the dropdown
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
apps/www/components/ui/select.tsxapps/www/content/docs/components/playback-rate.mdxapps/www/registry/collection/registry-ui.tsapps/www/registry/default/blocks/linear-player/components/media-element.tsxapps/www/registry/default/blocks/linear-player/components/media-player.tsxapps/www/registry/default/blocks/linear-player/components/playback-rate-control.tsxapps/www/registry/default/blocks/linear-player/page.tsxapps/www/registry/default/ui/playback-rate.tsxapps/www/types/index.d.ts
💤 Files with no reviewable changes (1)
- apps/www/types/index.d.ts
🚧 Files skipped from review as they are similar to previous changes (3)
- apps/www/registry/default/blocks/linear-player/components/playback-rate-control.tsx
- apps/www/registry/default/ui/playback-rate.tsx
- apps/www/registry/collection/registry-ui.ts
🧰 Additional context used
📓 Path-based instructions (5)
**/content/docs/**/*.mdx
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/content/docs/**/*.mdx: Transform internal registry import paths to external documentation paths (e.g.,@/registry/default/ui/mediabecomes@/components/limeplay/media)
For any component that relies on hooks, include both the hook import inPlayerHooksAND the store composition increate-media-store.tsas part of the installation steps
Use<AutoTypeTable path="./registry/default/ui/component.tsx" name="ComponentPropsDocs" />for API reference sections, referencing the correct component file and type name
Include proper ARIA labels, keyboard navigation support, and focus management details in accessibility documentation for all media controls
Documentation must follow the structure: Installation (with Event & Action Bridge setup) → Usage (with code examples) → Understanding (simple explanations) → API Reference (<AutoTypeTable>)
Files:
apps/www/content/docs/components/playback-rate.mdx
**/content/docs/components/**/*.mdx
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use
<ComponentPreview name="$$" withPlayer />to render isolated code examples for media components, where name attribute matches the registered component ID
Files:
apps/www/content/docs/components/playback-rate.mdx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{ts,tsx}: Noanytypes unless absolutely necessary - always provide proper TypeScript interfaces and properly type all media event handlers and Shaka Player configurations
Never callusePlayerStates(),useVolumeStates(),useTimelineStates(), or similar singleton hooks directly in components - always centralize them in thePlayerHookscomponent to prevent re-render performance issues
Always support composition via@radix-ui/react-slotby including anasChildprop and using the Slot pattern for mandatory component composability
UseReact.memo,useCallback, anduseMemofor high-frequency components like timeline controls to maintain performance
Centralize all media event listeners in thePlayerHookscomponent to prevent re-render performance issues
Never block event propagation - always compose events instead and allow prop spreading with proper priority
UsecomposeRefsfrom@radix-ui/react-compose-refsfor handling multiple refs in components
All media control components must include proper ARIA attributes:role(slider/button),aria-label,aria-valuemin,aria-valuemax,aria-valuenow, andaria-pressedfor buttons
Support full keyboard navigation for media controls: Space/Enter for play-pause, Arrow keys for timeline/volume, M for mute, F for fullscreen
Implement focus management with visible focus indicators usingfocus-visiblestyles and respectprefers-reduced-motionfor animations
Ensure minimum 4.5:1 contrast ratio for all UI elements against their backgrounds per WCAG AA standards
Files:
apps/www/registry/default/blocks/linear-player/components/media-element.tsxapps/www/components/ui/select.tsxapps/www/registry/default/blocks/linear-player/page.tsxapps/www/registry/default/blocks/linear-player/components/media-player.tsx
**/registry/default/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Ensure all components, hooks, and utilities are registered in
apps/www/registry/collection/to enable CLI-based installation
Files:
apps/www/registry/default/blocks/linear-player/components/media-element.tsxapps/www/registry/default/blocks/linear-player/page.tsxapps/www/registry/default/blocks/linear-player/components/media-player.tsx
**/blocks/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Example block implementations (like
linear-player) must demonstrate proper Event & Action Bridge setup with centralizedPlayerHooksand complete store composition
Files:
apps/www/registry/default/blocks/linear-player/components/media-element.tsxapps/www/registry/default/blocks/linear-player/page.tsxapps/www/registry/default/blocks/linear-player/components/media-player.tsx
🧠 Learnings (17)
📓 Common learnings
Learnt from: CR
Repo: WINOFFRG/limeplay PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:02:04.422Z
Learning: Applies to **/*.{ts,tsx} : Centralize all media event listeners in the `PlayerHooks` component to prevent re-render performance issues
Learnt from: CR
Repo: WINOFFRG/limeplay PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:02:04.422Z
Learning: Applies to **/*.{ts,tsx} : All media control components must include proper ARIA attributes: `role` (slider/button), `aria-label`, `aria-valuemin`, `aria-valuemax`, `aria-valuenow`, and `aria-pressed` for buttons
Learnt from: CR
Repo: WINOFFRG/limeplay PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:02:04.422Z
Learning: Applies to **/*.{ts,tsx} : No `any` types unless absolutely necessary - always provide proper TypeScript interfaces and properly type all media event handlers and Shaka Player configurations
Learnt from: CR
Repo: WINOFFRG/limeplay PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:02:04.422Z
Learning: Applies to **/*.{ts,tsx} : Support full keyboard navigation for media controls: Space/Enter for play-pause, Arrow keys for timeline/volume, M for mute, F for fullscreen
Learnt from: CR
Repo: WINOFFRG/limeplay PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:02:04.422Z
Learning: Applies to **/registry/default/ui/**/*.{ts,tsx} : When components extend HTML element attributes (e.g., React.VideoHTMLAttributes), define a separate `*PropsDocs` type specifically for API documentation to avoid documentation clutter
📚 Learning: 2025-11-24T19:02:04.422Z
Learnt from: CR
Repo: WINOFFRG/limeplay PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:02:04.422Z
Learning: Applies to **/content/docs/**/*.mdx : Include proper ARIA labels, keyboard navigation support, and focus management details in accessibility documentation for all media controls
Applied to files:
apps/www/content/docs/components/playback-rate.mdx
📚 Learning: 2025-11-24T19:02:04.422Z
Learnt from: CR
Repo: WINOFFRG/limeplay PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:02:04.422Z
Learning: Applies to **/*.{ts,tsx} : All media control components must include proper ARIA attributes: `role` (slider/button), `aria-label`, `aria-valuemin`, `aria-valuemax`, `aria-valuenow`, and `aria-pressed` for buttons
Applied to files:
apps/www/content/docs/components/playback-rate.mdxapps/www/registry/default/blocks/linear-player/components/media-element.tsxapps/www/registry/default/blocks/linear-player/components/media-player.tsx
📚 Learning: 2025-11-24T19:02:04.422Z
Learnt from: CR
Repo: WINOFFRG/limeplay PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:02:04.422Z
Learning: Applies to **/*.{ts,tsx} : No `any` types unless absolutely necessary - always provide proper TypeScript interfaces and properly type all media event handlers and Shaka Player configurations
Applied to files:
apps/www/registry/default/blocks/linear-player/components/media-element.tsxapps/www/registry/default/blocks/linear-player/components/media-player.tsx
📚 Learning: 2025-11-24T19:02:04.422Z
Learnt from: CR
Repo: WINOFFRG/limeplay PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:02:04.422Z
Learning: Applies to **/*.{ts,tsx} : Centralize all media event listeners in the `PlayerHooks` component to prevent re-render performance issues
Applied to files:
apps/www/registry/default/blocks/linear-player/components/media-element.tsxapps/www/registry/default/blocks/linear-player/page.tsxapps/www/registry/default/blocks/linear-player/components/media-player.tsx
📚 Learning: 2025-11-24T19:02:04.422Z
Learnt from: CR
Repo: WINOFFRG/limeplay PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:02:04.422Z
Learning: Applies to **/registry/default/ui/**/*.{ts,tsx} : When components extend HTML element attributes (e.g., React.VideoHTMLAttributes), define a separate `*PropsDocs` type specifically for API documentation to avoid documentation clutter
Applied to files:
apps/www/registry/default/blocks/linear-player/components/media-element.tsxapps/www/components/ui/select.tsxapps/www/registry/default/blocks/linear-player/components/media-player.tsx
📚 Learning: 2025-11-24T19:02:04.422Z
Learnt from: CR
Repo: WINOFFRG/limeplay PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:02:04.422Z
Learning: Applies to **/PlayerHooks.{ts,tsx} : All media event listeners and singleton hook calls (`usePlayerStates()`, `useVolumeStates()`, etc.) must be centralized in the `PlayerHooks` component with proper memoization to prevent performance issues
Applied to files:
apps/www/registry/default/blocks/linear-player/components/media-element.tsxapps/www/registry/default/blocks/linear-player/components/media-player.tsx
📚 Learning: 2025-11-24T19:02:04.422Z
Learnt from: CR
Repo: WINOFFRG/limeplay PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:02:04.422Z
Learning: Applies to **/content/docs/**/*.mdx : For any component that relies on hooks, include both the hook import in `PlayerHooks` AND the store composition in `create-media-store.ts` as part of the installation steps
Applied to files:
apps/www/registry/default/blocks/linear-player/components/media-element.tsxapps/www/registry/default/blocks/linear-player/components/media-player.tsx
📚 Learning: 2025-11-24T19:02:04.422Z
Learnt from: CR
Repo: WINOFFRG/limeplay PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:02:04.422Z
Learning: Applies to **/blocks/**/*.{ts,tsx} : Example block implementations (like `linear-player`) must demonstrate proper Event & Action Bridge setup with centralized `PlayerHooks` and complete store composition
Applied to files:
apps/www/registry/default/blocks/linear-player/components/media-element.tsxapps/www/registry/default/blocks/linear-player/page.tsxapps/www/registry/default/blocks/linear-player/components/media-player.tsx
📚 Learning: 2025-11-24T19:02:04.422Z
Learnt from: CR
Repo: WINOFFRG/limeplay PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:02:04.422Z
Learning: Applies to **/registry/default/ui/**/*.{ts,tsx} : Use only approved CSS variables from shadcn/ui and the Limeplay-specific variables list (--lp-timeline-*, --lp-volume-*, --lp-controls-fade)
Applied to files:
apps/www/registry/default/blocks/linear-player/components/media-element.tsxapps/www/registry/default/blocks/linear-player/page.tsx
📚 Learning: 2025-11-24T19:02:04.422Z
Learnt from: CR
Repo: WINOFFRG/limeplay PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:02:04.422Z
Learning: Applies to **/*.{ts,tsx} : Never call `usePlayerStates()`, `useVolumeStates()`, `useTimelineStates()`, or similar singleton hooks directly in components - always centralize them in the `PlayerHooks` component to prevent re-render performance issues
Applied to files:
apps/www/registry/default/blocks/linear-player/components/media-element.tsxapps/www/registry/default/blocks/linear-player/page.tsxapps/www/registry/default/blocks/linear-player/components/media-player.tsx
📚 Learning: 2025-11-24T19:02:04.422Z
Learnt from: CR
Repo: WINOFFRG/limeplay PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:02:04.422Z
Learning: Applies to **/content/docs/components/**/*.mdx : Use `<ComponentPreview name="$$" withPlayer />` to render isolated code examples for media components, where name attribute matches the registered component ID
Applied to files:
apps/www/registry/default/blocks/linear-player/components/media-element.tsxapps/www/registry/default/blocks/linear-player/page.tsxapps/www/registry/default/blocks/linear-player/components/media-player.tsx
📚 Learning: 2025-11-24T19:02:04.422Z
Learnt from: CR
Repo: WINOFFRG/limeplay PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:02:04.422Z
Learning: Applies to **/*.{ts,tsx} : Always support composition via `radix-ui/react-slot` by including an `asChild` prop and using the Slot pattern for mandatory component composability
Applied to files:
apps/www/components/ui/select.tsx
📚 Learning: 2025-11-24T19:02:04.422Z
Learnt from: CR
Repo: WINOFFRG/limeplay PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:02:04.422Z
Learning: Applies to **/content/docs/**/*.mdx : Use `<AutoTypeTable path="./registry/default/ui/component.tsx" name="ComponentPropsDocs" />` for API reference sections, referencing the correct component file and type name
Applied to files:
apps/www/components/ui/select.tsx
📚 Learning: 2025-11-24T19:02:04.422Z
Learnt from: CR
Repo: WINOFFRG/limeplay PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:02:04.422Z
Learning: Applies to **/*.{ts,tsx} : Implement focus management with visible focus indicators using `focus-visible` styles and respect `prefers-reduced-motion` for animations
Applied to files:
apps/www/components/ui/select.tsx
📚 Learning: 2025-11-24T19:02:04.422Z
Learnt from: CR
Repo: WINOFFRG/limeplay PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:02:04.422Z
Learning: Applies to **/*.{ts,tsx} : Use `React.memo`, `useCallback`, and `useMemo` for high-frequency components like timeline controls to maintain performance
Applied to files:
apps/www/registry/default/blocks/linear-player/components/media-player.tsx
📚 Learning: 2025-11-24T19:02:04.422Z
Learnt from: CR
Repo: WINOFFRG/limeplay PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:02:04.422Z
Learning: Applies to **/hooks/use-*.{ts,tsx} : Implement proper error handling for media operations with `.catch()` handlers that gracefully handle playback failures, network issues, and DRM errors
Applied to files:
apps/www/registry/default/blocks/linear-player/components/media-player.tsx
🧬 Code graph analysis (4)
apps/www/registry/default/blocks/linear-player/components/media-element.tsx (4)
apps/www/registry/default/blocks/basic-player/components/media-element.tsx (1)
MediaElement(8-51)packages/limeplay/src/components/Media.tsx (3)
props(13-189)state(20-20)mediaRef(27-53)packages/limeplay-core/src/types/limeplay.d.ts (2)
CreateShakaPlayerProps(39-41)LimeplayRequiredProps(11-14)packages/limeplay-core/src/components/MediaOutlet.tsx (2)
React(10-26)children(6-35)
apps/www/components/ui/select.tsx (2)
apps/www/lib/utils.ts (1)
cn(4-6)apps/www/registry/default/lib/utils.ts (1)
cn(6-8)
apps/www/registry/default/blocks/linear-player/page.tsx (2)
apps/www/registry/default/blocks/linear-player/lib/playlist.ts (1)
ASSETS(11-51)apps/www/registry/default/blocks/linear-player/components/playlist.tsx (1)
ASSETS(27-67)
apps/www/registry/default/blocks/linear-player/components/media-player.tsx (1)
apps/www/registry/default/blocks/linear-player/components/media-element.tsx (2)
MediaElementProps(10-13)MediaElement(15-64)
🔇 Additional comments (13)
apps/www/registry/default/blocks/linear-player/components/media-player.tsx (2)
3-3: LGTM: Clean props extension pattern.The extension of
LinearMediaPlayerPropswithMediaElementPropscleanly incorporatesconfigandsrcinto the public API. This makes the media source and configuration explicit rather than relying on defaults.Also applies to: 16-19
24-24: LGTM: Props correctly forwarded to MediaElement.The destructured
configandsrcprops are properly passed to theMediaElementcomponent, maintaining the data flow from parent to child.Also applies to: 43-43
apps/www/registry/default/blocks/linear-player/components/media-element.tsx (1)
10-13: LGTM: Well-defined type with required src.The
MediaElementPropstype correctly makessrcrequired andconfigoptional, improving type safety by ensuring consumers always provide a media source.apps/www/registry/default/blocks/linear-player/page.tsx (1)
3-3: LGTM: Props correctly passed from ASSETS to LinearMediaPlayer.The config and src props are properly extracted from
ASSETS[0]and passed to theLinearMediaPlayercomponent, demonstrating the new explicit props API.Also applies to: 8-8
apps/www/content/docs/components/playback-rate.mdx (1)
88-90: LGTM! SelectPositioner removal aligns with updated Select API.The change from
SelectPositionerto directSelectContentusage is consistent with the refactored Select component API. Thealign="start"prop correctly maintains the dropdown alignment.apps/www/components/ui/select.tsx (8)
15-64: LGTM! SelectContent refactored to use Radix Portal/Content/Viewport pattern.The migration from Popup/Positioner to Portal/Content is well-implemented:
- Proper use of Radix CSS custom properties for positioning and sizing
- Scroll buttons correctly integrated within the content
- Animation states properly configured with data attributes
- Conditional position styling for "popper" mode is appropriate
72-104: LGTM! SelectItem properly structured with Radix primitives.The changes improve the component structure:
- Disabled state correctly uses
data-[disabled]attribute selector- ItemIndicator wrapped in a properly positioned span with
data-slot- Maintains proper accessibility with ItemText
106-117: LGTM! SelectLabel migrated to Radix Label primitive.Clean migration from GroupLabel to SelectPrimitive.Label with proper type signature.
119-135: LGTM! SelectScrollDownButton properly implemented.Correct usage of Radix ScrollDownButton primitive with appropriate styling.
137-153: LGTM! SelectScrollUpButton properly implemented.Consistent with ScrollDownButton, correctly using Radix ScrollUpButton primitive.
168-206: LGTM! SelectTrigger updated with proper Radix Icon primitive.The changes align with Radix patterns:
- Placeholder state correctly uses
data-[placeholder]selector- Icon properly wrapped with
SelectPrimitive.IconusingasChild- Focus management includes
focus-visiblestyles as per guidelines- Accessibility attributes properly supported (
aria-invalid,disabled)As per coding guidelines: Components include proper focus management with visible focus indicators.
208-212: LGTM! SelectValue simplified to use Radix Value primitive directly.Clean delegation to Radix's Value component with proper type signature.
214-225: LGTM! Export updates reflect the new Select API.The export changes are intentional and consistent with the Radix migration:
- Removed
SelectPositioner(no longer needed with Portal/Content pattern)- Added
SelectScrollDownButtonandSelectScrollUpButtonfor enhanced scroll UXThe documentation has been updated to reflect these API changes.
1 participant
Fixes #128
Summary by CodeRabbit
New Features
Refactor
Chores
✏️ Tip: You can customize this high-level summary in your review settings.