@gem-sdk/components 2.1.24 → 2.1.25

package/dist/cjs/product/components/ProductImagesV2/jsx/ProductImages.js

@@ -11,7 +11,6 @@ var GalleryOneCol = require('./layouts/GalleryOneCol.js');
 var GalleryTwoCol = require('./layouts/GalleryTwoCol.js');
 var OnlyFeatureImage = require('./layouts/OnlyFeatureImage.js');
 var ProductImagesLightBox = require('./components/ProductImagesLightBox.js');
-var productFeaturedImage = require('../common/productFeaturedImage.js');
 
 const getProductGallery = (product)=>{
     return product?.medias?.edges.map((img)=>{
@@ -82,10 +81,7 @@ const ProductImagesV2 = (productImageProps)=>{
         currentVariant?.media
     ]);
     const gallery = React.useMemo(()=>{
-        const images = getProductGallery(product)?.map((item)=>{
-            if (item) item.src = productFeaturedImage.isFeatureMedia(item.contentType) ? item?.previewImage : item.src;
-            return item;
-        });
+        const images = getProductGallery(product);
         if (!images?.length) return [
             {
                 id: product?.featuredImage?.id || 'noImageError',

package/dist/cjs/product/components/ProductImagesV2/jsx/components/ProductFeatureVideo.js

@@ -0,0 +1,34 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var Video = require('../../../../../video/components/Video.js');
+
+const ProductFeatureVideo = (props)=>{
+    const { url, aspectRatio } = props;
+    const videoType = React.useMemo(()=>{
+        if (url.includes('youtu.be')) return 'youtube';
+        if (url.includes('vimeo')) return 'vimeo';
+        return 'html5';
+    }, [
+        url
+    ]);
+    return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
+        children: /*#__PURE__*/ jsxRuntime.jsx(Video.default, {
+            setting: {
+                type: videoType,
+                html5Url: url,
+                youtubeUrl: url,
+                vimeoUrl: url,
+                preload: true,
+                controls: true,
+                aspectRatio
+            }
+        })
+    });
+};
+var ProductFeatureVideo$1 = /*#__PURE__*/ React.memo(ProductFeatureVideo);
+
+exports.default = ProductFeatureVideo$1;

package/dist/cjs/product/components/ProductImagesV2/jsx/components/ProductFeaturedImageOnly.js

@@ -8,6 +8,7 @@ var React = require('react');
 var NextImage = require('../../../../../image/components/NextImage.js');
 var MediaIcon = require('./MediaIcon.js');
 var productFeaturedImage = require('../../common/productFeaturedImage.js');
+var ProductFeatureVideo = require('./ProductFeatureVideo.js');
 
 const defaultImage = {
     src: 'https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif',
@@ -21,14 +22,28 @@ const ProductFeaturedImageOnly = ({ image, imageShowWhenHover, setting, aspectRa
     const product = core.useProduct();
     const currentDevice = core.useCurrentDevice();
     const storefrontUrl = core.useShopStore((state)=>state.storefrontUrl);
+    const mode = core.useEditorMode();
+    const isClickEffect = React.useMemo(()=>core.getResponsiveValueByScreen(setting.ftClickOpenLightBox, currentDevice) !== 'none', [
+        currentDevice,
+        setting.ftClickOpenLightBox
+    ]);
+    const isRenderVideo = React.useMemo(()=>mode !== 'edit' && [
+            'VIDEO',
+            'EXTERNAL_VIDEO'
+        ].includes(image?.contentType || '') && !isClickEffect, [
+        mode,
+        image?.contentType,
+        isClickEffect
+    ]);
     const renderImage = React.useMemo(()=>{
         if (!image) return defaultImage;
         return {
             ...image,
-            src: productFeaturedImage.isFeatureMedia(image?.contentType) ? image?.previewImage : image.src
+            src: isRenderVideo ? image.src : productFeaturedImage.isFeatureMedia(image?.contentType) ? image?.previewImage : image.src
         };
     }, [
-        image
+        image,
+        isRenderVideo
     ]);
     const shopifyProductLink = React.useMemo(()=>{
         if (!storefrontUrl) return `#`;
@@ -50,56 +65,71 @@ const ProductFeaturedImageOnly = ({ image, imageShowWhenHover, setting, aspectRa
         });
         return children;
     };
+    const isRenderHoverImage = React.useMemo(()=>setting?.hoverEffect !== 'none' && !productFeaturedImage.isFeatureMedia(renderImage?.contentType), [
+        renderImage?.contentType,
+        setting?.hoverEffect
+    ]);
+    const isZoomImage = React.useMemo(()=>setting?.hoverEffect == 'zoom' && setting?.zoomType == 'glasses' && !productFeaturedImage.isFeatureMedia(renderImage?.contentType), [
+        renderImage?.contentType,
+        setting?.hoverEffect,
+        setting?.zoomType
+    ]);
     return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
-        children: handleProductLink(/*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-            children: [
-                /*#__PURE__*/ jsxRuntime.jsx(NextImage.default, {
-                    draggable: "false",
-                    src: renderImage.src,
-                    width: renderImage?.width,
-                    height: renderImage?.height,
-                    alt: renderImage?.alt,
-                    setting: {
-                        aspectRatio: aspectRatio,
-                        layout: setting?.ftLayout
-                    },
-                    priority: setting?.preload,
-                    className: "featured-image-only",
-                    style: {
-                        width: '100%',
-                        height: '100%',
-                        cursor: 'pointer'
-                    }
-                }),
-                /*#__PURE__*/ jsxRuntime.jsx(MediaIcon.default, {
-                    contentType: renderImage?.contentType ?? ''
-                }),
-                setting?.hoverEffect !== 'none' && !productFeaturedImage.isFeatureMedia(renderImage?.contentType) && /*#__PURE__*/ jsxRuntime.jsx(NextImage.default, {
-                    draggable: "false",
-                    src: setting?.hoverEffect === 'other' ? imageShowWhenHover?.src : renderImage.src,
-                    width: setting?.hoverEffect === 'other' ? imageShowWhenHover?.width : renderImage.width,
-                    height: setting?.hoverEffect === 'other' ? imageShowWhenHover?.height : renderImage.height,
-                    alt: setting?.hoverEffect === 'other' ? imageShowWhenHover?.alt : renderImage.alt,
-                    setting: {
-                        layout: setting.ftLayout,
-                        aspectRatio: aspectRatio
-                    },
-                    style: {
-                        width: '100%',
-                        height: '100%'
-                    },
-                    className: core.cls('hover-image featured-image-only !gp-max-w-none', productFeaturedImage.getZoomImageClass()),
-                    priority: setting?.preload
-                }),
-                setting?.hoverEffect == 'zoom' && setting?.zoomType == 'glasses' && !productFeaturedImage.isFeatureMedia(renderImage?.contentType) && /*#__PURE__*/ jsxRuntime.jsx("div", {
-                    className: core.cls(productFeaturedImage.getZoomLenClass(), 'room-len'),
-                    style: {
-                        ...core.makeStyle({
-                            bgi: `url("${renderImage?.src}")`
-                        })
-                    }
-                })
-            ]
+        children: handleProductLink(/*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
+            children: isRenderVideo ? /*#__PURE__*/ jsxRuntime.jsx(ProductFeatureVideo.default, {
+                type: renderImage?.contentType,
+                url: renderImage.src ?? '',
+                aspectRatio: aspectRatio
+            }) : /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(NextImage.default, {
+                        draggable: "false",
+                        src: renderImage.src,
+                        width: renderImage?.width,
+                        height: renderImage?.height,
+                        alt: renderImage?.alt,
+                        setting: {
+                            aspectRatio: aspectRatio,
+                            layout: setting?.ftLayout
+                        },
+                        priority: setting?.preload,
+                        className: "featured-image-only",
+                        style: {
+                            width: '100%',
+                            height: '100%',
+                            cursor: 'pointer'
+                        }
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(MediaIcon.default, {
+                        contentType: renderImage?.contentType ?? ''
+                    }),
+                    isRenderHoverImage && /*#__PURE__*/ jsxRuntime.jsx(NextImage.default, {
+                        draggable: "false",
+                        src: setting?.hoverEffect === 'other' ? imageShowWhenHover?.src : renderImage.src,
+                        width: setting?.hoverEffect === 'other' ? imageShowWhenHover?.width : renderImage.width,
+                        height: setting?.hoverEffect === 'other' ? imageShowWhenHover?.height : renderImage.height,
+                        alt: setting?.hoverEffect === 'other' ? imageShowWhenHover?.alt : renderImage.alt,
+                        setting: {
+                            layout: setting.ftLayout,
+                            aspectRatio: aspectRatio
+                        },
+                        style: {
+                            width: '100%',
+                            height: '100%'
+                        },
+                        className: core.cls('hover-image featured-image-only !gp-max-w-none', productFeaturedImage.getZoomImageClass()),
+                        priority: setting?.preload
+                    }),
+                    isZoomImage && /*#__PURE__*/ jsxRuntime.jsx("div", {
+                        className: core.cls(productFeaturedImage.getZoomLenClass(), 'room-len'),
+                        style: {
+                            ...core.makeStyle({
+                                bgi: `url("${renderImage?.src}")`
+                            })
+                        }
+                    })
+                ]
+            })
         }))
     });
 };

package/dist/cjs/product/components/ProductImagesV2/jsx/components/ProductGalleryCarousel.js

@@ -13,6 +13,7 @@ var productGallery = require('../../common/productGallery.js');
 var ButtonOpenLightBox = require('./ButtonOpenLightBox.js');
 var MediaIcon = require('./MediaIcon.js');
 var getSrcSet = require('../../../../../image/helpers/getSrcSet.js');
+var productFeaturedImage = require('../../common/productFeaturedImage.js');
 
 const ProductGalleryCarousel = ({ builderPropUID, productImages, onHandleClick, activeIndexFormFeatureImage, onClickFeatureArrow, builderPropsClass, arrow, priorityFeatureImage, ...setting })=>{
     const currentDevice = core.useCurrentDevice();
@@ -247,6 +248,7 @@ const ProductGalleryCarousel = ({ builderPropUID, productImages, onHandleClick,
         disableMarginAuto: true,
         children: productImages?.map((image, index)=>{
             const canActive = index === moveToIdx;
+            const imageSrc = productFeaturedImage.isFeatureMedia(image.contentType) ? image.previewImage : image.src;
             return /*#__PURE__*/ jsxRuntime.jsxs(CarouselItem.default, {
                 contentType: "productImage",
                 className: core.cls(`gem-slider-item gem-slider-item-${builderPropUID} gp-gallery-image-item gp-group gp-flex gp-w-full gp-items-center gp-justify-center gp-overflow-hidden gp-outline-1 -gp-outline-offset-1 data-[border=deactive]:after:!gp-border-transparent`, {
@@ -270,7 +272,7 @@ const ProductGalleryCarousel = ({ builderPropUID, productImages, onHandleClick,
                 children: [
                     /*#__PURE__*/ jsxRuntime.jsx(NextImage.default, {
                         draggable: "false",
-                        src: image.src,
+                        src: imageSrc,
                         width: image?.width,
                         height: image?.height,
                         alt: image?.alt,

package/dist/cjs/product/components/ProductImagesV2/jsx/components/ProductGalleryGrid.js

@@ -124,6 +124,7 @@ const ProductGalleryGrid = ({ builderPropUID, productImages, onHandleClick, acti
             children: [
                 productImages?.map((image, index)=>{
                     const canActive = index === imageActiveIndex;
+                    const imageSrc = productFeaturedImage.isFeatureMedia(image.contentType) ? image.previewImage : image.src;
                     return(// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
                     /*#__PURE__*/ jsxRuntime.jsxs("div", {
                         "aria-hidden": true,
@@ -149,7 +150,7 @@ const ProductGalleryGrid = ({ builderPropUID, productImages, onHandleClick, acti
                         "data-border": canActive && !!setting?.borderActive ? 'active' : 'deactive',
                         children: [
                             /*#__PURE__*/ jsxRuntime.jsx(NextImage.default, {
-                                src: image.src,
+                                src: imageSrc,
                                 width: image?.width,
                                 height: image?.height,
                                 alt: image?.alt,
@@ -166,7 +167,7 @@ const ProductGalleryGrid = ({ builderPropUID, productImages, onHandleClick, acti
                                 contentType: image?.contentType || ''
                             }),
                             setting?.galleryHoverEffect !== 'none' && !productFeaturedImage.isFeatureMedia(image?.contentType) && /*#__PURE__*/ jsxRuntime.jsx(NextImage.default, {
-                                src: image?.src,
+                                src: imageSrc,
                                 width: image?.width,
                                 height: image?.height,
                                 alt: image?.alt,

package/dist/cjs/product/components/ProductImagesV2/jsx/components/ProductImagesLightBox.js

@@ -11,6 +11,8 @@ require('../../../../../modal/components/confirm.js');
 var Modal = require('../../../../../modal/components/Modal.js');
 var React = require('react');
 var productFeaturedImage = require('../../common/productFeaturedImage.js');
+var ProductFeatureVideo = require('./ProductFeatureVideo.js');
+var MediaIcon = require('./MediaIcon.js');
 
 const ProductImagesLightBox = ({ builderPropUID, productImages, open, imageRatio, onHandleClose })=>{
     const featuredImageGlobal = core.useFeaturedImageGlobal();
@@ -31,6 +33,11 @@ const ProductImagesLightBox = ({ builderPropUID, productImages, open, imageRatio
         mobile: false,
         tablet: false
     };
+    const mode = core.useEditorMode();
+    const isRenderVideo = (image)=>mode !== 'edit' && [
+            'VIDEO',
+            'EXTERNAL_VIDEO'
+        ].includes(image?.contentType || '');
     return /*#__PURE__*/ jsxRuntime.jsx(Modal.default, {
         setting: {
             open: open
@@ -106,17 +113,28 @@ const ProductImagesLightBox = ({ builderPropUID, productImages, open, imageRatio
             fullHeight: true,
             children: productImages?.map((image)=>/*#__PURE__*/ jsxRuntime.jsx(CarouselItem.default, {
                     className: `gem-slider-item gem-slider-item-${builderPropUID} gp-flex gp-items-center gp-justify-center gp-px-4`,
-                    children: /*#__PURE__*/ jsxRuntime.jsx(NextImage.default, {
-                        src: productFeaturedImage.isFeatureMedia(image?.contentType) ? image?.previewImage : image?.src,
-                        width: image?.width,
-                        height: image?.height,
-                        alt: image?.alt,
-                        "content-type": image?.contentType,
-                        setting: {
-                            aspectRatio: imageRatio
-                        },
-                        className: core.cls('gp-h-full gp-w-full gp-object-contain')
-                    }, image?.id)
+                    children: !isRenderVideo(image) ? /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx(NextImage.default, {
+                                src: productFeaturedImage.isFeatureMedia(image?.contentType) ? image?.previewImage : image?.src,
+                                width: image?.width,
+                                height: image?.height,
+                                alt: image?.alt,
+                                "content-type": image?.contentType,
+                                setting: {
+                                    aspectRatio: imageRatio
+                                },
+                                className: core.cls('gp-h-full gp-w-full gp-object-contain')
+                            }, image?.id),
+                            /*#__PURE__*/ jsxRuntime.jsx(MediaIcon.default, {
+                                contentType: image?.contentType ?? ''
+                            })
+                        ]
+                    }) : /*#__PURE__*/ jsxRuntime.jsx(ProductFeatureVideo.default, {
+                        type: image?.contentType,
+                        url: image.src ?? '',
+                        aspectRatio: imageRatio
+                    })
                 }, image?.id))
         })
     });

package/dist/cjs/third-party/components/ProductOptionsVariantOption.js

@@ -8,7 +8,7 @@ var ThirdPartyPreview = require('./ThirdPartyPreview.js');
 
 const AppConfig = {
     id: 'product-options-variant-option',
-    label: 'Product Options Variant Option',
+    label: 'Avis Product Options, Variants',
     logoUrl: 'https://cdn.shopify.com/app-store/listing_images/5ee1f244b087cfbec9b19c8b3f62c8f6/icon/CMCq1s7J5vQCEAE=.png',
     tag: 'ProductOptionsVariantOption'
 };
@@ -18,7 +18,7 @@ const ProductOptionsVariantOptionContent = ()=>{
             className: "gp-p-2",
             children: /*#__PURE__*/ jsxRuntime.jsx(ThirdPartyPreview.default, {
                 setting: {
-                    label: 'Product Options Variant Option',
+                    label: 'Avis Product Options, Variants',
                     iconSvg: `<img class="gp-w-6 gp-border gp-border-[#494949] gp-rounded-[3px]" src="${AppConfig.logoUrl}">`
                 }
             })

package/dist/cjs/third-party/components/ProductOptionsVariantOption.liquid.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var core = require('@gem-sdk/core');
 
 const ProductOptionsVariantOption = ({ setting, advanced })=>{
-    const { align, idTrigger } = setting ?? {};
+    const { align } = setting ?? {};
     return core.template`
     <div
       class="${advanced?.cssClass}"
@@ -13,7 +13,7 @@ const ProductOptionsVariantOption = ({ setting, advanced })=>{
         ...core.makeStyleResponsive('ta', align)
     }}"
     >
-      <div class="${idTrigger?.replace('.', '')}"></div>
+      <div class="avpoptions-container__v2"></div>
     </div>
   `;
 };

package/dist/cjs/third-party/setting/ProductOptionsVariantOption.js

@@ -28,7 +28,7 @@ const config = {
             icon: {
                 desktop: `<div class="w-full flex flex-col items-center">
         <img class="w-24 border border-dark-200 rounded-medium" src="https://cdn.shopify.com/app-store/listing_images/5ee1f244b087cfbec9b19c8b3f62c8f6/icon/CMCq1s7J5vQCEAE=.png">
-        <span class="preset-item-title">Product Options Variant Option</span>
+        <span class="preset-item-title">Avis Product Options, Variants</span>
       </div>`
             },
             components: [
@@ -107,15 +107,6 @@ const config = {
                 id: 'openApp'
             }
         },
-        {
-            type: 'control',
-            setting: {
-                id: 'idTrigger'
-            },
-            label: {
-                en: 'ID Element'
-            }
-        },
         {
             type: 'control',
             label: {

package/dist/cjs/video/components/Video.js

@@ -49,7 +49,7 @@ const Video = ({ className, setting, style, builderAttrs, builderProps, children
             case 'vimeo':
                 {
                     const videoId = common.getVimeoVideoId(vimeoUrl);
-                    if (!common.vimeoVideoRegex.test(vimeoUrl) || !videoId) return undefined;
+                    if (!videoId) return undefined;
                     return /*#__PURE__*/ jsxRuntime.jsx(LiteVimeoEmbed, {
                         muted: !mute,
                         loop: loopVideo,

package/dist/esm/product/components/ProductImagesV2/jsx/ProductImages.js

@@ -7,7 +7,6 @@ import GalleryOneCol from './layouts/GalleryOneCol.js';
 import GalleryTwoCol from './layouts/GalleryTwoCol.js';
 import OnlyFeatureImage from './layouts/OnlyFeatureImage.js';
 import ProductImagesLightBox from './components/ProductImagesLightBox.js';
-import { isFeatureMedia } from '../common/productFeaturedImage.js';
 
 const getProductGallery = (product)=>{
     return product?.medias?.edges.map((img)=>{
@@ -78,10 +77,7 @@ const ProductImagesV2 = (productImageProps)=>{
         currentVariant?.media
     ]);
     const gallery = useMemo(()=>{
-        const images = getProductGallery(product)?.map((item)=>{
-            if (item) item.src = isFeatureMedia(item.contentType) ? item?.previewImage : item.src;
-            return item;
-        });
+        const images = getProductGallery(product);
         if (!images?.length) return [
             {
                 id: product?.featuredImage?.id || 'noImageError',

package/dist/esm/product/components/ProductImagesV2/jsx/components/ProductFeatureVideo.js

@@ -0,0 +1,30 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { memo, useMemo } from 'react';
+import Video from '../../../../../video/components/Video.js';
+
+const ProductFeatureVideo = (props)=>{
+    const { url, aspectRatio } = props;
+    const videoType = useMemo(()=>{
+        if (url.includes('youtu.be')) return 'youtube';
+        if (url.includes('vimeo')) return 'vimeo';
+        return 'html5';
+    }, [
+        url
+    ]);
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: /*#__PURE__*/ jsx(Video, {
+            setting: {
+                type: videoType,
+                html5Url: url,
+                youtubeUrl: url,
+                vimeoUrl: url,
+                preload: true,
+                controls: true,
+                aspectRatio
+            }
+        })
+    });
+};
+var ProductFeatureVideo$1 = /*#__PURE__*/ memo(ProductFeatureVideo);
+
+export { ProductFeatureVideo$1 as default };

package/dist/esm/product/components/ProductImagesV2/jsx/components/ProductFeaturedImageOnly.js

@@ -1,9 +1,10 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { useProduct, useCurrentDevice, useShopStore, cls, makeStyle, getResponsiveValueByScreen } from '@gem-sdk/core';
+import { useProduct, useCurrentDevice, useShopStore, useEditorMode, getResponsiveValueByScreen, cls, makeStyle } from '@gem-sdk/core';
 import { memo, useMemo } from 'react';
 import NextImage from '../../../../../image/components/NextImage.js';
 import MediaIcon from './MediaIcon.js';
 import { isFeatureMedia, getZoomImageClass, getZoomLenClass } from '../../common/productFeaturedImage.js';
+import ProductFeatureVideo from './ProductFeatureVideo.js';
 
 const defaultImage = {
     src: 'https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif',
@@ -17,14 +18,28 @@ const ProductFeaturedImageOnly = ({ image, imageShowWhenHover, setting, aspectRa
     const product = useProduct();
     const currentDevice = useCurrentDevice();
     const storefrontUrl = useShopStore((state)=>state.storefrontUrl);
+    const mode = useEditorMode();
+    const isClickEffect = useMemo(()=>getResponsiveValueByScreen(setting.ftClickOpenLightBox, currentDevice) !== 'none', [
+        currentDevice,
+        setting.ftClickOpenLightBox
+    ]);
+    const isRenderVideo = useMemo(()=>mode !== 'edit' && [
+            'VIDEO',
+            'EXTERNAL_VIDEO'
+        ].includes(image?.contentType || '') && !isClickEffect, [
+        mode,
+        image?.contentType,
+        isClickEffect
+    ]);
     const renderImage = useMemo(()=>{
         if (!image) return defaultImage;
         return {
             ...image,
-            src: isFeatureMedia(image?.contentType) ? image?.previewImage : image.src
+            src: isRenderVideo ? image.src : isFeatureMedia(image?.contentType) ? image?.previewImage : image.src
         };
     }, [
-        image
+        image,
+        isRenderVideo
     ]);
     const shopifyProductLink = useMemo(()=>{
         if (!storefrontUrl) return `#`;
@@ -46,56 +61,71 @@ const ProductFeaturedImageOnly = ({ image, imageShowWhenHover, setting, aspectRa
         });
         return children;
     };
+    const isRenderHoverImage = useMemo(()=>setting?.hoverEffect !== 'none' && !isFeatureMedia(renderImage?.contentType), [
+        renderImage?.contentType,
+        setting?.hoverEffect
+    ]);
+    const isZoomImage = useMemo(()=>setting?.hoverEffect == 'zoom' && setting?.zoomType == 'glasses' && !isFeatureMedia(renderImage?.contentType), [
+        renderImage?.contentType,
+        setting?.hoverEffect,
+        setting?.zoomType
+    ]);
     return /*#__PURE__*/ jsx(Fragment, {
-        children: handleProductLink(/*#__PURE__*/ jsxs(Fragment, {
-            children: [
-                /*#__PURE__*/ jsx(NextImage, {
-                    draggable: "false",
-                    src: renderImage.src,
-                    width: renderImage?.width,
-                    height: renderImage?.height,
-                    alt: renderImage?.alt,
-                    setting: {
-                        aspectRatio: aspectRatio,
-                        layout: setting?.ftLayout
-                    },
-                    priority: setting?.preload,
-                    className: "featured-image-only",
-                    style: {
-                        width: '100%',
-                        height: '100%',
-                        cursor: 'pointer'
-                    }
-                }),
-                /*#__PURE__*/ jsx(MediaIcon, {
-                    contentType: renderImage?.contentType ?? ''
-                }),
-                setting?.hoverEffect !== 'none' && !isFeatureMedia(renderImage?.contentType) && /*#__PURE__*/ jsx(NextImage, {
-                    draggable: "false",
-                    src: setting?.hoverEffect === 'other' ? imageShowWhenHover?.src : renderImage.src,
-                    width: setting?.hoverEffect === 'other' ? imageShowWhenHover?.width : renderImage.width,
-                    height: setting?.hoverEffect === 'other' ? imageShowWhenHover?.height : renderImage.height,
-                    alt: setting?.hoverEffect === 'other' ? imageShowWhenHover?.alt : renderImage.alt,
-                    setting: {
-                        layout: setting.ftLayout,
-                        aspectRatio: aspectRatio
-                    },
-                    style: {
-                        width: '100%',
-                        height: '100%'
-                    },
-                    className: cls('hover-image featured-image-only !gp-max-w-none', getZoomImageClass()),
-                    priority: setting?.preload
-                }),
-                setting?.hoverEffect == 'zoom' && setting?.zoomType == 'glasses' && !isFeatureMedia(renderImage?.contentType) && /*#__PURE__*/ jsx("div", {
-                    className: cls(getZoomLenClass(), 'room-len'),
-                    style: {
-                        ...makeStyle({
-                            bgi: `url("${renderImage?.src}")`
-                        })
-                    }
-                })
-            ]
+        children: handleProductLink(/*#__PURE__*/ jsx(Fragment, {
+            children: isRenderVideo ? /*#__PURE__*/ jsx(ProductFeatureVideo, {
+                type: renderImage?.contentType,
+                url: renderImage.src ?? '',
+                aspectRatio: aspectRatio
+            }) : /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ jsx(NextImage, {
+                        draggable: "false",
+                        src: renderImage.src,
+                        width: renderImage?.width,
+                        height: renderImage?.height,
+                        alt: renderImage?.alt,
+                        setting: {
+                            aspectRatio: aspectRatio,
+                            layout: setting?.ftLayout
+                        },
+                        priority: setting?.preload,
+                        className: "featured-image-only",
+                        style: {
+                            width: '100%',
+                            height: '100%',
+                            cursor: 'pointer'
+                        }
+                    }),
+                    /*#__PURE__*/ jsx(MediaIcon, {
+                        contentType: renderImage?.contentType ?? ''
+                    }),
+                    isRenderHoverImage && /*#__PURE__*/ jsx(NextImage, {
+                        draggable: "false",
+                        src: setting?.hoverEffect === 'other' ? imageShowWhenHover?.src : renderImage.src,
+                        width: setting?.hoverEffect === 'other' ? imageShowWhenHover?.width : renderImage.width,
+                        height: setting?.hoverEffect === 'other' ? imageShowWhenHover?.height : renderImage.height,
+                        alt: setting?.hoverEffect === 'other' ? imageShowWhenHover?.alt : renderImage.alt,
+                        setting: {
+                            layout: setting.ftLayout,
+                            aspectRatio: aspectRatio
+                        },
+                        style: {
+                            width: '100%',
+                            height: '100%'
+                        },
+                        className: cls('hover-image featured-image-only !gp-max-w-none', getZoomImageClass()),
+                        priority: setting?.preload
+                    }),
+                    isZoomImage && /*#__PURE__*/ jsx("div", {
+                        className: cls(getZoomLenClass(), 'room-len'),
+                        style: {
+                            ...makeStyle({
+                                bgi: `url("${renderImage?.src}")`
+                            })
+                        }
+                    })
+                ]
+            })
         }))
     });
 };

package/dist/esm/product/components/ProductImagesV2/jsx/components/ProductGalleryCarousel.js

@@ -9,6 +9,7 @@ import { getShapeByLayout, getSliderPerShowConfig, getSettingWidthForCarouselIte
 import ButtonOpenLightBox from './ButtonOpenLightBox.js';
 import MediaIcon from './MediaIcon.js';
 import { handleSetSrcForProductImageList } from '../../../../../image/helpers/getSrcSet.js';
+import { isFeatureMedia } from '../../common/productFeaturedImage.js';
 
 const ProductGalleryCarousel = ({ builderPropUID, productImages, onHandleClick, activeIndexFormFeatureImage, onClickFeatureArrow, builderPropsClass, arrow, priorityFeatureImage, ...setting })=>{
     const currentDevice = useCurrentDevice();
@@ -243,6 +244,7 @@ const ProductGalleryCarousel = ({ builderPropUID, productImages, onHandleClick,
         disableMarginAuto: true,
         children: productImages?.map((image, index)=>{
             const canActive = index === moveToIdx;
+            const imageSrc = isFeatureMedia(image.contentType) ? image.previewImage : image.src;
             return /*#__PURE__*/ jsxs(CarouselItem, {
                 contentType: "productImage",
                 className: cls(`gem-slider-item gem-slider-item-${builderPropUID} gp-gallery-image-item gp-group gp-flex gp-w-full gp-items-center gp-justify-center gp-overflow-hidden gp-outline-1 -gp-outline-offset-1 data-[border=deactive]:after:!gp-border-transparent`, {
@@ -266,7 +268,7 @@ const ProductGalleryCarousel = ({ builderPropUID, productImages, onHandleClick,
                 children: [
                     /*#__PURE__*/ jsx(NextImage, {
                         draggable: "false",
-                        src: image.src,
+                        src: imageSrc,
                         width: image?.width,
                         height: image?.height,
                         alt: image?.alt,

package/dist/esm/product/components/ProductImagesV2/jsx/components/ProductGalleryGrid.js

@@ -120,6 +120,7 @@ const ProductGalleryGrid = ({ builderPropUID, productImages, onHandleClick, acti
             children: [
                 productImages?.map((image, index)=>{
                     const canActive = index === imageActiveIndex;
+                    const imageSrc = isFeatureMedia(image.contentType) ? image.previewImage : image.src;
                     return(// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
                     /*#__PURE__*/ jsxs("div", {
                         "aria-hidden": true,
@@ -145,7 +146,7 @@ const ProductGalleryGrid = ({ builderPropUID, productImages, onHandleClick, acti
                         "data-border": canActive && !!setting?.borderActive ? 'active' : 'deactive',
                         children: [
                             /*#__PURE__*/ jsx(NextImage, {
-                                src: image.src,
+                                src: imageSrc,
                                 width: image?.width,
                                 height: image?.height,
                                 alt: image?.alt,
@@ -162,7 +163,7 @@ const ProductGalleryGrid = ({ builderPropUID, productImages, onHandleClick, acti
                                 contentType: image?.contentType || ''
                             }),
                             setting?.galleryHoverEffect !== 'none' && !isFeatureMedia(image?.contentType) && /*#__PURE__*/ jsx(NextImage, {
-                                src: image?.src,
+                                src: imageSrc,
                                 width: image?.width,
                                 height: image?.height,
                                 alt: image?.alt,

package/dist/esm/product/components/ProductImagesV2/jsx/components/ProductImagesLightBox.js

@@ -1,5 +1,5 @@
-import { jsx } from 'react/jsx-runtime';
-import { useFeaturedImageGlobal, cls } from '@gem-sdk/core';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useFeaturedImageGlobal, useEditorMode, cls } from '@gem-sdk/core';
 import Carousel from '../../../../../carousel/components/Carousel.js';
 import CarouselItem from '../../../../../carousel/components/CarouselItem.js';
 import NextImage from '../../../../../image/components/NextImage.js';
@@ -7,6 +7,8 @@ import '../../../../../modal/components/confirm.js';
 import Modal from '../../../../../modal/components/Modal.js';
 import { useMemo } from 'react';
 import { isFeatureMedia } from '../../common/productFeaturedImage.js';
+import ProductFeatureVideo from './ProductFeatureVideo.js';
+import MediaIcon from './MediaIcon.js';
 
 const ProductImagesLightBox = ({ builderPropUID, productImages, open, imageRatio, onHandleClose })=>{
     const featuredImageGlobal = useFeaturedImageGlobal();
@@ -27,6 +29,11 @@ const ProductImagesLightBox = ({ builderPropUID, productImages, open, imageRatio
         mobile: false,
         tablet: false
     };
+    const mode = useEditorMode();
+    const isRenderVideo = (image)=>mode !== 'edit' && [
+            'VIDEO',
+            'EXTERNAL_VIDEO'
+        ].includes(image?.contentType || '');
     return /*#__PURE__*/ jsx(Modal, {
         setting: {
             open: open
@@ -102,17 +109,28 @@ const ProductImagesLightBox = ({ builderPropUID, productImages, open, imageRatio
             fullHeight: true,
             children: productImages?.map((image)=>/*#__PURE__*/ jsx(CarouselItem, {
                     className: `gem-slider-item gem-slider-item-${builderPropUID} gp-flex gp-items-center gp-justify-center gp-px-4`,
-                    children: /*#__PURE__*/ jsx(NextImage, {
-                        src: isFeatureMedia(image?.contentType) ? image?.previewImage : image?.src,
-                        width: image?.width,
-                        height: image?.height,
-                        alt: image?.alt,
-                        "content-type": image?.contentType,
-                        setting: {
-                            aspectRatio: imageRatio
-                        },
-                        className: cls('gp-h-full gp-w-full gp-object-contain')
-                    }, image?.id)
+                    children: !isRenderVideo(image) ? /*#__PURE__*/ jsxs(Fragment, {
+                        children: [
+                            /*#__PURE__*/ jsx(NextImage, {
+                                src: isFeatureMedia(image?.contentType) ? image?.previewImage : image?.src,
+                                width: image?.width,
+                                height: image?.height,
+                                alt: image?.alt,
+                                "content-type": image?.contentType,
+                                setting: {
+                                    aspectRatio: imageRatio
+                                },
+                                className: cls('gp-h-full gp-w-full gp-object-contain')
+                            }, image?.id),
+                            /*#__PURE__*/ jsx(MediaIcon, {
+                                contentType: image?.contentType ?? ''
+                            })
+                        ]
+                    }) : /*#__PURE__*/ jsx(ProductFeatureVideo, {
+                        type: image?.contentType,
+                        url: image.src ?? '',
+                        aspectRatio: imageRatio
+                    })
                 }, image?.id))
         })
     });

package/dist/esm/third-party/components/ProductOptionsVariantOption.js

@@ -4,7 +4,7 @@ import ThirdPartyPreview from './ThirdPartyPreview.js';
 
 const AppConfig = {
     id: 'product-options-variant-option',
-    label: 'Product Options Variant Option',
+    label: 'Avis Product Options, Variants',
     logoUrl: 'https://cdn.shopify.com/app-store/listing_images/5ee1f244b087cfbec9b19c8b3f62c8f6/icon/CMCq1s7J5vQCEAE=.png',
     tag: 'ProductOptionsVariantOption'
 };
@@ -14,7 +14,7 @@ const ProductOptionsVariantOptionContent = ()=>{
             className: "gp-p-2",
             children: /*#__PURE__*/ jsx(ThirdPartyPreview, {
                 setting: {
-                    label: 'Product Options Variant Option',
+                    label: 'Avis Product Options, Variants',
                     iconSvg: `<img class="gp-w-6 gp-border gp-border-[#494949] gp-rounded-[3px]" src="${AppConfig.logoUrl}">`
                 }
             })

package/dist/esm/third-party/components/ProductOptionsVariantOption.liquid.js

@@ -1,7 +1,7 @@
 import { template, makeStyleResponsive } from '@gem-sdk/core';
 
 const ProductOptionsVariantOption = ({ setting, advanced })=>{
-    const { align, idTrigger } = setting ?? {};
+    const { align } = setting ?? {};
     return template`
     <div
       class="${advanced?.cssClass}"
@@ -9,7 +9,7 @@ const ProductOptionsVariantOption = ({ setting, advanced })=>{
         ...makeStyleResponsive('ta', align)
     }}"
     >
-      <div class="${idTrigger?.replace('.', '')}"></div>
+      <div class="avpoptions-container__v2"></div>
     </div>
   `;
 };

package/dist/esm/third-party/setting/ProductOptionsVariantOption.js

@@ -24,7 +24,7 @@ const config = {
             icon: {
                 desktop: `<div class="w-full flex flex-col items-center">
         <img class="w-24 border border-dark-200 rounded-medium" src="https://cdn.shopify.com/app-store/listing_images/5ee1f244b087cfbec9b19c8b3f62c8f6/icon/CMCq1s7J5vQCEAE=.png">
-        <span class="preset-item-title">Product Options Variant Option</span>
+        <span class="preset-item-title">Avis Product Options, Variants</span>
       </div>`
             },
             components: [
@@ -103,15 +103,6 @@ const config = {
                 id: 'openApp'
             }
         },
-        {
-            type: 'control',
-            setting: {
-                id: 'idTrigger'
-            },
-            label: {
-                en: 'ID Element'
-            }
-        },
         {
             type: 'control',
             label: {

package/dist/esm/video/components/Video.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { useEditorMode, makeStyleResponsive, cls } from '@gem-sdk/core';
 import dynamic from 'next/dynamic';
 import { useMemo } from 'react';
-import { getVimeoVideoId, vimeoVideoRegex, getYoutubeVideoId, youtubeVideoRegex, parseTimeVideo } from '../helpers/common.js';
+import { getVimeoVideoId, getYoutubeVideoId, youtubeVideoRegex, parseTimeVideo } from '../helpers/common.js';
 import useAspectRatioSettings from '../../banner/components/hero-banner/hooks/useAspectRatioSettings.js';
 
 const HTML5Embed = dynamic(()=>import('./HTML5Embed.js'));
@@ -45,7 +45,7 @@ const Video = ({ className, setting, style, builderAttrs, builderProps, children
             case 'vimeo':
                 {
                     const videoId = getVimeoVideoId(vimeoUrl);
-                    if (!vimeoVideoRegex.test(vimeoUrl) || !videoId) return undefined;
+                    if (!videoId) return undefined;
                     return /*#__PURE__*/ jsx(LiteVimeoEmbed, {
                         muted: !mute,
                         loop: loopVideo,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/components",
-  "version": "2.1.24",
+  "version": "2.1.25",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",