Mute Control
Controls the volume mute toggle state
Installation
npx shadcn add @limeplay/mute-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
- Design the mute button with icons and states.
"use client"
import {
SpeakerHighIcon,
SpeakerLowIcon,
SpeakerXIcon,
} from "@phosphor-icons/react"
import { Button } from "@/components/ui/button"
import { useMediaStore } from "@/components/limeplay/media-provider"
import { MuteControl } from "@/components/limeplay/mute-control"
export function MuteControlButton() {
const muted = useMediaStore((state) => state.muted)
const volume = useMediaStore((state) => state.volume)
return (
<MuteControl asChild>
<Button variant="ghost" size="icon">
{muted || volume === 0 ? (
<SpeakerXIcon size={18} weight="fill" />
) : volume < 0.5 ? (
<SpeakerLowIcon size={18} weight="fill" />
) : (
<SpeakerHighIcon size={18} weight="fill" />
)}
</Button>
</MuteControl>
)
}- Use the component in your player.
<MuteControlButton />