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;
}

<media-mute-button>
  <media-volume-high-icon></media-volume-high-icon>
  <media-volume-low-icon></media-volume-low-icon>
  <media-volume-off-icon></media-volume-off-icon>
</media-mute-button>

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 2rem;
  font-family:
    system-ui,
    -apple-system,
    sans-serif;
  background: #0a0a0a;
  color: white;
}

.demo-container {
  max-width: 800px;
  margin: 0 auto;
}

.media-container {
  position: relative;
  width: 100%;
  max-width: 640px;
}

video {
  width: 100%;
  height: auto;
  display: block;
}

.controls {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  z-index: 10;
}

media-mute-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;
}

media-mute-button:hover {
  background: rgba(255, 255, 255, 0.15);
}

media-mute-button:active {
  background: rgba(255, 255, 255, 0.2);
}

/* Icon positioning - all icons occupy same grid cell */
media-volume-high-icon,
media-volume-low-icon,
media-volume-off-icon {
  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%) */
media-mute-button[data-volume-level='high'] media-volume-high-icon {
  opacity: 1;
}

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

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

import '@videojs/html';
import '@videojs/html/icons';

// The web components will automatically register themselves
// No additional setup needed