Limeplay

Installation

Install the playback-control component:

npx shadcn add https://limeplay.winoffrg.dev/r/styles/default/playback-control.json

Add Event & Action Bridge

Import the useMediaStates hook in your existing PlayerHooks component. This hook setups the required events and action bridge for the playback state control to work.

components/player/player-hooks.tsx

import React from "react"

import { useMediaStates } from "@/registry/default/hooks/use-media-state"
import { useShakaPlayer } from "@/registry/default/hooks/use-shaka-player"

export const PlayerHooks = React.memo(() => {
  useShakaPlayer()
  useMediaStates() 

  return null
})

Add the Store States

lib/create-media-store.ts

import {
  createMediaStateStore,
  MediaStateStore,
} from "@/registry/default/hooks/use-media-state"
import {
  createPlayerRootStore,
  PlayerRootStore,
} from "@/registry/default/hooks/use-player-root-store"

export type TypeMediaStore = PlayerRootStore &
  MediaStateStore & {} 

export function createMediaStore(initProps?: Partial<CreateMediaStoreProps>) {
  const mediaStore = create<TypeMediaStore>()((...etc) => ({
    ...createPlayerRootStore(...etc),
    ...createMediaStateStore(...etc),
    ...initProps,
  }))
  return mediaStore
}

Understanding

You can use the status field from media store to get the current status of the media. List of possible values are:

Status	Description
`playing`	The media is playing
`paused`	The media is paused
`ended`	The media has reached the end
`buffering`	The media is buffering
`error`	The media has encountered an error
`init`	The media is initializing or has readyState 0
`stopped`	The media has been stopped

Playback State

Installation

Understanding

On this page