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

<media-play-button>
  <media-play-icon></media-play-icon>
  <media-pause-icon></media-pause-icon>
</media-play-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-play-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-play-button:hover {
  background: rgba(255, 255, 255, 0.15);
}

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

/* Icon positioning - both occupy same grid cell */
media-play-icon,
media-pause-icon {
  grid-area: 1/1;
  transition: opacity 200ms ease;
  width: 18px;
  height: 18px;
}

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

media-play-button[data-paused] media-pause-icon {
  opacity: 0;
}

media-play-button:not([data-paused]) media-play-icon {
  opacity: 0;
}

media-play-button:not([data-paused]) media-pause-icon {
  opacity: 1;
}

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

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