Limeplay - Open Source Video Player UI ComponentsLimeplay

use-volume

Feature for managing volume level and mute state.

Installation

npx shadcn add @limeplay/use-volume

Register the feature:

lib/media.ts
"use client"

import { volumeFeature } from "@/hooks/limeplay/use-volume"

createMediaKit({
  features: [..., volumeFeature()] as const,
})

Store

Access via useVolumeStore(selector):

import { useVolumeStore } from "@/hooks/limeplay/use-volume"

const level = useVolumeStore((s) => s.level)
const muted = useVolumeStore((s) => s.muted)
const setVolume = useVolumeStore((s) => s.setVolume)

State

FieldTypeDescription
levelnumberCurrent volume (0–1)
mutedbooleanWhether audio is muted
hasAudiobooleanWhether the media has audio tracks

Actions

MethodDescription
setVolume(volume, progress?, delta?)Set volume level
setMuted(muted)Set mute state
toggleMute()Toggle mute on/off

Setting volume to 0 automatically mutes. Unmuting from 0 restores the previous volume level.

Events

EventPayloadWhen
volumechange{ volume, muted }Volume or mute state changes
mute{ muted }Mute is toggled

API Reference

Prop

Type

On this page