MuteButton

import { MuteButton } from '@videojs/react';
import { VolumeHighIcon, VolumeLowIcon, VolumeOffIcon } from '@videojs/react/icons';
import styles from './MuteButton.module.css';

/**
 * Basic MuteButton example demonstrating:
 * - Multi-state icon switching (high/medium/low/off)
 * - Volume level data attributes
 * - Smooth icon transitions
 *
 * Note: This component must be used within a MediaProvider context.
 * See the usage example in the documentation.
 */
export function BasicMuteButton() {
  return (
    <MuteButton className={styles.button}>
      <VolumeHighIcon className={styles.volumeHighIcon} />
      <VolumeLowIcon className={styles.volumeLowIcon} />
      <VolumeOffIcon className={styles.volumeOffIcon} />
    </MuteButton>
  );
}

.button {
  position: relative;
  display: grid;
  padding: 0.625rem;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  border: none;
  cursor: pointer;
  color: white;
  transition: background 150ms ease;
}

.button:hover {
  background: rgba(255, 255, 255, 0.15);
}

.button:active {
  background: rgba(255, 255, 255, 0.2);
}

/* Icon positioning - all icons occupy same grid cell */
.volumeHighIcon,
.volumeLowIcon,
.volumeOffIcon {
  grid-area: 1/1;
  transition: opacity 200ms ease;
  width: 18px;
  height: 18px;
  opacity: 0;
}

/* Show appropriate icon based on volume level using data attributes */
/* High volume (> 50%) */
.button[data-volume-level='high'] .volumeHighIcon {
  opacity: 1;
}

/* Medium/Low volume (1-50%) */
.button[data-volume-level='medium'] .volumeLowIcon,
.button[data-volume-level='low'] .volumeLowIcon {
  opacity: 1;
}

/* Muted/Off volume (0%) */
.button[data-volume-level='off'] .volumeOffIcon {
  opacity: 1;
}