@rxdrag/website-lib-core 0.0.75 → 0.0.77

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rxdrag/website-lib-core",
-  "version": "0.0.75",
+  "version": "0.0.77",
   "type": "module",
   "exports": {
     ".": "./index.ts"
@@ -24,9 +24,9 @@
     "@types/react-dom": "^19.1.0",
     "eslint": "^7.32.0",
     "typescript": "^5",
-    "@rxdrag/eslint-config-custom": "0.2.12",
     "@rxdrag/tsconfig": "0.2.0",
-    "@rxdrag/slate-preview": "1.2.60"
+    "@rxdrag/slate-preview": "1.2.61",
+    "@rxdrag/eslint-config-custom": "0.2.12"
   },
   "dependencies": {
     "@iconify/utils": "^3.0.2",
@@ -36,8 +36,8 @@
     "lodash-es": "^4.17.21",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "@rxdrag/entify-lib": "0.0.22",
-    "@rxdrag/rxcms-models": "0.3.93"
+    "@rxdrag/entify-lib": "0.0.23",
+    "@rxdrag/rxcms-models": "0.3.94"
   },
   "peerDependencies": {
     "astro": "^4.0.0 || ^5.0.0"

package/src/entify/Entify.ts

@@ -125,7 +125,7 @@ export class Entify implements IEntify {
     addonFields?: (keyof Product)[]
   ) {
     if (!imageSize) {
-      imageSize = this.imageSizes.productThumbnial;
+      imageSize = this.imageSizes?.productThumbnial;
     }
     return await queryFeaturedProducts(
       count,
@@ -137,7 +137,7 @@ export class Entify implements IEntify {
 
   public async getLatestPosts(count?: number, coverSize?: ImageSize) {
     if (!coverSize) {
-      coverSize = this.imageSizes.postThumbnial;
+      coverSize = this.imageSizes?.postThumbnial;
     }
     return await queryLatestPosts(count, coverSize, this.envVariables);
   }

package/src/entify/lib/newQueryProductOptions.ts

@@ -14,7 +14,7 @@ import {
 import { newPageMetaOptions } from "./newPageMetaOptions";
 
 function creatProductMediaOptions(imagSize?: ImageSize) {
-  const imageFields = ["thumbnail(width:400, height:320)", "url"];
+  const imageFields = ["thumbnail(width:400, height:320)", "url", "original"];
   if (imagSize?.width && imagSize?.height) {
     imageFields.push(
       `resize(width:${imagSize.width}, height:${imagSize.height})`
@@ -36,7 +36,7 @@ function creatProductMediaOptions(imagSize?: ImageSize) {
         },
       ],
     }
-  ).media(new MediaQueryOptions().description().file(imageFields));
+  ).media(new MediaQueryOptions().mediaType().description().file(imageFields));
 }
 
 export function newQueryProductOptions(imagSize?: ImageSize) {
@@ -70,6 +70,7 @@ export function newQueryProductOptions(imagSize?: ImageSize) {
           MediaFields.description,
           MediaFields.name,
           MediaFields.extName,
+          MediaFields.mediaType,
         ]).file(["url"])
       )
     )

package/src/entify/view-model/funcs.ts

@@ -9,7 +9,7 @@ import {
   WebsiteSettings,
 } from "@rxdrag/rxcms-models";
 import {
-  TMedias,
+  TMedia,
   TPost,
   TPostCategory,
   TProduct,
@@ -20,20 +20,17 @@ import {
 import { ListResult } from "@rxdrag/entify-lib";
 
 
-export function mediasToViewModel(product?: Product): TMedias | undefined {
+export function mediasToViewModel(product?: Product): TMedia[] | undefined {
   if (!product) {
     return undefined;
   }
-  return {
-    externalVideoUrl: product?.externalVideoUrl,
-    medias: product?.mediaPivots?.map((mediaOnProduct) => {
-      return {
-        alt: mediaOnProduct.altText,
-        seqValue: mediaOnProduct.seqValue,
-        ...mediaOnProduct.media!,
-      };
-    }),
-  };
+  return product?.mediaPivots?.map((mediaOnProduct) => {
+    return {
+      alt: mediaOnProduct.altText,
+      seqValue: mediaOnProduct.seqValue,
+      ...mediaOnProduct.media!,
+    };
+  });
 }
 
 export function attachmentsToViewModel(
@@ -99,7 +96,7 @@ export function productToViewModel(product?: Product): TProduct | undefined {
     meta: product?.meta,
     category:
       product?.category && productCategoryToViewModel(product?.category),
-    cover: medias?.medias?.[0],
+    cover: medias?.[0],
     medias: medias,
     attachments:
       product?.attachmentPivots &&

package/src/entify/view-model/models.ts

@@ -4,11 +4,6 @@ export type TMedia = Media & {
   alt?: string;
 }
 
-export type TMedias = {
-  externalVideoUrl?: string;
-  medias?: TMedia[];
-};
-
 export type TProductCategory = {
   id?: string | null;
   slug?: string;
@@ -27,7 +22,7 @@ export type TProduct = {
   shortTitle?: string;
   description?: string;
   features?: string;
-  medias?: TMedias;
+  medias?: TMedia[];
   //从头medias中获取第一个不是视频的图片
   cover?: Media;
   content?: string;

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

@@ -0,0 +1,237 @@
+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
+        );
+      }, 200);
+    },
+    [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 });
+  }, []);
+
+  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}
+    >
+      {/* 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

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

package/src/react/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/react/components/Medias/index.tsx

@@ -1,18 +1,27 @@
 import clsx from "clsx";
 import { forwardRef, useEffect, useState, useCallback } from "react";
-import { TMedias } from "../../../entify";
+import { TMedia } from "../../../entify";
+import { MainMedia } from "./MainMedia";
+import { Thumbnail } from "./Thumbnail";
 
 export type MediasProps = {
-  value?: TMedias;
+  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;
   };
 };
 
@@ -22,109 +31,56 @@ export const Medias = forwardRef<HTMLDivElement, MediasProps>((props, ref) => {
     className,
     children,
     aspect = "aspect-[1/1]",
-    thumbnailAspect = "aspect-[5/4]",
+    thumbnailAspect = "aspect-[1/1]",
+    enableZoom = true,
+    thumbnailPosition = "bottom",
+    visibleCount = 6,
     classNames,
     ...rest
   } = props;
-  const { mainArea, navigation, thumbnail } = classNames || {};
+  const {
+    mainArea,
+    navigation,
+    thumbnail,
+    thumbnailImage,
+    arrowButton,
+    arrowIcon,
+    playButton,
+  } = classNames || {};
   const [selectedId, setSelectedId] = useState<string | undefined | null>(
-    value?.externalVideoUrl ? "video" : value?.medias?.[0]?.id || ""
+    value?.[0]?.id || ""
   );
-  const [videoUrl, setVideoUrl] = useState<string>("");
-  const [thumbnailUrl, setThumbnailUrl] = useState<string>("");
 
   useEffect(() => {
-    setSelectedId(
-      value?.externalVideoUrl ? "video" : value?.medias?.[0]?.id || ""
-    );
+    setSelectedId(value?.[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}/default.jpg`);
-      }
-    }
-  }, [value?.externalVideoUrl]);
+  const selectedIndex =
+    value?.findIndex((media) => media.id === selectedId) || 0;
 
-  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 totalItems = value?.length || 0;
 
   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 || "");
-      }
+      const prevIndex = selectedIndex - 1;
+      setSelectedId(value?.[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 || "");
-      }
+      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") {
+      if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
         handlePrevious();
-      } else if (e.key === "ArrowRight") {
+      } else if (e.key === "ArrowRight" || e.key === "ArrowDown") {
         handleNext();
       }
     },
@@ -139,214 +95,179 @@ export const Medias = forwardRef<HTMLDivElement, MediasProps>((props, ref) => {
   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 flex-col", className)} {...rest}>
+    <div
+      ref={ref}
+      className={clsx(
+        "flex gap-4",
+        isVerticalThumbs ? "flex-row-reverse" : "flex-col",
+        className
+      )}
+      {...rest}
+    >
       {children}
       {/* Main display area */}
-      <div className={clsx("relative group", mainArea)}>
-        {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?.file?.resize || media?.file?.url}
-              alt={media?.alt}
-              className="w-full h-full object-cover object-center"
-            />
-          </div>
-        ))}
-      </div>
+      <MainMedia
+        value={value}
+        selectedId={selectedId}
+        aspect={aspect}
+        enableZoom={enableZoom}
+        className={clsx(isVerticalThumbs ? "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 mt-4", navigation)}>
-          <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",
-                  thumbnail
-                )}
-                aria-label="Previous"
+        <div
+          className={clsx(
+            "relative group/thumbs",
+            isVerticalThumbs ? "w-24 h-full 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
+                  ? "top-2 left-1/2 -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", arrowIcon)}
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
               >
-                <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"
-                >
+                {isVerticalThumbs ? (
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M5 15l7-7 7 7"
+                  />
+                ) : (
                   <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",
-                      thumbnailAspect,
-                      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",
-                        thumbnailAspect,
-                        selectedId === media.id
-                          ? "border-primary-500"
-                          : "border-transparent hover:border-primary-300"
-                      )}
-                      onClick={() => setSelectedId(media.id)}
-                    >
-                      <img
-                        src={media?.file?.resize || media?.file?.url}
-                        alt={media?.alt}
-                        className="w-full h-full object-cover"
-                      />
-                    </div>
-                  ) : null;
-                })}
-              </div>
+              </svg>
+            </button>
+          )}
+
+          <div
+            className={clsx(
+              "flex-1",
+              isVerticalThumbs ? "h-full py-0.5" : "w-full px-0.5"
+            )}
+          >
+            <div
+              className={clsx(
+                "gap-3",
+                isVerticalThumbs ? "flex flex-col" : "grid"
+              )}
+              style={
+                !isVerticalThumbs
+                  ? {
+                      gridTemplateColumns: `repeat(${actualVisibleCount}, minmax(0, 1fr))`,
+                    }
+                  : undefined
+              }
+            >
+              {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>
-            {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"
+          </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
+                  ? "bottom-2 left-1/2 -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", arrowIcon)}
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
               >
-                <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"
-                >
+                {isVerticalThumbs ? (
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M19 9l-7 7-7-7"
+                  />
+                ) : (
                   <path
                     strokeLinecap="round"
                     strokeLinejoin="round"
                     strokeWidth={2}
                     d="M9 5l7 7-7 7"
                   />
-                </svg>
-              </button>
-            )}
-          </div>
+                )}
+              </svg>
+            </button>
+          )}
         </div>
       )}
     </div>