use-volume

Installation

npx shadcn add @limeplay/use-volume

import React from "react"

import { useShakaPlayer } from "@/hooks/limeplay/use-shaka-player"
import { useVolumeStates } from "@/hooks/limeplay/use-volume"

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

  return null
})

import { createPlayerStore, PlayerStore } from "@/hooks/limeplay/use-player"
import { createVolumeStore, VolumeStore } from "@/hooks/limeplay/use-volume"


export type TypeMediaStore = PlayerStore & VolumeStore & {} 

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

Example Usage

Use the useVolume() hook to control volume in your components.

import { useVolume } from "@/hooks/limeplay/use-volume"
import { useMediaStore } from "@/components/limeplay/media-provider"

export function VolumeControl() {
  const volume = useMediaStore((state) => state.volume)
  const muted = useMediaStore((state) => state.muted)
  const { setVolume, toggleMute } = useVolume()

  return (
    <div>
      <input
        type="range"
        min="0"
        max="1"
        step="0.01"
        value={volume}
        onChange={(e) => setVolume(Number(e.target.value))}
      />
      <button onClick={toggleMute}>
        {muted ? "Unmute" : "Mute"}
      </button>
    </div>
  )
}

Understanding

The use-volume hook provides volume and mute management following the Event & Action Bridge pattern:

• Event Bridge: useVolumeStates() listens to volumechange and audiotrackschanged events, syncing volume, mute, and audio track availability to the React store
• Action Bridge: useVolume() provides setVolume(), toggleMute(), and setMuted() functions that control the native media element

The hook automatically handles edge cases like setting volume to 0 (which automatically mutes) and provides a reset volume value when unmuting from 0.

API Reference

useVolumeStates()

Sets up event listeners for volume changes and audio track changes. This hook should be called once in your PlayerHooks component.

useVolume()

Returns control functions for managing volume and mute state.

Returns

setVolume Parameters

When to use optional parameters:

• progress: Pass when updating volume from a drag handler or scrubber interaction where you need to map a position to volume (e.g., setVolume(0.5, event.clientX / sliderWidth)).
• delta: Pass when implementing animated volume changes or smoothing transitions (e.g., setVolume(currentVolume, 0, 0.1) to increment by 0.1).

Store State

The volume store provides the following state accessed via useMediaStore: