Volume Control

Installation

npx shadcn add @limeplay/volume-control

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

1. Compose the volume slide and handle states

import { cn } from "@/lib/utils"
import * as VolumeSlider from "@/components/limeplay/volume-control"

export function VolumeControlSlider() {
  return (
    <VolumeSlider.Root
      className={cn("relative h-1 focus-area -focus-area-x-2 -focus-area-y-12")}
      orientation="horizontal"
    >
      <VolumeSlider.Track>
        <VolumeSlider.Progress />
      </VolumeSlider.Track>
      <VolumeSlider.Thumb />
    </VolumeSlider.Root>
  )
}

2. Use the component in your player.

<VolumeControlSlider />

Understanding

The Volume Control is a composable slider built with the Event & Action Bridge pattern:

• Event Bridge: useVolumeStates() listens to volumechange events and syncs volume/mute state
• Action Bridge: Components use useVolume() to call setVolume() which controls the media element

Accessibility

• ARIA Slider Pattern: Proper aria-valuemin, aria-valuemax, aria-valuenow attributes
• Keyboard Support: Arrow keys for volume adjustment
• Screen Reader: Announces volume percentage changes
• Visual Feedback: Clear volume level indication

Components

The volume slider is composed of multiple parts for maximum flexibility.

Root

Main container with orientation support (horizontal/vertical).

API Reference

Thumb

Draggable handle for volume adjustment.

API Reference

Track

Visual track showing volume range. Extends SliderPrimitive.Track props.

Progress

Filled portion showing current volume. Extends SliderPrimitive.Indicator props.