import '@app/styles.css';
// SimpleHlsVideo + Video.js integration sandbox
// http://localhost:5173/simple-hls-html/
//
// Tests SimpleHlsVideo fully integrated into a VJS player with UI controls.
// <media-container> wraps <simple-hls-video> and attaches it to the player store.
//
// Icon visibility is driven by data-* attributes set by the button elements:
//   media-play-button: [data-paused], [data-ended]
//   media-mute-button: [data-muted]

import '@videojs/html/video/player';
import '@videojs/html/media/container';
import '@videojs/html/media/simple-hls-video';
import '@videojs/html/ui/play-button';
import '@videojs/html/ui/mute-button';
import { pauseIcon, playIcon, restartIcon, volumeHighIcon, volumeOffIcon } from '@videojs/html/icons';

const html = String.raw;

document.getElementById('root')!.innerHTML = html`
  <style>
    .player-wrapper {
      display: inline-flex;
      flex-direction: column;
      background: #000;
      border-radius: 6px;
      overflow: hidden;
    }

    simple-hls-video {
      width: 640px;
      aspect-ratio: 16 / 9;
      display: block;
    }

    .control-bar {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 6px 8px;
      background: #1a1a1a;
      color: white;
    }

    media-play-button,
    media-mute-button {
      cursor: pointer;
      background: none;
      border: none;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 6px;
      border-radius: 4px;
    }

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

    /* Play button icon states */
    media-play-button .icon-play,
    media-play-button .icon-pause,
    media-play-button .icon-restart { display: none; }

    media-play-button[data-paused]:not([data-ended]) .icon-play        { display: block; }
    media-play-button:not([data-paused]):not([data-ended]) .icon-pause  { display: block; }
    media-play-button[data-ended] .icon-restart                        { display: block; }

    /* Mute button icon states */
    media-mute-button .icon-volume-high,
    media-mute-button .icon-volume-off { display: none; }

    media-mute-button:not([data-muted]) .icon-volume-high { display: block; }
    media-mute-button[data-muted]       .icon-volume-off  { display: block; }
  </style>

  <div class="player-wrapper">
    <video-player>
      <media-container style="display: contents;">
        <simple-hls-video
          src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4.m3u8"
          preload="auto"
          playsinline
        ></simple-hls-video>
      </media-container>

      <div class="control-bar">
        <media-play-button>
          <span class="icon-play">${playIcon}</span>
          <span class="icon-pause">${pauseIcon}</span>
          <span class="icon-restart">${restartIcon}</span>
        </media-play-button>

        <media-mute-button>
          <span class="icon-volume-high">${volumeHighIcon}</span>
          <span class="icon-volume-off">${volumeOffIcon}</span>
        </media-mute-button>
      </div>
    </video-player>
  </div>
`;