PlayButton

import { PlayButton } from '@videojs/react';
import { PauseIcon, PlayIcon } from '@videojs/react/icons';
import styles from './PlayButton.module.css';

/**
 * Basic PlayButton example demonstrating:
 * - Icon switching based on paused state
 * - CSS Modules for scoped styling
 * - Data attribute selectors for state-based styling
 *
 * Note: This component must be used within a MediaProvider context.
 * See the usage example in the documentation.
 */
export function BasicPlayButton() {
  return (
    <PlayButton className={styles.button}>
      <PlayIcon className={styles.playIcon} />
      <PauseIcon className={styles.pauseIcon} />
    </PlayButton>
  );
}

.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 - both occupy same grid cell */
.playIcon,
.pauseIcon {
  grid-area: 1/1;
  transition: opacity 200ms ease;
  width: 18px;
  height: 18px;
}

/* Show/hide icons based on paused state using data attributes */
.button[data-paused] .playIcon {
  opacity: 1;
}

.button[data-paused] .pauseIcon {
  opacity: 0;
}

.button:not([data-paused]) .playIcon {
  opacity: 0;
}

.button:not([data-paused]) .pauseIcon {
  opacity: 1;
}