Playback Rate Control

Installation

Install the component

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 { usePlayerStates } from "@/hooks/limeplay/use-player"
import { useShakaPlayer } from "@/hooks/limeplay/use-shaka-player"

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

  return null
})

Add the Store States

lib/create-media-store.ts

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


export type TypeMediaStore = PlayerStore & PlaybackRateStore & {} 

export function createMediaStore(initProps?: Partial<CreateMediaStoreProps>) {
  const mediaStore = create<TypeMediaStore>()((...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.SelectPositioner className="z-100" align="start">
        <Select.SelectContent className="min-w-24 backdrop-blur-md dark:bg-accent">
          <PlaybackRate.SelectGroup className="tracking-wider" />
        </Select.SelectContent>
      </Select.SelectPositioner>
    </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. The component provides:

Field	Type	Description
`playbackRate`	`number`	Current playback rate (e.g., 1, 1.5, 2)
`playbackRates`	`number[]`	Available playback rates [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2]

The usePlaybackRate() hook provides methods to control playback rate:

Method	Description
`setPlaybackRate`	Sets the playback rate for the media element
`setTrickplayRate`	Sets trickplay rate using Shaka Player

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

Available Playback Rates

Default rates: [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2]

These can be customized in your media store configuration.