@xhub-short/ui 0.1.0-beta.9 → 1.0.0-beta.18

package/dist/chunk-IWSBYOSS.js

@@ -0,0 +1,91 @@
+import { injectComponentCSS } from './chunk-CAWE42LH.js';
+import { useInsertionEffect, Component } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/components/ErrorBoundary/ErrorBoundary.css.ts
+var ERROR_BOUNDARY_CSS = `.sv-error-boundary{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:var(--sv-bg-primary,#000);color:var(--sv-text-primary,#fff);font-family:var(--sv-font-family,'Urbanist',sans-serif)}.sv-error-boundary--error .sv-error-boundary__content{display:flex;flex-direction:column;align-items:center;gap:var(--sv-spacing-md,16px);padding:var(--sv-spacing-lg,24px);text-align:center}.sv-error-boundary__icon{font-size:48px}.sv-error-boundary__message{font-size:var(--sv-font-size-md,14px);color:var(--sv-text-secondary,#999)}.sv-error-boundary__retry{padding:var(--sv-spacing-sm,8px)var(--sv-spacing-lg,24px);border:0;border-radius:var(--sv-border-radius-md,8px);background:var(--sv-color-primary,#fe2c55);color:#fff;font-size:var(--sv-font-size-sm,13px);font-weight:var(--sv-font-weight-medium,500);cursor:pointer;transition:opacity .2s ease}.sv-error-boundary__retry:hover{opacity:.9}.sv-error-boundary__retry:active{opacity:.8}.sv-error-boundary--toast{position:relative}.sv-error-boundary__toast{position:absolute;bottom:var(--sv-spacing-xl,32px);left:50%;transform:translateX(-50%);padding:var(--sv-spacing-sm,8px)var(--sv-spacing-md,16px);border-radius:var(--sv-border-radius-md,8px);background:rgba(0,0,0,.8);color:#fff;font-size:var(--sv-font-size-sm,13px);white-space:nowrap;animation:sv-toast-fade-in .3s ease}@keyframes sv-toast-fade-in{from{opacity:0;transform:translateX(-50%)translateY(10px)}to{opacity:1;transform:translateX(-50%)translateY(0)}}.sv-error-boundary--loading{background:var(--sv-bg-primary,#000)}.sv-error-boundary__spinner{width:32px;height:32px;border:3px solid rgba(255,255,255,.2);border-top-color:var(--sv-color-primary,#fe2c55);border-radius:50%;animation:sv-spinner .8s linear infinite}@keyframes sv-spinner{to{transform:rotate(360deg)}}`;
+var ErrorBoundaryInternal = class extends Component {
+  constructor(props) {
+    super(props);
+    this.skipTimeoutId = null;
+    this.reset = () => {
+      const { onReset } = this.props;
+      this.clearSkipTimeout();
+      this.setState({ hasError: false, error: null, errorInfo: null });
+      onReset?.();
+    };
+    this.state = { hasError: false, error: null, errorInfo: null };
+  }
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+  componentDidCatch(error, errorInfo) {
+    const { onError, mode = "show-error", skipDelay = 1e3 } = this.props;
+    this.setState({ errorInfo });
+    onError?.(error, errorInfo);
+    if (!this.skipTimeoutId && (mode === "auto-skip" || mode === "auto-skip-with-toast")) {
+      this.skipTimeoutId = setTimeout(() => {
+        this.handleSkip();
+      }, skipDelay);
+    }
+  }
+  componentWillUnmount() {
+    this.clearSkipTimeout();
+  }
+  /**
+   * Handle skip action with error safeguard
+   * Wraps onSkip in try/finally to ensure reset() is always called
+   */
+  handleSkip() {
+    const { onSkip } = this.props;
+    try {
+      onSkip?.();
+    } finally {
+      this.reset();
+    }
+  }
+  clearSkipTimeout() {
+    if (this.skipTimeoutId) {
+      clearTimeout(this.skipTimeoutId);
+      this.skipTimeoutId = null;
+    }
+  }
+  render() {
+    const {
+      children,
+      fallback,
+      mode = "show-error",
+      toastMessage = "Video unavailable, skipping..."
+    } = this.props;
+    const { hasError, error, errorInfo } = this.state;
+    if (!hasError) {
+      return children;
+    }
+    if (fallback) {
+      if (typeof fallback === "function") {
+        return fallback(error ?? new Error("Unknown error"), errorInfo, this.reset);
+      }
+      return fallback;
+    }
+    if (mode === "auto-skip-with-toast") {
+      return /* @__PURE__ */ jsx("div", { className: "sv-error-boundary sv-error-boundary--toast", children: /* @__PURE__ */ jsx("div", { className: "sv-error-boundary__toast", children: toastMessage }) });
+    }
+    if (mode === "auto-skip") {
+      return /* @__PURE__ */ jsx("div", { className: "sv-error-boundary sv-error-boundary--loading" });
+    }
+    return /* @__PURE__ */ jsx("div", { className: "sv-error-boundary sv-error-boundary--error", children: /* @__PURE__ */ jsxs("div", { className: "sv-error-boundary__content", children: [
+      /* @__PURE__ */ jsx("div", { className: "sv-error-boundary__icon", children: "\u26A0\uFE0F" }),
+      /* @__PURE__ */ jsx("div", { className: "sv-error-boundary__message", children: "Something went wrong" }),
+      /* @__PURE__ */ jsx("button", { type: "button", className: "sv-error-boundary__retry", onClick: this.reset, children: "Try Again" })
+    ] }) });
+  }
+};
+function ErrorBoundary(props) {
+  const { cssKey = "sv-error-boundary" } = props;
+  useInsertionEffect(() => {
+    return injectComponentCSS(cssKey, ERROR_BOUNDARY_CSS);
+  }, [cssKey]);
+  return /* @__PURE__ */ jsx(ErrorBoundaryInternal, { ...props });
+}
+
+export { ErrorBoundary };

package/dist/chunk-MFJS65C5.js

@@ -0,0 +1,368 @@
+import { PauseIcon, PlayIcon } from './chunk-ANCP53F3.js';
+import { createContext, memo, useState, useRef, useEffect, useCallback, useContext } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var DEFAULT_DOUBLE_TAP_DELAY = 300;
+var DEFAULT_LONG_PRESS_DELAY = 500;
+var TAP_DEBOUNCE_MS = 50;
+var DEFAULT_MOVEMENT_THRESHOLD = 10;
+function useDoubleTap({
+  containerRef,
+  onSingleTap,
+  onDoubleTap,
+  onLongPress,
+  doubleTapDelay = DEFAULT_DOUBLE_TAP_DELAY,
+  longPressDelay = DEFAULT_LONG_PRESS_DELAY,
+  disabled = false,
+  movementThreshold = DEFAULT_MOVEMENT_THRESHOLD
+}) {
+  const lastTapTimeRef = useRef(0);
+  const lastDoubleTapTimeRef = useRef(0);
+  const tapTimeoutRef = useRef(null);
+  const longPressTimeoutRef = useRef(null);
+  const longPressTriggeredRef = useRef(false);
+  const lastPositionRef = useRef({ x: 50, y: 50 });
+  const lastExecutionTimeRef = useRef(0);
+  const pointerStartRef = useRef(null);
+  const cumulativeMovementRef = useRef(0);
+  useEffect(() => {
+    return () => {
+      if (tapTimeoutRef.current) {
+        clearTimeout(tapTimeoutRef.current);
+        tapTimeoutRef.current = null;
+      }
+      if (longPressTimeoutRef.current) {
+        clearTimeout(longPressTimeoutRef.current);
+        longPressTimeoutRef.current = null;
+      }
+    };
+  }, []);
+  const calculatePosition = useCallback(
+    (clientX, clientY) => {
+      const container = containerRef.current;
+      if (!container) return { x: 50, y: 50 };
+      const rect = container.getBoundingClientRect();
+      const x = (clientX - rect.left) / rect.width * 100;
+      const y = (clientY - rect.top) / rect.height * 100;
+      return {
+        x: Math.max(0, Math.min(100, x)),
+        y: Math.max(0, Math.min(100, y))
+      };
+    },
+    [containerRef]
+  );
+  const handleTapCore = useCallback(() => {
+    if (disabled) return;
+    const now = Date.now();
+    const timeSinceLastTap = now - lastTapTimeRef.current;
+    if (tapTimeoutRef.current) {
+      clearTimeout(tapTimeoutRef.current);
+      tapTimeoutRef.current = null;
+    }
+    if (timeSinceLastTap < doubleTapDelay) {
+      lastDoubleTapTimeRef.current = now;
+      lastTapTimeRef.current = 0;
+      onDoubleTap?.(lastPositionRef.current);
+    } else {
+      lastTapTimeRef.current = now;
+      tapTimeoutRef.current = setTimeout(() => {
+        tapTimeoutRef.current = null;
+        const timeSinceDoubleTap = Date.now() - lastDoubleTapTimeRef.current;
+        if (lastDoubleTapTimeRef.current > 0 && timeSinceDoubleTap < doubleTapDelay * 1.5) {
+          return;
+        }
+        if (lastTapTimeRef.current !== now) {
+          return;
+        }
+        onSingleTap?.();
+      }, doubleTapDelay);
+    }
+  }, [disabled, doubleTapDelay, onSingleTap, onDoubleTap]);
+  const isSwipe = useCallback(
+    (clientX, clientY) => {
+      if (cumulativeMovementRef.current > movementThreshold * 2) {
+        return true;
+      }
+      const start = pointerStartRef.current;
+      if (!start) return false;
+      const dx = Math.abs(clientX - start.x);
+      const dy = Math.abs(clientY - start.y);
+      return dx > movementThreshold || dy > movementThreshold;
+    },
+    [movementThreshold]
+  );
+  const executeTapWithDebounce = useCallback(
+    (clientX, clientY) => {
+      if (disabled) return;
+      if (isSwipe(clientX, clientY)) {
+        pointerStartRef.current = null;
+        return;
+      }
+      const now = Date.now();
+      if (now - lastExecutionTimeRef.current < TAP_DEBOUNCE_MS) {
+        return;
+      }
+      lastExecutionTimeRef.current = now;
+      lastPositionRef.current = calculatePosition(clientX, clientY);
+      handleTapCore();
+      pointerStartRef.current = null;
+    },
+    [disabled, calculatePosition, handleTapCore, isSwipe]
+  );
+  const cancelLongPress = useCallback(() => {
+    if (longPressTimeoutRef.current) {
+      clearTimeout(longPressTimeoutRef.current);
+      longPressTimeoutRef.current = null;
+    }
+  }, []);
+  const handlePointerDown = useCallback(
+    (e) => {
+      if (e.button !== 0) return;
+      pointerStartRef.current = { x: e.clientX, y: e.clientY };
+      cumulativeMovementRef.current = 0;
+      longPressTriggeredRef.current = false;
+      if (onLongPress && !disabled) {
+        cancelLongPress();
+        const position = calculatePosition(e.clientX, e.clientY);
+        longPressTimeoutRef.current = setTimeout(() => {
+          longPressTimeoutRef.current = null;
+          if (cumulativeMovementRef.current <= movementThreshold * 2) {
+            longPressTriggeredRef.current = true;
+            onLongPress(position);
+          }
+        }, longPressDelay);
+      }
+    },
+    [onLongPress, disabled, longPressDelay, movementThreshold, calculatePosition, cancelLongPress]
+  );
+  const handlePointerMove = useCallback(
+    (e) => {
+      if (!pointerStartRef.current) return;
+      cumulativeMovementRef.current += Math.abs(e.movementX) + Math.abs(e.movementY);
+      if (cumulativeMovementRef.current > movementThreshold * 2) {
+        cancelLongPress();
+      }
+    },
+    [movementThreshold, cancelLongPress]
+  );
+  const handlePointerUp = useCallback(
+    (e) => {
+      if (e.button !== 0) return;
+      cancelLongPress();
+      if (longPressTriggeredRef.current) {
+        longPressTriggeredRef.current = false;
+        pointerStartRef.current = null;
+        return;
+      }
+      executeTapWithDebounce(e.clientX, e.clientY);
+    },
+    [executeTapWithDebounce, cancelLongPress]
+  );
+  const handleClick = useCallback(
+    (e) => {
+      if (e.detail > 0) {
+        executeTapWithDebounce(e.clientX, e.clientY);
+      }
+    },
+    [executeTapWithDebounce]
+  );
+  return {
+    handlers: {
+      onPointerDown: handlePointerDown,
+      onPointerMove: handlePointerMove,
+      onPointerUp: handlePointerUp,
+      onClick: handleClick
+    },
+    lastPosition: lastPositionRef
+  };
+}
+function invariantContextError(hookName, componentName) {
+  const baseMessage = `${hookName} must be used within a VideoSlot component.`;
+  if (process.env.NODE_ENV !== "production") {
+    const debugInfo = [
+      "",
+      "\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550",
+      "\u274C VideoSlot Context Error",
+      "\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550",
+      "",
+      `Hook: ${hookName}`,
+      "",
+      "",
+      "Possible causes:",
+      "  1. You used a VideoSlot compound component outside of <VideoSlot>",
+      "  2. You used the headless component without SDK wiring",
+      "  3. The component tree was rendered in isolation (e.g., Storybook)",
+      "",
+      "Solutions:",
+      "  1. Wrap with <VideoSlot> or <VideoSlotHeadless>",
+      "  2. Use useOptionalVideoSlotContext() if context is optional",
+      "  3. Provide mock context in tests via <VideoSlotContext.Provider>",
+      "",
+      "Example:",
+      "  // Correct usage",
+      "  <VideoSlot video={video}>",
+      "    <VideoSlotPoster />      \u2190 These need context",
+      "    <VideoSlotOverlay />",
+      "  </VideoSlot>",
+      "",
+      "\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550"
+    ].filter(Boolean).join("\n");
+    throw new Error(baseMessage + debugInfo);
+  }
+  throw new Error(baseMessage);
+}
+var VideoSlotContext = createContext(null);
+VideoSlotContext.displayName = "VideoSlotContext";
+function useVideoSlotContext() {
+  const context = useContext(VideoSlotContext);
+  if (!context) {
+    invariantContextError("useVideoSlotContext");
+  }
+  return context;
+}
+function useOptionalVideoSlotContext() {
+  return useContext(VideoSlotContext);
+}
+function useVideoSlotVideo() {
+  const { video } = useVideoSlotContext();
+  return video;
+}
+function useVideoSlotPlayer() {
+  const { playerState, playerControls } = useVideoSlotContext();
+  return { state: playerState, controls: playerControls };
+}
+function useVideoSlotResource() {
+  const { resourceState } = useVideoSlotContext();
+  return resourceState;
+}
+function useVideoSlotIsActive() {
+  const { resourceState } = useVideoSlotContext();
+  return resourceState.isActive;
+}
+function useVideoSlotIsPlaying() {
+  const { playerState } = useVideoSlotContext();
+  return playerState.isPlaying;
+}
+function DefaultPlayIcon({ size }) {
+  return /* @__PURE__ */ jsx(PlayIcon, { size });
+}
+function DefaultPauseIcon({ size }) {
+  return /* @__PURE__ */ jsx(PauseIcon, { size });
+}
+var VideoSlotPlayIndicatorInner = memo(function VideoSlotPlayIndicatorInner2({
+  playIcon,
+  pauseIcon,
+  size = 48,
+  duration = 600,
+  persistWhenPaused = true,
+  className,
+  testId,
+  lastUserToggleTime,
+  isPlaying
+}) {
+  const [showIndicator, setShowIndicator] = useState(false);
+  const [isPersisting, setIsPersisting] = useState(false);
+  const [isAnimatingOut, setIsAnimatingOut] = useState(false);
+  const [iconType, setIconType] = useState("play");
+  const hideTimeoutRef = useRef(null);
+  const lastHandledToggleTimeRef = useRef(0);
+  const isPlayingRef = useRef(isPlaying);
+  isPlayingRef.current = isPlaying;
+  const persistWhenPausedRef = useRef(persistWhenPaused);
+  persistWhenPausedRef.current = persistWhenPaused;
+  const prevIsPlayingRef = useRef(isPlaying);
+  const clearHideTimeout = () => {
+    if (hideTimeoutRef.current) {
+      clearTimeout(hideTimeoutRef.current);
+      hideTimeoutRef.current = null;
+    }
+  };
+  useEffect(() => {
+    const wasPlaying = prevIsPlayingRef.current;
+    prevIsPlayingRef.current = isPlaying;
+    if (!wasPlaying && isPlaying && isPersisting) {
+      const timeSinceLastToggle = Date.now() - lastUserToggleTime;
+      const isAutoResume = timeSinceLastToggle > 100;
+      if (isAutoResume) {
+        if (hideTimeoutRef.current) {
+          clearTimeout(hideTimeoutRef.current);
+          hideTimeoutRef.current = null;
+        }
+        setShowIndicator(false);
+        setIsPersisting(false);
+        setIsAnimatingOut(false);
+      }
+    }
+  }, [isPlaying, isPersisting, lastUserToggleTime]);
+  useEffect(() => {
+    if (lastUserToggleTime === 0 || lastUserToggleTime === lastHandledToggleTimeRef.current) {
+      return;
+    }
+    lastHandledToggleTimeRef.current = lastUserToggleTime;
+    if (isPersisting && isPlaying) {
+      setIconType("pause");
+      setIsPersisting(false);
+      setIsAnimatingOut(true);
+      clearHideTimeout();
+      hideTimeoutRef.current = setTimeout(() => {
+        setShowIndicator(false);
+        setIsAnimatingOut(false);
+        hideTimeoutRef.current = null;
+      }, duration);
+      return;
+    }
+    setShowIndicator(true);
+    setIsPersisting(false);
+    setIsAnimatingOut(false);
+    setIconType("play");
+    clearHideTimeout();
+    hideTimeoutRef.current = setTimeout(() => {
+      const currentIsPlaying = isPlayingRef.current;
+      const shouldPersist = persistWhenPausedRef.current;
+      if (shouldPersist && !currentIsPlaying) {
+        setIsPersisting(true);
+        return;
+      }
+      setShowIndicator(false);
+      hideTimeoutRef.current = null;
+    }, duration);
+    return clearHideTimeout;
+  }, [lastUserToggleTime, duration, isPersisting, isPlaying]);
+  if (!showIndicator && !isPersisting) return null;
+  const iconToShow = iconType === "pause" ? pauseIcon ?? /* @__PURE__ */ jsx(DefaultPauseIcon, { size }) : playIcon ?? /* @__PURE__ */ jsx(DefaultPlayIcon, { size });
+  const indicatorClass = [
+    "sv-video-slot__play-indicator",
+    showIndicator && "sv-video-slot__play-indicator--visible",
+    isPersisting && "sv-video-slot__play-indicator--persist",
+    isAnimatingOut && "sv-video-slot__play-indicator--animating-out",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: indicatorClass,
+      style: { "--sv-indicator-duration": `${duration}ms` },
+      "aria-hidden": "true",
+      "data-testid": testId,
+      children: /* @__PURE__ */ jsx("span", { className: "sv-video-slot__play-indicator-icon", children: iconToShow })
+    }
+  );
+});
+VideoSlotPlayIndicatorInner.displayName = "VideoSlotPlayIndicatorInner";
+function VideoSlotPlayIndicator(props) {
+  const context = useOptionalVideoSlotContext();
+  if (!context) return null;
+  const lastUserToggleTime = context.lastUserToggleTime ?? 0;
+  const isPlaying = context.playerState?.isPlaying ?? false;
+  return /* @__PURE__ */ jsx(
+    VideoSlotPlayIndicatorInner,
+    {
+      ...props,
+      lastUserToggleTime,
+      isPlaying
+    }
+  );
+}
+VideoSlotPlayIndicator.displayName = "VideoSlotPlayIndicator";
+
+export { VideoSlotContext, VideoSlotPlayIndicator, VideoSlotPlayIndicatorInner, useDoubleTap, useOptionalVideoSlotContext, useVideoSlotContext, useVideoSlotIsActive, useVideoSlotIsPlaying, useVideoSlotPlayer, useVideoSlotResource, useVideoSlotVideo };

package/dist/{chunk-AC2IFAJR.js → chunk-NJXIYSDZ.js}

@@ -1,5 +1,5 @@
 import { formatCount } from './chunk-3XPJHUYL.js';
-import { injectComponentCSS } from './chunk-RMLTPW5S.js';
+import { injectComponentCSS } from './chunk-CAWE42LH.js';
 import { clsx } from 'clsx';
 import { createContext, useInsertionEffect, useState, useRef, useEffect, useCallback, useContext } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
@@ -18,6 +18,15 @@ var ACTION_BAR_CSS = (
   align-items: center;
   gap: var(--sv-action-bar-gap, 12px);
   padding: var(--sv-action-bar-padding, 8px 0);
+  
+  /* Auto-hide transition */
+  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Hidden state for auto-hide */
+.sv-action-bar--hidden {
+  opacity: 0;
+  pointer-events: none;
 }
 
 /* Horizontal variant */
@@ -439,6 +448,7 @@ function ActionBarHeadlessRoot({
   children,
   direction = "vertical",
   buttonVariant = "default",
+  isVisible = true,
   testId
 }) {
   useInsertionEffect(() => {
@@ -451,6 +461,7 @@ function ActionBarHeadlessRoot({
   const containerClasses = clsx(
     CSS_PREFIX2,
     direction === "horizontal" && `${CSS_PREFIX2}--horizontal`,
+    !isVisible && `${CSS_PREFIX2}--hidden`,
     className
   );
   const stopPropagation = (e) => {

package/dist/{chunk-CL6BS7GB.js → chunk-OM4L7RE5.js}

@@ -1,5 +1,5 @@
 import { clsx2 } from './chunk-EDWS2IPH.js';
-import { injectComponentCSS } from './chunk-RMLTPW5S.js';
+import { injectComponentCSS } from './chunk-CAWE42LH.js';
 import { memo, useInsertionEffect, useCallback, useMemo, useRef, useState, useEffect } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
@@ -654,6 +654,7 @@ function useVideoElement(config) {
   } = config;
   const videoRef = useRef(null);
   const hlsRef = useRef(null);
+  const prevTimeRef = useRef(0);
   const [isLoading, setIsLoading] = useState(true);
   const [isBuffering, setIsBuffering] = useState(false);
   const [isReady, setIsReady] = useState(false);
@@ -753,7 +754,15 @@ function useVideoElement(config) {
       onEnded?.();
     };
     const handleTimeUpdate = () => {
-      onTimeUpdate?.(video.currentTime);
+      const currentTime = video.currentTime;
+      const duration = video.duration;
+      const prevTime = prevTimeRef.current;
+      if (loop && duration > 0 && prevTime > duration * 0.9 && // Was near end (>90%)
+      currentTime < duration * 0.1) {
+        onEnded?.();
+      }
+      prevTimeRef.current = currentTime;
+      onTimeUpdate?.(currentTime);
     };
     const handleDurationChange = () => {
       onDurationChange?.(video.duration);
@@ -820,6 +829,7 @@ function useVideoElement(config) {
     };
   }, [
     autoPlay,
+    loop,
     onCanPlay,
     onPlay,
     onPlaying,

package/dist/chunk-QCRRF76W.js

@@ -0,0 +1,75 @@
+import { clsx } from 'clsx';
+import { memo, useEffect, useCallback } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/SpeedPicker/SpeedPickerHeadless.tsx
+
+// src/components/SpeedPicker/SpeedPicker.css.ts
+var SPEED_PICKER_CSS = `.sv-speed-picker{--sv-speed-picker-bg:rgba(28,28,30,.95);--sv-speed-picker-text:#fff;--sv-speed-picker-text-secondary:rgba(255,255,255,.6);--sv-speed-picker-selected:#007aff;--sv-speed-picker-item-hover:rgba(255,255,255,.1);--sv-speed-picker-check:#007aff;--sv-speed-picker-item-height:48px;--sv-speed-picker-radius:12px;--sv-speed-picker-padding:8px}.sv-speed-picker{padding:var(--sv-speed-picker-padding)}.sv-speed-picker-title{padding:8px 16px;font-size:14px;font-weight:600;color:var(--sv-speed-picker-text-secondary);text-align:center}.sv-speed-picker-options{display:flex;flex-direction:column;gap:2px}.sv-speed-picker-option{display:flex;align-items:center;justify-content:space-between;height:var(--sv-speed-picker-item-height);padding:0 16px;border:0;background:transparent;color:var(--sv-speed-picker-text);font-size:16px;font-weight:normal;cursor:pointer;border-radius:var(--sv-speed-picker-radius);transition:background-color 150ms ease;-webkit-tap-highlight-color:transparent}.sv-speed-picker-option:hover{background:var(--sv-speed-picker-item-hover)}.sv-speed-picker-option[data-selected="true"]{color:var(--sv-speed-picker-selected);font-weight:500}.sv-speed-picker-option-label{flex:1}.sv-speed-picker-option-check{width:20px;height:20px;color:var(--sv-speed-picker-check);opacity:0;transition:opacity 150ms ease}.sv-speed-picker-option[data-selected="true"] .sv-speed-picker-option-check{opacity:1}`;
+var cssInjected = false;
+function injectCSS() {
+  if (cssInjected || typeof document === "undefined") return;
+  const styleId = "sv-speed-picker-styles";
+  if (!document.getElementById(styleId)) {
+    const style = document.createElement("style");
+    style.id = styleId;
+    style.textContent = SPEED_PICKER_CSS;
+    document.head.appendChild(style);
+  }
+  cssInjected = true;
+}
+var DEFAULT_SPEEDS = [0.5, 0.75, 1, 1.25, 1.5, 2];
+function CheckIcon() {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", "aria-hidden": "true", children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" }) });
+}
+function defaultFormatLabel(speed) {
+  if (speed === 1) return "Normal";
+  return `${speed}x`;
+}
+function SpeedPickerHeadlessComponent({
+  speed,
+  onSpeedChange,
+  speeds = DEFAULT_SPEEDS,
+  title = "Playback Speed",
+  className,
+  formatLabel = defaultFormatLabel,
+  onClose,
+  autoClose = true
+}) {
+  useEffect(() => {
+    injectCSS();
+  }, []);
+  const handleSelect = useCallback(
+    (selectedSpeed) => {
+      onSpeedChange(selectedSpeed);
+      if (autoClose && onClose) {
+        onClose();
+      }
+    },
+    [onSpeedChange, autoClose, onClose]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: clsx("sv-speed-picker", className), "aria-label": title, children: [
+    title && /* @__PURE__ */ jsx("div", { className: "sv-speed-picker-title", children: title }),
+    /* @__PURE__ */ jsx("div", { className: "sv-speed-picker-options", children: speeds.map((s) => {
+      const isSelected = Math.abs(s - speed) < 0.01;
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: "sv-speed-picker-option",
+          "data-selected": isSelected,
+          onClick: () => handleSelect(s),
+          "aria-selected": isSelected,
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "sv-speed-picker-option-label", children: formatLabel(s) }),
+            /* @__PURE__ */ jsx("span", { className: "sv-speed-picker-option-check", children: /* @__PURE__ */ jsx(CheckIcon, {}) })
+          ]
+        },
+        s
+      );
+    }) })
+  ] });
+}
+var SpeedPickerHeadless = memo(SpeedPickerHeadlessComponent);
+
+export { DEFAULT_SPEEDS, SPEED_PICKER_CSS, SpeedPickerHeadless };