@rxdrag/website-lib-react 0.0.3 → 0.0.6

package/src/components/Medias/MainMedia.tsx

@@ -0,0 +1,257 @@
+import clsx from "clsx";
+import { useRef, useState, useEffect, useCallback } from "react";
+import { TMedia } from "../../types/view-model";
+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/components/Medias/Thumbnail.tsx

@@ -0,0 +1,62 @@
+import clsx from "clsx";
+import { TMedia } from "../../types/view-model";
+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>
+  );
+};

package/src/components/Medias/VideoPlayer.tsx

@@ -0,0 +1,114 @@
+import { Media } from "@rxdrag/rxcms-models";
+import React, { useEffect, useRef, useState } from "react";
+import Hls from "hls.js";
+import clsx from "clsx";
+
+export function VideoPlayer(props: {
+  media: Media;
+  size?: "normal" | "small";
+  playButtonClass?: string;
+}) {
+  const { media, size = "normal", playButtonClass } = props;
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const hlsRef = useRef<Hls | null>(null);
+  const [isPlaying, setIsPlaying] = useState(false);
+
+  const handlePlayClick = React.useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      if (videoRef.current) {
+        if (isPlaying) {
+          videoRef.current.pause();
+        } else {
+          videoRef.current.play();
+        }
+      }
+    },
+    [isPlaying]
+  );
+
+  useEffect(() => {
+    if (!videoRef.current || !media.file?.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;
+      }
+    };
+  }, [media.file?.original, media.storageType]);
+
+  return (
+    <div className="relative w-full h-full group cursor-pointer" onClick={handlePlayClick}>
+      <video
+        ref={videoRef}
+        preload="metadata"
+        poster={media.file?.thumbnail}
+        className="absolute inset-0 w-full h-full object-cover"
+        controls={false} 
+        playsInline
+      />
+      {!isPlaying && (
+        <div className="absolute inset-0 flex items-center justify-center z-10 bg-black/10 group-hover:bg-black/20 transition-colors">
+          <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
+            )}
+          >
+            <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"
+              )}
+            >
+              <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"
+              />
+            </svg>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/Medias/index.tsx

@@ -0,0 +1,271 @@
+import clsx from "clsx";
+import { forwardRef, useEffect, useState, useCallback } from "react";
+import { TMedia } from "../../types/view-model";
+import { MainMedia } from "./MainMedia";
+import { Thumbnail } from "./Thumbnail";
+
+export type MediasProps = {
+  value?: TMedia[];
+  className?: string;
+  children?: React.ReactNode;
+  // Aspect ratio, format is `aspect-[width/height]`
+  aspect?: string;
+  thumbnailAspect?: string;
+  enableZoom?: boolean;
+  thumbnailPosition?: "bottom" | "left";
+  visibleCount?: number;
+  classNames?: {
+    mainArea?: string;
+    navigation?: string;
+    thumbnail?: string;
+    thumbnailImage?: string;
+    arrowButton?: string;
+    arrowIcon?: string;
+    playButton?: string;
+    navigationInner?: string;
+  };
+};
+
+export const Medias = forwardRef<HTMLDivElement, MediasProps>((props, ref) => {
+  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<string | undefined | null>(
+    value?.[0]?.id || ""
+  );
+
+  useEffect(() => {
+    setSelectedId(value?.[0]?.id || "");
+  }, [value]);
+
+  const selectedIndex =
+    value?.findIndex((media) => media.id === selectedId) || 0;
+
+  const totalItems = value?.length || 0;
+
+  const handlePrevious = useCallback(() => {
+    if (selectedIndex > 0) {
+      const prevIndex = selectedIndex - 1;
+      setSelectedId(value?.[prevIndex]?.id || "");
+    }
+  }, [selectedIndex, value]);
+
+  const handleNext = useCallback(() => {
+    if (selectedIndex < totalItems - 1) {
+      const currentMediaIndex =
+        value?.findIndex((media) => media.id === selectedId) || 0;
+      const nextIndex = currentMediaIndex + 1;
+      setSelectedId(value?.[nextIndex]?.id || "");
+    }
+  }, [selectedIndex, totalItems, value, selectedId]);
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      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 (
+    <div
+      ref={ref}
+      className={clsx(
+        "flex gap-4",
+        isVerticalThumbs ? "flex-col md:flex-row-reverse" : "flex-col",
+        className
+      )}
+      {...rest}
+    >
+      {children}
+      {/* Main display area */}
+      <MainMedia
+        value={value}
+        selectedId={selectedId}
+        aspect={aspect}
+        enableZoom={enableZoom}
+        className={clsx(
+          isVerticalThumbs ? "w-full md:flex-1" : "w-full",
+          mainArea
+        )}
+        arrowButtonClass={arrowButton}
+        arrowIconClass={arrowIcon}
+        playButtonClass={playButton}
+        onPrevious={handlePrevious}
+        onNext={handleNext}
+        canPrevious={canPrevious}
+        canNext={canNext}
+      />
+
+      {/* Thumbnail navigation */}
+      {totalItems > 1 && (
+        <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
+          )}
+        >
+          {/* Previous Arrow */}
+          {totalItems > actualVisibleCount && (
+            <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"
+            >
+              <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"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M15 19l-7-7 7-7"
+                />
+              </svg>
+            </button>
+          )}
+
+          <div
+            className={clsx(
+              "flex-1",
+              isVerticalThumbs
+                ? "w-full px-0.5 md:h-full md:py-0.5"
+                : "w-full px-0.5"
+            )}
+          >
+            <div
+              className={clsx(
+                "gap-2 md:gap-3",
+                navigationInner,
+                isVerticalThumbs ? "grid md:flex md:flex-col" : "grid"
+              )}
+              style={{
+                gridTemplateColumns: `repeat(${actualVisibleCount}, minmax(0, 1fr))`,
+              }}
+            >
+              {value?.map((media, index) => {
+                if (index < startIndex || index >= endIndex) return null;
+                const isSelected = selectedId === media.id;
+                return (
+                  <Thumbnail
+                    key={media.id}
+                    media={media}
+                    isSelected={isSelected}
+                    onClick={() => setSelectedId(media.id)}
+                    aspect={thumbnailAspect}
+                    className={thumbnail}
+                    imageClass={thumbnailImage}
+                    playButtonClass={playButton}
+                  />
+                );
+              })}
+            </div>
+          </div>
+
+          {/* Next Arrow */}
+          {totalItems > actualVisibleCount && (
+            <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"
+            >
+              <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"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M9 5l7 7-7 7"
+                />
+              </svg>
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+});