Player Layout

Installation

npx shadcn add @limeplay/player-layout

Setup the player layout in provider

components/player/media-player.tsx

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

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.

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.

ControlsTopContainer

Top-aligned container for control buttons, typically used for titles or back buttons.

ControlsOverlayContainer

Overlay gradient that provides visual separation for controls.

On this page