Player Layout
Composable structural containers for player UI.
Installation
npx shadcn add @limeplay/player-layoutRequires mediaFeature registered in your
createMediaKit.
Usage
Import as a namespace and compose the layout:
import * as Layout from "@/components/limeplay/player-layout"
import { RootContainer } from "@/components/limeplay/root-container"
import { Media } from "@/components/limeplay/media"
export function MediaPlayer() {
return (
<MediaProvider>
<RootContainer>
<Layout.PlayerContainer>
<Media as="video" className="size-full object-cover" />
<Layout.ControlsOverlayContainer />
<Layout.ControlsContainer>
{/* Your controls */}
</Layout.ControlsContainer>
</Layout.PlayerContainer>
</RootContainer>
</MediaProvider>
)
}Components
RootContainer
Outermost wrapper. Manages idle state detection and focus management for accessibility.
PlayerContainer
Container for the media element. Maintains aspect ratio and handles overflow.
ControlsContainer
Structural container for player controls. Manages pointer-events for proper interaction layering.
ControlsBottomContainer
Bottom-aligned area for control buttons and sliders.
ControlsTopContainer
Top-aligned area, typically used for titles or back navigation.
ControlsOverlayContainer
Gradient overlay that provides visual separation between media and controls.