Playback Control

Installation

Install the 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.

components/limeplay/player-hooks.tsx

"use client"

import React from "react"

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

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

  return null
})

Add the Store States

lib/create-media-store.ts

import {
  createMediaStateStore,
  MediaStateStore,
} from "@/hooks/limeplay/use-media-state"
import {
  createPlayerRootStore,
  PlayerRootStore,
} from "@/hooks/limeplay/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
}

Usage

Design the playback button with icons and states.

components/player/playback-control-button.tsx

import { PlaybackControl } from "@/components/limeplay/playback-control"
import { useMediaStore } from "@/components/limeplay/media-provider"
import { PauseIcon, PlayIcon } from "@phosphor-icons/react"

export function PlaybackControlButton() {
  const status = useMediaStore((state) => state.status)

  return (
    <Button size="icon" asChild>
      <PlaybackControl>
        {status === "playing" && <PauseIcon weight="fill" size={18} />}
        {status === "paused" && <PlayIcon weight="fill" size={18} />}
      </PlaybackControl>
    </Button>
  )
}

Place the button inside the BottomControls component.

components/player/media-player.tsx

<Layout.ControlsContainer>
  <BottomControls>
    <PlaybackControlButton />
  </BottomControls>
</Layout.ControlsContainer>

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