Volume Control
Slider control to control the media volume. Composed with volume state control
Installation
Install the component
npx shadcn add @limeplay/volume-controlAdd Event & Action Bridge
Import the useVolumeStates hook in your existing PlayerHooks component.
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
})Add the Store States
import {
createVolumeStore,
VolumeStore
} from "@/hooks/limeplay/use-volume"
import {
createPlayerStore,
PlayerStore,
} from "@/hooks/limeplay/use-player"
export type TypeMediaStore = PlayerStore &
VolumeStore & {}
export function createMediaStore(initProps?: Partial<CreateMediaStoreProps>) {
const mediaStore = create<TypeMediaStore>()((...etc) => ({
...createPlayerStore(...etc),
...createVolumeStore(...etc),
...initProps,
}))
return mediaStore
}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>
)
}- Place the slider inside the
BottomControlscomponent.
<Layout.ControlsContainer>
<BottomControls>
<VolumeControlSlider />
</BottomControls>
</Layout.ControlsContainer>