Playback Rate Control

Installation

npx shadcn add @limeplay/playback-rate

Add Event & Action Bridge

Import the usePlaybackRateStates hook in your existing PlayerHooks component.

components/limeplay/player-hooks.tsx

"use client"

import React from "react"

import { usePlaybackRateStates } from "@/hooks/limeplay/use-playback-rate"
import { usePlaybackStates } from "@/hooks/limeplay/use-playback"
import { usePlayerStates } from "@/hooks/limeplay/use-player"

export const PlayerHooks = React.memo(() => {
  usePlayerStates()
  usePlaybackStates()
  usePlaybackRateStates() 

  return null
})

Add the Store States

lib/create-media-store.ts

import {
  createPlaybackRateStore,
  PlaybackRateStore,
} from "@/hooks/limeplay/use-playback-rate"
import { createPlaybackStore, PlaybackStore } from "@/hooks/limeplay/use-playback"
import { createPlayerStore, PlayerStore } from "@/hooks/limeplay/use-player"

export type TypeMediaStore = PlaybackStore &
  PlayerStore &
  PlaybackRateStore &
  {}

  const mediaStore = create<TypeMediaStore>()((...etc) => ({
    ...createPlaybackStore(...etc),
    ...createPlayerStore(...etc),
    ...createPlaybackRateStore(...etc),
    ...initProps,
  }))
  return mediaStore
}

Example Usage

Design the playback rate selector with dropdown and states.

components/player/playback-rate-control.tsx

import { Button } from "@/components/ui/button"
import * as Select from "@/components/ui/select"
import * as PlaybackRate from "@/components/limeplay/playback-rate"

export function PlaybackRateControl() {
  return (
    <PlaybackRate.SelectRoot>
      <Button variant="ghost" size="icon" asChild>
        <PlaybackRate.SelectTrigger
          size="sm"
          className="border-none bg-transparent px-8 shadow-none hover:bg-foreground/10 dark:bg-transparent dark:shadow-none"
        />
      </Button>
      <Select.SelectContent className="min-w-24" align="start">
        <PlaybackRate.SelectGroup className="tracking-wider" />
      </Select.SelectContent>
    </PlaybackRate.SelectRoot>
  )
}

Use the component in your player.

components/player/bottom-controls.tsx

<PlaybackRateControl />

The Playback Rate Control uses the usePlaybackRate() hook to manage playback speed. You can use the playbackRate and playbackRates fields from media store to get the current playback rate and available rates.

Components

The Playback Rate components are built on top of the Select primitive.

SelectRoot

Main container that manages playback rate state. Extends Select component props from @/components/ui/select.

SelectTrigger

Button that displays current playback rate (e.g., "1x", "1.5x"). Extends SelectTrigger component props from @/components/ui/select.

SelectGroup

Renders the list of available playback rates. Accepts a suffix prop (default: "x").

Props

Prop	Type	Default	Description
suffix	`string`	`"x"`	Suffix to append to rate value