@xhub-short/ui 0.1.0-beta.0

package/dist/chunk-UECU42WC.js

@@ -0,0 +1,1110 @@
+import { cn } from './chunk-WKX2WBVO.js';
+import { injectComponentCSS } from './chunk-UXMA4KJZ.js';
+import { useRef, useCallback, useEffect, useState, useInsertionEffect, useMemo } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+// src/components/VideoPlayer/VideoPlayer.css.ts
+var VIDEO_PLAYER_CSS = (
+  /* css */
+  `
+/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+   VideoPlayer Container
+   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
+
+.sv-video-player {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: var(--sv-bg-primary, #000);
+  /* CSS variable z-index defaults */
+  --sv-player-video-z: 1;
+  --sv-player-poster-z: 2;
+  --sv-player-loading-z: 3;
+  --sv-player-error-z: 4;
+}
+
+/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+   Video Element Wrapper
+   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
+
+.sv-video-player__video-wrapper {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: var(--sv-player-video-z);
+}
+
+/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+   Video Element
+   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
+
+.sv-video-player__video {
+  width: 100%;
+  height: 100%;
+  object-fit: var(--sv-player-object-fit, contain);
+  background: transparent;
+  /* Prevent iOS controls */
+  -webkit-playsinline: true;
+}
+
+/* Hide video when loading/error for smooth poster display */
+.sv-video-player--loading .sv-video-player__video,
+.sv-video-player--error .sv-video-player__video {
+  opacity: 0;
+}
+
+/* Smooth transition for video visibility */
+.sv-video-player__video {
+  transition: opacity var(--sv-transition-duration, 200ms) ease-out;
+}
+
+/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+   Poster Overlay
+   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
+
+.sv-video-player__poster {
+  position: absolute;
+  inset: 0;
+  z-index: var(--sv-player-poster-z);
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  transition: opacity var(--sv-transition-duration, 200ms) ease-out;
+}
+
+/**
+ * Hide poster when video is ready OR playing.
+ *
+ * Poster visibility rules:
+ * - SHOW: During initial loading (--loading)
+ * - HIDE: Once video is ready (--ready) - even if paused
+ * - HIDE: When playing (--playing)
+ * - STAY HIDDEN: During buffering (--buffering) - video already visible
+ *
+ * pointer-events: none ensures poster doesn't block clicks on video.
+ */
+.sv-video-player--ready .sv-video-player__poster,
+.sv-video-player--playing .sv-video-player__poster {
+  opacity: 0;
+  pointer-events: none;
+}
+
+/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+    Loading Spinner
+   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
+
+.sv-video-player__loading {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: var(--sv-player-loading-z);
+  background: var(--sv-loading-bg, rgba(0, 0, 0, 0.3));
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--sv-transition-duration, 200ms) ease-out;
+}
+
+.sv-video-player--loading .sv-video-player__loading {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* Default spinner animation */
+.sv-video-player__spinner {
+  width: var(--sv-spinner-size, 40px);
+  height: var(--sv-spinner-size, 40px);
+  border: 3px solid var(--sv-spinner-color, rgba(255, 255, 255, 0.3));
+  border-top-color: var(--sv-spinner-active-color, #fff);
+  border-radius: 50%;
+  animation: sv-player-spin 0.8s linear infinite;
+}
+
+@keyframes sv-player-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+   Error State
+   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
+
+.sv-video-player__error {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--sv-spacing-md, 12px);
+  z-index: var(--sv-player-error-z);
+  background: var(--sv-error-bg, rgba(0, 0, 0, 0.8));
+  color: var(--sv-error-color, #fff);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--sv-transition-duration, 200ms) ease-out;
+}
+
+.sv-video-player--error .sv-video-player__error {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.sv-video-player__error-icon {
+  width: var(--sv-error-icon-size, 48px);
+  height: var(--sv-error-icon-size, 48px);
+  color: var(--sv-error-icon-color, rgba(255, 255, 255, 0.7));
+}
+
+.sv-video-player__error-message {
+  font-size: var(--sv-error-font-size, 14px);
+  color: var(--sv-error-text-color, rgba(255, 255, 255, 0.8));
+  text-align: center;
+  max-width: 80%;
+}
+
+.sv-video-player__retry-btn {
+  padding: var(--sv-spacing-sm, 8px) var(--sv-spacing-lg, 16px);
+  background: var(--sv-btn-bg, rgba(255, 255, 255, 0.2));
+  border: 1px solid var(--sv-btn-border, rgba(255, 255, 255, 0.3));
+  border-radius: var(--sv-btn-radius, 6px);
+  color: var(--sv-btn-color, #fff);
+  font-size: var(--sv-btn-font-size, 14px);
+  cursor: pointer;
+  transition: background var(--sv-transition-duration, 200ms) ease;
+}
+
+.sv-video-player__retry-btn:hover {
+  background: var(--sv-btn-hover-bg, rgba(255, 255, 255, 0.3));
+}
+
+.sv-video-player__retry-btn:active {
+  transform: scale(0.98);
+}
+
+/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+   Accessibility - Reduced Motion
+   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
+
+@media (prefers-reduced-motion: reduce) {
+  .sv-video-player__video,
+  .sv-video-player__poster,
+  .sv-video-player__loading,
+  .sv-video-player__error {
+    transition: none;
+  }
+
+  .sv-video-player__spinner {
+    animation: none;
+    border-top-color: var(--sv-spinner-active-color, #fff);
+  }
+}
+`
+);
+
+// src/components/VideoPlayer/constants.ts
+var VIDEO_TYPE_ATTR = "data-video-type";
+var PLAYBACK_STATE_ATTR = "data-playback-state";
+var LOADING_STATE_ATTR = "data-loading";
+var PLAYER_CLASS = "sv-video-player";
+var VIDEO_WRAPPER_CLASS = "sv-video-player__video-wrapper";
+var VIDEO_CLASS = "sv-video-player__video";
+var POSTER_CLASS = "sv-video-player__poster";
+var LOADING_CLASS = "sv-video-player__loading";
+var ERROR_CLASS = "sv-video-player__error";
+var PLAYING_CLASS = "sv-video-player--playing";
+var PAUSED_CLASS = "sv-video-player--paused";
+var LOADING_STATE_CLASS = "sv-video-player--loading";
+var BUFFERING_STATE_CLASS = "sv-video-player--buffering";
+var ERROR_STATE_CLASS = "sv-video-player--error";
+var READY_CLASS = "sv-video-player--ready";
+var ENDED_CLASS = "sv-video-player--ended";
+var Z_INDEX = {
+  VIDEO: 1,
+  POSTER: 2,
+  LOADING: 3,
+  ERROR: 4
+};
+var Z_INDEX_CSS_VARS = {
+  VIDEO: "--sv-player-video-z",
+  POSTER: "--sv-player-poster-z",
+  LOADING: "--sv-player-loading-z",
+  ERROR: "--sv-player-error-z"
+};
+var DEFAULT_PRELOAD = "metadata";
+var DEFAULT_OBJECT_FIT = "cover";
+var FIRST_FRAME_QUALITY = 0.8;
+var FIRST_FRAME_MAX_WIDTH = 360;
+
+// src/services/FirstFrameCache.ts
+var DEFAULT_CONFIG = {
+  maxSize: 10,
+  quality: 0.8,
+  maxWidth: 360,
+  debugCORS: false
+};
+var FirstFrameCacheService = class {
+  constructor(config = {}) {
+    this.cache = /* @__PURE__ */ new Map();
+    // In-flight captures to prevent duplicate work
+    this.inFlight = /* @__PURE__ */ new Map();
+    // Stats tracking
+    this._hits = 0;
+    this._misses = 0;
+    this.config = { ...DEFAULT_CONFIG, ...config };
+  }
+  /**
+   * Get cache statistics
+   */
+  get stats() {
+    return {
+      hits: this._hits,
+      misses: this._misses,
+      size: this.cache.size,
+      inFlight: this.inFlight.size
+    };
+  }
+  /**
+   * Capture the first frame of a video element
+   *
+   * Features:
+   * - Deduplicates concurrent capture requests for same video
+   * - Waits for video data if not ready
+   * - Resizes to maxWidth maintaining aspect ratio
+   *
+   * @param videoId - Unique identifier for the video
+   * @param videoElement - The video element to capture from
+   * @returns Data URL of the captured frame, or null if capture failed
+   */
+  async capture(videoId, videoElement) {
+    if (typeof document === "undefined" || typeof window === "undefined") {
+      return null;
+    }
+    const existing = this.get(videoId);
+    if (existing) {
+      return existing;
+    }
+    const inFlightPromise = this.inFlight.get(videoId);
+    if (inFlightPromise) {
+      return inFlightPromise;
+    }
+    const capturePromise = this.doCapture(videoId, videoElement);
+    this.inFlight.set(videoId, capturePromise);
+    try {
+      return await capturePromise;
+    } finally {
+      this.inFlight.delete(videoId);
+    }
+  }
+  /**
+   * Internal capture implementation
+   */
+  async doCapture(videoId, videoElement) {
+    try {
+      if (videoElement.readyState < 2) {
+        await this.waitForVideoData(videoElement);
+      }
+      const { videoWidth, videoHeight } = videoElement;
+      if (!videoWidth || !videoHeight) {
+        return null;
+      }
+      const aspectRatio = videoHeight / videoWidth;
+      const width = Math.min(videoWidth, this.config.maxWidth);
+      const height = Math.round(width * aspectRatio);
+      const canvas = document.createElement("canvas");
+      canvas.width = width;
+      canvas.height = height;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) {
+        return null;
+      }
+      ctx.drawImage(videoElement, 0, 0, width, height);
+      const dataUrl = canvas.toDataURL("image/jpeg", this.config.quality);
+      this.set(videoId, dataUrl);
+      return dataUrl;
+    } catch (error) {
+      if (this.config.debugCORS && error instanceof DOMException && error.name === "SecurityError") {
+        console.warn(
+          `[FirstFrameCache] CORS error capturing frame for "${videoId}".`,
+          'Ensure video has crossorigin="anonymous" and server sends CORS headers.',
+          error
+        );
+      }
+      return null;
+    }
+  }
+  /**
+   * Get a cached frame
+   *
+   * Note: This updates LRU access time (get = read = access)
+   *
+   * @param videoId - Video identifier
+   * @returns Data URL or null if not cached
+   */
+  get(videoId) {
+    const entry = this.cache.get(videoId);
+    if (!entry) {
+      this._misses++;
+      return null;
+    }
+    this._hits++;
+    this.cache.delete(videoId);
+    this.cache.set(videoId, entry);
+    return entry.dataUrl;
+  }
+  /**
+   * Check if a frame is cached
+   *
+   * Note: This does NOT update LRU access time (check-only operation).
+   * Use get() if you want to mark the entry as accessed.
+   *
+   * @param videoId - Video identifier
+   */
+  has(videoId) {
+    return this.cache.has(videoId);
+  }
+  /**
+   * Manually set a cached frame
+   *
+   * @param videoId - Video identifier
+   * @param dataUrl - Data URL of the frame
+   */
+  set(videoId, dataUrl) {
+    if (this.cache.has(videoId)) {
+      this.cache.delete(videoId);
+    }
+    if (this.cache.size >= this.config.maxSize) {
+      this.evictLRU();
+    }
+    this.cache.set(videoId, { dataUrl });
+  }
+  /**
+   * Remove a cached frame
+   *
+   * @param videoId - Video identifier
+   */
+  delete(videoId) {
+    return this.cache.delete(videoId);
+  }
+  /**
+   * Clear all cached frames
+   */
+  clear() {
+    this.cache.clear();
+    this._hits = 0;
+    this._misses = 0;
+  }
+  /**
+   * Get current cache size
+   */
+  get size() {
+    return this.cache.size;
+  }
+  /**
+   * Get all cached video IDs
+   */
+  keys() {
+    return Array.from(this.cache.keys());
+  }
+  /**
+   * Update configuration
+   */
+  configure(config) {
+    this.config = { ...this.config, ...config };
+    while (this.cache.size > this.config.maxSize) {
+      this.evictLRU();
+    }
+  }
+  /**
+   * Evict least recently used entry
+   *
+   * Uses Map insertion order: first item = oldest (least recently used)
+   * Time complexity: O(1)
+   */
+  evictLRU() {
+    const firstKey = this.cache.keys().next().value;
+    if (firstKey !== void 0) {
+      this.cache.delete(firstKey);
+    }
+  }
+  /**
+   * Wait for video to have loadeddata
+   */
+  waitForVideoData(videoElement, timeout = 5e3) {
+    return new Promise((resolve, reject) => {
+      if (videoElement.readyState >= 2) {
+        resolve();
+        return;
+      }
+      const timeoutId = setTimeout(() => {
+        cleanup();
+        reject(new Error("Timeout waiting for video data"));
+      }, timeout);
+      const handleLoadedData = () => {
+        cleanup();
+        resolve();
+      };
+      const handleError = () => {
+        cleanup();
+        reject(new Error("Video load error"));
+      };
+      const cleanup = () => {
+        clearTimeout(timeoutId);
+        videoElement.removeEventListener("loadeddata", handleLoadedData);
+        videoElement.removeEventListener("error", handleError);
+      };
+      videoElement.addEventListener("loadeddata", handleLoadedData);
+      videoElement.addEventListener("error", handleError);
+    });
+  }
+};
+var firstFrameCache = new FirstFrameCacheService();
+function createFirstFrameCache(config) {
+  return new FirstFrameCacheService(config);
+}
+
+// src/components/VideoPlayer/useFirstFrameCapture.ts
+function useFirstFrameCapture(config) {
+  const { videoId, enabled = true, onCapture, onError } = config;
+  const captureAttemptedRef = useRef(null);
+  const capture = useCallback(
+    async (videoElement) => {
+      if (!enabled) return null;
+      if (captureAttemptedRef.current === videoId) return null;
+      const cached = firstFrameCache.get(videoId);
+      if (cached) {
+        onCapture?.(cached);
+        return cached;
+      }
+      captureAttemptedRef.current = videoId;
+      try {
+        const dataUrl = await firstFrameCache.capture(videoId, videoElement);
+        if (dataUrl) onCapture?.(dataUrl);
+        return dataUrl;
+      } catch (error) {
+        onError?.(error instanceof Error ? error : new Error("First frame capture failed"));
+        return null;
+      }
+    },
+    [videoId, enabled, onCapture, onError]
+  );
+  const getCached = useCallback(() => {
+    return firstFrameCache.get(videoId);
+  }, [videoId]);
+  const isCached = useCallback(() => {
+    return firstFrameCache.has(videoId);
+  }, [videoId]);
+  const clearCache = useCallback(() => {
+    firstFrameCache.delete(videoId);
+    captureAttemptedRef.current = null;
+  }, [videoId]);
+  return {
+    capture,
+    getCached,
+    isCached,
+    clearCache
+  };
+}
+function useAutoFirstFrameCapture(config) {
+  const { videoId, videoRef, enabled = true, onCapture, onError } = config;
+  const { capture, getCached, isCached } = useFirstFrameCapture({
+    videoId,
+    enabled,
+    onCapture,
+    onError
+  });
+  const capturedFrameRef = useRef(null);
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video || !enabled) return;
+    capturedFrameRef.current = null;
+    if (isCached()) {
+      capturedFrameRef.current = getCached();
+      return;
+    }
+    const handleLoadedData = async () => {
+      if (!capturedFrameRef.current) {
+        const dataUrl = await capture(video);
+        if (dataUrl) {
+          capturedFrameRef.current = dataUrl;
+        }
+      }
+    };
+    if (video.readyState >= 2) {
+      handleLoadedData();
+    } else {
+      video.addEventListener("loadeddata", handleLoadedData, { once: true });
+    }
+    return () => {
+      video.removeEventListener("loadeddata", handleLoadedData);
+    };
+  }, [videoRef, enabled, capture, getCached, isCached]);
+  return capturedFrameRef.current || getCached();
+}
+var VideoElementError = class extends Error {
+  constructor(message, origin, options) {
+    super(message);
+    this.name = "VideoElementError";
+    this.origin = origin;
+    this.mediaErrorCode = options?.mediaErrorCode;
+    this.recoverable = options?.recoverable ?? origin !== "setup";
+  }
+  /** Check if error is from HLS.js */
+  isHlsError() {
+    return this.origin === "hls";
+  }
+  /** Check if error is from media element */
+  isMediaError() {
+    return this.origin === "media";
+  }
+  /** Check if error is network-related */
+  isNetworkError() {
+    return this.mediaErrorCode === 2;
+  }
+};
+var HlsModuleCache = null;
+var hlsLoadPromise = null;
+var nativeHlsSupportCache = null;
+async function loadHls() {
+  if (HlsModuleCache) {
+    return HlsModuleCache;
+  }
+  if (!hlsLoadPromise) {
+    hlsLoadPromise = import('hls.js').then((mod) => {
+      HlsModuleCache = mod;
+      return HlsModuleCache;
+    }).catch(() => {
+      return null;
+    });
+  }
+  return hlsLoadPromise;
+}
+function supportsNativeHLS() {
+  if (nativeHlsSupportCache !== null) {
+    return nativeHlsSupportCache;
+  }
+  if (typeof document === "undefined") {
+    return false;
+  }
+  const video = document.createElement("video");
+  nativeHlsSupportCache = video.canPlayType("application/vnd.apple.mpegurl") !== "";
+  return nativeHlsSupportCache;
+}
+function isHlsErrorData(d) {
+  return typeof d === "object" && d !== null && "fatal" in d;
+}
+async function setupHlsSource(video, src, hlsRef, onHlsError) {
+  if (supportsNativeHLS()) {
+    video.src = src;
+    return;
+  }
+  const Hls = await loadHls();
+  if (!Hls?.isSupported?.()) {
+    video.src = src;
+    return;
+  }
+  const hls = new Hls.default();
+  hlsRef.current = hls;
+  hls.loadSource(src);
+  hls.attachMedia(video);
+  hls.on("hlsError", (_event, data) => {
+    if (isHlsErrorData(data) && data.fatal) {
+      onHlsError(
+        new VideoElementError(`HLS Error: ${data.type || "Unknown"}`, "hls", {
+          recoverable: true
+        })
+      );
+    }
+  });
+}
+function useVideoElement(config) {
+  const {
+    src,
+    type,
+    autoPlay = true,
+    loop = true,
+    muted = true,
+    volume = 1,
+    onCanPlay,
+    onPlay,
+    onPlaying,
+    onPause,
+    onEnded,
+    onTimeUpdate,
+    onDurationChange,
+    onWaiting,
+    onSeeking,
+    onSeeked,
+    onError,
+    onLoadedData
+  } = config;
+  const videoRef = useRef(null);
+  const hlsRef = useRef(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isBuffering, setIsBuffering] = useState(false);
+  const [isReady, setIsReady] = useState(false);
+  const [error, setError] = useState(null);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [isPaused, setIsPaused] = useState(true);
+  const [isEnded, setIsEnded] = useState(false);
+  const currentSrcRef = useRef(null);
+  const retryCountRef = useRef(0);
+  const [retryTrigger, setRetryTrigger] = useState(0);
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video || !src) return;
+    const isRetry = retryTrigger > 0 && currentSrcRef.current === src;
+    if (currentSrcRef.current === src && !isRetry) return;
+    currentSrcRef.current = src;
+    setIsLoading(true);
+    setIsBuffering(false);
+    setIsReady(false);
+    setIsPlaying(false);
+    setIsPaused(true);
+    setIsEnded(false);
+    setError(null);
+    if (hlsRef.current) {
+      hlsRef.current.destroy();
+      hlsRef.current = null;
+    }
+    const setupSource = async () => {
+      try {
+        if (type === "hls") {
+          await setupHlsSource(video, src, hlsRef, (hlsError) => {
+            setError(hlsError);
+            setIsLoading(false);
+            onError?.(hlsError);
+          });
+        } else {
+          video.src = src;
+        }
+        video.loop = loop;
+        video.muted = muted;
+        video.volume = volume;
+        video.playsInline = true;
+        video.load();
+      } catch (err) {
+        const message = err instanceof Error ? err.message : "Failed to setup video";
+        const setupError = new VideoElementError(message, "setup", {
+          recoverable: false
+        });
+        setError(setupError);
+        setIsLoading(false);
+        onError?.(setupError);
+      }
+    };
+    setupSource();
+    return () => {
+      if (hlsRef.current) {
+        hlsRef.current.destroy();
+        hlsRef.current = null;
+      }
+    };
+  }, [src, type, loop, muted, volume, onError, retryTrigger]);
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video) return;
+    const handleCanPlay = () => {
+      setIsLoading(false);
+      setIsBuffering(false);
+      setIsReady(true);
+      onCanPlay?.();
+      if (autoPlay) {
+        video.play().catch(() => {
+        });
+      }
+    };
+    const handlePlay = () => {
+      setIsPlaying(true);
+      setIsPaused(false);
+      setIsEnded(false);
+      setIsBuffering(false);
+      onPlay?.();
+    };
+    const handlePause = () => {
+      setIsPlaying(false);
+      setIsPaused(true);
+      onPause?.();
+    };
+    const handleEnded = () => {
+      setIsPlaying(false);
+      setIsPaused(true);
+      setIsEnded(true);
+      onEnded?.();
+    };
+    const handleTimeUpdate = () => {
+      onTimeUpdate?.(video.currentTime);
+    };
+    const handleDurationChange = () => {
+      onDurationChange?.(video.duration);
+    };
+    const handleWaiting = () => {
+      setIsBuffering(true);
+      onWaiting?.();
+    };
+    const handlePlaying = () => {
+      setIsBuffering(false);
+      onPlaying?.();
+    };
+    const handleSeeking = () => {
+      setIsBuffering(true);
+      onSeeking?.();
+    };
+    const handleSeeked = () => {
+      setIsBuffering(false);
+      setIsEnded(false);
+      onSeeked?.();
+    };
+    const handleLoadedData = () => {
+      onLoadedData?.();
+    };
+    const handleError = () => {
+      const mediaError = video.error;
+      const code = mediaError?.code;
+      const message = mediaError?.message || getMediaErrorMessage(code);
+      const err = new VideoElementError(message, "media", {
+        mediaErrorCode: code,
+        // Network errors are recoverable
+        recoverable: code === 2
+      });
+      setError(err);
+      setIsLoading(false);
+      setIsBuffering(false);
+      onError?.(err);
+    };
+    video.addEventListener("canplay", handleCanPlay);
+    video.addEventListener("play", handlePlay);
+    video.addEventListener("playing", handlePlaying);
+    video.addEventListener("pause", handlePause);
+    video.addEventListener("ended", handleEnded);
+    video.addEventListener("timeupdate", handleTimeUpdate);
+    video.addEventListener("durationchange", handleDurationChange);
+    video.addEventListener("waiting", handleWaiting);
+    video.addEventListener("seeking", handleSeeking);
+    video.addEventListener("seeked", handleSeeked);
+    video.addEventListener("loadeddata", handleLoadedData);
+    video.addEventListener("error", handleError);
+    return () => {
+      video.removeEventListener("canplay", handleCanPlay);
+      video.removeEventListener("play", handlePlay);
+      video.removeEventListener("playing", handlePlaying);
+      video.removeEventListener("pause", handlePause);
+      video.removeEventListener("ended", handleEnded);
+      video.removeEventListener("timeupdate", handleTimeUpdate);
+      video.removeEventListener("durationchange", handleDurationChange);
+      video.removeEventListener("waiting", handleWaiting);
+      video.removeEventListener("seeking", handleSeeking);
+      video.removeEventListener("seeked", handleSeeked);
+      video.removeEventListener("loadeddata", handleLoadedData);
+      video.removeEventListener("error", handleError);
+    };
+  }, [
+    autoPlay,
+    onCanPlay,
+    onPlay,
+    onPlaying,
+    onPause,
+    onEnded,
+    onTimeUpdate,
+    onDurationChange,
+    onWaiting,
+    onSeeking,
+    onSeeked,
+    onLoadedData,
+    onError
+  ]);
+  const play = useCallback(async () => {
+    const video = videoRef.current;
+    if (!video) return;
+    try {
+      await video.play();
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Play failed";
+      const playError = new VideoElementError(message, "media", {
+        recoverable: true
+      });
+      onError?.(playError);
+    }
+  }, [onError]);
+  const pause = useCallback(() => {
+    const video = videoRef.current;
+    if (!video) return;
+    video.pause();
+  }, []);
+  const seek = useCallback((time) => {
+    const video = videoRef.current;
+    if (!video) return;
+    video.currentTime = Math.max(0, Math.min(time, video.duration || 0));
+  }, []);
+  const toggle = useCallback(async () => {
+    const video = videoRef.current;
+    if (!video) return;
+    if (video.paused) {
+      await play();
+    } else {
+      pause();
+    }
+  }, [play, pause]);
+  const setVolume = useCallback((vol) => {
+    const video = videoRef.current;
+    if (!video) return;
+    video.volume = Math.max(0, Math.min(1, vol));
+  }, []);
+  const setMuted = useCallback((mute) => {
+    const video = videoRef.current;
+    if (!video) return;
+    video.muted = mute;
+  }, []);
+  const retry = useCallback(() => {
+    const video = videoRef.current;
+    if (!video) return;
+    if (hlsRef.current) {
+      hlsRef.current.destroy();
+      hlsRef.current = null;
+    }
+    setError(null);
+    setIsLoading(true);
+    setIsBuffering(false);
+    setIsReady(false);
+    retryCountRef.current += 1;
+    setRetryTrigger(retryCountRef.current);
+  }, []);
+  return {
+    videoRef,
+    isLoading,
+    isBuffering,
+    isReady,
+    isPlaying,
+    isPaused,
+    isEnded,
+    error,
+    play,
+    pause,
+    seek,
+    toggle,
+    setVolume,
+    setMuted,
+    retry
+  };
+}
+function getMediaErrorMessage(code) {
+  switch (code) {
+    case 1:
+      return "Video loading was aborted";
+    case 2:
+      return "Network error while loading video";
+    case 3:
+      return "Video decoding error";
+    case 4:
+      return "Video format not supported";
+    default:
+      return "Unknown video error";
+  }
+}
+function VideoPlayerHeadless({
+  src,
+  type,
+  poster,
+  autoPlay = true,
+  loop = true,
+  muted = true,
+  volume = 1,
+  className,
+  videoRef: externalVideoRef,
+  videoId,
+  objectFit = "contain",
+  showErrorUI = true,
+  showLoadingUI = true,
+  showPoster = true,
+  loadingComponent,
+  errorComponent,
+  onCanPlay,
+  onPlay,
+  onPlaying,
+  onPause,
+  onEnded,
+  onTimeUpdate,
+  onDurationChange,
+  onWaiting,
+  onError,
+  onFirstFrameCapture
+}) {
+  useInsertionEffect(() => {
+    return injectComponentCSS("video-player", VIDEO_PLAYER_CSS);
+  }, []);
+  const { videoRef, isLoading, isBuffering, isReady, isPlaying, isPaused, isEnded, error, retry } = useVideoElement({
+    src,
+    type,
+    autoPlay,
+    loop,
+    muted,
+    volume,
+    onCanPlay,
+    onPlay,
+    onPlaying,
+    onPause,
+    onEnded,
+    onTimeUpdate,
+    onDurationChange,
+    onWaiting,
+    onError,
+    onLoadedData: handleLoadedData
+  });
+  const shouldShowLoadingSpinner = isLoading || isBuffering;
+  const effectiveVideoId = videoId || src;
+  const { capture, getCached } = useFirstFrameCapture({
+    videoId: effectiveVideoId,
+    enabled: !!effectiveVideoId,
+    onCapture: onFirstFrameCapture
+  });
+  function handleLoadedData() {
+    const video = videoRef.current;
+    if (video && effectiveVideoId) {
+      capture(video);
+    }
+  }
+  const cachedFirstFrame = showPoster ? getCached() : null;
+  const setVideoRef = useCallback(
+    (el) => {
+      videoRef.current = el;
+      if (externalVideoRef) {
+        if (typeof externalVideoRef === "function") {
+          externalVideoRef(el);
+        } else {
+          externalVideoRef.current = el;
+        }
+      }
+    },
+    [externalVideoRef, videoRef]
+  );
+  const stateClasses = useMemo(
+    () => ({
+      [LOADING_STATE_CLASS]: isLoading,
+      [BUFFERING_STATE_CLASS]: isBuffering,
+      [ERROR_STATE_CLASS]: !!error,
+      [READY_CLASS]: isReady,
+      [PLAYING_CLASS]: isPlaying,
+      [PAUSED_CLASS]: isPaused,
+      [ENDED_CLASS]: isEnded
+    }),
+    [isLoading, isBuffering, error, isReady, isPlaying, isPaused, isEnded]
+  );
+  const effectivePoster = cachedFirstFrame || poster;
+  const playbackState = getPlaybackState({
+    error,
+    isLoading,
+    isBuffering,
+    isPlaying,
+    isEnded
+  });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(PLAYER_CLASS, stateClasses, className),
+      ...{ [VIDEO_TYPE_ATTR]: type },
+      ...{ [PLAYBACK_STATE_ATTR]: playbackState },
+      style: {
+        ["--sv-player-object-fit"]: objectFit
+      },
+      children: [
+        /* @__PURE__ */ jsx("div", { className: VIDEO_WRAPPER_CLASS, children: /* @__PURE__ */ jsx(
+          "video",
+          {
+            ref: setVideoRef,
+            className: VIDEO_CLASS,
+            playsInline: true,
+            crossOrigin: "anonymous",
+            preload: "metadata",
+            "aria-label": "Video player"
+          }
+        ) }),
+        showPoster && effectivePoster && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: POSTER_CLASS,
+            style: { backgroundImage: `url(${effectivePoster})` },
+            "aria-hidden": "true"
+          }
+        ),
+        showLoadingUI && shouldShowLoadingSpinner && /* @__PURE__ */ jsx("div", { className: LOADING_CLASS, "aria-label": "Loading video", children: loadingComponent || /* @__PURE__ */ jsx(DefaultLoadingSpinner, {}) }),
+        showErrorUI && error && /* @__PURE__ */ jsx("div", { className: ERROR_CLASS, role: "alert", children: errorComponent || /* @__PURE__ */ jsx(DefaultErrorUI, { error, onRetry: retry }) })
+      ]
+    }
+  );
+}
+function getPlaybackState(params) {
+  const { error, isLoading, isBuffering, isEnded, isPlaying } = params;
+  if (error) return "error";
+  if (isLoading) return "loading";
+  if (isBuffering) return "buffering";
+  if (isEnded) return "ended";
+  if (isPlaying) return "playing";
+  return "paused";
+}
+function DefaultLoadingSpinner() {
+  return /* @__PURE__ */ jsx("div", { className: "sv-video-player__spinner", "aria-hidden": "true" });
+}
+function DefaultErrorUI({
+  error,
+  onRetry
+}) {
+  const friendlyMessage = getUserFriendlyErrorMessage(error.message);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "sv-video-player__error-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        "aria-hidden": "true",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: 2,
+        children: [
+          /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+          /* @__PURE__ */ jsx("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
+          /* @__PURE__ */ jsx("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx("p", { className: "sv-video-player__error-message", children: friendlyMessage }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: "sv-video-player__retry-btn",
+        onClick: onRetry,
+        type: "button",
+        "aria-label": "Retry loading video",
+        children: "Retry"
+      }
+    )
+  ] });
+}
+function getUserFriendlyErrorMessage(message) {
+  const lowercaseMessage = message.toLowerCase();
+  if (lowercaseMessage.includes("network") || lowercaseMessage.includes("fetch")) {
+    return "Unable to load video. Please check your internet connection.";
+  }
+  if (lowercaseMessage.includes("decode") || lowercaseMessage.includes("codec")) {
+    return "Video format is not supported on this device.";
+  }
+  if (lowercaseMessage.includes("abort")) {
+    return "Video loading was interrupted.";
+  }
+  if (lowercaseMessage.includes("not supported") || lowercaseMessage.includes("src_not_supported")) {
+    return "This video format is not supported.";
+  }
+  if (lowercaseMessage.includes("hls")) {
+    return "Unable to stream video. Please try again.";
+  }
+  return "Failed to load video. Please try again.";
+}
+VideoPlayerHeadless.displayName = "VideoPlayerHeadless";
+
+export { BUFFERING_STATE_CLASS, DEFAULT_OBJECT_FIT, DEFAULT_PRELOAD, ENDED_CLASS, ERROR_CLASS, ERROR_STATE_CLASS, FIRST_FRAME_MAX_WIDTH, FIRST_FRAME_QUALITY, LOADING_CLASS, LOADING_STATE_ATTR, LOADING_STATE_CLASS, PAUSED_CLASS, PLAYBACK_STATE_ATTR, PLAYER_CLASS, PLAYING_CLASS, POSTER_CLASS, READY_CLASS, VIDEO_CLASS, VIDEO_PLAYER_CSS, VIDEO_TYPE_ATTR, VIDEO_WRAPPER_CLASS, VideoElementError, VideoPlayerHeadless, Z_INDEX, Z_INDEX_CSS_VARS, createFirstFrameCache, firstFrameCache, useAutoFirstFrameCapture, useFirstFrameCapture, useVideoElement };