---
import { MaximizeIcon, MinimizeIcon, PauseIcon, PlayIcon, VolumeIcon, VolumeMuteIcon } from "@/components/icons";
---
<span class="video-loading" role="status" hidden>Loading…</span>
<div class="video-controls" role="group" aria-label="Video controls">
  <input class="video-range video-seek" type="range" min="0" max="100" step="0.1" value="0" aria-label="Seek video" disabled />
  <div class="video-control-row">
    <button type="button" class="video-control video-toggle" aria-label="Play"><span data-play-icon><PlayIcon size={16} /></span><span data-pause-icon hidden><PauseIcon size={19} /></span></button>
    <span class="video-time" aria-label="Playback time">0:00 / 0:00</span>
    <div class="video-volume">
      <button type="button" class="video-control video-mute" aria-label="Mute"><span data-volume-icon><VolumeIcon size={18} /></span><span data-muted-icon hidden><VolumeMuteIcon size={18} /></span></button>
      <input class="video-range video-volume-range" type="range" min="0" max="1" step="0.05" value="1" aria-label="Volume" />
    </div>
    <select class="video-quality" aria-label="Video quality" hidden></select>
    <button type="button" class="video-control video-fullscreen" aria-label="Enter fullscreen"><span data-expand-icon><MaximizeIcon size={18} /></span><span data-collapse-icon hidden><MinimizeIcon size={18} /></span></button>
  </div>
</div>