Mute Control
Controls the volume mute toggle state
Installation
Install the component
npx shadcn add @limeplay/mute-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 { 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
}Usage
- Design the mute button with icons and states.
"use client"
import {
SpeakerHighIcon,
SpeakerLowIcon,
SpeakerXIcon,
} from "@phosphor-icons/react"
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 (
<Button size="icon" asChild>
<MuteControl>
{muted || volume === 0 ? (
<SpeakerXIcon size={18} weight="fill" />
) : volume < 0.5 ? (
<SpeakerLowIcon size={18} weight="fill" />
) : (
<SpeakerHighIcon size={18} weight="fill" />
)}
</MuteControl>
</Button>
)
}- Place the button inside the
BottomControlscomponent.
<Layout.ControlsContainer>
<BottomControls>
<MuteControlButton />
</BottomControls>
</Layout.ControlsContainer>