@rxdrag/website-lib-react 0.0.4 → 0.0.7

package/dist/media.mjs

@@ -0,0 +1,613 @@
+import { j as jsxRuntimeExports } from "./jsx-runtime-c02cc059.js";
+import clsx from "clsx";
+import require$$0, { useRef, useState, useEffect, useCallback, forwardRef } from "react";
+import { MediaType } from "@rxdrag/rxcms-models";
+import Hls from "hls.js";
+function VideoPlayer(props) {
+  var _a, _b;
+  const { media, size = "normal", playButtonClass } = props;
+  const videoRef = useRef(null);
+  const hlsRef = useRef(null);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const handlePlayClick = require$$0.useCallback(
+    (e) => {
+      e.stopPropagation();
+      if (videoRef.current) {
+        if (isPlaying) {
+          videoRef.current.pause();
+        } else {
+          videoRef.current.play();
+        }
+      }
+    },
+    [isPlaying]
+  );
+  useEffect(() => {
+    var _a2;
+    if (!videoRef.current || !((_a2 = media.file) == null ? void 0 : _a2.original))
+      return;
+    const video = videoRef.current;
+    const videoUrl = media.file.original;
+    const handlePlay = () => {
+      setIsPlaying(true);
+    };
+    const handlePause = () => {
+      setIsPlaying(false);
+    };
+    video.addEventListener("play", handlePlay);
+    video.addEventListener("pause", handlePause);
+    if (media.storageType === "cloudflare_stream") {
+      if (!Hls.isSupported()) {
+        if (video.canPlayType("application/vnd.apple.mpegurl")) {
+          video.src = videoUrl;
+        }
+      } else {
+        const hls = new Hls({
+          enableWorker: true
+        });
+        hls.loadSource(videoUrl);
+        hls.attachMedia(video);
+        hlsRef.current = hls;
+      }
+    } else {
+      video.src = videoUrl;
+    }
+    return () => {
+      video.removeEventListener("play", handlePlay);
+      video.removeEventListener("pause", handlePause);
+      if (hlsRef.current) {
+        hlsRef.current.destroy();
+        hlsRef.current = null;
+      }
+    };
+  }, [(_a = media.file) == null ? void 0 : _a.original, media.storageType]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative w-full h-full group cursor-pointer", onClick: handlePlayClick, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "video",
+      {
+        ref: videoRef,
+        preload: "metadata",
+        poster: (_b = media.file) == null ? void 0 : _b.thumbnail,
+        className: "absolute inset-0 w-full h-full object-cover",
+        controls: false,
+        playsInline: true
+      }
+    ),
+    !isPlaying && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 flex items-center justify-center z-10 bg-black/10 group-hover:bg-black/20 transition-colors", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "div",
+      {
+        className: clsx(
+          "rounded-full bg-white/90 hover:bg-white flex items-center justify-center shadow-lg transition-all hover:scale-110 backdrop-blur-sm",
+          size === "small" ? "w-8 h-8" : "w-14 h-14",
+          playButtonClass
+        ),
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            viewBox: "0 0 24 24",
+            fill: "currentColor",
+            className: clsx(
+              "text-gray-900 ml-1",
+              size === "small" ? "w-4 h-4" : "w-8 h-8"
+            ),
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "path",
+              {
+                fillRule: "evenodd",
+                d: "M4.5 5.653c0-1.426 1.529-2.33 2.779-1.643l11.54 6.348c1.295.712 1.295 2.573 0 3.248L7.28 19.987C6.03 20.673 4.5 19.77 4.5 18.562V5.653z",
+                clipRule: "evenodd"
+              }
+            )
+          }
+        )
+      }
+    ) })
+  ] });
+}
+const MainMedia = ({
+  value,
+  selectedId,
+  aspect,
+  enableZoom,
+  className,
+  arrowButtonClass,
+  arrowIconClass,
+  playButtonClass,
+  onPrevious,
+  onNext,
+  canPrevious,
+  canNext
+}) => {
+  const mainAreaRef = useRef(null);
+  const [isZoomed, setIsZoomed] = useState(false);
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+  const hoverTimerRef = useRef(null);
+  const lastMousePosRef = useRef({ x: 0, y: 0 });
+  const selectedMedia = value == null ? void 0 : value.find((media) => media.id === selectedId);
+  const isVideo = (selectedMedia == null ? void 0 : selectedMedia.mediaType) === MediaType.video;
+  useEffect(() => {
+    setIsZoomed(false);
+    setPosition({ x: 0, y: 0 });
+    if (hoverTimerRef.current) {
+      clearTimeout(hoverTimerRef.current);
+    }
+  }, [selectedId]);
+  useEffect(() => {
+    return () => {
+      if (hoverTimerRef.current) {
+        clearTimeout(hoverTimerRef.current);
+      }
+    };
+  }, []);
+  const updateZoomPosition = useCallback((clientX, clientY) => {
+    if (mainAreaRef.current) {
+      const { left, top, width, height } = mainAreaRef.current.getBoundingClientRect();
+      const x = clientX - left;
+      const y = clientY - top;
+      const ratioX = Math.max(0, Math.min(1, x / width));
+      const ratioY = Math.max(0, Math.min(1, y / height));
+      const newX = width * (0.5 - ratioX);
+      const newY = height * (0.5 - ratioY);
+      setPosition({ x: newX, y: newY });
+    }
+  }, []);
+  const handleMouseEnter = useCallback(
+    (e) => {
+      if (!enableZoom || isVideo)
+        return;
+      lastMousePosRef.current = { x: e.clientX, y: e.clientY };
+      hoverTimerRef.current = setTimeout(() => {
+        setIsZoomed(true);
+        updateZoomPosition(
+          lastMousePosRef.current.x,
+          lastMousePosRef.current.y
+        );
+      }, 1e3);
+    },
+    [enableZoom, isVideo, updateZoomPosition]
+  );
+  const handleMouseMove = useCallback(
+    (e) => {
+      if (!enableZoom || isVideo)
+        return;
+      lastMousePosRef.current = { x: e.clientX, y: e.clientY };
+      if (isZoomed) {
+        updateZoomPosition(e.clientX, e.clientY);
+      }
+    },
+    [enableZoom, isVideo, isZoomed, updateZoomPosition]
+  );
+  const handleMouseLeave = useCallback(() => {
+    if (hoverTimerRef.current) {
+      clearTimeout(hoverTimerRef.current);
+    }
+    setIsZoomed(false);
+    setPosition({ x: 0, y: 0 });
+  }, []);
+  const handleClick = useCallback(
+    (e) => {
+      if (!enableZoom || isVideo)
+        return;
+      if (hoverTimerRef.current) {
+        clearTimeout(hoverTimerRef.current);
+      }
+      if (isZoomed) {
+        setIsZoomed(false);
+        setPosition({ x: 0, y: 0 });
+      } else {
+        setIsZoomed(true);
+        updateZoomPosition(e.clientX, e.clientY);
+      }
+    },
+    [enableZoom, isVideo, isZoomed, updateZoomPosition]
+  );
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "div",
+    {
+      ref: mainAreaRef,
+      className: clsx(
+        "relative group overflow-hidden rounded-xl bg-gray-100 dark:bg-gray-800 z-0",
+        aspect,
+        className,
+        enableZoom && !isVideo && "cursor-crosshair"
+      ),
+      onMouseEnter: handleMouseEnter,
+      onMouseMove: handleMouseMove,
+      onMouseLeave: handleMouseLeave,
+      onClick: handleClick,
+      children: [
+        !isZoomed && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "absolute inset-0 flex items-center justify-between p-4 pointer-events-none z-20", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "button",
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+                onPrevious();
+              },
+              disabled: !canPrevious,
+              className: clsx(
+                "pointer-events-auto transition-all duration-200 rounded-full p-2",
+                "bg-white/80 dark:bg-black/50 backdrop-blur-sm shadow-sm",
+                "hover:bg-white dark:hover:bg-black/70 hover:scale-105 active:scale-95",
+                "text-gray-800 dark:text-white",
+                !canPrevious ? "opacity-0 translate-x-[-10px]" : "opacity-0 group-hover:opacity-100 translate-x-0",
+                arrowButtonClass
+              ),
+              "aria-label": "Previous slide",
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "svg",
+                {
+                  xmlns: "http://www.w3.org/2000/svg",
+                  className: clsx("h-5 w-5", arrowIconClass),
+                  fill: "none",
+                  viewBox: "0 0 24 24",
+                  stroke: "currentColor",
+                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    "path",
+                    {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      strokeWidth: 2,
+                      d: "M15 19l-7-7 7-7"
+                    }
+                  )
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "button",
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+                onNext();
+              },
+              disabled: !canNext,
+              className: clsx(
+                "pointer-events-auto transition-all duration-200 rounded-full p-2",
+                "bg-white/80 dark:bg-black/50 backdrop-blur-sm shadow-sm",
+                "hover:bg-white dark:hover:bg-black/70 hover:scale-105 active:scale-95",
+                "text-gray-800 dark:text-white",
+                !canNext ? "opacity-0 translate-x-[10px]" : "opacity-0 group-hover:opacity-100 translate-x-0",
+                arrowButtonClass
+              ),
+              "aria-label": "Next slide",
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "svg",
+                {
+                  xmlns: "http://www.w3.org/2000/svg",
+                  className: clsx("h-5 w-5", arrowIconClass),
+                  fill: "none",
+                  viewBox: "0 0 24 24",
+                  stroke: "currentColor",
+                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    "path",
+                    {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      strokeWidth: 2,
+                      d: "M9 5l7 7-7 7"
+                    }
+                  )
+                }
+              )
+            }
+          )
+        ] }),
+        value == null ? void 0 : value.map((media) => {
+          var _a, _b;
+          return /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "div",
+            {
+              className: clsx(
+                "absolute inset-0 transition-opacity duration-500 ease-in-out",
+                media.id === selectedId ? "opacity-100 z-10" : "opacity-0 z-0 pointer-events-none"
+              ),
+              children: media.mediaType === MediaType.video ? /* @__PURE__ */ jsxRuntimeExports.jsx(VideoPlayer, { media, playButtonClass }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "img",
+                {
+                  src: ((_a = media == null ? void 0 : media.file) == null ? void 0 : _a.resize) || ((_b = media == null ? void 0 : media.file) == null ? void 0 : _b.url),
+                  alt: media == null ? void 0 : media.alt,
+                  className: "w-full h-full object-cover object-center origin-center",
+                  style: {
+                    transform: media.id === selectedId ? `translate(${position.x}px, ${position.y}px) scale(${isZoomed ? 2 : 1})` : void 0,
+                    transition: isZoomed ? "none" : "transform 0.3s ease-out"
+                  }
+                }
+              )
+            },
+            media.id
+          );
+        })
+      ]
+    }
+  );
+};
+const Thumbnail = ({
+  media,
+  isSelected,
+  onClick,
+  aspect,
+  className,
+  imageClass,
+  playButtonClass
+}) => {
+  var _a, _b, _c;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "div",
+    {
+      className: clsx(
+        "relative cursor-pointer overflow-hidden rounded-lg transition-all duration-200",
+        aspect,
+        isSelected ? "ring-2 ring-primary ring-offset-2 ring-offset-white dark:ring-offset-gray-950" : "opacity-70 hover:opacity-100 hover:ring-2 hover:ring-gray-200 dark:hover:ring-gray-700",
+        className
+      ),
+      onClick,
+      children: media.mediaType === MediaType.video ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "div",
+        {
+          className: clsx(
+            "w-full h-full relative pointer-events-none [&>div]:!aspect-auto [&>div]:!w-full [&>div]:!h-full transition-transform duration-500",
+            isSelected ? "scale-110" : "scale-100",
+            imageClass
+          ),
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(VideoPlayer, { media, size: "small", playButtonClass })
+        }
+      ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "img",
+        {
+          src: ((_a = media == null ? void 0 : media.file) == null ? void 0 : _a.thumbnail) || ((_b = media == null ? void 0 : media.file) == null ? void 0 : _b.resize) || ((_c = media == null ? void 0 : media.file) == null ? void 0 : _c.url),
+          alt: media == null ? void 0 : media.alt,
+          className: clsx(
+            "w-full h-full object-cover transition-transform duration-500",
+            isSelected ? "scale-110" : "scale-100",
+            imageClass
+          )
+        }
+      )
+    }
+  );
+};
+const Medias = forwardRef((props, ref) => {
+  var _a;
+  const {
+    value,
+    className,
+    children,
+    aspect = "aspect-[1/1]",
+    thumbnailAspect = "aspect-[1/1]",
+    enableZoom = true,
+    thumbnailPosition = "bottom",
+    visibleCount = 6,
+    classNames,
+    ...rest
+  } = props;
+  const {
+    mainArea,
+    navigation,
+    thumbnail,
+    thumbnailImage,
+    arrowButton,
+    arrowIcon,
+    playButton,
+    navigationInner
+  } = classNames || {};
+  const [selectedId, setSelectedId] = useState(
+    ((_a = value == null ? void 0 : value[0]) == null ? void 0 : _a.id) || ""
+  );
+  useEffect(() => {
+    var _a2;
+    setSelectedId(((_a2 = value == null ? void 0 : value[0]) == null ? void 0 : _a2.id) || "");
+  }, [value]);
+  const selectedIndex = (value == null ? void 0 : value.findIndex((media) => media.id === selectedId)) || 0;
+  const totalItems = (value == null ? void 0 : value.length) || 0;
+  const handlePrevious = useCallback(() => {
+    var _a2;
+    if (selectedIndex > 0) {
+      const prevIndex = selectedIndex - 1;
+      setSelectedId(((_a2 = value == null ? void 0 : value[prevIndex]) == null ? void 0 : _a2.id) || "");
+    }
+  }, [selectedIndex, value]);
+  const handleNext = useCallback(() => {
+    var _a2;
+    if (selectedIndex < totalItems - 1) {
+      const currentMediaIndex = (value == null ? void 0 : value.findIndex((media) => media.id === selectedId)) || 0;
+      const nextIndex = currentMediaIndex + 1;
+      setSelectedId(((_a2 = value == null ? void 0 : value[nextIndex]) == null ? void 0 : _a2.id) || "");
+    }
+  }, [selectedIndex, totalItems, value, selectedId]);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+        handlePrevious();
+      } else if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+        handleNext();
+      }
+    },
+    [handleNext, handlePrevious]
+  );
+  useEffect(() => {
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [handleKeyDown]);
+  const canPrevious = selectedIndex > 0;
+  const canNext = selectedIndex < totalItems - 1;
+  const isVerticalThumbs = thumbnailPosition === "left";
+  const actualVisibleCount = visibleCount;
+  const halfVisible = Math.floor(actualVisibleCount / 2);
+  const startIndex = Math.max(
+    0,
+    Math.min(selectedIndex - halfVisible, totalItems - actualVisibleCount)
+  );
+  const endIndex = Math.min(startIndex + actualVisibleCount, totalItems);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "div",
+    {
+      ref,
+      className: clsx(
+        "flex gap-4",
+        isVerticalThumbs ? "flex-col md:flex-row-reverse" : "flex-col",
+        className
+      ),
+      ...rest,
+      children: [
+        children,
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          MainMedia,
+          {
+            value,
+            selectedId,
+            aspect,
+            enableZoom,
+            className: clsx(
+              isVerticalThumbs ? "w-full md:flex-1" : "w-full",
+              mainArea
+            ),
+            arrowButtonClass: arrowButton,
+            arrowIconClass: arrowIcon,
+            playButtonClass: playButton,
+            onPrevious: handlePrevious,
+            onNext: handleNext,
+            canPrevious,
+            canNext
+          }
+        ),
+        totalItems > 1 && /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "div",
+          {
+            className: clsx(
+              "relative group/thumbs",
+              isVerticalThumbs ? "w-full mt-4 md:w-24 md:h-full md:px-1" : "w-full mt-4",
+              navigation
+            ),
+            children: [
+              totalItems > actualVisibleCount && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "button",
+                {
+                  onClick: handlePrevious,
+                  disabled: !canPrevious,
+                  className: clsx(
+                    "absolute z-10 w-8 h-8 flex items-center justify-center rounded-full",
+                    "bg-white/60 dark:bg-black/50 shadow-sm backdrop-blur-sm",
+                    "text-gray-700 dark:text-gray-200 transition-all duration-200",
+                    isVerticalThumbs ? "left-2 top-1/2 -translate-y-1/2 md:top-2 md:left-1/2 md:-translate-x-1/2" : "left-2 top-1/2 -translate-y-1/2",
+                    !canPrevious ? "opacity-0 pointer-events-none" : "opacity-0 group-hover/thumbs:opacity-100 hover:bg-white/90 dark:hover:bg-black/80",
+                    arrowButton
+                  ),
+                  "aria-label": "Previous",
+                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    "svg",
+                    {
+                      xmlns: "http://www.w3.org/2000/svg",
+                      className: clsx(
+                        "h-4 w-4",
+                        isVerticalThumbs && "md:rotate-90",
+                        arrowIcon
+                      ),
+                      fill: "none",
+                      viewBox: "0 0 24 24",
+                      stroke: "currentColor",
+                      children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        "path",
+                        {
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round",
+                          strokeWidth: 2,
+                          d: "M15 19l-7-7 7-7"
+                        }
+                      )
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "div",
+                {
+                  className: clsx(
+                    "flex-1",
+                    isVerticalThumbs ? "w-full px-0.5 md:h-full md:py-0.5" : "w-full px-0.5"
+                  ),
+                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    "div",
+                    {
+                      className: clsx(
+                        "gap-2 md:gap-3",
+                        navigationInner,
+                        isVerticalThumbs ? "grid md:flex md:flex-col" : "grid"
+                      ),
+                      style: {
+                        gridTemplateColumns: `repeat(${actualVisibleCount}, minmax(0, 1fr))`
+                      },
+                      children: value == null ? void 0 : value.map((media, index) => {
+                        if (index < startIndex || index >= endIndex)
+                          return null;
+                        const isSelected = selectedId === media.id;
+                        return /* @__PURE__ */ jsxRuntimeExports.jsx(
+                          Thumbnail,
+                          {
+                            media,
+                            isSelected,
+                            onClick: () => setSelectedId(media.id),
+                            aspect: thumbnailAspect,
+                            className: thumbnail,
+                            imageClass: thumbnailImage,
+                            playButtonClass: playButton
+                          },
+                          media.id
+                        );
+                      })
+                    }
+                  )
+                }
+              ),
+              totalItems > actualVisibleCount && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "button",
+                {
+                  onClick: handleNext,
+                  disabled: !canNext,
+                  className: clsx(
+                    "absolute z-10 w-8 h-8 flex items-center justify-center rounded-full",
+                    "bg-white/60 dark:bg-black/50 shadow-sm backdrop-blur-sm",
+                    "text-gray-700 dark:text-gray-200 transition-all duration-200",
+                    isVerticalThumbs ? "right-2 top-1/2 -translate-y-1/2 md:bottom-2 md:left-1/2 md:-translate-x-1/2" : "right-2 top-1/2 -translate-y-1/2",
+                    !canNext ? "opacity-0 pointer-events-none" : "opacity-0 group-hover/thumbs:opacity-100 hover:bg-white/90 dark:hover:bg-black/80",
+                    arrowButton
+                  ),
+                  "aria-label": "Next",
+                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    "svg",
+                    {
+                      xmlns: "http://www.w3.org/2000/svg",
+                      className: clsx(
+                        "h-4 w-4",
+                        isVerticalThumbs && "md:rotate-90",
+                        arrowIcon
+                      ),
+                      fill: "none",
+                      viewBox: "0 0 24 24",
+                      stroke: "currentColor",
+                      children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        "path",
+                        {
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round",
+                          strokeWidth: 2,
+                          d: "M9 5l7 7-7 7"
+                        }
+                      )
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+});
+export {
+  Medias
+};
+//# sourceMappingURL=media.mjs.map