@rxdrag/website-lib-react 0.0.6 → 0.0.8

package/src/components/Medias/MainMedia.tsx

@@ -1,257 +0,0 @@
-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

@@ -1,62 +0,0 @@
-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

@@ -1,114 +0,0 @@
-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

@@ -1,271 +0,0 @@
-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>
-  );
-});