use-playback-rate

Installation

npx shadcn add @limeplay/use-playback-rate

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

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

Use the usePlaybackRate() hook to control playback speed.

import { usePlaybackRate } from "@/hooks/limeplay/use-playback-rate"
import { useMediaStore } from "@/components/limeplay/media-provider"

export function PlaybackRateControl() {
  const playbackRate = useMediaStore((state) => state.playbackRate)
  const playbackRates = useMediaStore((state) => state.playbackRates)
  const { setPlaybackRate, setTrickplayRate } = usePlaybackRate()

  return (
    <select
      value={playbackRate}
      onChange={(e) => setPlaybackRate(Number(e.target.value))}
    >
      {playbackRates.map((rate) => (
        <option key={rate} value={rate}>
          {rate}x
        </option>
      ))}
    </select>
  )
}

Understanding

The use-playback-rate hook provides playback speed control following the Event & Action Bridge pattern:

• Event Bridge: usePlaybackRateStates() listens to ratechange events from both the media element and Shaka Player, syncing the current playback rate to the React store
• Action Bridge: usePlaybackRate() provides setPlaybackRate() for standard playback speed and setTrickplayRate() for Shaka Player's trickplay feature

Playback Rates

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

These can be customized in your media store configuration.

Trickplay

Shaka Player's trickplay feature allows fast-forward and rewind at custom speeds, which is useful for seeking through content quickly.

API Reference

usePlaybackRateStates()

Sets up event listeners for playback rate changes. This hook should be called once in your PlayerHooks component.

usePlaybackRate()

Returns control functions for managing playback rate.

Returns

Store State

The playback rate store provides the following state accessed via useMediaStore: