Player Layout

Installation

npx shadcn add @limeplay/player-layout

Understanding

Provides composible set of components which helps to setup player container structure. The layout system is built with accessibility and responsive design in mind.

Components

The Player Layout is composed of multiple components that work together to create a structured media player interface.

RootContainer

The outermost container that manages aspect ratio, idle state, and focus management.

API Reference

Basic Usage

import * as Layout from "@/components/limeplay/player-layout"

export function MediaPlayer() {
  return (
    <MediaProvider>
      <PlayerHooks />
      <Layout.RootContainer height={720} width={1280}>
        <Layout.PlayerContainer>
          <MediaElement />
        </Layout.PlayerContainer>
      </Layout.RootContainer>
    </MediaProvider>
  )
}

PlayerContainer

Container for the actual media element. Maintains aspect ratio and handles overflow.

ControlsContainer

Container for player controls. Uses pointer-events management for proper interaction.

ControlsBottomContainer

Bottom-aligned container for control buttons and sliders.

ControlsOverlayContainer

Overlay gradient that provides visual separation for controls.