@gem-sdk/components 4.0.0-staging.1219 → 4.0.0-staging.1220

package/dist/cjs/product/components/product-description/common/helpers.js

@@ -1,3 +1,3 @@
-"use strict";const DESCRIPTION_LINE_HEIGHT_DEFAULT=21,ICON_SVG=`<svg height="1em" width="1em" viewBox="0 0 22 12" fill="none" xmlns="http://www.w3.org/2000/svg" ><path d="M1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L1.70711 0.292893ZM11 11L10.2929 11.7071C10.6834 12.0976 11.3166 12.0976 11.7071 11.7071L11 11ZM21.7071 1.70711C22.0976 1.31658 22.0976 0.683417 21.7071 0.292893C21.3166 -0.0976311 20.6834 -0.0976311 20.2929 0.292893L21.7071 1.70711ZM0.292893 1.70711L10.2929 11.7071L11.7071 10.2929L1.70711 0.292893L0.292893 1.70711ZM11.7071 11.7071L21.7071 1.70711L20.2929 0.292893L10.2929 10.2929L11.7071 11.7071Z"
+"use strict";const ICON_SVG=`<svg height="1em" width="1em" viewBox="0 0 22 12" fill="none" xmlns="http://www.w3.org/2000/svg" ><path d="M1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L1.70711 0.292893ZM11 11L10.2929 11.7071C10.6834 12.0976 11.3166 12.0976 11.7071 11.7071L11 11ZM21.7071 1.70711C22.0976 1.31658 22.0976 0.683417 21.7071 0.292893C21.3166 -0.0976311 20.6834 -0.0976311 20.2929 0.292893L21.7071 1.70711ZM0.292893 1.70711L10.2929 11.7071L11.7071 10.2929L1.70711 0.292893L0.292893 1.70711ZM11.7071 11.7071L21.7071 1.70711L20.2929 0.292893L10.2929 10.2929L11.7071 11.7071Z"
               fill="currentColor"/>
-        </svg>`;exports.DESCRIPTION_LINE_HEIGHT_DEFAULT=21,exports.ICON_SVG=ICON_SVG;
+        </svg>`;exports.ICON_SVG=ICON_SVG;

package/dist/cjs/product/components/product-description/common/styles.js

@@ -1,4 +1,4 @@
-"use strict";var core=require("@gem-sdk/core"),helpers=require("./helpers.js");const devices=["desktop","mobile","tablet"],getDisplayStyle=(e,t)=>{let o={};return devices.forEach(l=>{o={...o,[`--d${"desktop"===l?"":`-${l}`}`]:`${e(l)?"none":t}`}}),o},getTextStyle=({setting:e,renderMaxHeight:t})=>{let o=core.composeTypographyStyle(e?.typo,e?.typography),l={...core.getStyleShadow({value:e?.typo?.custom?.textShadow,styleAppliedFor:"text-shadow",isEnableShadow:e?.typo?.custom?.hasShadowText}),...core.makeStyleResponsive("ta",e?.textAlign),...core.getGlobalColorStyle(e?.color),...core.makeStyle({tt:e?.transform}),...o,...t&&getMaxHeightStyleDefault(e)};return core.filterTruthyStyles(l)},getButtonStyle=({setting:e})=>{let t=core.composeTypographyStyle(e?.typo,e?.typography),o=()=>getDisplayStyle(t=>!!e?.hasLineClamp&&void 0!==e.hasLineClamp[t]&&!e.hasLineClamp[t],"inline-flex"),l={...core.makeStyleResponsive("jc",e?.textAlign),...core.makeStyle({tt:e?.transform}),...t,...core.getGlobalColorStyle(e?.showMoreColor),...o()};return core.filterTruthyStyles(l)},getStaticCss=()=>{let e=`
+"use strict";var core=require("@gem-sdk/core");const devices=["desktop","mobile","tablet"],getDisplayStyle=(e,t)=>{let o={};return devices.forEach(l=>{o={...o,[`--d${"desktop"===l?"":`-${l}`}`]:`${e(l)?"none":t}`}}),o},getTextStyle=({setting:e,renderMaxHeight:t})=>{let o=core.composeTypographyStyle(e?.typo,e?.typography),l={...core.getStyleShadow({value:e?.typo?.custom?.textShadow,styleAppliedFor:"text-shadow",isEnableShadow:e?.typo?.custom?.hasShadowText}),...core.makeStyleResponsive("ta",e?.textAlign),...core.getGlobalColorStyle(e?.color),...core.makeStyle({tt:e?.transform}),...o,...t&&getMaxHeightStyleDefault(e)};return core.filterTruthyStyles(l)},getButtonStyle=({setting:e})=>{let t=core.composeTypographyStyle(e?.typo,e?.typography),o=()=>getDisplayStyle(t=>!!e?.hasLineClamp&&void 0!==e.hasLineClamp[t]&&!e.hasLineClamp[t],"inline-flex"),l={...core.makeStyleResponsive("jc",e?.textAlign),...core.makeStyle({tt:e?.transform}),...t,...core.getGlobalColorStyle(e?.showMoreColor),...o()};return core.filterTruthyStyles(l)},getStaticCss=()=>{let e=`
    .gp-p-description-text > :not(ol, ul, table, div, style, script) {
       display: inline !important;
     }
@@ -14,4 +14,4 @@
       .p-description-wrapper.gp-p-description-text * {
         color: inherit;
         line-height: inherit !important;
-      }`;return{gpDescriptionCss:e,textDescriptionCss:t}},getMaxHeightStyleDefault=e=>{let t={desktop:"none"},o=["desktop","mobile","tablet"];o.forEach(o=>{let l=core.getResponsiveValueByScreen(e?.lineClamp,o),r=core.getResponsiveValueByScreen(e?.hasLineClamp,o),a=r&&l?`${l*helpers.DESCRIPTION_LINE_HEIGHT_DEFAULT}px`:"none";t={...t,[o]:a}});let l=core.makeStyleResponsive("maxh",t);return l};exports.getButtonStyle=getButtonStyle,exports.getMaxHeightStyleDefault=getMaxHeightStyleDefault,exports.getStaticCss=getStaticCss,exports.getTextStyle=getTextStyle;
+      }`;return{gpDescriptionCss:e,textDescriptionCss:t}},getMaxHeightStyleDefault=e=>{let t={desktop:"none"},o=["desktop","mobile","tablet"];return o.forEach(o=>{let l=core.getResponsiveValueByScreen(e?.lineClamp,o),r=core.getResponsiveValueByScreen(e?.hasLineClamp,o);r&&l?t[o]=`calc(${l} * 1lh)`:t[o]="none"}),{...core.makeStyleResponsive("maxh",t)}};exports.getButtonStyle=getButtonStyle,exports.getMaxHeightStyleDefault=getMaxHeightStyleDefault,exports.getStaticCss=getStaticCss,exports.getTextStyle=getTextStyle;

package/dist/cjs/product/components/product-description/hooks/useGpDescription.js

@@ -1 +1 @@
-"use strict";var React=require("react"),helpers=require("../common/helpers.js"),core=require("@gem-sdk/core");const useGpDescription=e=>{let t=React.useRef(null),[r,c]=React.useState(!1),[i,s]=React.useState(!1),u=core.useProduct(),o=core.useCurrentDevice(),n=core.getResponsiveValueByScreen(e?.hasLineClamp,o),l=core.getResponsiveValueByScreen(e?.lineClamp,o),{redirectProductShopifyLink:a}=core.useProductShopifyEditLink(),p=core.useEditorMode(),h=React.useCallback(()=>{if(!t.current)return helpers.DESCRIPTION_LINE_HEIGHT_DEFAULT;let e=window.getComputedStyle(t.current).getPropertyValue("line-height");return Math.ceil(parseFloat(e))},[]),d=React.useCallback(e=>n&&l&&e?`${l*e}px`:"auto",[n,l]),g=()=>{if(!t.current)return;let e=h();r?t.current.style.maxHeight=d(e):t.current.style.maxHeight="none",c(e=>!e)};return React.useEffect(()=>{let e=h();d(e)},[e?.typo?.custom,d,h]),React.useEffect(()=>{let e=t.current;if(c(!1),!e)return;let r=n&&u?.descriptionHtml;r?setTimeout(()=>{let t=e?.scrollHeight??0,r=e?.clientHeight??0,c=r<t,i=window.getComputedStyle(e).getPropertyValue("line-height"),u=parseInt(i,10)||1,o=Math.round((t??0)/u),n=void 0!==l&&l<o,a=core.isSafari()?n:c;e.style.maxHeight=d(u),l&&a?s(()=>!0):s(()=>!1)},100):e.style.maxHeight="none"},[n,l,u?.description,u?.descriptionHtml,h,d,c,s]),{ref:t,open:r,isShowViewMore:i,handleToggleShowMore:g,mode:p,redirectProductShopifyLink:a}};exports.useGpDescription=useGpDescription;
+"use strict";var React=require("react"),core=require("@gem-sdk/core");const useGpDescription=e=>{let t=React.useRef(null),[r,c]=React.useState(!1),[s,i]=React.useState(!1),o=core.useProduct(),u=core.useCurrentDevice(),a=core.getResponsiveValueByScreen(e?.hasLineClamp,u),l=core.getResponsiveValueByScreen(e?.lineClamp,u),{redirectProductShopifyLink:n}=core.useProductShopifyEditLink(),p=core.useEditorMode(),d=React.useCallback(()=>`calc(${l} * 1lh)`,[l]),R=React.useCallback(e=>a&&l&&e||"auto",[a,l]),g=React.useCallback(()=>{t.current&&(t.current.style.maxHeight=r?d():"none",c(e=>!e))},[r,d]);return React.useEffect(()=>{R(d())},[e?.typo?.custom,R,d]),React.useEffect(()=>{let e=t.current;if(c(!1),!e)return;let r=a&&o?.descriptionHtml;r?setTimeout(()=>{let t=e?.scrollHeight??0,r=e?.clientHeight??0,c=r<t,s=window.getComputedStyle(e).getPropertyValue("line-height"),o=parseInt(s,10)||1,u=Math.round((t??0)/o),a=void 0!==l&&l<u,n=core.isSafari()?a:c;e.style.maxHeight=d(),l&&n?i(()=>!0):i(()=>!1)},100):e.style.maxHeight="none"},[a,l,o?.descriptionHtml,d]),{ref:t,open:r,isShowViewMore:s,handleToggleShowMore:g,mode:p,redirectProductShopifyLink:n}};exports.useGpDescription=useGpDescription;

package/dist/cjs/video/common/helpers.js

@@ -1 +1 @@
-"use strict";var core=require("@gem-sdk/core");const getAspectRatioSettings=(e,t)=>{let o={desktop:e?.desktop?.width,tablet:e?.tablet?.width,mobile:e?.mobile?.width},s={desktop:e?.desktop?.height,tablet:e?.tablet?.height,mobile:e?.mobile?.height},i={desktop:t?.desktop==="custom"?`${core.getResponsiveValueByScreen(o,"desktop")}/${core.getResponsiveValueByScreen(s,"desktop")}`:t?.desktop==="cover"?"unset":t?.desktop,tablet:t?.tablet==="custom"?`${core.getResponsiveValueByScreen(o,"tablet")}/${core.getResponsiveValueByScreen(s,"tablet")}`:t?.tablet==="cover"?"unset":t?.tablet,mobile:t?.mobile==="custom"?`${core.getResponsiveValueByScreen(o,"mobile")}/${core.getResponsiveValueByScreen(s,"mobile")}`:t?.mobile==="cover"?"unset":t?.mobile};return i},listSourceVideoSupport=[".mp4",".mov"],getYoutubeParams=e=>{let{id:t,params:o,muted:s,webp:i,controls:r,adNetwork:p,autoplay:a,lazy:l}=e,m=encodeURIComponent(t),u="hqdefault",d=`${o}`||"",c=s?"&mute=1":"",b=i?"webp":"jpg",n=i?"vi_webp":"vi",g=e.thumbnail||`https://i.ytimg.com/${n}/${m}/${u}.${b}`,V=e.noCookie?"https://www.youtube-nocookie.com":"https://www.youtube.com",v=`${V}/embed/${m}?autoplay=${!!l||a}&state=1${c}${d}&controls=${r?1:0}`,h=p||!1;return{videoId:m,posterImp:u,paramsImp:d,mutedImp:c,format:b,vi:n,posterUrl:g,ytUrl:V,iframeSrc:v,adNetworkImp:h}},getVimeoParams=e=>{let{id:t,autoplay:o,muted:s,controls:i,loop:r,lazy:p}=e,a=encodeURIComponent(t),l=`?&autoplay=${p?1:o?1:0}&muted=${s?1:0}&loop=${r?1:0}&controls=${i}&autopause=false`,m=`https://player.vimeo.com/video/${a}${l}`;return{videoId:a,params:l,iframeSrc:m}},makeStyleResponsiveRatio=(e,t)=>({[`--${e}`]:t?.desktop,[`--${e}-tablet`]:t?.tablet,[`--${e}-mobile`]:t?.mobile}),fallbackImageVideoUrl="https://cdn.shopify.com/s/files/1/0703/5214/2562/files/gempages_518090459516502570-3d3a4631-1d7d-4a2f-9ef0-9bbe7220e02d.jpg",youtubeVideoRegex=/(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?:[^/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=|shorts\/)|youtu\.be\/)([^"&?/\s]{11})/i,vimeoVideoRegex=/^(?:http:\/\/|https:\/\/)vimeo\.com\/[\w/]+(?:\?.*)?$/im,getYoutubeVideoId=e=>{let t=e.match(youtubeVideoRegex);return t?.[1]??void 0},getVimeoVideoId=e=>{let t=/https?:\/\/(?:www\.|player\.)?vimeo.com\/(?:channels\/(?:\w+\/)?|groups\/([^/]*)\/videos\/|album\/(\d+)\/video\/|video\/)?(\d+)(?:$|\/|\?)/,o=e.match(t);return o?.[3]},parseTimeVideo=e=>{let t=e.split(":",2);return t.length<=1?parseInt(t[0]||"0"):60*parseInt(t[0]||"0")+parseInt(t[1]||"0")},covertStrParamsToObj=e=>{let t=e.split("&");return t.shift(),t.reduce((e,t)=>{let[o,s]=t.split("=");return"loop"!==o?{...e,[o]:s}:e},{})},isSettingLoop=e=>e.includes("loop=1");exports.covertStrParamsToObj=covertStrParamsToObj,exports.fallbackImageVideoUrl="https://cdn.shopify.com/s/files/1/0703/5214/2562/files/gempages_518090459516502570-3d3a4631-1d7d-4a2f-9ef0-9bbe7220e02d.jpg",exports.getAspectRatioSettings=getAspectRatioSettings,exports.getVimeoParams=getVimeoParams,exports.getVimeoVideoId=getVimeoVideoId,exports.getYoutubeParams=getYoutubeParams,exports.getYoutubeVideoId=getYoutubeVideoId,exports.isSettingLoop=isSettingLoop,exports.listSourceVideoSupport=listSourceVideoSupport,exports.makeStyleResponsiveRatio=makeStyleResponsiveRatio,exports.parseTimeVideo=parseTimeVideo,exports.vimeoVideoRegex=vimeoVideoRegex,exports.youtubeVideoRegex=youtubeVideoRegex;
+"use strict";var core=require("@gem-sdk/core");const getAspectRatioSettings=(e,t)=>{let o={desktop:e?.desktop?.width,tablet:e?.tablet?.width,mobile:e?.mobile?.width},s={desktop:e?.desktop?.height,tablet:e?.tablet?.height,mobile:e?.mobile?.height},i={desktop:t?.desktop==="custom"?`${core.getResponsiveValueByScreen(o,"desktop")}/${core.getResponsiveValueByScreen(s,"desktop")}`:t?.desktop==="cover"?"unset":t?.desktop,tablet:t?.tablet==="custom"?`${core.getResponsiveValueByScreen(o,"tablet")}/${core.getResponsiveValueByScreen(s,"tablet")}`:t?.tablet==="cover"?"unset":t?.tablet,mobile:t?.mobile==="custom"?`${core.getResponsiveValueByScreen(o,"mobile")}/${core.getResponsiveValueByScreen(s,"mobile")}`:t?.mobile==="cover"?"unset":t?.mobile};return i},getYoutubeParams=e=>{let{id:t,params:o,muted:s,webp:i,controls:a,adNetwork:r,autoplay:p,lazy:l}=e,m=encodeURIComponent(t),d="hqdefault",u=`${o}`||"",b=s?"&mute=1":"",n=i?"webp":"jpg",c=i?"vi_webp":"vi",g=e.thumbnail||`https://i.ytimg.com/${c}/${m}/${d}.${n}`,v=e.noCookie?"https://www.youtube-nocookie.com":"https://www.youtube.com",V=`${v}/embed/${m}?autoplay=${!!l||p}&state=1${b}${u}&controls=${a?1:0}`,h=r||!1;return{videoId:m,posterImp:d,paramsImp:u,mutedImp:b,format:n,vi:c,posterUrl:g,ytUrl:v,iframeSrc:V,adNetworkImp:h}},getVimeoParams=e=>{let{id:t,autoplay:o,muted:s,controls:i,loop:a,lazy:r}=e,p=encodeURIComponent(t),l=`?&autoplay=${r?1:o?1:0}&muted=${s?1:0}&loop=${a?1:0}&controls=${i}&autopause=false`,m=`https://player.vimeo.com/video/${p}${l}`;return{videoId:p,params:l,iframeSrc:m}},makeStyleResponsiveRatio=(e,t)=>({[`--${e}`]:t?.desktop,[`--${e}-tablet`]:t?.tablet,[`--${e}-mobile`]:t?.mobile}),fallbackImageVideoUrl="https://cdn.shopify.com/s/files/1/0703/5214/2562/files/gempages_518090459516502570-3d3a4631-1d7d-4a2f-9ef0-9bbe7220e02d.jpg",youtubeVideoRegex=/(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?:[^/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=|shorts\/)|youtu\.be\/)([^"&?/\s]{11})/i,vimeoVideoRegex=/^(?:http:\/\/|https:\/\/)vimeo\.com\/[\w/]+(?:\?.*)?$/im,getYoutubeVideoId=e=>{let t=e.match(youtubeVideoRegex);return t?.[1]??void 0},getVimeoVideoId=e=>{let t=/https?:\/\/(?:www\.|player\.)?vimeo.com\/(?:channels\/(?:\w+\/)?|groups\/([^/]*)\/videos\/|album\/(\d+)\/video\/|video\/)?(\d+)(?:$|\/|\?)/,o=e.match(t);return o?.[3]},parseTimeVideo=e=>{let t=e.split(":",2);return t.length<=1?parseInt(t[0]||"0"):60*parseInt(t[0]||"0")+parseInt(t[1]||"0")},covertStrParamsToObj=e=>{let t=e.split("&");return t.shift(),t.reduce((e,t)=>{let[o,s]=t.split("=");return"loop"!==o?{...e,[o]:s}:e},{})},isSettingLoop=e=>e.includes("loop=1");exports.covertStrParamsToObj=covertStrParamsToObj,exports.fallbackImageVideoUrl="https://cdn.shopify.com/s/files/1/0703/5214/2562/files/gempages_518090459516502570-3d3a4631-1d7d-4a2f-9ef0-9bbe7220e02d.jpg",exports.getAspectRatioSettings=getAspectRatioSettings,exports.getVimeoParams=getVimeoParams,exports.getVimeoVideoId=getVimeoVideoId,exports.getYoutubeParams=getYoutubeParams,exports.getYoutubeVideoId=getYoutubeVideoId,exports.isSettingLoop=isSettingLoop,exports.makeStyleResponsiveRatio=makeStyleResponsiveRatio,exports.parseTimeVideo=parseTimeVideo,exports.vimeoVideoRegex=vimeoVideoRegex,exports.youtubeVideoRegex=youtubeVideoRegex;

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

@@ -1,2 +1,2 @@
 'use client';
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),core=require("@gem-sdk/core"),NextImage=require("../../image/components/NextImage.js"),useLiteHtml5Embed=require("../hooks/useLiteHtml5Embed.js"),helpers=require("../common/helpers.js"),system=require("@gem-sdk/system"),classes=require("../common/classes.js"),styles=require("../common/styles.js"),attrs=require("../common/attrs.js");const HTML5Embed=e=>{let s=core.useEditorMode(),t="edit"!==s,{thumbnail:l,muted:r,autoplay:a,loop:i,controls:m,src:o,style:u,title:c,className:n,lazy:d,poster:x}=e,{playVideoAndTurnOffThumbnail:j,videoRef:y,showThumbnail:p}=useLiteHtml5Embed.useLiteHtml5Embed(a,r,o),g=!t&&a&&r&&!!l,b=!d&&e.isVideoComponent&&t,h=helpers.listSourceVideoSupport.some(e=>o?.endsWith(e)),C=!l||!p,R=b&&!t?o:void 0,v=system.createAttr({...attrs.getHtml5Attr({title:c,autoplay:a,preloadThumbnail:g,offLazyLoad:b,src:o,thumbnail:l})}),q=system.createClass({...classes.getWrapThumbnailClasses(C)}),L=system.createStyle({...styles.getPreloadImageStyle()}),N=system.createClass({...classes.getButtonThumbnailClasses()}),I=system.createClass({...classes.getImageThumbnailClasses()}),E=system.createClass({...classes.getVideoYoutubeClasses(n,b)}),H=()=>g?jsxRuntime.jsx(NextImage.default,{src:l,alt:c,priority:!0,style:L}):"",T=()=>jsxRuntime.jsxs("div",{role:"presentation",style:u,className:q,onClick:j,children:[jsxRuntime.jsx(NextImage.default,{id:"video-thumbnail",src:l??"",alt:x?.altText,title:x?.imageTitle,priority:x?.preload&&t,className:I,isDisableAspectStyle:!0,enableLazyLoadImage:!0}),jsxRuntime.jsx("button",{type:"button",className:N,"aria-label":"Play",children:jsxRuntime.jsx("svg",{className:"gp-w-5 gp-text-white",viewBox:"0 0 24 24",children:jsxRuntime.jsx("path",{fill:"currentColor",d:"M5 5.274c0-1.707 1.826-2.792 3.325-1.977l12.362 6.726c1.566.853 1.566 3.101 0 3.953L8.325 20.702C6.826 21.518 5 20.432 5 18.726V5.274Z"})})})]});return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[H(),jsxRuntime.jsx("video",{ref:y,...v,style:u,className:E,controls:m,loop:i,muted:r,autoPlay:a,playsInline:!0,src:h?void 0:R,children:h&&jsxRuntime.jsx("source",{"data-src":o,src:o,type:"video/mp4"})}),!C&&T()]})};exports.default=HTML5Embed;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),core=require("@gem-sdk/core"),NextImage=require("../../image/components/NextImage.js"),useLiteHtml5Embed=require("../hooks/useLiteHtml5Embed.js"),system=require("@gem-sdk/system"),classes=require("../common/classes.js"),styles=require("../common/styles.js"),attrs=require("../common/attrs.js");const HTML5Embed=e=>{let s=core.useEditorMode(),t="edit"!==s,{thumbnail:a,muted:l,autoplay:r,loop:i,controls:m,src:o,style:u,title:c,className:n,lazy:d,poster:x}=e,{playVideoAndTurnOffThumbnail:j,videoRef:y,showThumbnail:g}=useLiteHtml5Embed.useLiteHtml5Embed(r,l,o),b=!t&&r&&l&&!!a,p=!d&&e.isVideoComponent&&t,C=!a||!g,h=p&&!t?o:void 0,R=system.createAttr({...attrs.getHtml5Attr({title:c,autoplay:r,preloadThumbnail:b,offLazyLoad:p,src:o,thumbnail:a})}),L=system.createClass({...classes.getWrapThumbnailClasses(C)}),N=system.createStyle({...styles.getPreloadImageStyle()}),q=system.createClass({...classes.getButtonThumbnailClasses()}),v=system.createClass({...classes.getImageThumbnailClasses()}),I=system.createClass({...classes.getVideoYoutubeClasses(n,p)}),E=()=>b?jsxRuntime.jsx(NextImage.default,{src:a,alt:c,priority:!0,style:N}):"",H=()=>jsxRuntime.jsxs("div",{role:"presentation",style:u,className:L,onClick:j,children:[jsxRuntime.jsx(NextImage.default,{id:"video-thumbnail",src:a??"",alt:x?.altText,title:x?.imageTitle,priority:x?.preload&&t,className:v,isDisableAspectStyle:!0,enableLazyLoadImage:!0}),jsxRuntime.jsx("button",{type:"button",className:q,"aria-label":"Play",children:jsxRuntime.jsx("svg",{className:"gp-w-5 gp-text-white",viewBox:"0 0 24 24",children:jsxRuntime.jsx("path",{fill:"currentColor",d:"M5 5.274c0-1.707 1.826-2.792 3.325-1.977l12.362 6.726c1.566.853 1.566 3.101 0 3.953L8.325 20.702C6.826 21.518 5 20.432 5 18.726V5.274Z"})})})]});return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[E(),jsxRuntime.jsx("video",{ref:y,...R,style:u,className:I,controls:m,loop:i,muted:l,autoPlay:r,playsInline:!0,src:h}),!C&&H()]})};exports.default=HTML5Embed;

package/dist/cjs/video/components/HTML5Embed.liquid.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),NextImage_liquid=require("../../image/components/NextImage.liquid.js"),helpers=require("../../helpers.js"),system=require("@gem-sdk/system"),classes=require("../common/classes.js"),styles=require("../common/styles.js"),attrs=require("../common/attrs.js");const HTML5Embed=e=>{let t=`gp-video-${e.uid}`,{thumbnail:s,muted:a,autoplay:l,loop:o,controls:r,src:i,style:d,title:n,className:c,lazy:m,poster:u,wrapperStyles:p}=e,y=l&&a&&!!s,g=!m&&e.isVideoComponent,v=i.endsWith(".mp4"),$=!s||l&&a,h=g?i:void 0,b=system.createAttr({...attrs.getHtml5Attr({videoId:t,title:n,autoplay:l,preloadThumbnail:y,offLazyLoad:g,src:i,thumbnail:s})}),f=system.createClass({...classes.getWrapThumbnailClasses($)}),L=system.createStyle({...styles.getPreloadImageStyle()}),I=system.createClass({...classes.getButtonThumbnailClasses()}),E=system.createClass({...classes.getImageThumbnailClasses()}),A=system.createClass({...classes.getVideoYoutubeClasses(c,g)}),C=()=>y?core.template`${NextImage_liquid.default({src:s,alt:n,priority:u?.preload,enableLazyLoadImage:!0,style:L})}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),NextImage_liquid=require("../../image/components/NextImage.liquid.js"),helpers=require("../../helpers.js"),system=require("@gem-sdk/system"),classes=require("../common/classes.js"),styles=require("../common/styles.js"),attrs=require("../common/attrs.js");const HTML5Embed=e=>{let t=`gp-video-${e.uid}`,{thumbnail:s,muted:a,autoplay:l,loop:o,controls:r,src:i,style:d,title:n,className:c,lazy:u,poster:m,wrapperStyles:p}=e,y=l&&a&&!!s,g=!u&&e.isVideoComponent,v=!s||l&&a,$=g?i:void 0,h=system.createAttr({...attrs.getHtml5Attr({videoId:t,title:n,autoplay:l,preloadThumbnail:y,offLazyLoad:g,src:i,thumbnail:s})}),b=system.createClass({...classes.getWrapThumbnailClasses(v)}),f=system.createStyle({...styles.getPreloadImageStyle()}),L=system.createClass({...classes.getButtonThumbnailClasses()}),E=system.createClass({...classes.getImageThumbnailClasses()}),I=system.createClass({...classes.getVideoYoutubeClasses(c,g)}),A=()=>y?core.template`${NextImage_liquid.default({src:s,alt:n,priority:m?.preload,enableLazyLoadImage:!0,style:f})}
     ${system.If(l,`<script>
         document.addEventListener("DOMContentLoaded", (event) => {
           const eventList = ["keydown", "mousemove", "wheel", "touchmove", "touchstart", "touchend"];
@@ -20,14 +20,14 @@
           }
         });
       </script>`)}
-      `:"",P=()=>core.template`
+      `:"",C=()=>core.template`
      <div
         role="presentation"
         style="${d}"
-        class="${f}"
+        class="${b}"
         >
-           ${NextImage_liquid.default({id:"video-thumbnail",src:s??"",alt:u?.altText,title:u?.imageTitle,className:E,isDisableAspectStyle:!0,priority:u?.preload,enableLazyLoadImage:!0})}
-          <button type="button" class="${I}" aria-label="Play">
+           ${NextImage_liquid.default({id:"video-thumbnail",src:s??"",alt:m?.altText,title:m?.imageTitle,className:E,isDisableAspectStyle:!0,priority:m?.preload,enableLazyLoadImage:!0})}
+          <button type="button" class="${L}" aria-label="Play">
             <svg class="gp-w-5 gp-text-white" viewBox="0 0 24 24">
               <path
                 fill="currentColor"
@@ -38,21 +38,19 @@
         </div>
   `;return core.template`
   <gp-lite-html5-embed is-check-loaded="${e.isCheckLoaded??!1}" style="${p}">
-    ${C()}
+    ${A()}
     <video
-    ${{...b}}
+    ${{...h}}
       style="${d}"
-      class="${A}"
+      class="${I}"
       ${r?"controls":void 0}
       ${o?"loop":void 0}
       ${a?"muted":void 0}
       ${l?"autoplay":void 0}
       playsinline
-      ${v?void 0:`src="${h}"`}
-    >
-      ${system.If(v,`<source data-src="${i}" src="${h}" type="video/mp4"></source>`)}
-    </video>
-    ${system.If(!$,P())}
+      ${$?`src="${$}`:""}
+    ></video>
+    ${system.If(!v,C())}
   </gp-lite-html5-embed>
         ${core.RenderIf(core.isLocalEnv,`<script ${helpers.getSettingPreloadData('class="gps-link" delay',"src")}="{{ 'gp-lite-html5-embed-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${helpers.getSettingPreloadData('class="gps-link" delay',"src")}="${core.baseAssetURL}/assets-v2/gp-lite-html5-embed-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
   `};exports.default=HTML5Embed;

package/dist/esm/product/components/product-description/common/helpers.js

@@ -1,3 +1,3 @@
-let DESCRIPTION_LINE_HEIGHT_DEFAULT=21,ICON_SVG=`<svg height="1em" width="1em" viewBox="0 0 22 12" fill="none" xmlns="http://www.w3.org/2000/svg" ><path d="M1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L1.70711 0.292893ZM11 11L10.2929 11.7071C10.6834 12.0976 11.3166 12.0976 11.7071 11.7071L11 11ZM21.7071 1.70711C22.0976 1.31658 22.0976 0.683417 21.7071 0.292893C21.3166 -0.0976311 20.6834 -0.0976311 20.2929 0.292893L21.7071 1.70711ZM0.292893 1.70711L10.2929 11.7071L11.7071 10.2929L1.70711 0.292893L0.292893 1.70711ZM11.7071 11.7071L21.7071 1.70711L20.2929 0.292893L10.2929 10.2929L11.7071 11.7071Z"
+let ICON_SVG=`<svg height="1em" width="1em" viewBox="0 0 22 12" fill="none" xmlns="http://www.w3.org/2000/svg" ><path d="M1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L1.70711 0.292893ZM11 11L10.2929 11.7071C10.6834 12.0976 11.3166 12.0976 11.7071 11.7071L11 11ZM21.7071 1.70711C22.0976 1.31658 22.0976 0.683417 21.7071 0.292893C21.3166 -0.0976311 20.6834 -0.0976311 20.2929 0.292893L21.7071 1.70711ZM0.292893 1.70711L10.2929 11.7071L11.7071 10.2929L1.70711 0.292893L0.292893 1.70711ZM11.7071 11.7071L21.7071 1.70711L20.2929 0.292893L10.2929 10.2929L11.7071 11.7071Z"
               fill="currentColor"/>
-        </svg>`;export{DESCRIPTION_LINE_HEIGHT_DEFAULT,ICON_SVG};
+        </svg>`;export{ICON_SVG};

package/dist/esm/product/components/product-description/common/styles.js

@@ -1,4 +1,4 @@
-import{composeTypographyStyle as t,getStyleShadow as e,makeStyleResponsive as o,getGlobalColorStyle as l,makeStyle as i,filterTruthyStyles as a,getResponsiveValueByScreen as p}from"@gem-sdk/core";import{DESCRIPTION_LINE_HEIGHT_DEFAULT as n}from"./helpers.js";let devices=["desktop","mobile","tablet"],getDisplayStyle=(t,e)=>{let o={};return devices.forEach(l=>{o={...o,[`--d${"desktop"===l?"":`-${l}`}`]:`${t(l)?"none":e}`}}),o},getTextStyle=({setting:p,renderMaxHeight:n})=>{let r=t(p?.typo,p?.typography),s={...e({value:p?.typo?.custom?.textShadow,styleAppliedFor:"text-shadow",isEnableShadow:p?.typo?.custom?.hasShadowText}),...o("ta",p?.textAlign),...l(p?.color),...i({tt:p?.transform}),...r,...n&&getMaxHeightStyleDefault(p)};return a(s)},getButtonStyle=({setting:e})=>{let p=t(e?.typo,e?.typography),n=()=>getDisplayStyle(t=>!!e?.hasLineClamp&&void 0!==e.hasLineClamp[t]&&!e.hasLineClamp[t],"inline-flex"),r={...o("jc",e?.textAlign),...i({tt:e?.transform}),...p,...l(e?.showMoreColor),...n()};return a(r)},getStaticCss=()=>{let t=`
+import{composeTypographyStyle as t,getStyleShadow as e,makeStyleResponsive as l,getGlobalColorStyle as o,makeStyle as i,filterTruthyStyles as a,getResponsiveValueByScreen as n}from"@gem-sdk/core";let devices=["desktop","mobile","tablet"],getDisplayStyle=(t,e)=>{let l={};return devices.forEach(o=>{l={...l,[`--d${"desktop"===o?"":`-${o}`}`]:`${t(o)?"none":e}`}}),l},getTextStyle=({setting:n,renderMaxHeight:p})=>{let r=t(n?.typo,n?.typography),s={...e({value:n?.typo?.custom?.textShadow,styleAppliedFor:"text-shadow",isEnableShadow:n?.typo?.custom?.hasShadowText}),...l("ta",n?.textAlign),...o(n?.color),...i({tt:n?.transform}),...r,...p&&getMaxHeightStyleDefault(n)};return a(s)},getButtonStyle=({setting:e})=>{let n=t(e?.typo,e?.typography),p=()=>getDisplayStyle(t=>!!e?.hasLineClamp&&void 0!==e.hasLineClamp[t]&&!e.hasLineClamp[t],"inline-flex"),r={...l("jc",e?.textAlign),...i({tt:e?.transform}),...n,...o(e?.showMoreColor),...p()};return a(r)},getStaticCss=()=>{let t=`
    .gp-p-description-text > :not(ol, ul, table, div, style, script) {
       display: inline !important;
     }
@@ -14,4 +14,4 @@ import{composeTypographyStyle as t,getStyleShadow as e,makeStyleResponsive as o,
       .p-description-wrapper.gp-p-description-text * {
         color: inherit;
         line-height: inherit !important;
-      }`;return{gpDescriptionCss:t,textDescriptionCss:e}},getMaxHeightStyleDefault=t=>{let e={desktop:"none"},l=["desktop","mobile","tablet"];l.forEach(o=>{let l=p(t?.lineClamp,o),i=p(t?.hasLineClamp,o),a=i&&l?`${l*n}px`:"none";e={...e,[o]:a}});let i=o("maxh",e);return i};export{getButtonStyle,getMaxHeightStyleDefault,getStaticCss,getTextStyle};
+      }`;return{gpDescriptionCss:t,textDescriptionCss:e}},getMaxHeightStyleDefault=t=>{let e={desktop:"none"},o=["desktop","mobile","tablet"];return o.forEach(l=>{let o=n(t?.lineClamp,l),i=n(t?.hasLineClamp,l);i&&o?e[l]=`calc(${o} * 1lh)`:e[l]="none"}),{...l("maxh",e)}};export{getButtonStyle,getMaxHeightStyleDefault,getStaticCss,getTextStyle};

package/dist/esm/product/components/product-description/hooks/useGpDescription.js

@@ -1 +1 @@
-import{useRef as e,useState as t,useCallback as r,useEffect as i}from"react";import{DESCRIPTION_LINE_HEIGHT_DEFAULT as l}from"../common/helpers.js";import{useProduct as n,useCurrentDevice as o,getResponsiveValueByScreen as p,useProductShopifyEditLink as u,useEditorMode as m,isSafari as s}from"@gem-sdk/core";let useGpDescription=c=>{let a=e(null),[h,g]=t(!1),[d,y]=t(!1),H=n(),f=o(),x=p(c?.hasLineClamp,f),w=p(c?.lineClamp,f),{redirectProductShopifyLink:C}=u(),D=m(),G=r(()=>{if(!a.current)return l;let e=window.getComputedStyle(a.current).getPropertyValue("line-height");return Math.ceil(parseFloat(e))},[]),M=r(e=>x&&w&&e?`${w*e}px`:"auto",[x,w]),P=()=>{if(!a.current)return;let e=G();h?a.current.style.maxHeight=M(e):a.current.style.maxHeight="none",g(e=>!e)};return i(()=>{let e=G();M(e)},[c?.typo?.custom,M,G]),i(()=>{let e=a.current;if(g(!1),!e)return;let t=x&&H?.descriptionHtml;t?setTimeout(()=>{let t=e?.scrollHeight??0,r=e?.clientHeight??0,i=r<t,l=window.getComputedStyle(e).getPropertyValue("line-height"),n=parseInt(l,10)||1,o=Math.round((t??0)/n),p=void 0!==w&&w<o,u=s()?p:i;e.style.maxHeight=M(n),w&&u?y(()=>!0):y(()=>!1)},100):e.style.maxHeight="none"},[x,w,H?.description,H?.descriptionHtml,G,M,g,y]),{ref:a,open:h,isShowViewMore:d,handleToggleShowMore:P,mode:D,redirectProductShopifyLink:C}};export{useGpDescription};
+import{useRef as e,useState as t,useCallback as r,useEffect as i}from"react";import{useProduct as l,useCurrentDevice as o,getResponsiveValueByScreen as n,useProductShopifyEditLink as m,useEditorMode as p,isSafari as s}from"@gem-sdk/core";let useGpDescription=c=>{let u=e(null),[a,h]=t(!1),[g,d]=t(!1),H=l(),y=o(),x=n(c?.hasLineClamp,y),f=n(c?.lineClamp,y),{redirectProductShopifyLink:C}=m(),w=p(),D=r(()=>`calc(${f} * 1lh)`,[f]),G=r(e=>x&&f&&e||"auto",[x,f]),k=r(()=>{u.current&&(u.current.style.maxHeight=a?D():"none",h(e=>!e))},[a,D]);return i(()=>{G(D())},[c?.typo?.custom,G,D]),i(()=>{let e=u.current;if(h(!1),!e)return;let t=x&&H?.descriptionHtml;t?setTimeout(()=>{let t=e?.scrollHeight??0,r=e?.clientHeight??0,i=r<t,l=window.getComputedStyle(e).getPropertyValue("line-height"),o=parseInt(l,10)||1,n=Math.round((t??0)/o),m=void 0!==f&&f<n,p=s()?m:i;e.style.maxHeight=D(),f&&p?d(()=>!0):d(()=>!1)},100):e.style.maxHeight="none"},[x,f,H?.descriptionHtml,D]),{ref:u,open:a,isShowViewMore:g,handleToggleShowMore:k,mode:w,redirectProductShopifyLink:C}};export{useGpDescription};

package/dist/esm/video/common/helpers.js

@@ -1 +1 @@
-import{getResponsiveValueByScreen as e}from"@gem-sdk/core";let getAspectRatioSettings=(t,o)=>{let i={desktop:t?.desktop?.width,tablet:t?.tablet?.width,mobile:t?.mobile?.width},s={desktop:t?.desktop?.height,tablet:t?.tablet?.height,mobile:t?.mobile?.height},l={desktop:o?.desktop==="custom"?`${e(i,"desktop")}/${e(s,"desktop")}`:o?.desktop==="cover"?"unset":o?.desktop,tablet:o?.tablet==="custom"?`${e(i,"tablet")}/${e(s,"tablet")}`:o?.tablet==="cover"?"unset":o?.tablet,mobile:o?.mobile==="custom"?`${e(i,"mobile")}/${e(s,"mobile")}`:o?.mobile==="cover"?"unset":o?.mobile};return l},listSourceVideoSupport=[".mp4",".mov"],getYoutubeParams=e=>{let{id:t,params:o,muted:i,webp:s,controls:l,adNetwork:m,autoplay:a,lazy:p}=e,d=encodeURIComponent(t),u="hqdefault",r=`${o}`||"",b=i?"&mute=1":"",n=s?"webp":"jpg",c=s?"vi_webp":"vi",g=e.thumbnail||`https://i.ytimg.com/${c}/${d}/${u}.${n}`,$=e.noCookie?"https://www.youtube-nocookie.com":"https://www.youtube.com",h=`${$}/embed/${d}?autoplay=${!!p||a}&state=1${b}${r}&controls=${l?1:0}`,v=m||!1;return{videoId:d,posterImp:u,paramsImp:r,mutedImp:b,format:n,vi:c,posterUrl:g,ytUrl:$,iframeSrc:h,adNetworkImp:v}},getVimeoParams=e=>{let{id:t,autoplay:o,muted:i,controls:s,loop:l,lazy:m}=e,a=encodeURIComponent(t),p=`?&autoplay=${m?1:o?1:0}&muted=${i?1:0}&loop=${l?1:0}&controls=${s}&autopause=false`,d=`https://player.vimeo.com/video/${a}${p}`;return{videoId:a,params:p,iframeSrc:d}},makeStyleResponsiveRatio=(e,t)=>({[`--${e}`]:t?.desktop,[`--${e}-tablet`]:t?.tablet,[`--${e}-mobile`]:t?.mobile}),fallbackImageVideoUrl="https://cdn.shopify.com/s/files/1/0703/5214/2562/files/gempages_518090459516502570-3d3a4631-1d7d-4a2f-9ef0-9bbe7220e02d.jpg",youtubeVideoRegex=/(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?:[^/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=|shorts\/)|youtu\.be\/)([^"&?/\s]{11})/i,vimeoVideoRegex=/^(?:http:\/\/|https:\/\/)vimeo\.com\/[\w/]+(?:\?.*)?$/im,getYoutubeVideoId=e=>{let t=e.match(youtubeVideoRegex);return t?.[1]??void 0},getVimeoVideoId=e=>{let t=/https?:\/\/(?:www\.|player\.)?vimeo.com\/(?:channels\/(?:\w+\/)?|groups\/([^/]*)\/videos\/|album\/(\d+)\/video\/|video\/)?(\d+)(?:$|\/|\?)/,o=e.match(t);return o?.[3]},parseTimeVideo=e=>{let t=e.split(":",2);return t.length<=1?parseInt(t[0]||"0"):60*parseInt(t[0]||"0")+parseInt(t[1]||"0")},covertStrParamsToObj=e=>{let t=e.split("&");return t.shift(),t.reduce((e,t)=>{let[o,i]=t.split("=");return"loop"!==o?{...e,[o]:i}:e},{})},isSettingLoop=e=>e.includes("loop=1");export{covertStrParamsToObj,fallbackImageVideoUrl,getAspectRatioSettings,getVimeoParams,getVimeoVideoId,getYoutubeParams,getYoutubeVideoId,isSettingLoop,listSourceVideoSupport,makeStyleResponsiveRatio,parseTimeVideo,vimeoVideoRegex,youtubeVideoRegex};
+import{getResponsiveValueByScreen as e}from"@gem-sdk/core";let getAspectRatioSettings=(t,o)=>{let i={desktop:t?.desktop?.width,tablet:t?.tablet?.width,mobile:t?.mobile?.width},s={desktop:t?.desktop?.height,tablet:t?.tablet?.height,mobile:t?.mobile?.height},l={desktop:o?.desktop==="custom"?`${e(i,"desktop")}/${e(s,"desktop")}`:o?.desktop==="cover"?"unset":o?.desktop,tablet:o?.tablet==="custom"?`${e(i,"tablet")}/${e(s,"tablet")}`:o?.tablet==="cover"?"unset":o?.tablet,mobile:o?.mobile==="custom"?`${e(i,"mobile")}/${e(s,"mobile")}`:o?.mobile==="cover"?"unset":o?.mobile};return l},getYoutubeParams=e=>{let{id:t,params:o,muted:i,webp:s,controls:l,adNetwork:a,autoplay:m,lazy:p}=e,d=encodeURIComponent(t),u="hqdefault",b=`${o}`||"",r=i?"&mute=1":"",n=s?"webp":"jpg",c=s?"vi_webp":"vi",g=e.thumbnail||`https://i.ytimg.com/${c}/${d}/${u}.${n}`,$=e.noCookie?"https://www.youtube-nocookie.com":"https://www.youtube.com",h=`${$}/embed/${d}?autoplay=${!!p||m}&state=1${r}${b}&controls=${l?1:0}`,v=a||!1;return{videoId:d,posterImp:u,paramsImp:b,mutedImp:r,format:n,vi:c,posterUrl:g,ytUrl:$,iframeSrc:h,adNetworkImp:v}},getVimeoParams=e=>{let{id:t,autoplay:o,muted:i,controls:s,loop:l,lazy:a}=e,m=encodeURIComponent(t),p=`?&autoplay=${a?1:o?1:0}&muted=${i?1:0}&loop=${l?1:0}&controls=${s}&autopause=false`,d=`https://player.vimeo.com/video/${m}${p}`;return{videoId:m,params:p,iframeSrc:d}},makeStyleResponsiveRatio=(e,t)=>({[`--${e}`]:t?.desktop,[`--${e}-tablet`]:t?.tablet,[`--${e}-mobile`]:t?.mobile}),fallbackImageVideoUrl="https://cdn.shopify.com/s/files/1/0703/5214/2562/files/gempages_518090459516502570-3d3a4631-1d7d-4a2f-9ef0-9bbe7220e02d.jpg",youtubeVideoRegex=/(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?:[^/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=|shorts\/)|youtu\.be\/)([^"&?/\s]{11})/i,vimeoVideoRegex=/^(?:http:\/\/|https:\/\/)vimeo\.com\/[\w/]+(?:\?.*)?$/im,getYoutubeVideoId=e=>{let t=e.match(youtubeVideoRegex);return t?.[1]??void 0},getVimeoVideoId=e=>{let t=/https?:\/\/(?:www\.|player\.)?vimeo.com\/(?:channels\/(?:\w+\/)?|groups\/([^/]*)\/videos\/|album\/(\d+)\/video\/|video\/)?(\d+)(?:$|\/|\?)/,o=e.match(t);return o?.[3]},parseTimeVideo=e=>{let t=e.split(":",2);return t.length<=1?parseInt(t[0]||"0"):60*parseInt(t[0]||"0")+parseInt(t[1]||"0")},covertStrParamsToObj=e=>{let t=e.split("&");return t.shift(),t.reduce((e,t)=>{let[o,i]=t.split("=");return"loop"!==o?{...e,[o]:i}:e},{})},isSettingLoop=e=>e.includes("loop=1");export{covertStrParamsToObj,fallbackImageVideoUrl,getAspectRatioSettings,getVimeoParams,getVimeoVideoId,getYoutubeParams,getYoutubeVideoId,isSettingLoop,makeStyleResponsiveRatio,parseTimeVideo,vimeoVideoRegex,youtubeVideoRegex};

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

@@ -1,2 +1,2 @@
 'use client';
-import{jsxs as e,Fragment as o,jsx as t}from"react/jsx-runtime";import{useEditorMode as s}from"@gem-sdk/core";import r from"../../image/components/NextImage.js";import{useLiteHtml5Embed as m}from"../hooks/useLiteHtml5Embed.js";import{listSourceVideoSupport as i}from"../common/helpers.js";import{createAttr as l,createClass as a,createStyle as c}from"@gem-sdk/system";import{getWrapThumbnailClasses as n,getButtonThumbnailClasses as d,getImageThumbnailClasses as p,getVideoYoutubeClasses as y}from"../common/classes.js";import{getPreloadImageStyle as f}from"../common/styles.js";import{getHtml5Attr as h}from"../common/attrs.js";let HTML5Embed=u=>{let b=s(),g="edit"!==b,{thumbnail:v,muted:j,autoplay:x,loop:L,controls:N,src:k,style:C,title:T,className:w,lazy:E,poster:H}=u,{playVideoAndTurnOffThumbnail:I,videoRef:M,showThumbnail:P}=m(x,j,k),V=!g&&x&&j&&!!v,z=!E&&u.isVideoComponent&&g,A=i.some(e=>k?.endsWith(e)),B=!v||!P,D=z&&!g?k:void 0,S=l({...h({title:T,autoplay:x,preloadThumbnail:V,offLazyLoad:z,src:k,thumbnail:v})}),W=a({...n(B)}),Z=c({...f()}),q=a({...d()}),F=a({...p()}),G=a({...y(w,z)}),J=()=>V?t(r,{src:v,alt:T,priority:!0,style:Z}):"",K=()=>e("div",{role:"presentation",style:C,className:W,onClick:I,children:[t(r,{id:"video-thumbnail",src:v??"",alt:H?.altText,title:H?.imageTitle,priority:H?.preload&&g,className:F,isDisableAspectStyle:!0,enableLazyLoadImage:!0}),t("button",{type:"button",className:q,"aria-label":"Play",children:t("svg",{className:"gp-w-5 gp-text-white",viewBox:"0 0 24 24",children:t("path",{fill:"currentColor",d:"M5 5.274c0-1.707 1.826-2.792 3.325-1.977l12.362 6.726c1.566.853 1.566 3.101 0 3.953L8.325 20.702C6.826 21.518 5 20.432 5 18.726V5.274Z"})})})]});return e(o,{children:[J(),t("video",{ref:M,...S,style:C,className:G,controls:N,loop:L,muted:j,autoPlay:x,playsInline:!0,src:A?void 0:D,children:A&&t("source",{"data-src":k,src:k,type:"video/mp4"})}),!B&&K()]})};export{HTML5Embed as default};
+import{jsxs as e,Fragment as t,jsx as o}from"react/jsx-runtime";import{useEditorMode as s}from"@gem-sdk/core";import m from"../../image/components/NextImage.js";import{useLiteHtml5Embed as r}from"../hooks/useLiteHtml5Embed.js";import{createAttr as l,createClass as i,createStyle as a}from"@gem-sdk/system";import{getWrapThumbnailClasses as c,getButtonThumbnailClasses as n,getImageThumbnailClasses as p,getVideoYoutubeClasses as d}from"../common/classes.js";import{getPreloadImageStyle as y}from"../common/styles.js";import{getHtml5Attr as f}from"../common/attrs.js";let HTML5Embed=u=>{let b=s(),g="edit"!==b,{thumbnail:h,muted:j,autoplay:v,loop:x,controls:L,src:N,style:k,title:C,className:T,lazy:w,poster:E}=u,{playVideoAndTurnOffThumbnail:H,videoRef:I,showThumbnail:M}=r(v,j,N),P=!g&&v&&j&&!!h,V=!w&&u.isVideoComponent&&g,z=!h||!M,A=V&&!g?N:void 0,B=l({...f({title:C,autoplay:v,preloadThumbnail:P,offLazyLoad:V,src:N,thumbnail:h})}),D=i({...c(z)}),S=a({...y()}),Z=i({...n()}),q=i({...p()}),F=i({...d(T,V)}),G=()=>P?o(m,{src:h,alt:C,priority:!0,style:S}):"",J=()=>e("div",{role:"presentation",style:k,className:D,onClick:H,children:[o(m,{id:"video-thumbnail",src:h??"",alt:E?.altText,title:E?.imageTitle,priority:E?.preload&&g,className:q,isDisableAspectStyle:!0,enableLazyLoadImage:!0}),o("button",{type:"button",className:Z,"aria-label":"Play",children:o("svg",{className:"gp-w-5 gp-text-white",viewBox:"0 0 24 24",children:o("path",{fill:"currentColor",d:"M5 5.274c0-1.707 1.826-2.792 3.325-1.977l12.362 6.726c1.566.853 1.566 3.101 0 3.953L8.325 20.702C6.826 21.518 5 20.432 5 18.726V5.274Z"})})})]});return e(t,{children:[G(),o("video",{ref:I,...B,style:k,className:F,controls:L,loop:x,muted:j,autoPlay:v,playsInline:!0,src:A}),!z&&J()]})};export{HTML5Embed as default};

package/dist/esm/video/components/HTML5Embed.liquid.js

@@ -1,5 +1,5 @@
-import{template as e,RenderIf as t,isLocalEnv as o,baseAssetURL as s}from"@gem-sdk/core";import i from"../../image/components/NextImage.liquid.js";import{getSettingPreloadData as r}from"../../helpers.js";import{createAttr as l,createClass as a,createStyle as d,If as n}from"@gem-sdk/system";import{getWrapThumbnailClasses as m,getButtonThumbnailClasses as c,getImageThumbnailClasses as u,getVideoYoutubeClasses as p}from"../common/classes.js";import{getPreloadImageStyle as v}from"../common/styles.js";import{getHtml5Attr as y}from"../common/attrs.js";let HTML5Embed=$=>{let g=`gp-video-${$.uid}`,{thumbnail:f,muted:h,autoplay:L,loop:b,controls:E,src:A,style:w,title:T,className:P,lazy:j,poster:k,wrapperStyles:I}=$,S=L&&h&&!!f,V=!j&&$.isVideoComponent,x=A.endsWith(".mp4"),C=!f||L&&h,M=V?A:void 0,B=l({...y({videoId:g,title:T,autoplay:L,preloadThumbnail:S,offLazyLoad:V,src:A,thumbnail:f})}),N=a({...m(C)}),z=d({...v()}),D=a({...c()}),G=a({...u()}),H=a({...p(P,V)}),O=()=>S?e`${i({src:f,alt:T,priority:k?.preload,enableLazyLoadImage:!0,style:z})}
-    ${n(L,`<script>
+import{template as e,RenderIf as t,isLocalEnv as o,baseAssetURL as s}from"@gem-sdk/core";import i from"../../image/components/NextImage.liquid.js";import{getSettingPreloadData as l}from"../../helpers.js";import{createAttr as r,createClass as a,createStyle as n,If as d}from"@gem-sdk/system";import{getWrapThumbnailClasses as m,getButtonThumbnailClasses as c,getImageThumbnailClasses as u,getVideoYoutubeClasses as p}from"../common/classes.js";import{getPreloadImageStyle as v}from"../common/styles.js";import{getHtml5Attr as y}from"../common/attrs.js";let HTML5Embed=g=>{let $=`gp-video-${g.uid}`,{thumbnail:f,muted:h,autoplay:L,loop:b,controls:E,src:A,style:w,title:T,className:P,lazy:j,poster:k,wrapperStyles:I}=g,S=L&&h&&!!f,V=!j&&g.isVideoComponent,x=!f||L&&h,C=V?A:void 0,M=r({...y({videoId:$,title:T,autoplay:L,preloadThumbnail:S,offLazyLoad:V,src:A,thumbnail:f})}),B=a({...m(x)}),N=n({...v()}),z=a({...c()}),D=a({...u()}),G=a({...p(P,V)}),H=()=>S?e`${i({src:f,alt:T,priority:k?.preload,enableLazyLoadImage:!0,style:N})}
+    ${d(L,`<script>
         document.addEventListener("DOMContentLoaded", (event) => {
           const eventList = ["keydown", "mousemove", "wheel", "touchmove", "touchstart", "touchend"];
           const autoLoadTimeout = setTimeout(runAutoPlayVideo, 0);
@@ -14,20 +14,20 @@ import{template as e,RenderIf as t,isLocalEnv as o,baseAssetURL as s}from"@gem-s
               });
           }
           function runAutoPlayVideo() {
-              document.getElementById('${g}').setAttribute('autoplay','true');
-              document.getElementById('${g}').setAttribute('playsinline','true');
-              document.getElementById('${g}').play();
+              document.getElementById('${$}').setAttribute('autoplay','true');
+              document.getElementById('${$}').setAttribute('playsinline','true');
+              document.getElementById('${$}').play();
           }
         });
       </script>`)}
-      `:"",_=()=>e`
+      `:"",O=()=>e`
      <div
         role="presentation"
         style="${w}"
-        class="${N}"
+        class="${B}"
         >
-           ${i({id:"video-thumbnail",src:f??"",alt:k?.altText,title:k?.imageTitle,className:G,isDisableAspectStyle:!0,priority:k?.preload,enableLazyLoadImage:!0})}
-          <button type="button" class="${D}" aria-label="Play">
+           ${i({id:"video-thumbnail",src:f??"",alt:k?.altText,title:k?.imageTitle,className:D,isDisableAspectStyle:!0,priority:k?.preload,enableLazyLoadImage:!0})}
+          <button type="button" class="${z}" aria-label="Play">
             <svg class="gp-w-5 gp-text-white" viewBox="0 0 24 24">
               <path
                 fill="currentColor"
@@ -37,22 +37,20 @@ import{template as e,RenderIf as t,isLocalEnv as o,baseAssetURL as s}from"@gem-s
           </button>
         </div>
   `;return e`
-  <gp-lite-html5-embed is-check-loaded="${$.isCheckLoaded??!1}" style="${I}">
-    ${O()}
+  <gp-lite-html5-embed is-check-loaded="${g.isCheckLoaded??!1}" style="${I}">
+    ${H()}
     <video
-    ${{...B}}
+    ${{...M}}
       style="${w}"
-      class="${H}"
+      class="${G}"
       ${E?"controls":void 0}
       ${b?"loop":void 0}
       ${h?"muted":void 0}
       ${L?"autoplay":void 0}
       playsinline
-      ${x?void 0:`src="${M}"`}
-    >
-      ${n(x,`<source data-src="${A}" src="${M}" type="video/mp4"></source>`)}
-    </video>
-    ${n(!C,_())}
+      ${C?`src="${C}`:""}
+    ></video>
+    ${d(!x,O())}
   </gp-lite-html5-embed>
-        ${t(o,`<script ${r('class="gps-link" delay',"src")}="{{ 'gp-lite-html5-embed-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${r('class="gps-link" delay',"src")}="${s}/assets-v2/gp-lite-html5-embed-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
+        ${t(o,`<script ${l('class="gps-link" delay',"src")}="{{ 'gp-lite-html5-embed-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${l('class="gps-link" delay',"src")}="${s}/assets-v2/gp-lite-html5-embed-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
   `};export{HTML5Embed as default};

package/package.json

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