@xhub-short/ui 0.1.0-beta.1 → 0.1.0-beta.11

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-HW4LXTFT.js → chunk-OM4L7RE5.js}

@@ -1,6 +1,6 @@
-import { cn } from './chunk-WKX2WBVO.js';
-import { injectComponentCSS } from './chunk-UXMA4KJZ.js';
-import { useRef, useCallback, useEffect, useState, useInsertionEffect, useMemo } from 'react';
+import { clsx2 } from './chunk-EDWS2IPH.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';
 
 // src/components/VideoPlayer/VideoPlayer.css.ts
@@ -35,6 +35,7 @@ var VIDEO_PLAYER_CSS = (
   align-items: center;
   justify-content: center;
   z-index: var(--sv-player-video-z);
+  background: var(--sv-bg-primary, #000);
 }
 
 /* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
@@ -653,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);
@@ -752,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);
@@ -819,6 +829,7 @@ function useVideoElement(config) {
     };
   }, [
     autoPlay,
+    loop,
     onCanPlay,
     onPlay,
     onPlaying,
@@ -920,7 +931,7 @@ function getMediaErrorMessage(code) {
       return "Unknown video error";
   }
 }
-function VideoPlayerHeadless({
+function VideoPlayerHeadlessBase({
   src,
   type,
   poster,
@@ -1021,7 +1032,7 @@ function VideoPlayerHeadless({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: cn(PLAYER_CLASS, stateClasses, className),
+      className: clsx2(PLAYER_CLASS, stateClasses, className),
       ...{ [VIDEO_TYPE_ATTR]: type },
       ...{ [PLAYBACK_STATE_ATTR]: playbackState },
       style: {
@@ -1118,6 +1129,7 @@ function getUserFriendlyErrorMessage(message) {
   }
   return "Failed to load video. Please try again.";
 }
+var VideoPlayerHeadless = memo(VideoPlayerHeadlessBase);
 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 };