pixelize-design-library 2.4.2-beta.56 → 2.4.2-beta.57

package/dist/esm/Components/ProductDetails/ProductImageSlider.js

@@ -1,204 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Badge, Box, Flex, IconButton, Image, AspectRatio, VStack, HStack, useBreakpointValue, } from "@chakra-ui/react";
-import React, { useState } from "react";
-import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Play, } from "lucide-react";
-import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
-import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
-import { overlayScrim } from "../../Theme/tokens/builders/scrim.js";
-export default function ProductImageSlider({ images, thumbHeight = 60, imageSize = 480, thumbnailsToShow = 6, batch, productName = "Product", }) {
-    const [activeIndex, setActiveIndex] = useState(0);
-    const [thumbStartIndex, setThumbStartIndex] = useState(0);
-    const [transformOrigin, setTransformOrigin] = useState("center center");
-    const [isHovered, setIsHovered] = useState(false);
-    const [isPlaying, setIsPlaying] = useState(false);
-    const theme = useCustomTheme();
-    const isMobile = useBreakpointValue({ base: true, md: false });
-    // Opaque enough that white ink clears 4.5:1/3:1 against it on any photo, not just this one.
-    const controlScrim = overlayScrim(theme.colors);
-    const getYouTubeId = (url) => {
-        const patterns = [
-            /youtu\.be\/([A-Za-z0-9_-]{6,})/i,
-            /youtube\.com\/watch\?[^#]*v=([A-Za-z0-9_-]{6,})/i,
-            /youtube\.com\/embed\/([A-Za-z0-9_-]{6,})/i,
-            /youtube\.com\/shorts\/([A-Za-z0-9_-]{6,})/i,
-            /youtube\.com\/live\/([A-Za-z0-9_-]{6,})/i,
-        ];
-        for (const re of patterns) {
-            const m = url.match(re);
-            if (m === null || m === void 0 ? void 0 : m[1])
-                return m[1];
-        }
-        return undefined;
-    };
-    const getVimeoId = (url) => {
-        const patterns = [
-            /vimeo\.com\/(\d+)/i,
-            /player\.vimeo\.com\/video\/(\d+)/i,
-        ];
-        for (const re of patterns) {
-            const m = url.match(re);
-            if (m === null || m === void 0 ? void 0 : m[1])
-                return m[1];
-        }
-        return undefined;
-    };
-    const getDailymotionId = (url) => {
-        const patterns = [
-            /dailymotion\.com\/video\/([A-Za-z0-9]+)/i,
-            /dai\.ly\/([A-Za-z0-9]+)/i,
-        ];
-        for (const re of patterns) {
-            const m = url.match(re);
-            if (m === null || m === void 0 ? void 0 : m[1])
-                return m[1];
-        }
-        return undefined;
-    };
-    const isVideoUrl = (url) => /\.(mp4|webm|ogg)(\?|#|$)/i.test(url) ||
-        !!(getYouTubeId(url) || getVimeoId(url) || getDailymotionId(url));
-    const getThumbForItem = (url) => {
-        const yt = getYouTubeId(url);
-        if (yt)
-            return `https://img.youtube.com/vi/${yt}/hqdefault.jpg`;
-        const vm = getVimeoId(url);
-        if (vm)
-            return `https://vumbnail.com/${vm}.jpg`;
-        const dm = getDailymotionId(url);
-        if (dm)
-            return `https://www.dailymotion.com/thumbnail/video/${dm}`;
-        return undefined;
-    };
-    React.useEffect(() => {
-        setIsPlaying(false);
-    }, [activeIndex]);
-    const totalThumbs = (images === null || images === void 0 ? void 0 : images.length) || 0;
-    const hasMultiple = totalThumbs > 1;
-    const altFor = (index) => `${productName}, image ${index + 1} of ${totalThumbs}`;
-    const visibleThumbnails = images === null || images === void 0 ? void 0 : images.slice(thumbStartIndex, thumbStartIndex + thumbnailsToShow);
-    const canScrollUp = thumbStartIndex > 0;
-    const canScrollDown = thumbStartIndex + thumbnailsToShow < totalThumbs;
-    const handleThumbScroll = (direction) => {
-        if (direction === "up" && canScrollUp) {
-            setThumbStartIndex((prev) => {
-                const newStart = Math.max(prev - 1, 0);
-                setActiveIndex(newStart);
-                return newStart;
-            });
-        }
-        else if (direction === "down" && canScrollDown) {
-            setThumbStartIndex((prev) => {
-                const newStart = Math.min(prev + 1, totalThumbs - thumbnailsToShow);
-                setActiveIndex(newStart);
-                return newStart;
-            });
-        }
-    };
-    const updateActiveIndex = (newIndex) => {
-        setActiveIndex(newIndex);
-        // Scroll thumbnails window if active index is outside the current visible range
-        if (newIndex < thumbStartIndex) {
-            setThumbStartIndex(newIndex);
-        }
-        else if (newIndex >= thumbStartIndex + thumbnailsToShow) {
-            setThumbStartIndex(newIndex - thumbnailsToShow + 1);
-        }
-    };
-    return (_jsx(Flex, { maxW: "6xl", mx: "auto", gap: 4, direction: isMobile ? "column" : "row", children: isMobile ? (_jsxs(_Fragment, { children: [_jsxs(Box, { w: "full", 
-                    // h={`${imageSize}px`}
-                    position: "relative", overflow: "hidden", borderRadius: "lg", boxShadow: "md", onMouseMove: (e) => {
-                        if (isMobile)
-                            return;
-                        const bounds = e.currentTarget.getBoundingClientRect();
-                        const x = ((e.clientX - bounds.left) / bounds.width) * 100;
-                        const y = ((e.clientY - bounds.top) / bounds.height) * 100;
-                        setTransformOrigin(`${x}% ${y}%`);
-                    }, onMouseEnter: () => !isMobile && setIsHovered(true), onMouseLeave: () => {
-                        setIsHovered(false);
-                        setTransformOrigin("center center");
-                    }, children: [_jsx(Box, { position: "absolute", top: "2", left: "2", zIndex: "1", children: _jsx(Badge, { colorScheme: batch === null || batch === void 0 ? void 0 : batch.color, variant: "solid", children: batch === null || batch === void 0 ? void 0 : batch.label }) }), (() => {
-                            const item = images === null || images === void 0 ? void 0 : images[activeIndex];
-                            const url = (item === null || item === void 0 ? void 0 : item.imageUrl) || "";
-                            const isVideo = (item === null || item === void 0 ? void 0 : item.isImage) !== undefined ? item.isImage === false : isVideoUrl(url);
-                            const yt = getYouTubeId(url);
-                            const vimeo = getVimeoId(url);
-                            const dm = getDailymotionId(url);
-                            const thumb = (item === null || item === void 0 ? void 0 : item.thumb) || getThumbForItem(url);
-                            if (isVideo) {
-                                if (!isPlaying) {
-                                    return (_jsxs(Box, { position: "relative", w: "100%", h: `${imageSize}px`, children: [_jsx(Image, { src: thumb || url, alt: "Video thumbnail", w: "100%", h: "100%", objectFit: "cover" }), _jsx(Flex, { position: "absolute", inset: 0, align: "center", justify: "center", children: _jsx(Box, { bg: theme.colors.background[50], borderRadius: "full", boxShadow: "lg", p: 3, cursor: "pointer", role: "button", tabIndex: 0, "aria-label": "Play video", onClick: () => setIsPlaying(true), onKeyDown: (e) => {
-                                                        if (e.key === "Enter" || e.key === " ") {
-                                                            e.preventDefault();
-                                                            setIsPlaying(true);
-                                                        }
-                                                    }, children: _jsx(Play, { size: 24, color: accentTextOnCanvas(theme.colors.primary, theme.colors.background[50]) }) }) })] }));
-                                }
-                                return yt ? (_jsx(AspectRatio, { ratio: 16 / 9, w: "100%", children: _jsx(Box, { as: "iframe", src: `https://www.youtube.com/embed/${yt}?rel=0&autoplay=1`, allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true, border: "0" }) })) : vimeo ? (_jsx(AspectRatio, { ratio: 16 / 9, w: "100%", children: _jsx(Box, { as: "iframe", src: `https://player.vimeo.com/video/${vimeo}?autoplay=1`, allow: "autoplay; fullscreen; picture-in-picture", allowFullScreen: true, border: "0" }) })) : dm ? (_jsx(AspectRatio, { ratio: 16 / 9, w: "100%", children: _jsx(Box, { as: "iframe", src: `https://www.dailymotion.com/embed/video/${dm}?autoplay=1`, allow: "autoplay; fullscreen; picture-in-picture", allowFullScreen: true, border: "0" }) })) : (_jsx(Box, { as: "video", src: url, w: "100%", h: `${imageSize}px`, controls: true, autoPlay: true, sx: { objectFit: "contain", backgroundColor: "black" } }));
-                            }
-                            return (_jsx(Image, { src: url, alt: altFor(activeIndex), w: "100%", h: "100%", objectFit: "cover", transformOrigin: transformOrigin, transform: !isMobile && isHovered ? "scale(1.6)" : "scale(1)", transition: "transform 0.3s ease" }));
-                        })(), hasMultiple && (_jsxs(_Fragment, { children: [_jsx(IconButton, { icon: _jsx(ChevronLeft, { size: 20, color: theme.colors.white }), "aria-label": "Previous", onClick: () => {
-                                        var _a;
-                                        const max = ((_a = images === null || images === void 0 ? void 0 : images.length) !== null && _a !== void 0 ? _a : 1);
-                                        const newIndex = activeIndex === 0 ? max - 1 : activeIndex - 1;
-                                        updateActiveIndex(newIndex);
-                                    }, position: "absolute", left: "2", top: "50%", transform: "translateY(-50%)", variant: "solid", isRound: true, bg: controlScrim, _hover: { transform: "translateY(-50%) scale(1.08)", bg: controlScrim }, _active: { bg: controlScrim } }), _jsx(IconButton, { icon: _jsx(ChevronRight, { size: 20, color: theme.colors.white }), "aria-label": "Next", onClick: () => {
-                                        var _a;
-                                        const max = ((_a = images === null || images === void 0 ? void 0 : images.length) !== null && _a !== void 0 ? _a : 1);
-                                        const newIndex = activeIndex === max - 1 ? 0 : activeIndex + 1;
-                                        updateActiveIndex(newIndex);
-                                    }, position: "absolute", right: "2", top: "50%", transform: "translateY(-50%)", variant: "solid", isRound: true, bg: controlScrim, _hover: { transform: "translateY(-50%) scale(1.08)", bg: controlScrim }, _active: { bg: controlScrim } })] }))] }), hasMultiple && (_jsxs(HStack, { spacing: 2, align: "center", justify: "center", children: [_jsx(IconButton, { icon: _jsx(ChevronLeft, { size: 16, color: theme.colors.textMuted }), "aria-label": "Scroll Left", onClick: () => handleThumbScroll("up"), isDisabled: !canScrollUp, variant: "ghost", size: "sm" }), visibleThumbnails === null || visibleThumbnails === void 0 ? void 0 : visibleThumbnails.map((src, index) => {
-                            const actualIndex = thumbStartIndex + index;
-                            const url = src.imageUrl;
-                            const isVideo = src.isImage !== undefined ? src.isImage === false : isVideoUrl(url);
-                            const thumb = src.thumb || getThumbForItem(url);
-                            return (_jsx(Box, { w: `${thumbHeight}px`, h: `${thumbHeight}px`, borderRadius: "lg", overflow: "hidden", cursor: "pointer", border: actualIndex === activeIndex
-                                    ? `0.063rem solid ${theme.colors.primary[500]}`
-                                    : "0.125rem solid transparent", opacity: actualIndex === activeIndex ? 1 : 0.5, onClick: () => setActiveIndex(actualIndex), _hover: { opacity: 1 }, transition: transitionFor(["background-color", "transform"], "base"), position: "relative", children: isVideo ? (thumb ? (_jsxs(_Fragment, { children: [_jsx(Image, { src: thumb, alt: "Video thumbnail", w: "100%", h: "100%", objectFit: "cover" }), _jsx(Flex, { position: "absolute", inset: 0, align: "center", justify: "center", pointerEvents: "none", children: _jsx(Box, { bg: theme.colors.background[50], borderRadius: "full", boxShadow: "md", p: 1.5, children: _jsx(Play, { size: 14, color: accentTextOnCanvas(theme.colors.primary, theme.colors.background[50]) }) }) })] })) : (_jsx(Flex, { w: "100%", h: "100%", align: "center", justify: "center", bg: theme.colors.backgroundColor.subtle, children: _jsx(Box, { bg: theme.colors.background[50], borderRadius: "full", boxShadow: "md", p: 1.5, children: _jsx(Play, { size: 14, color: accentTextOnCanvas(theme.colors.primary, theme.colors.background[50]) }) }) }))) : (_jsx(Image, { src: url, alt: altFor(actualIndex), w: "100%", h: "100%", objectFit: "cover" })) }, actualIndex));
-                        }), _jsx(IconButton, { icon: _jsx(ChevronRight, { size: 16, color: theme.colors.textMuted }), "aria-label": "Scroll Right", onClick: () => handleThumbScroll("down"), isDisabled: !canScrollDown, variant: "ghost", size: "sm" })] }))] })) : (_jsxs(_Fragment, { children: [hasMultiple && (_jsxs(Box, { w: `${thumbHeight}px`, h: `${thumbHeight * thumbnailsToShow}px`, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "space-between", borderRadius: "lg", overflow: "hidden", children: [_jsx(IconButton, { icon: _jsx(ChevronUp, { size: 16, color: theme.colors.textMuted }), "aria-label": "Scroll Up", onClick: () => handleThumbScroll("up"), isDisabled: !canScrollUp, variant: "ghost", size: "sm", m: 1 }), _jsx(VStack, { spacing: 2, flex: "1", overflow: "hidden", children: visibleThumbnails === null || visibleThumbnails === void 0 ? void 0 : visibleThumbnails.map((src, index) => {
-                                const actualIndex = thumbStartIndex + index;
-                                const url = src.imageUrl;
-                                const isVideo = src.isImage !== undefined ? src.isImage === false : isVideoUrl(url);
-                                const thumb = src.thumb || getThumbForItem(url);
-                                return (_jsx(Box, { w: `${thumbHeight}px`, h: `${thumbHeight}px`, borderRadius: "lg", overflow: "hidden", cursor: "pointer", border: actualIndex === activeIndex
-                                        ? `0.063rem solid ${theme.colors.primary[500]}`
-                                        : "0.125rem solid transparent", opacity: actualIndex === activeIndex ? 1 : 0.5, onClick: () => setActiveIndex(actualIndex), _hover: { opacity: 1 }, transition: transitionFor(["background-color", "transform"], "base"), position: "relative", children: isVideo ? (thumb ? (_jsxs(_Fragment, { children: [_jsx(Image, { src: thumb, w: "100%", h: "100%", objectFit: "cover", alt: "Video thumbnail" }), _jsx(Flex, { position: "absolute", inset: 0, align: "center", justify: "center", pointerEvents: "none", children: _jsx(Box, { bg: theme.colors.background[50], borderRadius: "full", boxShadow: "md", p: 1.5, children: _jsx(Play, { size: 14, color: accentTextOnCanvas(theme.colors.primary, theme.colors.background[50]) }) }) })] })) : (_jsx(Flex, { w: "100%", h: "100%", align: "center", justify: "center", bg: theme.colors.backgroundColor.subtle, children: _jsx(Box, { bg: theme.colors.background[50], borderRadius: "full", boxShadow: "md", p: 1.5, children: _jsx(Play, { size: 14, color: accentTextOnCanvas(theme.colors.primary, theme.colors.background[50]) }) }) }))) : (_jsx(Image, { src: url, w: "100%", h: "100%", objectFit: "cover", alt: altFor(actualIndex) })) }, actualIndex));
-                            }) }), _jsx(IconButton, { icon: _jsx(ChevronDown, { size: 16, color: theme.colors.textMuted }), "aria-label": "Scroll Down", onClick: () => handleThumbScroll("down"), isDisabled: !canScrollDown, variant: "ghost", size: "sm", m: 1 })] })), _jsxs(Box, { w: `${imageSize}px`, h: `${imageSize}px`, position: "relative", overflow: "hidden", borderRadius: "lg", boxShadow: "md", onMouseMove: (e) => {
-                        const bounds = e.currentTarget.getBoundingClientRect();
-                        const x = ((e.clientX - bounds.left) / bounds.width) * 100;
-                        const y = ((e.clientY - bounds.top) / bounds.height) * 100;
-                        setTransformOrigin(`${x}% ${y}%`);
-                    }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => {
-                        setIsHovered(false);
-                        setTransformOrigin("center center");
-                    }, children: [_jsx(Box, { position: "absolute", top: "2", left: "2", zIndex: "1", children: _jsx(Badge, { colorScheme: batch === null || batch === void 0 ? void 0 : batch.color, variant: "solid", children: batch === null || batch === void 0 ? void 0 : batch.label }) }), (() => {
-                            const item = images === null || images === void 0 ? void 0 : images[activeIndex];
-                            const url = (item === null || item === void 0 ? void 0 : item.imageUrl) || "";
-                            const isVideo = (item === null || item === void 0 ? void 0 : item.isImage) !== undefined ? item.isImage === false : isVideoUrl(url);
-                            const yt = getYouTubeId(url);
-                            const vimeo = getVimeoId(url);
-                            const dm = getDailymotionId(url);
-                            const thumb = (item === null || item === void 0 ? void 0 : item.thumb) || getThumbForItem(url);
-                            if (isVideo) {
-                                if (!isPlaying) {
-                                    return (_jsxs(Box, { position: "relative", w: "100%", h: `${imageSize}px`, children: [_jsx(Image, { src: thumb || url, alt: "Video thumbnail", w: "100%", h: "100%", objectFit: "cover" }), _jsx(Flex, { position: "absolute", inset: 0, align: "center", justify: "center", children: _jsx(Box, { bg: theme.colors.background[50], borderRadius: "full", boxShadow: "lg", p: 3, cursor: "pointer", role: "button", tabIndex: 0, "aria-label": "Play video", onClick: () => setIsPlaying(true), onKeyDown: (e) => {
-                                                        if (e.key === "Enter" || e.key === " ") {
-                                                            e.preventDefault();
-                                                            setIsPlaying(true);
-                                                        }
-                                                    }, children: _jsx(Play, { size: 24, color: accentTextOnCanvas(theme.colors.primary, theme.colors.background[50]) }) }) })] }));
-                                }
-                                return yt ? (_jsx(AspectRatio, { ratio: 16 / 9, w: "100%", children: _jsx(Box, { as: "iframe", src: `https://www.youtube.com/embed/${yt}?rel=0&autoplay=1`, allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true, border: "0" }) })) : vimeo ? (_jsx(AspectRatio, { ratio: 16 / 9, w: "100%", children: _jsx(Box, { as: "iframe", src: `https://player.vimeo.com/video/${vimeo}?autoplay=1`, allow: "autoplay; fullscreen; picture-in-picture", allowFullScreen: true, border: "0" }) })) : dm ? (_jsx(AspectRatio, { ratio: 16 / 9, w: "100%", children: _jsx(Box, { as: "iframe", src: `https://www.dailymotion.com/embed/video/${dm}?autoplay=1`, allow: "autoplay; fullscreen; picture-in-picture", allowFullScreen: true, border: "0" }) })) : (_jsx(Box, { as: "video", src: url, w: "100%", h: `${imageSize}px`, controls: true, autoPlay: true, sx: { objectFit: "contain", backgroundColor: "black" } }));
-                            }
-                            return (_jsx(Image, { src: url, alt: altFor(activeIndex), w: "100%", h: "100%", objectFit: "cover", transformOrigin: transformOrigin, transform: isHovered ? "scale(1.6)" : "scale(1)", transition: "transform 0.3s ease", cursor: isHovered ? "zoom-in" : "default" }));
-                        })(), hasMultiple && (_jsxs(_Fragment, { children: [_jsx(IconButton, { icon: _jsx(ChevronLeft, { size: 20, color: theme.colors.white }), "aria-label": "Previous", onClick: () => {
-                                        var _a;
-                                        const max = ((_a = images === null || images === void 0 ? void 0 : images.length) !== null && _a !== void 0 ? _a : 1);
-                                        const newIndex = activeIndex === 0 ? max - 1 : activeIndex - 1;
-                                        updateActiveIndex(newIndex);
-                                    }, position: "absolute", left: "2", top: "50%", transform: "translateY(-50%)", variant: "solid", isRound: true, bg: controlScrim, _hover: { transform: "translateY(-50%) scale(1.08)", bg: controlScrim }, _active: { bg: controlScrim } }), _jsx(IconButton, { icon: _jsx(ChevronRight, { size: 20, color: theme.colors.white }), "aria-label": "Next", onClick: () => {
-                                        var _a;
-                                        const max = ((_a = images === null || images === void 0 ? void 0 : images.length) !== null && _a !== void 0 ? _a : 1);
-                                        const newIndex = activeIndex === max - 1 ? 0 : activeIndex + 1;
-                                        updateActiveIndex(newIndex);
-                                    }, position: "absolute", right: "2", top: "50%", transform: "translateY(-50%)", variant: "solid", isRound: true, bg: controlScrim, _hover: { transform: "translateY(-50%) scale(1.08)", bg: controlScrim }, _active: { bg: controlScrim } })] }))] })] })) }));
-}