@rxdrag/website-lib-core 0.0.127 → 0.0.129

package/src/react/components/Medias/MainMedia.tsx

@@ -1,257 +1,257 @@
-import clsx from "clsx";
-import { useRef, useState, useEffect, useCallback } from "react";
-import { TMedia } from "../../../entify";
-import { MediaType } from "@rxdrag/rxcms-models";
-import { VideoPlayer } from "./VideoPlayer";
-
-export type MainMediaProps = {
-  value?: TMedia[];
-  selectedId?: string | null;
-  aspect?: string;
-  enableZoom?: boolean;
-  className?: string;
-  arrowButtonClass?: string;
-  arrowIconClass?: string;
-  playButtonClass?: string;
-  onPrevious: () => void;
-  onNext: () => void;
-  canPrevious: boolean;
-  canNext: boolean;
-};
-
-export const MainMedia = ({
-  value,
-  selectedId,
-  aspect,
-  enableZoom,
-  className,
-  arrowButtonClass,
-  arrowIconClass,
-  playButtonClass,
-  onPrevious,
-  onNext,
-  canPrevious,
-  canNext,
-}: MainMediaProps) => {
-  const mainAreaRef = useRef<HTMLDivElement>(null);
-  const [isZoomed, setIsZoomed] = useState(false);
-  const [position, setPosition] = useState({ x: 0, y: 0 });
-  const hoverTimerRef = useRef<NodeJS.Timeout | null>(null);
-  const lastMousePosRef = useRef({ x: 0, y: 0 });
-
-  const selectedMedia = value?.find((media) => media.id === selectedId);
-  const isVideo = selectedMedia?.mediaType === MediaType.video;
-
-  // Reset zoom state when image changes
-  useEffect(() => {
-    setIsZoomed(false);
-    setPosition({ x: 0, y: 0 });
-    if (hoverTimerRef.current) {
-      clearTimeout(hoverTimerRef.current);
-    }
-  }, [selectedId]);
-
-  // Clean up timer on unmount
-  useEffect(() => {
-    return () => {
-      if (hoverTimerRef.current) {
-        clearTimeout(hoverTimerRef.current);
-      }
-    };
-  }, []);
-
-  const updateZoomPosition = useCallback((clientX: number, clientY: number) => {
-    if (mainAreaRef.current) {
-      const { left, top, width, height } =
-        mainAreaRef.current.getBoundingClientRect();
-      const x = clientX - left;
-      const y = clientY - top;
-
-      // Calculate percentage position (0 to 1)
-      const ratioX = Math.max(0, Math.min(1, x / width));
-      const ratioY = Math.max(0, Math.min(1, y / height));
-
-      // Formula: Translate = Dimension * (0.5 - Ratio)
-      // This shifts the image opposite to mouse movement relative to center
-      const newX = width * (0.5 - ratioX);
-      const newY = height * (0.5 - ratioY);
-
-      setPosition({ x: newX, y: newY });
-    }
-  }, []);
-
-  const handleMouseEnter = useCallback(
-    (e: React.MouseEvent) => {
-      if (!enableZoom || isVideo) return;
-      lastMousePosRef.current = { x: e.clientX, y: e.clientY };
-
-      hoverTimerRef.current = setTimeout(() => {
-        setIsZoomed(true);
-        updateZoomPosition(
-          lastMousePosRef.current.x,
-          lastMousePosRef.current.y
-        );
-      }, 1000);
-    },
-    [enableZoom, isVideo, updateZoomPosition]
-  );
-
-  const handleMouseMove = useCallback(
-    (e: React.MouseEvent) => {
-      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: React.MouseEvent) => {
-      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 (
-    <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}
-    >
-      {/* Navigation Arrows - Hide when zoomed to avoid misclick */}
-      {!isZoomed && (
-        <div className="absolute inset-0 flex items-center justify-between p-4 pointer-events-none z-20">
-          <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"
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              className={clsx("h-5 w-5", arrowIconClass)}
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M15 19l-7-7 7-7"
-              />
-            </svg>
-          </button>
-
-          <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"
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              className={clsx("h-5 w-5", arrowIconClass)}
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M9 5l7 7-7 7"
-              />
-            </svg>
-          </button>
-        </div>
-      )}
-
-      {value?.map((media) => (
-        <div
-          key={media.id}
-          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"
-          )}
-        >
-          {media.mediaType === MediaType.video ? (
-            <VideoPlayer media={media} playButtonClass={playButtonClass} />
-          ) : (
-            <img
-              src={media?.file?.resize || media?.file?.url}
-              alt={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
-                      })`
-                    : undefined,
-                transition: isZoomed ? "none" : "transform 0.3s ease-out",
-              }}
-            />
-          )}
-        </div>
-      ))}
-    </div>
-  );
-};
+import clsx from "clsx";
+import { useRef, useState, useEffect, useCallback } from "react";
+import { TMedia } from "../../../entify";
+import { MediaType } from "@rxdrag/rxcms-models";
+import { VideoPlayer } from "./VideoPlayer";
+
+export type MainMediaProps = {
+  value?: TMedia[];
+  selectedId?: string | null;
+  aspect?: string;
+  enableZoom?: boolean;
+  className?: string;
+  arrowButtonClass?: string;
+  arrowIconClass?: string;
+  playButtonClass?: string;
+  onPrevious: () => void;
+  onNext: () => void;
+  canPrevious: boolean;
+  canNext: boolean;
+};
+
+export const MainMedia = ({
+  value,
+  selectedId,
+  aspect,
+  enableZoom,
+  className,
+  arrowButtonClass,
+  arrowIconClass,
+  playButtonClass,
+  onPrevious,
+  onNext,
+  canPrevious,
+  canNext,
+}: MainMediaProps) => {
+  const mainAreaRef = useRef<HTMLDivElement>(null);
+  const [isZoomed, setIsZoomed] = useState(false);
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+  const hoverTimerRef = useRef<NodeJS.Timeout | null>(null);
+  const lastMousePosRef = useRef({ x: 0, y: 0 });
+
+  const selectedMedia = value?.find((media) => media.id === selectedId);
+  const isVideo = selectedMedia?.mediaType === MediaType.video;
+
+  // Reset zoom state when image changes
+  useEffect(() => {
+    setIsZoomed(false);
+    setPosition({ x: 0, y: 0 });
+    if (hoverTimerRef.current) {
+      clearTimeout(hoverTimerRef.current);
+    }
+  }, [selectedId]);
+
+  // Clean up timer on unmount
+  useEffect(() => {
+    return () => {
+      if (hoverTimerRef.current) {
+        clearTimeout(hoverTimerRef.current);
+      }
+    };
+  }, []);
+
+  const updateZoomPosition = useCallback((clientX: number, clientY: number) => {
+    if (mainAreaRef.current) {
+      const { left, top, width, height } =
+        mainAreaRef.current.getBoundingClientRect();
+      const x = clientX - left;
+      const y = clientY - top;
+
+      // Calculate percentage position (0 to 1)
+      const ratioX = Math.max(0, Math.min(1, x / width));
+      const ratioY = Math.max(0, Math.min(1, y / height));
+
+      // Formula: Translate = Dimension * (0.5 - Ratio)
+      // This shifts the image opposite to mouse movement relative to center
+      const newX = width * (0.5 - ratioX);
+      const newY = height * (0.5 - ratioY);
+
+      setPosition({ x: newX, y: newY });
+    }
+  }, []);
+
+  const handleMouseEnter = useCallback(
+    (e: React.MouseEvent) => {
+      if (!enableZoom || isVideo) return;
+      lastMousePosRef.current = { x: e.clientX, y: e.clientY };
+
+      hoverTimerRef.current = setTimeout(() => {
+        setIsZoomed(true);
+        updateZoomPosition(
+          lastMousePosRef.current.x,
+          lastMousePosRef.current.y
+        );
+      }, 1000);
+    },
+    [enableZoom, isVideo, updateZoomPosition]
+  );
+
+  const handleMouseMove = useCallback(
+    (e: React.MouseEvent) => {
+      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: React.MouseEvent) => {
+      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 (
+    <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}
+    >
+      {/* Navigation Arrows - Hide when zoomed to avoid misclick */}
+      {!isZoomed && (
+        <div className="absolute inset-0 flex items-center justify-between p-4 pointer-events-none z-20">
+          <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"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              className={clsx("h-5 w-5", arrowIconClass)}
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M15 19l-7-7 7-7"
+              />
+            </svg>
+          </button>
+
+          <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"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              className={clsx("h-5 w-5", arrowIconClass)}
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M9 5l7 7-7 7"
+              />
+            </svg>
+          </button>
+        </div>
+      )}
+
+      {value?.map((media) => (
+        <div
+          key={media.id}
+          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"
+          )}
+        >
+          {media.mediaType === MediaType.video ? (
+            <VideoPlayer media={media} playButtonClass={playButtonClass} />
+          ) : (
+            <img
+              src={media?.file?.resize || media?.file?.url}
+              alt={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
+                      })`
+                    : undefined,
+                transition: isZoomed ? "none" : "transform 0.3s ease-out",
+              }}
+            />
+          )}
+        </div>
+      ))}
+    </div>
+  );
+};

package/src/react/components/Medias/Thumbnail.tsx

@@ -1,62 +1,62 @@
-import clsx from "clsx";
-import { TMedia } from "../../../entify";
-import { MediaType } from "@rxdrag/rxcms-models";
-import { VideoPlayer } from "./VideoPlayer";
-
-export type ThumbnailProps = {
-  media: TMedia;
-  isSelected: boolean;
-  onClick: () => void;
-  aspect?: string;
-  className?: string;
-  imageClass?: string;
-  playButtonClass?: string;
-};
-
-export const Thumbnail = ({
-  media,
-  isSelected,
-  onClick,
-  aspect,
-  className,
-  imageClass,
-  playButtonClass,
-}: ThumbnailProps) => {
-  return (
-    <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={onClick}
-    >
-      {media.mediaType === MediaType.video ? (
-        <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
-          )}
-        >
-          <VideoPlayer media={media} size="small" playButtonClass={playButtonClass} />
-        </div>
-      ) : (
-        <img
-          src={
-            media?.file?.thumbnail || media?.file?.resize || media?.file?.url
-          }
-          alt={media?.alt}
-          className={clsx(
-            "w-full h-full object-cover transition-transform duration-500",
-            isSelected ? "scale-110" : "scale-100",
-            imageClass
-          )}
-        />
-      )}
-    </div>
-  );
-};
+import clsx from "clsx";
+import { TMedia } from "../../../entify";
+import { MediaType } from "@rxdrag/rxcms-models";
+import { VideoPlayer } from "./VideoPlayer";
+
+export type ThumbnailProps = {
+  media: TMedia;
+  isSelected: boolean;
+  onClick: () => void;
+  aspect?: string;
+  className?: string;
+  imageClass?: string;
+  playButtonClass?: string;
+};
+
+export const Thumbnail = ({
+  media,
+  isSelected,
+  onClick,
+  aspect,
+  className,
+  imageClass,
+  playButtonClass,
+}: ThumbnailProps) => {
+  return (
+    <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={onClick}
+    >
+      {media.mediaType === MediaType.video ? (
+        <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
+          )}
+        >
+          <VideoPlayer media={media} size="small" playButtonClass={playButtonClass} />
+        </div>
+      ) : (
+        <img
+          src={
+            media?.file?.thumbnail || media?.file?.resize || media?.file?.url
+          }
+          alt={media?.alt}
+          className={clsx(
+            "w-full h-full object-cover transition-transform duration-500",
+            isSelected ? "scale-110" : "scale-100",
+            imageClass
+          )}
+        />
+      )}
+    </div>
+  );
+};