Mute Control

Installation

Install the component

npx shadcn add @limeplay/mute-control

Add Event & Action Bridge

Import the useVolumeStates hook in your existing PlayerHooks component.

components/limeplay/player-hooks.tsx

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

lib/create-media-store.ts

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
}

Example Usage

Design the mute button with icons and states.

components/player/mute-control-button.tsx

"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.

components/player/bottom-controls.tsx

<MuteControlButton />

Understanding

The MuteControl component provides mute/unmute functionality for the media player. It follows the Event & Action Bridge pattern where:

Event Bridge: useVolumeStates() hook (called in PlayerHooks) listens to the native volumechange event and synchronizes the mute state to the React store
Action Bridge: The MuteControl component uses useVolume() to access toggleMute() which controls the native media element

This separation ensures state updates are centralized and performant while UI controls remain decoupled.

Components

MuteControl

The main component for toggling mute state. It supports the Slot pattern (asChild prop) for composition and includes automatic ARIA labels.

API Reference

Prop

Type

On this page