@rxdrag/website-lib-core 0.0.7 → 0.0.8

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

@@ -1,347 +1,347 @@
-import clsx from "clsx";
-import { forwardRef, useEffect, useState, useCallback } from "react";
-import { TMedias } from "../../../entify";
-
-export type MediasProps = {
-  value?: TMedias;
-  className?: string;
-  children?: React.ReactNode;
-  // Aspect ratio, format is `aspect-[width/height]`
-  aspect?: string;
-};
-
-export const Medias = forwardRef<HTMLDivElement, MediasProps>(
-  (props, ref) => {
-    const {
-      value,
-      className,
-      children,
-      aspect = "aspect-[5/4]",
-      ...rest
-    } = props;
-    const [selectedId, setSelectedId] = useState<string | undefined | null>(
-      value?.externalVideoUrl ? "video" : value?.medias?.[0]?.id || ""
-    );
-    const [videoUrl, setVideoUrl] = useState<string>("");
-    const [thumbnailUrl, setThumbnailUrl] = useState<string>("");
-
-    useEffect(() => {
-      setSelectedId(
-        value?.externalVideoUrl ? "video" : value?.medias?.[0]?.id || ""
-      );
-    }, [value]);
-
-    useEffect(() => {
-      if (value?.externalVideoUrl) {
-        const baseUrl = value.externalVideoUrl.replace(
-          "https://youtu.be/",
-          "https://www.youtube.com/embed/"
-        );
-        const separator = baseUrl.includes("?") ? "&" : "?";
-        setVideoUrl(
-          `${baseUrl}${separator}autoplay=1&muted=1&modestbranding=1&rel=0&controls=1&playsinline=1&enablejsapi=1&origin=${encodeURIComponent(
-            window.location.origin
-          )}`
-        );
-      }
-    }, [value?.externalVideoUrl]);
-
-    useEffect(() => {
-      if (value?.externalVideoUrl) {
-        const videoId = value.externalVideoUrl.includes("youtu.be/")
-          ? value.externalVideoUrl.split("youtu.be/")[1].split("?")[0]
-          : value.externalVideoUrl.split("v=")[1]?.split("&")[0];
-
-        if (videoId) {
-          setThumbnailUrl(
-            `https://img.youtube.com/vi/${videoId}/hqdefault.jpg`
-          );
-        }
-      }
-    }, [value?.externalVideoUrl]);
-
-    const selectedIndex = value?.externalVideoUrl
-      ? selectedId === "video"
-        ? 0
-        : (value?.medias?.findIndex((media) => media.id === selectedId) || 0) +
-          1
-      : value?.medias?.findIndex((media) => media.id === selectedId) || 0;
-
-    const totalItems =
-      (value?.externalVideoUrl ? 1 : 0) + (value?.medias?.length || 0);
-
-    // Calculate visible thumbnails (show 6 items)
-    const visibleCount = 6;
-    const halfVisible = Math.floor(visibleCount / 2);
-    const startIndex = Math.max(
-      0,
-      Math.min(selectedIndex - halfVisible, totalItems - visibleCount)
-    );
-    const endIndex = Math.min(startIndex + visibleCount, totalItems);
-
-    const handlePrevious = useCallback(() => {
-      if (selectedIndex > 0) {
-        if (value?.externalVideoUrl) {
-          if (selectedIndex === 1) {
-            setSelectedId("video");
-          } else {
-            const prevIndex = selectedIndex - 2;
-            setSelectedId(value.medias?.[prevIndex]?.id || "");
-          }
-        } else {
-          const prevIndex = selectedIndex - 1;
-          setSelectedId(value?.medias?.[prevIndex]?.id || "");
-        }
-      }
-    }, [selectedIndex, value]);
-
-    const handleNext = useCallback(() => {
-      if (selectedIndex < totalItems - 1) {
-        if (value?.externalVideoUrl) {
-          if (selectedId === "video") {
-            setSelectedId(value.medias?.[0]?.id || "");
-          } else {
-            const currentMediaIndex =
-              value.medias?.findIndex((media) => media.id === selectedId) || 0;
-            const nextIndex = currentMediaIndex + 1;
-            setSelectedId(value.medias?.[nextIndex]?.id || "");
-          }
-        } else {
-          const currentMediaIndex =
-            value?.medias?.findIndex((media) => media.id === selectedId) || 0;
-          const nextIndex = currentMediaIndex + 1;
-          setSelectedId(value?.medias?.[nextIndex]?.id || "");
-        }
-      }
-    }, [selectedIndex, totalItems, value, selectedId]);
-
-    const handleKeyDown = useCallback(
-      (e: KeyboardEvent) => {
-        if (e.key === "ArrowLeft") {
-          handlePrevious();
-        } else if (e.key === "ArrowRight") {
-          handleNext();
-        }
-      },
-      [handleNext, handlePrevious]
-    );
-
-    useEffect(() => {
-      window.addEventListener("keydown", handleKeyDown);
-      return () => window.removeEventListener("keydown", handleKeyDown);
-    }, [handleKeyDown]);
-
-    const canPrevious = selectedIndex > 0;
-    const canNext = selectedIndex < totalItems - 1;
-
-    return (
-      <div ref={ref} className={clsx("flex flex-col", className)} {...rest}>
-        {children}
-        {/* Main display area */}
-        <div className={clsx("relative group")}>
-          {canPrevious && (
-            <button
-              onClick={handlePrevious}
-              className="absolute left-4 top-1/2 transform -translate-y-1/2 z-10 bg-black/50 hover:bg-black/70 text-white rounded-full p-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200"
-              aria-label="Previous slide"
-            >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                className="h-6 w-6"
-                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>
-          )}
-          {canNext && (
-            <button
-              onClick={handleNext}
-              className="absolute right-4 top-1/2 transform -translate-y-1/2 z-10 bg-black/50 hover:bg-black/70 text-white rounded-full p-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200"
-              aria-label="Next slide"
-            >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                className="h-6 w-6"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M9 5l7 7-7 7"
-                />
-              </svg>
-            </button>
-          )}
-          {value?.externalVideoUrl && selectedId === "video" && (
-            <div className={clsx("w-full rounded-md overflow-hidden", aspect)}>
-              <iframe
-                src={videoUrl}
-                className="w-full h-full"
-                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share; autoplay"
-                referrerPolicy="strict-origin-when-cross-origin"
-                allowFullScreen
-              />
-            </div>
-          )}
-          {value?.medias?.map((media) => (
-            <div
-              key={media.id}
-              className={clsx(
-                "transition-opacity duration-300 overflow-hidden rounded-md",
-                media.id === selectedId ? "opacity-100" : "opacity-0 hidden",
-                aspect
-              )}
-            >
-              <img
-                src={media?.resize || media?.url}
-                alt={media?.alt}
-                className="w-full h-full object-cover object-center"
-              />
-            </div>
-          ))}
-        </div>
-
-        {/* Thumbnail navigation */}
-        <div className="relative mt-4">
-          <div className="flex items-stretch gap-2">
-            {totalItems > 6 && (
-              <button
-                onClick={handlePrevious}
-                disabled={!canPrevious}
-                className={clsx(
-                  "flex items-center justify-center w-6",
-                  "transition-colors duration-200 rounded-l-md",
-                  !canPrevious
-                    ? "bg-gray-100 text-gray-400 cursor-not-allowed"
-                    : "bg-gray-200 hover:bg-gray-300 text-gray-700"
-                )}
-                aria-label="Previous"
-              >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  className="h-4 w-4 md:h-5 md:w-5"
-                  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="flex-1">
-              <div className="grid grid-cols-6 gap-2">
-                {value?.externalVideoUrl && startIndex === 0 && (
-                  <div
-                    className={clsx(
-                      "relative cursor-pointer overflow-hidden rounded-sm border-2",
-                      aspect,
-                      selectedId === "video"
-                        ? "border-primary-500"
-                        : "border-transparent hover:border-primary-300"
-                    )}
-                    onClick={() => setSelectedId("video")}
-                  >
-                    <img
-                      src={thumbnailUrl}
-                      alt="Video thumbnail"
-                      className="w-full h-full object-cover"
-                    />
-                    <div className="absolute inset-0 flex items-center justify-center bg-black/30">
-                      <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        className="h-8 w-8 text-white"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          fill="currentColor"
-                          fill-rule="evenodd"
-                          d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12s4.477 10 10 10"
-                          clipRule="evenodd"
-                          opacity="0.5"
-                        />
-                        <path
-                          fill="currentColor"
-                          d="m15.414 13.059l-4.72 2.787C9.934 16.294 9 15.71 9 14.786V9.214c0-.924.934-1.507 1.694-1.059l4.72 2.787c.781.462.781 1.656 0 2.118"
-                        />
-                      </svg>
-                    </div>
-                  </div>
-                )}
-                {value?.medias?.map((media, index) => {
-                  const adjustedIndex = value?.externalVideoUrl
-                    ? index + 1
-                    : index;
-                  return adjustedIndex >= startIndex &&
-                    adjustedIndex < endIndex ? (
-                    <div
-                      key={media.id}
-                      className={clsx(
-                        "relative cursor-pointer overflow-hidden rounded-sm border-2",
-                        aspect,
-                        selectedId === media.id
-                          ? "border-primary-500"
-                          : "border-transparent hover:border-primary-300"
-                      )}
-                      onClick={() => setSelectedId(media.id)}
-                    >
-                      <img
-                        src={media?.resize || media?.url}
-                        alt={media?.alt}
-                        className="w-full h-full object-cover"
-                      />
-                    </div>
-                  ) : null;
-                })}
-              </div>
-            </div>
-            {totalItems > 6 && (
-              <button
-                onClick={handleNext}
-                disabled={!canNext}
-                className={clsx(
-                  "flex items-center justify-center w-6",
-                  "transition-colors duration-200 rounded-r-md",
-                  !canNext
-                    ? "bg-gray-100 text-gray-400 cursor-not-allowed"
-                    : "bg-gray-200 hover:bg-gray-300 text-gray-700"
-                )}
-                aria-label="Next"
-              >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  className="h-4 w-4 md:h-5 md:w-5"
-                  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>
-      </div>
-    );
-  }
-);
+import clsx from "clsx";
+import { forwardRef, useEffect, useState, useCallback } from "react";
+import { TMedias } from "../../../entify";
+
+export type MediasProps = {
+  value?: TMedias;
+  className?: string;
+  children?: React.ReactNode;
+  // Aspect ratio, format is `aspect-[width/height]`
+  aspect?: string;
+};
+
+export const Medias = forwardRef<HTMLDivElement, MediasProps>(
+  (props, ref) => {
+    const {
+      value,
+      className,
+      children,
+      aspect = "aspect-[5/4]",
+      ...rest
+    } = props;
+    const [selectedId, setSelectedId] = useState<string | undefined | null>(
+      value?.externalVideoUrl ? "video" : value?.medias?.[0]?.id || ""
+    );
+    const [videoUrl, setVideoUrl] = useState<string>("");
+    const [thumbnailUrl, setThumbnailUrl] = useState<string>("");
+
+    useEffect(() => {
+      setSelectedId(
+        value?.externalVideoUrl ? "video" : value?.medias?.[0]?.id || ""
+      );
+    }, [value]);
+
+    useEffect(() => {
+      if (value?.externalVideoUrl) {
+        const baseUrl = value.externalVideoUrl.replace(
+          "https://youtu.be/",
+          "https://www.youtube.com/embed/"
+        );
+        const separator = baseUrl.includes("?") ? "&" : "?";
+        setVideoUrl(
+          `${baseUrl}${separator}autoplay=1&muted=1&modestbranding=1&rel=0&controls=1&playsinline=1&enablejsapi=1&origin=${encodeURIComponent(
+            window.location.origin
+          )}`
+        );
+      }
+    }, [value?.externalVideoUrl]);
+
+    useEffect(() => {
+      if (value?.externalVideoUrl) {
+        const videoId = value.externalVideoUrl.includes("youtu.be/")
+          ? value.externalVideoUrl.split("youtu.be/")[1].split("?")[0]
+          : value.externalVideoUrl.split("v=")[1]?.split("&")[0];
+
+        if (videoId) {
+          setThumbnailUrl(
+            `https://img.youtube.com/vi/${videoId}/hqdefault.jpg`
+          );
+        }
+      }
+    }, [value?.externalVideoUrl]);
+
+    const selectedIndex = value?.externalVideoUrl
+      ? selectedId === "video"
+        ? 0
+        : (value?.medias?.findIndex((media) => media.id === selectedId) || 0) +
+          1
+      : value?.medias?.findIndex((media) => media.id === selectedId) || 0;
+
+    const totalItems =
+      (value?.externalVideoUrl ? 1 : 0) + (value?.medias?.length || 0);
+
+    // Calculate visible thumbnails (show 6 items)
+    const visibleCount = 6;
+    const halfVisible = Math.floor(visibleCount / 2);
+    const startIndex = Math.max(
+      0,
+      Math.min(selectedIndex - halfVisible, totalItems - visibleCount)
+    );
+    const endIndex = Math.min(startIndex + visibleCount, totalItems);
+
+    const handlePrevious = useCallback(() => {
+      if (selectedIndex > 0) {
+        if (value?.externalVideoUrl) {
+          if (selectedIndex === 1) {
+            setSelectedId("video");
+          } else {
+            const prevIndex = selectedIndex - 2;
+            setSelectedId(value.medias?.[prevIndex]?.id || "");
+          }
+        } else {
+          const prevIndex = selectedIndex - 1;
+          setSelectedId(value?.medias?.[prevIndex]?.id || "");
+        }
+      }
+    }, [selectedIndex, value]);
+
+    const handleNext = useCallback(() => {
+      if (selectedIndex < totalItems - 1) {
+        if (value?.externalVideoUrl) {
+          if (selectedId === "video") {
+            setSelectedId(value.medias?.[0]?.id || "");
+          } else {
+            const currentMediaIndex =
+              value.medias?.findIndex((media) => media.id === selectedId) || 0;
+            const nextIndex = currentMediaIndex + 1;
+            setSelectedId(value.medias?.[nextIndex]?.id || "");
+          }
+        } else {
+          const currentMediaIndex =
+            value?.medias?.findIndex((media) => media.id === selectedId) || 0;
+          const nextIndex = currentMediaIndex + 1;
+          setSelectedId(value?.medias?.[nextIndex]?.id || "");
+        }
+      }
+    }, [selectedIndex, totalItems, value, selectedId]);
+
+    const handleKeyDown = useCallback(
+      (e: KeyboardEvent) => {
+        if (e.key === "ArrowLeft") {
+          handlePrevious();
+        } else if (e.key === "ArrowRight") {
+          handleNext();
+        }
+      },
+      [handleNext, handlePrevious]
+    );
+
+    useEffect(() => {
+      window.addEventListener("keydown", handleKeyDown);
+      return () => window.removeEventListener("keydown", handleKeyDown);
+    }, [handleKeyDown]);
+
+    const canPrevious = selectedIndex > 0;
+    const canNext = selectedIndex < totalItems - 1;
+
+    return (
+      <div ref={ref} className={clsx("flex flex-col", className)} {...rest}>
+        {children}
+        {/* Main display area */}
+        <div className={clsx("relative group")}>
+          {canPrevious && (
+            <button
+              onClick={handlePrevious}
+              className="absolute left-4 top-1/2 transform -translate-y-1/2 z-10 bg-black/50 hover:bg-black/70 text-white rounded-full p-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200"
+              aria-label="Previous slide"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                className="h-6 w-6"
+                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>
+          )}
+          {canNext && (
+            <button
+              onClick={handleNext}
+              className="absolute right-4 top-1/2 transform -translate-y-1/2 z-10 bg-black/50 hover:bg-black/70 text-white rounded-full p-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200"
+              aria-label="Next slide"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                className="h-6 w-6"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M9 5l7 7-7 7"
+                />
+              </svg>
+            </button>
+          )}
+          {value?.externalVideoUrl && selectedId === "video" && (
+            <div className={clsx("w-full rounded-md overflow-hidden", aspect)}>
+              <iframe
+                src={videoUrl}
+                className="w-full h-full"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share; autoplay"
+                referrerPolicy="strict-origin-when-cross-origin"
+                allowFullScreen
+              />
+            </div>
+          )}
+          {value?.medias?.map((media) => (
+            <div
+              key={media.id}
+              className={clsx(
+                "transition-opacity duration-300 overflow-hidden rounded-md",
+                media.id === selectedId ? "opacity-100" : "opacity-0 hidden",
+                aspect
+              )}
+            >
+              <img
+                src={media?.resize || media?.url}
+                alt={media?.alt}
+                className="w-full h-full object-cover object-center"
+              />
+            </div>
+          ))}
+        </div>
+
+        {/* Thumbnail navigation */}
+        <div className="relative mt-4">
+          <div className="flex items-stretch gap-2">
+            {totalItems > 6 && (
+              <button
+                onClick={handlePrevious}
+                disabled={!canPrevious}
+                className={clsx(
+                  "flex items-center justify-center w-6",
+                  "transition-colors duration-200 rounded-l-md",
+                  !canPrevious
+                    ? "bg-gray-100 text-gray-400 cursor-not-allowed"
+                    : "bg-gray-200 hover:bg-gray-300 text-gray-700"
+                )}
+                aria-label="Previous"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="h-4 w-4 md:h-5 md:w-5"
+                  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="flex-1">
+              <div className="grid grid-cols-6 gap-2">
+                {value?.externalVideoUrl && startIndex === 0 && (
+                  <div
+                    className={clsx(
+                      "relative cursor-pointer overflow-hidden rounded-sm border-2",
+                      aspect,
+                      selectedId === "video"
+                        ? "border-primary-500"
+                        : "border-transparent hover:border-primary-300"
+                    )}
+                    onClick={() => setSelectedId("video")}
+                  >
+                    <img
+                      src={thumbnailUrl}
+                      alt="Video thumbnail"
+                      className="w-full h-full object-cover"
+                    />
+                    <div className="absolute inset-0 flex items-center justify-center bg-black/30">
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        className="h-8 w-8 text-white"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          fill="currentColor"
+                          fill-rule="evenodd"
+                          d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12s4.477 10 10 10"
+                          clipRule="evenodd"
+                          opacity="0.5"
+                        />
+                        <path
+                          fill="currentColor"
+                          d="m15.414 13.059l-4.72 2.787C9.934 16.294 9 15.71 9 14.786V9.214c0-.924.934-1.507 1.694-1.059l4.72 2.787c.781.462.781 1.656 0 2.118"
+                        />
+                      </svg>
+                    </div>
+                  </div>
+                )}
+                {value?.medias?.map((media, index) => {
+                  const adjustedIndex = value?.externalVideoUrl
+                    ? index + 1
+                    : index;
+                  return adjustedIndex >= startIndex &&
+                    adjustedIndex < endIndex ? (
+                    <div
+                      key={media.id}
+                      className={clsx(
+                        "relative cursor-pointer overflow-hidden rounded-sm border-2",
+                        aspect,
+                        selectedId === media.id
+                          ? "border-primary-500"
+                          : "border-transparent hover:border-primary-300"
+                      )}
+                      onClick={() => setSelectedId(media.id)}
+                    >
+                      <img
+                        src={media?.resize || media?.url}
+                        alt={media?.alt}
+                        className="w-full h-full object-cover"
+                      />
+                    </div>
+                  ) : null;
+                })}
+              </div>
+            </div>
+            {totalItems > 6 && (
+              <button
+                onClick={handleNext}
+                disabled={!canNext}
+                className={clsx(
+                  "flex items-center justify-center w-6",
+                  "transition-colors duration-200 rounded-r-md",
+                  !canNext
+                    ? "bg-gray-100 text-gray-400 cursor-not-allowed"
+                    : "bg-gray-200 hover:bg-gray-300 text-gray-700"
+                )}
+                aria-label="Next"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="h-4 w-4 md:h-5 md:w-5"
+                  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>
+      </div>
+    );
+  }
+);