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

package/dist/chunk-VJ744W5N.js

@@ -0,0 +1,603 @@
+import { useDoubleTap, VideoSlotContext, useVideoSlotContext } from './chunk-MFJS65C5.js';
+import { HeartFilledIcon } from './chunk-ANCP53F3.js';
+import { clsx2 } from './chunk-EDWS2IPH.js';
+import { injectComponentCSS } from './chunk-CAWE42LH.js';
+import { memo, useMemo, useState, useCallback, useEffect, useInsertionEffect, useRef } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/components/VideoSlot/VideoSlot.css.ts
+var VIDEO_SLOT_CSS = `.sv-video-slot{position:relative;width:100%;height:100%;overflow:hidden;background-color:var(--sv-bg-primary,#000);touch-action:none;user-select:none;-webkit-user-select:none;will-change:contents;contain:layout style paint}.sv-video-slot--active{z-index:1}.sv-video-slot--loading .sv-video-slot__video{opacity:0}.sv-video-slot--loading .sv-video-slot__poster{opacity:1}.sv-video-slot--playing .sv-video-slot__video{opacity:1}.sv-video-slot--playing .sv-video-slot__poster{opacity:0}.sv-video-slot--paused .sv-video-slot__video{opacity:1}.sv-video-slot--paused .sv-video-slot__poster{opacity:0}.sv-video-slot__poster--hidden{opacity:0;pointer-events:none}.sv-video-slot--error{display:flex;align-items:center;justify-content:center}.sv-video-slot__video-container{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.sv-video-slot__video{width:100%;height:100%;object-fit:cover;background-color:transparent;transition:opacity var(--sv-transition-duration,300ms)ease-out}.sv-video-slot__video[data-loaded="true"]{opacity:1}.sv-video-slot__poster{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background-color:var(--sv-bg-primary,#000);z-index:var(--sv-z-poster,3);transition:opacity var(--sv-transition-duration,300ms)ease-out;pointer-events:none}.sv-video-slot__poster-image{width:100%;height:100%;object-fit:cover}.sv-video-slot__poster--first-frame .sv-video-slot__poster-image{image-rendering:auto}.sv-video-slot__poster--skeleton{background:linear-gradient(110deg,var(--sv-skeleton-bg,rgba(255,255,255,.05))0%,var(--sv-skeleton-shimmer,rgba(255,255,255,.1))50%,var(--sv-skeleton-bg,rgba(255,255,255,.05))100%);background-size:200% 100%;animation:sv-slot-skeleton-shimmer 1.5s ease-in-out infinite}@keyframes sv-slot-skeleton-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}.sv-video-slot__overlay{position:absolute;inset:0;z-index:var(--sv-z-overlay,2);background:linear-gradient(to top,rgba(0,0,0,.6)0%,rgba(0,0,0,.3)20%,transparent 40%,transparent 60%,rgba(0,0,0,.2)80%,rgba(0,0,0,.4)100%);pointer-events:none}.sv-video-slot__overlay-top,.sv-video-slot__overlay-bottom,.sv-video-slot__overlay-left,.sv-video-slot__overlay-right,.sv-video-slot__actions,.sv-video-slot__author{pointer-events:none}.sv-video-slot__overlay button,.sv-video-slot__overlay a,.sv-video-slot__overlay [role="button"],.sv-video-slot__overlay input,.sv-video-slot__overlay label,.sv-video-slot__overlay .sv-progress-bar,.sv-video-slot__overlay .sv-author-info,.sv-video-slot__overlay .sv-video-info,.sv-video-slot__overlay .sv-action-bar{pointer-events:auto}.sv-video-slot__overlay-top{position:absolute;top:0;left:0;right:0;padding:var(--sv-spacing-md,16px);padding-top:calc(var(--sv-safe-area-top,0)+var(--sv-spacing-md,16px))}.sv-video-slot__overlay-bottom{position:absolute;bottom:0;left:0;right:0;padding:var(--sv-spacing-md,16px);padding-bottom:calc(var(--sv-safe-area-bottom,0)+var(--sv-spacing-md,16px));display:flex;flex-direction:column;gap:var(--sv-spacing-sm,8px)}.sv-video-slot__overlay-left{position:absolute;top:50%;left:0;transform:translateY(-50%);padding:var(--sv-spacing-md,16px)}.sv-video-slot__overlay-right{position:absolute;top:50%;right:0;transform:translateY(-50%);padding:var(--sv-spacing-md,16px)}.sv-video-slot__actions{position:absolute;right:var(--sv-spacing-sm,8px);bottom:calc(var(--sv-safe-area-bottom,0)+var(--sv-actions-bottom,80px)+var(--sv-playlist-bar-offset,0));display:flex;flex-direction:column;align-items:center;transition:bottom .3s ease-in-out}.sv-video-slot__author{position:absolute;left:var(--sv-spacing-md,16px);bottom:calc(var(--sv-safe-area-bottom,0)+var(--sv-author-bottom,100px)+var(--sv-playlist-bar-offset,0));right:80px;max-width:calc(100% - 100px);transition:bottom .3s ease-in-out}.sv-video-slot__error{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:var(--sv-bg-primary,#000);color:var(--sv-text-secondary,#999);text-align:center;padding:var(--sv-spacing-lg,20px);gap:var(--sv-spacing-md,16px);z-index:var(--sv-z-indicator,3)}.sv-video-slot__error-icon{font-size:48px;opacity:.6}.sv-video-slot__error-message{font-size:var(--sv-font-size-md,14px);max-width:200px}.sv-video-slot__error-retry{padding:var(--sv-spacing-sm,8px)var(--sv-spacing-md,16px);background-color:var(--sv-color-primary,#fe2c55);color:#fff;border:0;border-radius:var(--sv-radius-md,8px);font-size:var(--sv-font-size-sm,12px);font-weight:600;cursor:pointer;transition:background-color 150ms ease}.sv-video-slot__error-retry:hover{background-color:var(--sv-color-primary-hover,#e02850)}.sv-video-slot__error-retry:active{transform:scale(.96)}.sv-video-slot__spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:var(--sv-z-slot-spinner,2)}.sv-video-slot__spinner-circle{width:40px;height:40px;border:3px solid rgba(255,255,255,.2);border-top-color:var(--sv-color-primary,#fe2c55);border-radius:50%;animation:sv-slot-spin .8s linear infinite}@keyframes sv-slot-spin{to{transform:rotate(360deg)}}.sv-video-slot__play-indicator{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:64px;height:64px;display:flex;align-items:center;justify-content:center;border-radius:50%;z-index:var(--sv-z-indicator,3);opacity:0;transition:opacity 200ms ease-out;pointer-events:none}.sv-video-slot__play-indicator--visible{opacity:.65}.sv-video-slot__play-indicator--persist{opacity:.65}.sv-video-slot__play-indicator--animating-out{animation:sv-slot-indicator-out var(--sv-indicator-duration,200ms)ease-out forwards}@keyframes sv-slot-indicator-out{0%{opacity:1;transform:translate(-50%,-50%)scale(1)}100%{opacity:0;transform:translate(-50%,-50%)scale(1.5)}}.sv-video-slot__play-indicator-icon{color:#fff;font-size:28px;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.sv-video-slot__progress{position:absolute;bottom:0;left:0;right:0;height:3px;background-color:rgba(255,255,255,.2);z-index:var(--sv-z-progress,4)}.sv-video-slot__progress-bar{height:100%;background-color:var(--sv-color-primary,#fe2c55);transition:width 100ms linear}.sv-video-slot__progress-buffered{position:absolute;top:0;left:0;height:100%;background-color:rgba(255,255,255,.3)}`;
+
+// src/components/VideoSlot/constants.ts
+var VIDEO_ID_ATTR = "data-video-id";
+var VIDEO_ID_DATASET_KEY = "videoId";
+var SLOT_ACTIVE_ATTR = "data-slot-active";
+var SLOT_ACTIVE_DATASET_KEY = "slotActive";
+var PLAYER_STATE_ATTR = "data-player-state";
+var PLAYER_STATE_DATASET_KEY = "playerState";
+var LOADING_ATTR = "data-loading";
+var LOADING_DATASET_KEY = "loading";
+var SLOT_CLASS = "sv-video-slot";
+var SLOT_ACTIVE_CLASS = "sv-video-slot--active";
+var SLOT_LOADING_CLASS = "sv-video-slot--loading";
+var SLOT_ERROR_CLASS = "sv-video-slot--error";
+var SLOT_PLAYING_CLASS = "sv-video-slot--playing";
+var SLOT_PAUSED_CLASS = "sv-video-slot--paused";
+var Z_INDEX = {
+  /** Base layer - slot container */
+  SLOT: 0,
+  /** Video element */
+  VIDEO: 1,
+  /** Loading spinner */
+  SPINNER: 2,
+  /** Poster/thumbnail (above spinner so thumbnail shows during loading) */
+  POSTER: 3,
+  /** Error UI and play/pause indicator */
+  INDICATOR: 4,
+  /** Progress bar (always on top) */
+  PROGRESS: 5
+};
+var Z_INDEX_CSS_VARS = {
+  POSTER: "--sv-z-poster",
+  SPINNER: "--sv-z-slot-spinner",
+  INDICATOR: "--sv-z-indicator",
+  PROGRESS: "--sv-z-progress"
+};
+var ANIMATION_SELECTOR = '[data-like-animation="true"]';
+function VideoSlotHeadlessBase({
+  video,
+  resourceState,
+  playerState,
+  playerControls,
+  className,
+  children,
+  // TODO: Implement visibility detection with IntersectionObserver in v2
+  // These callbacks are reserved for future implementation:
+  // - onVisible: Called when slot enters viewport (for analytics, autoplay)
+  // - onHidden: Called when slot leaves viewport (for pause, cleanup)
+  onVisible: _onVisible,
+  onHidden: _onHidden,
+  onTap,
+  onDoubleTap,
+  onLongPress,
+  disableTap,
+  renderError,
+  renderLoading,
+  restoreFrame,
+  style
+}) {
+  useInsertionEffect(() => {
+    return injectComponentCSS("video-slot", VIDEO_SLOT_CSS);
+  }, []);
+  const containerRef = useRef(null);
+  const animationElementRef = useRef(null);
+  const prevVideoIdRef = useRef(video.id);
+  const [firstFrame, setFirstFrame] = useState(null);
+  const [lastUserToggleTime, setLastUserToggleTime] = useState(0);
+  if (prevVideoIdRef.current !== video.id) {
+    prevVideoIdRef.current = video.id;
+    animationElementRef.current = null;
+    if (firstFrame !== null) {
+      setFirstFrame(null);
+    }
+  }
+  const getAnimationElement = useCallback(() => {
+    if (animationElementRef.current) {
+      return animationElementRef.current;
+    }
+    const container = containerRef.current;
+    if (!container) return null;
+    const element = container.querySelector(ANIMATION_SELECTOR);
+    if (element) {
+      animationElementRef.current = element;
+    }
+    return element;
+  }, []);
+  const triggerLikeAnimation = useCallback(
+    (position) => {
+      const animationElement = getAnimationElement();
+      if (animationElement?.__likeAnimation) {
+        animationElement.__likeAnimation.triggerHeart(position.x, position.y);
+      }
+    },
+    [getAnimationElement]
+  );
+  const shouldShowAnimationWhenLiked = useCallback(() => {
+    const animationElement = getAnimationElement();
+    return animationElement?.__showWhenAlreadyLiked ?? true;
+  }, [getAnimationElement]);
+  const handleSingleTap = useCallback(() => {
+    if (disableTap) return;
+    setLastUserToggleTime(Date.now());
+    if (onTap) {
+      onTap();
+    } else {
+      playerControls.toggle();
+    }
+  }, [disableTap, onTap, playerControls]);
+  const handleDoubleTap = useCallback(
+    (position) => {
+      if (shouldShowAnimationWhenLiked() || !playerState.isPlaying) {
+        triggerLikeAnimation(position);
+      }
+      onDoubleTap?.();
+    },
+    [onDoubleTap, shouldShowAnimationWhenLiked, playerState.isPlaying, triggerLikeAnimation]
+  );
+  const handleLongPress = useCallback(
+    (_position) => {
+      onLongPress?.();
+    },
+    [onLongPress]
+  );
+  const { handlers: tapHandlers } = useDoubleTap({
+    containerRef,
+    onSingleTap: handleSingleTap,
+    onDoubleTap: handleDoubleTap,
+    onLongPress: onLongPress ? handleLongPress : void 0
+  });
+  const handleRetry = useCallback(() => {
+    playerControls.play();
+  }, [playerControls]);
+  const contextValue = useMemo(
+    () => ({
+      video,
+      resourceState,
+      playerState,
+      playerControls,
+      firstFrame,
+      setFirstFrame,
+      lastUserToggleTime,
+      setLastUserToggleTime
+    }),
+    [video, resourceState, playerState, playerControls, firstFrame, lastUserToggleTime]
+  );
+  const stateClasses = useMemo(() => {
+    const classes = [SLOT_CLASS];
+    if (resourceState.isActive) {
+      classes.push(SLOT_ACTIVE_CLASS);
+    }
+    if (playerState.isLoading) {
+      classes.push(SLOT_LOADING_CLASS);
+    }
+    if (playerState.error) {
+      classes.push(SLOT_ERROR_CLASS);
+    }
+    if (playerState.isPlaying) {
+      classes.push(SLOT_PLAYING_CLASS);
+    } else {
+      classes.push(SLOT_PAUSED_CLASS);
+    }
+    return classes;
+  }, [resourceState.isActive, playerState.isLoading, playerState.error, playerState.isPlaying]);
+  const playerStateString = useMemo(() => {
+    if (playerState.error) return "error";
+    if (playerState.isLoading) return "loading";
+    if (playerState.isPlaying) return "playing";
+    return "paused";
+  }, [playerState]);
+  return /* @__PURE__ */ jsx(VideoSlotContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: clsx2(...stateClasses, className),
+      ...tapHandlers,
+      ...{
+        [VIDEO_ID_ATTR]: video.id,
+        [SLOT_ACTIVE_ATTR]: resourceState.isActive ? "true" : "false",
+        [PLAYER_STATE_ATTR]: playerStateString,
+        [LOADING_ATTR]: playerState.isLoading ? "true" : "false"
+      },
+      style,
+      children: [
+        restoreFrame && !playerState.isPlaying && !playerState.error && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "sv-video-slot__restore-frame",
+            style: {
+              position: "absolute",
+              inset: 0,
+              zIndex: 5,
+              // Above video, below overlay
+              backgroundImage: `url(${restoreFrame})`,
+              backgroundSize: "contain",
+              backgroundPosition: "center",
+              backgroundRepeat: "no-repeat",
+              backgroundColor: "#000"
+            },
+            "aria-hidden": "true"
+          }
+        ),
+        playerState.error && (renderError ? renderError(playerState.error, handleRetry) : /* @__PURE__ */ jsx(DefaultErrorUI, { error: playerState.error, onRetry: handleRetry })),
+        playerState.isLoading && !playerState.error && !restoreFrame && (renderLoading ? renderLoading() : /* @__PURE__ */ jsx(DefaultLoadingUI, {})),
+        children
+      ]
+    }
+  ) });
+}
+function getUserFriendlyErrorMessage(error) {
+  const message = error.message?.toLowerCase() ?? "";
+  if (message.includes("network") || message.includes("fetch") || message.includes("offline")) {
+    return "Unable to connect. Please check your internet connection.";
+  }
+  if (message.includes("timeout") || message.includes("timed out")) {
+    return "Video took too long to load. Please try again.";
+  }
+  if (message.includes("format") || message.includes("codec") || message.includes("unsupported") || message.includes("media")) {
+    return "This video format is not supported.";
+  }
+  if (message.includes("blocked") || message.includes("denied") || message.includes("cors")) {
+    return "Video playback is restricted.";
+  }
+  if (message.includes("404") || message.includes("not found")) {
+    return "Video not available.";
+  }
+  if (message.includes("500") || message.includes("server")) {
+    return "Server error. Please try again later.";
+  }
+  if (message.includes("hls") || message.includes("manifest") || message.includes("segment")) {
+    return "Video streaming error. Please try again.";
+  }
+  return "Video failed to load. Tap to retry.";
+}
+function DefaultErrorUI({
+  error,
+  onRetry
+}) {
+  const displayMessage = getUserFriendlyErrorMessage(error);
+  return /* @__PURE__ */ jsxs("div", { className: "sv-video-slot__error", children: [
+    /* @__PURE__ */ jsx("div", { className: "sv-video-slot__error-icon", children: "\u26A0\uFE0F" }),
+    /* @__PURE__ */ jsx("div", { className: "sv-video-slot__error-message", children: displayMessage }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "sv-video-slot__error-retry",
+        onClick: (e) => {
+          e.stopPropagation();
+          onRetry();
+        },
+        children: "Retry"
+      }
+    )
+  ] });
+}
+function DefaultLoadingUI() {
+  return /* @__PURE__ */ jsx("div", { className: "sv-video-slot__spinner", children: /* @__PURE__ */ jsx("div", { className: "sv-video-slot__spinner-circle", "aria-label": "Loading video" }) });
+}
+var VideoSlotHeadless = memo(VideoSlotHeadlessBase);
+VideoSlotHeadless.displayName = "VideoSlotHeadless";
+var VideoSlotPosterInner = memo(function VideoSlotPosterInner2({
+  className,
+  forceSkeleton = false,
+  posterUrl,
+  loading = "eager",
+  alt,
+  onError,
+  videoPoster,
+  videoTitle,
+  firstFrame,
+  isLoading,
+  currentTime
+}) {
+  const imageSource = useMemo(() => {
+    if (forceSkeleton) return null;
+    if (posterUrl) return posterUrl;
+    if (firstFrame) return firstFrame;
+    if (videoPoster) return videoPoster;
+    return null;
+  }, [forceSkeleton, posterUrl, firstFrame, videoPoster]);
+  const sourceKey = imageSource ?? "skeleton";
+  const [errorForSource, setErrorForSource] = useState(null);
+  const imageError = errorForSource === sourceKey;
+  const handleImageError = useCallback(() => {
+    setErrorForSource(sourceKey);
+    onError?.(new Error("Failed to load poster image"));
+  }, [sourceKey, onError]);
+  const showSkeleton = !imageSource || imageError;
+  const posterType = useMemo(() => {
+    if (showSkeleton) return "skeleton";
+    if (imageSource === firstFrame) return "first-frame";
+    return "poster";
+  }, [showSkeleton, imageSource, firstFrame]);
+  const imageAlt = alt ?? videoTitle ?? "";
+  const isVisible = isLoading && currentTime === 0;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx2(
+        "sv-video-slot__poster",
+        `sv-video-slot__poster--${posterType}`,
+        !isVisible && "sv-video-slot__poster--hidden",
+        className
+      ),
+      "aria-hidden": !isVisible,
+      children: imageSource && !imageError ? /* @__PURE__ */ jsx(
+        "img",
+        {
+          className: "sv-video-slot__poster-image",
+          src: imageSource,
+          alt: imageAlt,
+          loading,
+          decoding: "async",
+          onError: handleImageError
+        }
+      ) : (
+        // Skeleton shimmer - pure CSS animation, no JS
+        /* @__PURE__ */ jsx("div", { className: "sv-video-slot__poster-skeleton", "aria-hidden": "true" })
+      )
+    }
+  );
+});
+VideoSlotPosterInner.displayName = "VideoSlotPosterInner";
+function VideoSlotPoster(props) {
+  const { video, firstFrame, playerState } = useVideoSlotContext();
+  return /* @__PURE__ */ jsx(
+    VideoSlotPosterInner,
+    {
+      ...props,
+      videoPoster: video.poster,
+      videoTitle: video.title,
+      firstFrame,
+      isLoading: playerState.isLoading,
+      currentTime: playerState.currentTime
+    }
+  );
+}
+VideoSlotPoster.displayName = "VideoSlotPoster";
+function VideoSlotSkeleton({
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx2("sv-video-slot__poster", "sv-video-slot__poster--skeleton", className),
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("div", { className: "sv-video-slot__poster-skeleton" })
+    }
+  );
+}
+VideoSlotSkeleton.displayName = "VideoSlotSkeleton";
+function VideoSlotOverlayRoot({
+  children,
+  className,
+  noGradient = false
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx2(
+        "sv-video-slot__overlay",
+        noGradient && "sv-video-slot__overlay--no-gradient",
+        className
+      ),
+      children
+    }
+  );
+}
+function VideoSlotOverlayTop({
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsx("div", { className: clsx2("sv-video-slot__overlay-top", className), children });
+}
+function VideoSlotOverlayBottom({
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsx("div", { className: clsx2("sv-video-slot__overlay-bottom", className), children });
+}
+function VideoSlotOverlayLeft({
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsx("div", { className: clsx2("sv-video-slot__overlay-left", className), children });
+}
+function VideoSlotOverlayRight({
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsx("div", { className: clsx2("sv-video-slot__overlay-right", className), children });
+}
+function VideoSlotOverlayActions({
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsx("div", { className: clsx2("sv-video-slot__actions", className), children });
+}
+function VideoSlotOverlayAuthor({
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsx("div", { className: clsx2("sv-video-slot__author", className), children });
+}
+VideoSlotOverlayRoot.displayName = "VideoSlotOverlay";
+VideoSlotOverlayTop.displayName = "VideoSlotOverlay.Top";
+VideoSlotOverlayBottom.displayName = "VideoSlotOverlay.Bottom";
+VideoSlotOverlayLeft.displayName = "VideoSlotOverlay.Left";
+VideoSlotOverlayRight.displayName = "VideoSlotOverlay.Right";
+VideoSlotOverlayActions.displayName = "VideoSlotOverlay.Actions";
+VideoSlotOverlayAuthor.displayName = "VideoSlotOverlay.Author";
+var VideoSlotOverlay = Object.assign(VideoSlotOverlayRoot, {
+  Top: VideoSlotOverlayTop,
+  Bottom: VideoSlotOverlayBottom,
+  Left: VideoSlotOverlayLeft,
+  Right: VideoSlotOverlayRight,
+  Actions: VideoSlotOverlayActions,
+  Author: VideoSlotOverlayAuthor
+});
+
+// src/components/VideoSlot/VideoSlotLikeAnimation.css.ts
+var VIDEO_SLOT_LIKE_ANIMATION_CSS = `.sv-like-animation-container{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:var(--sv-z-indicator,3)}.sv-like-heart{position:absolute;left:var(--sv-heart-x,50%);top:var(--sv-heart-y,50%);transform:translate(-50%,-50%);pointer-events:none;will-change:transform,opacity}.sv-like-heart__icon{display:flex;align-items:center;justify-content:center;width:var(--sv-heart-size,80px);height:var(--sv-heart-size,80px);transform-origin:center;animation-duration:var(--sv-heart-duration,1000ms);animation-fill-mode:forwards;animation-timing-function:cubic-bezier(.25,.46,.45,.94)}.sv-like-heart--float .sv-like-heart__icon{animation-name:sv-heart-float;animation-timing-function:ease-out}@keyframes sv-heart-float{0%{opacity:0;transform:scale(0)rotate(var(--sv-heart-rotation,0deg))}10%{opacity:1;transform:scale(calc(var(--sv-heart-scale,1)* 1.2))rotate(var(--sv-heart-rotation,0deg))}20%{transform:scale(var(--sv-heart-scale,1))rotate(var(--sv-heart-rotation,0deg))translateY(-20px)translateX(10px)}40%{transform:scale(var(--sv-heart-scale,1))rotate(calc(var(--sv-heart-rotation,0deg)- 10deg))translateY(-60px)translateX(-15px)}60%{opacity:1;transform:scale(var(--sv-heart-scale,1))rotate(calc(var(--sv-heart-rotation,0deg)+15deg))translateY(-100px)translateX(10px)}80%{opacity:.6;transform:scale(calc(var(--sv-heart-scale,1)* .9))rotate(calc(var(--sv-heart-rotation,0deg)- 5deg))translateY(-140px)translateX(-5px)}100%{opacity:0;transform:scale(calc(var(--sv-heart-scale,1)* .7))rotate(var(--sv-heart-rotation,0deg))translateY(-180px)translateX(0)}}.sv-like-heart--burst .sv-like-heart__icon{animation-name:sv-heart-burst;animation-timing-function:cubic-bezier(.175,.885,.32,1.275)}@keyframes sv-heart-burst{0%{opacity:0;transform:scale(0)rotate(var(--sv-heart-rotation,0deg))}20%{opacity:1;transform:scale(calc(var(--sv-heart-scale,1)* 1.5))rotate(calc(var(--sv-heart-rotation,0deg)+15deg))}40%{transform:scale(calc(var(--sv-heart-scale,1)* 1.2))rotate(calc(var(--sv-heart-rotation,0deg)- 10deg))}60%{opacity:1;transform:scale(var(--sv-heart-scale,1))rotate(var(--sv-heart-rotation,0deg))translateY(-30px)}80%{opacity:.5;transform:scale(calc(var(--sv-heart-scale,1)* .9))rotate(var(--sv-heart-rotation,0deg))translateY(-60px)}100%{opacity:0;transform:scale(calc(var(--sv-heart-scale,1)* .6))rotate(var(--sv-heart-rotation,0deg))translateY(-80px)}}.sv-like-heart--scale .sv-like-heart__icon{animation-name:sv-heart-scale;animation-timing-function:ease-out}@keyframes sv-heart-scale{0%{opacity:0;transform:scale(0)}20%{opacity:1;transform:scale(calc(var(--sv-heart-scale,1)* 1.3))}40%{transform:scale(var(--sv-heart-scale,1))}70%{opacity:1;transform:scale(var(--sv-heart-scale,1))}100%{opacity:0;transform:scale(calc(var(--sv-heart-scale,1)* 1.1))}}.sv-like-heart--bounce .sv-like-heart__icon{animation-name:sv-heart-bounce;animation-timing-function:cubic-bezier(.68,-.55,.265,1.55)}@keyframes sv-heart-bounce{0%{opacity:0;transform:scale(0)rotate(var(--sv-heart-rotation,0deg))translateY(0)}15%{opacity:1;transform:scale(calc(var(--sv-heart-scale,1)* 1.4))rotate(calc(var(--sv-heart-rotation,0deg)+10deg))translateY(-30px)}30%{transform:scale(calc(var(--sv-heart-scale,1)* .9))rotate(calc(var(--sv-heart-rotation,0deg)- 5deg))translateY(10px)}45%{transform:scale(calc(var(--sv-heart-scale,1)* 1.15))rotate(calc(var(--sv-heart-rotation,0deg)+5deg))translateY(-15px)}60%{opacity:1;transform:scale(var(--sv-heart-scale,1))rotate(var(--sv-heart-rotation,0deg))translateY(0)}80%{opacity:.7;transform:scale(var(--sv-heart-scale,1))rotate(var(--sv-heart-rotation,0deg))translateY(-10px)}100%{opacity:0;transform:scale(calc(var(--sv-heart-scale,1)* .8))rotate(var(--sv-heart-rotation,0deg))translateY(-20px)}}@media(prefers-reduced-motion:reduce){.sv-like-heart__icon{animation-duration:.5s !important}.sv-like-heart--float .sv-like-heart__icon,.sv-like-heart--burst .sv-like-heart__icon,.sv-like-heart--bounce .sv-like-heart__icon{animation-name:sv-heart-scale}}`;
+var SingleHeart = memo(function SingleHeart2({
+  heart,
+  icon,
+  size,
+  animation,
+  duration,
+  onComplete
+}) {
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      onComplete(heart.id);
+    }, duration);
+    return () => clearTimeout(timer);
+  }, [heart.id, duration, onComplete]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx2("sv-like-heart", `sv-like-heart--${animation}`),
+      style: {
+        "--sv-heart-x": `${heart.x}%`,
+        "--sv-heart-y": `${heart.y}%`,
+        "--sv-heart-rotation": `${heart.rotation}deg`,
+        "--sv-heart-scale": heart.scale,
+        "--sv-heart-duration": `${duration}ms`,
+        "--sv-heart-size": `${size}px`
+      },
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("div", { className: "sv-like-heart__icon", children: icon })
+    }
+  );
+});
+function VideoSlotLikeAnimation({
+  icon,
+  duration = 1e3,
+  animation = "float",
+  size = 80,
+  color = "#fe2c55",
+  showWhenAlreadyLiked = true,
+  maxHearts = 10,
+  className,
+  onHeartCreated
+}) {
+  useInsertionEffect(() => {
+    return injectComponentCSS("VideoSlotLikeAnimation", VIDEO_SLOT_LIKE_ANIMATION_CSS);
+  }, []);
+  const heartIdCounterRef = useRef(0);
+  const [hearts, setHearts] = useState([]);
+  const containerRef = useRef(null);
+  const triggerHeart = useCallback(
+    (x, y) => {
+      heartIdCounterRef.current += 1;
+      const newHeart = {
+        id: heartIdCounterRef.current,
+        x,
+        y,
+        createdAt: Date.now(),
+        rotation: Math.random() * 60 - 30,
+        // -30 to 30 degrees
+        scale: 0.8 + Math.random() * 0.4
+        // 0.8 to 1.2
+      };
+      setHearts((prev) => {
+        const updated = prev.length >= maxHearts ? prev.slice(1) : prev;
+        return [...updated, newHeart];
+      });
+      onHeartCreated?.(newHeart);
+    },
+    [maxHearts, onHeartCreated]
+  );
+  const handleHeartComplete = useCallback((id) => {
+    setHearts((prev) => prev.filter((h) => h.id !== id));
+  }, []);
+  const clearAll = useCallback(() => {
+    setHearts([]);
+  }, []);
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) {
+      if (process.env.NODE_ENV !== "production") {
+        console.warn("[VideoSlotLikeAnimation] Container ref is null. Animation will not work.");
+      }
+      return;
+    }
+    const el = container;
+    el.__likeAnimation = {
+      triggerHeart,
+      clearAll
+    };
+    el.__showWhenAlreadyLiked = showWhenAlreadyLiked;
+    return () => {
+      el.__likeAnimation = void 0;
+      el.__showWhenAlreadyLiked = void 0;
+    };
+  }, [triggerHeart, clearAll, showWhenAlreadyLiked]);
+  const iconElement = icon ?? (typeof HeartFilledIcon === "function" ? /* @__PURE__ */ jsx(
+    HeartFilledIcon,
+    {
+      width: size,
+      height: size,
+      style: { color, filter: "drop-shadow(0 2px 4px rgba(0,0,0,0.3))" }
+    }
+  ) : /* @__PURE__ */ jsx("span", { style: { fontSize: size, color, textShadow: "0 2px 4px rgba(0,0,0,0.3)" }, children: "\u2764\uFE0F" }));
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: containerRef,
+      className: clsx2("sv-like-animation-container", className),
+      "data-like-animation": "true",
+      "aria-hidden": "true",
+      children: hearts.map((heart) => /* @__PURE__ */ jsx(
+        SingleHeart,
+        {
+          heart,
+          icon: iconElement,
+          size,
+          animation,
+          duration,
+          onComplete: handleHeartComplete
+        },
+        heart.id
+      ))
+    }
+  );
+}
+VideoSlotLikeAnimation.displayName = "VideoSlotLikeAnimation";
+
+// src/components/VideoSlot/ReportedVideoOverlay.css.ts
+var REPORTED_VIDEO_OVERLAY_CSS = `.sv-reported-overlay{position:absolute;top:0;left:0;right:0;bottom:0;z-index:var(--sv-z-reported-overlay,10);background:rgba(0,0,0,.85);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:24px}.sv-reported-overlay .sv-reported-content{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:300px;gap:16px}.sv-reported-overlay .sv-reported-icon{width:64px;height:64px;display:flex;align-items:center;justify-content:center;color:var(--sv-color-warning,#ffa500);opacity:.9}.sv-reported-overlay .sv-reported-icon svg{width:100%;height:100%}.sv-reported-overlay .sv-reported-title{margin:0;font-size:18px;font-weight:600;color:#fff}.sv-reported-overlay .sv-reported-message{margin:0;font-size:14px;color:rgba(255,255,255,.7);line-height:1.5}.sv-reported-overlay .sv-reported-button{display:inline-block;margin-top:8px;padding:12px 24px;font-size:14px;font-weight:600;color:#fff;background:transparent;border:1px solid rgba(255,255,255,.3);border-radius:8px;cursor:pointer;transition:all 150ms ease;text-decoration:none;text-transform:none;letter-spacing:normal;line-height:1.2;box-sizing:border-box;font-family:inherit;outline:none}.sv-reported-overlay .sv-reported-button:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.5)}.sv-reported-overlay .sv-reported-button:active{transform:scale(.98)}.sv-reported-overlay .sv-reported-button:focus{border-color:rgba(255,255,255,.6);box-shadow:0 0 0 2px rgba(255,255,255,.2)}`;
+function ReportedIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      "aria-hidden": "true",
+      width: "48",
+      height: "48",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z" }),
+        /* @__PURE__ */ jsx("line", { x1: "4", y1: "22", x2: "4", y2: "15" })
+      ]
+    }
+  );
+}
+function ReportedVideoOverlayComponent({
+  onWatchVideo,
+  title = "Video Reported",
+  message = "You have reported this video. It will be reviewed by our team.",
+  buttonText = "Watch Video",
+  icon,
+  className
+}) {
+  useEffect(() => {
+    return injectComponentCSS("reported-video-overlay", REPORTED_VIDEO_OVERLAY_CSS, {
+      layered: false
+    });
+  }, []);
+  return /* @__PURE__ */ jsx("div", { className: `sv-reported-overlay ${className ?? ""}`, children: /* @__PURE__ */ jsxs("div", { className: "sv-reported-content", children: [
+    /* @__PURE__ */ jsx("div", { className: "sv-reported-icon", children: icon ?? /* @__PURE__ */ jsx(ReportedIcon, {}) }),
+    /* @__PURE__ */ jsx("h3", { className: "sv-reported-title", children: title }),
+    /* @__PURE__ */ jsx("p", { className: "sv-reported-message", children: message }),
+    /* @__PURE__ */ jsx("button", { type: "button", className: "sv-reported-button", onClick: onWatchVideo, children: buttonText })
+  ] }) });
+}
+var ReportedVideoOverlay = memo(ReportedVideoOverlayComponent);
+ReportedVideoOverlay.displayName = "ReportedVideoOverlay";
+
+export { LOADING_ATTR, LOADING_DATASET_KEY, PLAYER_STATE_ATTR, PLAYER_STATE_DATASET_KEY, ReportedVideoOverlay, SLOT_ACTIVE_ATTR, SLOT_ACTIVE_CLASS, SLOT_ACTIVE_DATASET_KEY, SLOT_CLASS, SLOT_ERROR_CLASS, SLOT_LOADING_CLASS, SLOT_PAUSED_CLASS, SLOT_PLAYING_CLASS, VIDEO_ID_ATTR, VIDEO_ID_DATASET_KEY, VIDEO_SLOT_CSS, VIDEO_SLOT_LIKE_ANIMATION_CSS, VideoSlotHeadless, VideoSlotLikeAnimation, VideoSlotOverlay, VideoSlotPoster, VideoSlotSkeleton, Z_INDEX, Z_INDEX_CSS_VARS };