Mute Control
Controls the volume mute toggle state
Installation
Install the component
npx shadcn add https://limeplay.winoffrg.dev/r/styles/default/mute-control.jsonAdd 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-state"
export const PlayerHooks = React.memo(() => {
useShakaPlayer()
useVolumeStates()
return null
})Add the Store States
import {
createVolumeStore,
VolumeStore
} from "@/hooks/limeplay/use-volume"
import {
createPlayerRootStore,
PlayerRootStore,
} from "@/hooks/limeplay/use-player-root-store"
export type TypeMediaStore = PlayerRootStore &
VolumeStore & {}
export function createMediaStore(initProps?: Partial<CreateMediaStoreProps>) {
const mediaStore = create<TypeMediaStore>()((...etc) => ({
...createPlayerRootStore(...etc),
...createVolumeStore(...etc),
...initProps,
}))
return mediaStore
}Usage
- Design the mute button with icons and states.
"use client"
import { MuteControl } from "@/components/limeplay/mute-control"
import { useMediaStore } from "@/components/limeplay/media-provider"
import { SpeakerHighIcon, SpeakerLowIcon, SpeakerXIcon } from "@phosphor-icons/react"
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>