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

package/dist/chunk-JEY6R4KJ.js

@@ -0,0 +1,334 @@
+import { useDoubleTap, VideoSlotPlayIndicatorInner } from './chunk-MFJS65C5.js';
+import { ImageCarouselHeadless } from './chunk-Q6MG7AVG.js';
+import { clsx2 } from './chunk-EDWS2IPH.js';
+import { injectComponentCSS } from './chunk-CAWE42LH.js';
+import { createContext, memo, useInsertionEffect, useState, useRef, useCallback, useMemo, useContext } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/components/ImagePostSlot/ImagePostSlot.css.ts
+var IMAGE_POST_SLOT_CSS = `.sv-image-post-slot{position:relative;width:100%;height:100%;overflow:hidden;background:var(--sv-image-post-bg,#000);touch-action:pan-y;user-select:none;-webkit-user-select:none}.sv-image-post-slot--active{z-index:1}.sv-image-post-slot__images{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.sv-image-post-slot__overlay{position:absolute;inset:0;pointer-events:none;display:flex;flex-direction:column;z-index:2}.sv-image-post-slot__overlay>*{pointer-events:auto}.sv-image-post-slot__gradient{position:absolute;left:0;right:0;pointer-events:none}.sv-image-post-slot__gradient--top{top:0;height:120px;background:linear-gradient(to bottom,rgba(0,0,0,.5)0%,rgba(0,0,0,.3)50%,transparent 100%)}.sv-image-post-slot__gradient--bottom{bottom:0;height:200px;background:linear-gradient(to top,rgba(0,0,0,.7)0%,rgba(0,0,0,.4)50%,transparent 100%)}.sv-image-post-slot__top-bar{position:absolute;top:0;left:0;right:0;padding:var(--sv-image-post-top-padding,16px);display:flex;justify-content:space-between;align-items:flex-start;z-index:10}.sv-image-post-slot__counter{padding:4px 10px;background:var(--sv-image-post-counter-bg,rgba(0,0,0,.6));border-radius:12px;font-size:var(--sv-image-post-counter-font-size,12px);font-weight:500;color:var(--sv-image-post-counter-color,#fff)}.sv-image-post-slot__badge{padding:4px 8px;background:var(--sv-image-post-badge-bg,rgba(255,255,255,.2));border-radius:4px;font-size:var(--sv-image-post-badge-font-size,11px);font-weight:500;color:var(--sv-image-post-badge-color,#fff);text-transform:uppercase;letter-spacing:.5px}.sv-image-post-slot__bottom{position:absolute;bottom:0;left:0;right:var(--sv-image-post-action-bar-width,72px);padding:var(--sv-image-post-bottom-padding,16px);display:flex;flex-direction:column;gap:12px;z-index:5}.sv-image-post-slot__author{display:flex;align-items:center;gap:10px}.sv-image-post-slot__author-avatar{width:var(--sv-image-post-avatar-size,40px);height:var(--sv-image-post-avatar-size,40px);border-radius:50%;object-fit:cover;border:2px solid var(--sv-image-post-avatar-border,rgba(255,255,255,.3))}.sv-image-post-slot__author-name{font-size:var(--sv-image-post-author-font-size,15px);font-weight:600;color:var(--sv-image-post-author-color,#fff);text-shadow:0 1px 2px rgba(0,0,0,.5)}.sv-image-post-slot__caption{font-size:var(--sv-image-post-caption-font-size,14px);line-height:1.4;color:var(--sv-image-post-caption-color,#fff);text-shadow:0 1px 2px rgba(0,0,0,.5);display:-webkit-box;-webkit-line-clamp:var(--sv-image-post-caption-lines,2);-webkit-box-orient:vertical;overflow:hidden}.sv-image-post-slot__caption--expanded{-webkit-line-clamp:unset;overflow:visible}.sv-image-post-slot__read-more{display:inline-flex;align-items:center;gap:4px;padding:8px 16px;background:var(--sv-image-post-read-more-bg,rgba(255,255,255,.2));border:0;border-radius:20px;font-size:var(--sv-image-post-read-more-font-size,13px);font-weight:500;color:var(--sv-image-post-read-more-color,#fff);cursor:pointer;transition:background .2s ease;width:fit-content}.sv-image-post-slot__read-more:hover{background:var(--sv-image-post-read-more-hover-bg,rgba(255,255,255,.3))}.sv-image-post-slot__read-more svg{width:16px;height:16px}.sv-image-post-slot__actions{position:absolute;right:0;bottom:0;width:var(--sv-image-post-action-bar-width,72px);padding:var(--sv-image-post-actions-padding,16px 8px);display:flex;flex-direction:column;align-items:center;gap:20px;z-index:5}.sv-image-post-slot__music{overflow:hidden;aspect-ratio:1/1;background:transparent;width:fit-content;height:fit-content;border:0}.sv-image-post-slot__music-cover{width:44px;height:44px;object-fit:cover;border-radius:999px;border:2px solid var(--sv-image-post-music-border,rgba(255,255,255,.3))}.sv-image-post-slot__music-cover--playing{animation:sv-music-rotate 4s linear infinite}@keyframes sv-music-rotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.sv-image-post-slot__like-animation{position:absolute;inset:0;pointer-events:none;z-index:20}.sv-image-post-slot--clean-mode .sv-image-post-slot__overlay,.sv-image-post-slot--clean-mode .sv-image-post-slot__top-bar,.sv-image-post-slot--clean-mode .sv-image-post-slot__bottom,.sv-image-post-slot--clean-mode .sv-image-post-slot__actions,.sv-image-post-slot--clean-mode .sv-image-post-slot__gradient{opacity:0;transition:opacity .3s ease}.sv-image-post-slot--loading .sv-image-post-slot__skeleton{position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.05)25%,rgba(255,255,255,.1)50%,rgba(255,255,255,.05)75%);background-size:200% 100%;animation:sv-image-post-shimmer 1.5s infinite}@keyframes sv-image-post-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}.sv-image-post-slot:focus-visible{outline:2px solid var(--sv-image-post-focus-color,#4dabff);outline-offset:-2px}.sv-image-post-slot__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}`;
+var cssInjected = false;
+function injectImagePostSlotCSS() {
+  if (cssInjected) return void 0;
+  cssInjected = true;
+  return injectComponentCSS("image-post-slot", IMAGE_POST_SLOT_CSS);
+}
+var IMAGE_POST_SLOT_CLASS = "sv-image-post-slot";
+var IMAGE_POST_SLOT_ACTIVE_CLASS = "sv-image-post-slot--active";
+var IMAGE_POST_SLOT_CLEAN_MODE_CLASS = "sv-image-post-slot--clean-mode";
+var IMAGE_POST_ID_ATTR = "data-image-post-id";
+var IMAGE_POST_ACTIVE_ATTR = "data-active";
+var ImagePostSlotContext = createContext(null);
+function useImagePostSlotContext() {
+  const context = useContext(ImagePostSlotContext);
+  if (!context) {
+    throw new Error("useImagePostSlotContext must be used within ImagePostSlotHeadless");
+  }
+  return context;
+}
+function useOptionalImagePostSlotContext() {
+  return useContext(ImagePostSlotContext);
+}
+var ANIMATION_SELECTOR = '[data-like-animation="true"]';
+function ImagePostSlotHeadlessBase({
+  imagePost,
+  isActive = false,
+  currentImageIndex: controlledIndex,
+  onImageIndexChange,
+  music,
+  isMusicPlaying = false,
+  onToggleMusic,
+  lastMusicToggleTime: controlledToggleTime,
+  isCleanMode = false,
+  onTap,
+  onDoubleTap,
+  onLongPress,
+  onReadMoreClick,
+  disableTap = false,
+  enableZoom = false,
+  showCounter = true,
+  showIndicators = true,
+  className,
+  children
+}) {
+  useInsertionEffect(() => {
+    return injectImagePostSlotCSS();
+  }, []);
+  const [internalIndex, setInternalIndex] = useState(0);
+  const currentIndex = controlledIndex ?? internalIndex;
+  const [internalToggleTime, setInternalToggleTime] = useState(0);
+  const lastMusicToggleTime = controlledToggleTime ?? internalToggleTime;
+  const containerRef = useRef(null);
+  const totalImages = imagePost.images.length;
+  const handleImageIndexChange = useCallback(
+    (index) => {
+      setInternalIndex(index);
+      onImageIndexChange?.(index);
+    },
+    [onImageIndexChange]
+  );
+  const goToImage = useCallback(
+    (index) => {
+      const clampedIndex = Math.max(0, Math.min(totalImages - 1, index));
+      handleImageIndexChange(clampedIndex);
+    },
+    [totalImages, handleImageIndexChange]
+  );
+  const nextImage = useCallback(() => {
+    if (currentIndex < totalImages - 1) {
+      goToImage(currentIndex + 1);
+    }
+  }, [currentIndex, totalImages, goToImage]);
+  const prevImage = useCallback(() => {
+    if (currentIndex > 0) {
+      goToImage(currentIndex - 1);
+    }
+  }, [currentIndex, goToImage]);
+  const toggleMusic = useCallback(() => {
+    if (controlledToggleTime === void 0) {
+      setInternalToggleTime(Date.now());
+    }
+    onToggleMusic?.();
+  }, [onToggleMusic, controlledToggleTime]);
+  const expandCaption = useCallback(() => {
+    onReadMoreClick?.();
+  }, [onReadMoreClick]);
+  const triggerLikeAnimation = useCallback((position) => {
+    const container = containerRef.current;
+    if (!container) return;
+    const animationEl = container.querySelector(ANIMATION_SELECTOR);
+    if (!animationEl) return;
+    const ref = animationEl.__likeAnimation;
+    if (ref?.triggerHeart) {
+      ref.triggerHeart(position.x, position.y);
+    }
+  }, []);
+  const { handlers: doubleTapHandlers } = useDoubleTap({
+    containerRef,
+    disabled: disableTap,
+    onSingleTap: onTap,
+    onDoubleTap: (position) => {
+      triggerLikeAnimation(position);
+      onDoubleTap?.();
+    },
+    onLongPress: onLongPress ? () => onLongPress() : void 0,
+    longPressDelay: 500
+  });
+  const contextValue = useMemo(
+    () => ({
+      imagePost,
+      currentImageIndex: currentIndex,
+      totalImages,
+      isActive,
+      isCleanMode,
+      lastMusicToggleTime,
+      music,
+      isMusicPlaying,
+      toggleMusic,
+      goToImage,
+      nextImage,
+      prevImage,
+      expandCaption
+    }),
+    [
+      imagePost,
+      currentIndex,
+      totalImages,
+      isActive,
+      isCleanMode,
+      lastMusicToggleTime,
+      music,
+      isMusicPlaying,
+      toggleMusic,
+      goToImage,
+      nextImage,
+      prevImage,
+      expandCaption
+    ]
+  );
+  const containerClassName = clsx2(
+    IMAGE_POST_SLOT_CLASS,
+    isActive && IMAGE_POST_SLOT_ACTIVE_CLASS,
+    isCleanMode && IMAGE_POST_SLOT_CLEAN_MODE_CLASS,
+    className
+  );
+  return /* @__PURE__ */ jsx(ImagePostSlotContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: containerClassName,
+      ...{ [IMAGE_POST_ID_ATTR]: imagePost.id },
+      ...{ [IMAGE_POST_ACTIVE_ATTR]: isActive ? "true" : "false" },
+      ...doubleTapHandlers,
+      "aria-label": `Image post by ${imagePost.author?.name ?? "Unknown"}, ${totalImages} images`,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "sv-image-post-slot__images", children: /* @__PURE__ */ jsx(
+          ImageCarouselHeadless,
+          {
+            images: imagePost.images,
+            currentIndex,
+            onIndexChange: handleImageIndexChange,
+            showIndicators: showIndicators && totalImages > 1,
+            indicatorStyle: "dots",
+            enableZoom,
+            lazyLoad: true
+          }
+        ) }),
+        /* @__PURE__ */ jsx("div", { className: "sv-image-post-slot__gradient sv-image-post-slot__gradient--top" }),
+        /* @__PURE__ */ jsx("div", { className: "sv-image-post-slot__gradient sv-image-post-slot__gradient--bottom" }),
+        showCounter && totalImages > 1 && /* @__PURE__ */ jsx("div", { className: "sv-image-post-slot__top-bar", children: /* @__PURE__ */ jsxs("div", { className: "sv-image-post-slot__counter", children: [
+          currentIndex + 1,
+          "/",
+          totalImages
+        ] }) }),
+        typeof children === "function" ? children(contextValue) : children
+      ]
+    }
+  ) });
+}
+var ImagePostSlotHeadless = memo(ImagePostSlotHeadlessBase);
+ImagePostSlotHeadless.displayName = "ImagePostSlotHeadless";
+function ImagePostSlotOverlay({
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsx("div", { className: clsx2("sv-image-post-slot__overlay", className), children });
+}
+function ImagePostSlotBottom({
+  children,
+  className,
+  onClick
+}) {
+  return (
+    // biome-ignore lint/a11y/useKeyWithClickEvents: <explanation>
+    /* @__PURE__ */ jsx("div", { className: clsx2("sv-image-post-slot__bottom", className), onClick, children })
+  );
+}
+function ImagePostSlotActions({
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsx("div", { className: clsx2("sv-image-post-slot__actions", className), children });
+}
+function ImagePostSlotCaption({
+  maxLines = 2,
+  expanded = false,
+  className
+}) {
+  const { imagePost } = useImagePostSlotContext();
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      className: clsx2(
+        "sv-image-post-slot__caption",
+        expanded && "sv-image-post-slot__caption--expanded",
+        className
+      ),
+      style: { WebkitLineClamp: expanded ? "unset" : maxLines },
+      children: imagePost.caption
+    }
+  );
+}
+function ImagePostSlotReadMore({
+  label = "Read More",
+  className,
+  onClick
+}) {
+  const { expandCaption } = useImagePostSlotContext();
+  const handleClick = useCallback(() => {
+    onClick?.() ?? expandCaption();
+  }, [onClick, expandCaption]);
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: clsx2("sv-image-post-slot__read-more", className),
+      onClick: handleClick,
+      children: [
+        label,
+        /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("polyline", { points: "9 6 15 12 9 18" }) })
+      ]
+    }
+  );
+}
+function MusicCoverFallback({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 48 48",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className,
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "24", cy: "24", r: "22", fill: "#1a1a1a", stroke: "#333", strokeWidth: "2" }),
+        /* @__PURE__ */ jsx("circle", { cx: "24", cy: "24", r: "18", fill: "none", stroke: "#2a2a2a", strokeWidth: "1" }),
+        /* @__PURE__ */ jsx("circle", { cx: "24", cy: "24", r: "14", fill: "none", stroke: "#2a2a2a", strokeWidth: "1" }),
+        /* @__PURE__ */ jsx("circle", { cx: "24", cy: "24", r: "10", fill: "none", stroke: "#2a2a2a", strokeWidth: "1" }),
+        /* @__PURE__ */ jsx("circle", { cx: "24", cy: "24", r: "6", fill: "#ff4757" }),
+        /* @__PURE__ */ jsx("circle", { cx: "24", cy: "24", r: "2", fill: "#1a1a1a" }),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M26 21v5.5c0 1.38-1.12 2.5-2.5 2.5S21 27.88 21 26.5s1.12-2.5 2.5-2.5c.41 0 .79.1 1.13.27V21h1.37z",
+            fill: "white"
+          }
+        )
+      ]
+    }
+  );
+}
+function ImagePostSlotMusic({
+  className,
+  onClick,
+  fallbackCover
+}) {
+  const { music, isMusicPlaying } = useImagePostSlotContext();
+  const [hasError, setHasError] = useState(false);
+  if (!music) return null;
+  const coverClassName = clsx2(
+    "sv-image-post-slot__music-cover",
+    isMusicPlaying && "sv-image-post-slot__music-cover--playing"
+  );
+  const renderFallback = () => {
+    if (fallbackCover) {
+      return /* @__PURE__ */ jsx("span", { className: coverClassName, children: fallbackCover });
+    }
+    return /* @__PURE__ */ jsx(MusicCoverFallback, { className: coverClassName });
+  };
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: clsx2("sv-image-post-slot__music", className),
+      onClick: (e) => {
+        e.stopPropagation();
+        onClick?.();
+      },
+      children: music.cover && !hasError ? /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: music.cover,
+          alt: "",
+          className: coverClassName,
+          onError: () => setHasError(true)
+        }
+      ) : renderFallback()
+    }
+  );
+}
+function ImagePostSlotPlayIndicator(props) {
+  const context = useOptionalImagePostSlotContext();
+  if (!context || !context.music) return null;
+  return /* @__PURE__ */ jsx(
+    VideoSlotPlayIndicatorInner,
+    {
+      ...props,
+      lastUserToggleTime: context.lastMusicToggleTime,
+      isPlaying: context.isMusicPlaying
+    }
+  );
+}
+ImagePostSlotPlayIndicator.displayName = "ImagePostSlotPlayIndicator";
+
+export { IMAGE_POST_ACTIVE_ATTR, IMAGE_POST_ID_ATTR, IMAGE_POST_SLOT_ACTIVE_CLASS, IMAGE_POST_SLOT_CLASS, IMAGE_POST_SLOT_CLEAN_MODE_CLASS, IMAGE_POST_SLOT_CSS, ImagePostSlotActions, ImagePostSlotBottom, ImagePostSlotCaption, ImagePostSlotHeadless, ImagePostSlotMusic, ImagePostSlotOverlay, ImagePostSlotPlayIndicator, ImagePostSlotReadMore, useImagePostSlotContext, useOptionalImagePostSlotContext };