Volume Control
Slider control to control the media volume. Composed with volume state control
Installation
npx shadcn add @limeplay/volume-controlAdd Event & Action Bridge
Import the useVolumeStates hook in your existing PlayerHooks component.
import React from "react"
import { usePlaybackStates } from "@/hooks/limeplay/use-playback"
import { usePlayerStates } from "@/hooks/limeplay/use-player"
import { useVolumeStates } from "@/hooks/limeplay/use-volume"
export const PlayerHooks = React.memo(() => {
usePlayerStates()
usePlaybackStates()
useVolumeStates()
return null
})Add the Store States
import { createPlaybackStore, PlaybackStore } from "@/hooks/limeplay/use-playback"
import { createPlayerStore, PlayerStore } from "@/hooks/limeplay/use-player"
import { createVolumeStore, VolumeStore } from "@/hooks/limeplay/use-volume"
export type TypeMediaStore = PlaybackStore &
PlayerStore &
VolumeStore &
{}
export function createMediaStore(initProps?: Partial<CreateMediaStoreProps>) {
const mediaStore = create<TypeMediaStore>()((...etc) => ({
...createPlaybackStore(...etc),
...createPlayerStore(...etc),
...createVolumeStore(...etc),
...initProps,
}))
return mediaStore
}Example Usage
- 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>
)
}- Use the component in your player.
<VolumeControlSlider />