@gem-sdk/components 3.0.0 → 3.0.1-staging.1136

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:a,autoplay:m,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||m}&state=1${b}${r}&controls=${l?1:0}`,v=a||!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: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,o)=>({[`--${e}`]:o&&t?.desktop==="auto"?o:t?.desktop,[`--${e}-tablet`]:o&&t?.tablet==="auto"?o:t?.tablet,[`--${e}-mobile`]:o&&t?.mobile==="auto"?o: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},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};

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

@@ -1 +1 @@
-import{makeStyleResponsive as e}from"@gem-sdk/core";import{makeStyleResponsiveRatio as t}from"./helpers.js";function filterTruthyStyles(e){return Object.fromEntries(Object.entries(e||{}).filter(([,e])=>!!e))}let getStyle=(t,l)=>{let{aspectRatio:r}=t||{},y={...l,...e("aspect",r)};return filterTruthyStyles(y)},getYoutubeStyle=t=>{let l={...e("aspect",t)};return filterTruthyStyles(l)},getVimeoStyle=t=>{let l={...e("aspect",t)};return filterTruthyStyles(l)},getHtml5Style=t=>{let l={...e("aspect",t)};return filterTruthyStyles(l)},getFallBackImageStyle=t=>{let l={...e("aspect",t)};return filterTruthyStyles(l)},getPreloadImageStyle=()=>{let e={"--op":0,"--z":-1,display:"none",width:"100%",height:"auto"};return filterTruthyStyles(e)},getIframeVimeoStyle=t=>{let l={...e("aspect",t),position:"absolute",height:"100%",width:"100%"};return filterTruthyStyles(l)},getArticleVimeoStyle=(e,l,r)=>{let y={backgroundImage:`url(${l})`,...t("aspect",e,r)};return filterTruthyStyles(y)},getIframeYoutubeStyle=e=>{let t={...e,position:"absolute",height:"100%",width:"100%"};return filterTruthyStyles(t)},getArticleYoutubeStyle=(e,t)=>{let l={...e};return t&&(l={"background-image":`url(${t})`,...l}),filterTruthyStyles(l)};export{getArticleVimeoStyle,getArticleYoutubeStyle,getFallBackImageStyle,getHtml5Style,getIframeVimeoStyle,getIframeYoutubeStyle,getPreloadImageStyle,getStyle,getVimeoStyle,getYoutubeStyle};
+import{makeStyleResponsive as e}from"@gem-sdk/core";import{makeStyleResponsiveRatio as t}from"./helpers.js";function filterTruthyStyles(e){return Object.fromEntries(Object.entries(e||{}).filter(([,e])=>!!e))}let getStyle=(t,l)=>{let{aspectRatio:r}=t||{},y={...l,...e("aspect",r)};return filterTruthyStyles(y)},getYoutubeStyle=t=>{let l={...e("aspect",t)};return filterTruthyStyles(l)},getVimeoStyle=t=>{let l={...e("aspect",t)};return filterTruthyStyles(l)},getHtml5Style=t=>{let l={...e("aspect",t)};return filterTruthyStyles(l)},getFallBackImageStyle=t=>{let l={...e("aspect",t)};return filterTruthyStyles(l)},getPreloadImageStyle=()=>{let e={"--op":0,"--z":-1,display:"none",width:"100%",height:"auto"};return filterTruthyStyles(e)},getIframeVimeoStyle=t=>{let l={...e("aspect",t),position:"absolute",height:"100%",width:"100%"};return filterTruthyStyles(l)},getArticleVimeoStyle=(e,l)=>{let r={backgroundImage:`url(${l})`,...t("aspect",e)};return filterTruthyStyles(r)},getIframeYoutubeStyle=e=>{let t={...e,position:"absolute",height:"100%",width:"100%"};return filterTruthyStyles(t)},getArticleYoutubeStyle=(e,t)=>{let l={...e};return t&&(l={"background-image":`url(${t})`,...l}),filterTruthyStyles(l)};export{getArticleVimeoStyle,getArticleYoutubeStyle,getFallBackImageStyle,getHtml5Style,getIframeVimeoStyle,getIframeYoutubeStyle,getPreloadImageStyle,getStyle,getVimeoStyle,getYoutubeStyle};

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 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:b,autoplay:h,loop:L,controls:E,src:A,style:w,title:T,className:P,lazy:j,poster:I}=g,S=h&&b&&!!f,V=!j&&g.isVideoComponent,k=A.endsWith(".mp4"),x=!f||h&&b,M=V?A:void 0,B=l({...y({videoId:$,title:T,autoplay:h,preloadThumbnail:S,offLazyLoad:V,src:A,thumbnail:f})}),C=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:I?.preload,enableLazyLoadImage:!0,style:N})}
-    ${d(h,`<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 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}=$,I=L&&h&&!!f,S=!j&&$.isVideoComponent,V=A.endsWith(".mp4"),x=!f||L&&h,C=S?A:void 0,M=l({...y({videoId:g,title:T,autoplay:L,preloadThumbnail:I,offLazyLoad:S,src:A,thumbnail:f})}),B=a({...m(x)}),N=d({...v()}),z=a({...c()}),D=a({...u()}),G=a({...p(P,S)}),H=()=>I?e`${i({src:f,alt:T,priority:k?.preload,enableLazyLoadImage:!0,style:N})}
+    ${n(L,`<script>
         document.addEventListener("DOMContentLoaded", (event) => {
           const eventList = ["keydown", "mousemove", "wheel", "touchmove", "touchstart", "touchend"];
           const autoLoadTimeout = setTimeout(runAutoPlayVideo, 0);
@@ -14,9 +14,9 @@ import{template as e,RenderIf as t,isLocalEnv as o,baseAssetURL as s}from"@gem-s
               });
           }
           function runAutoPlayVideo() {
-              document.getElementById('${$}').setAttribute('autoplay','true');
-              document.getElementById('${$}').setAttribute('playsinline','true');
-              document.getElementById('${$}').play();
+              document.getElementById('${g}').setAttribute('autoplay','true');
+              document.getElementById('${g}').setAttribute('playsinline','true');
+              document.getElementById('${g}').play();
           }
         });
       </script>`)}
@@ -24,9 +24,9 @@ import{template as e,RenderIf as t,isLocalEnv as o,baseAssetURL as s}from"@gem-s
      <div
         role="presentation"
         style="${w}"
-        class="${C}"
+        class="${B}"
         >
-           ${i({id:"video-thumbnail",src:f??"",alt:I?.altText,title:I?.imageTitle,className:D,isDisableAspectStyle:!0,priority:I?.preload,enableLazyLoadImage:!0})}
+           ${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
@@ -37,22 +37,22 @@ import{template as e,RenderIf as t,isLocalEnv as o,baseAssetURL as s}from"@gem-s
           </button>
         </div>
   `;return e`
-  <gp-lite-html5-embed>
+  <gp-lite-html5-embed is-check-loaded="${$.isCheckLoaded??!1}">
     ${H()}
     <video
-    ${{...B}}
+    ${{...M}}
       style="${w}"
       class="${G}"
       ${E?"controls":void 0}
-      ${L?"loop":void 0}
-      ${b?"muted":void 0}
-      ${h?"autoplay":void 0}
+      ${b?"loop":void 0}
+      ${h?"muted":void 0}
+      ${L?"autoplay":void 0}
       playsinline
-      src="${M}"
+      src="${C}"
     >
-      ${d(k,`<source data-src="${A}" src="${M}" type="video/mp4"></source>`)}
+      ${n(V,`<source data-src="${A}" src="${C}" type="video/mp4"></source>`)}
     </video>
-    ${d(!x,O())}
+    ${n(!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>`)}
   `};export{HTML5Embed as default};

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

@@ -1,2 +1,2 @@
 'use client';
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useLiteVimeoEmbed as l}from"../hooks/useLiteVimeoEmbed.js";import{createStyle as m,createClass as o}from"@gem-sdk/system";import{getArticleVimeoClasses as r,getImageVimeoClasses as i,getButtonVimeoClasses as a,getIframeVimeoClasses as s}from"../common/classes.js";import{getIframeVimeoStyle as c,getArticleVimeoStyle as n}from"../common/styles.js";import{getVimeoParams as p}from"../common/helpers.js";import d from"../../image/components/NextImage.js";let LiteVimeoEmbed=u=>{let{title:f,lazy:y,aspectRatio:h,poster:b}=u,{iframeSrc:g,videoId:j}=p(u),{addIframe:x,thumbnail:N,iframe:w,originRatio:k}=l(y,j),C=u.thumbnail||N,L=m({...c(h)}),V=m({...n(h,C,k)}),E=o({...r(C,h)}),v=o({...i(w)}),B=o({...a(w)}),S=o({...s()});return e("article",{"aria-hidden":!0,className:E,"data-title":f,style:V,onClick:x,children:[t(d,{src:C,alt:b?.altText,title:b?.imageTitle,className:v,isDisableAspectStyle:!0,onClick:x}),t("button",{type:"button",className:B,"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"})})}),w&&t("iframe",{style:L,title:f,frameBorder:"0",allow:"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture",allowFullScreen:!0,src:g,className:S})]})};export{LiteVimeoEmbed as default};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useLiteVimeoEmbed as l}from"../hooks/useLiteVimeoEmbed.js";import{createStyle as m,createClass as o}from"@gem-sdk/system";import{getArticleVimeoClasses as r,getImageVimeoClasses as i,getButtonVimeoClasses as a,getIframeVimeoClasses as s}from"../common/classes.js";import{getIframeVimeoStyle as c,getArticleVimeoStyle as n}from"../common/styles.js";import{getVimeoParams as p}from"../common/helpers.js";import d from"../../image/components/NextImage.js";let LiteVimeoEmbed=u=>{let{title:f,lazy:y,aspectRatio:h,poster:b}=u,{iframeSrc:g,videoId:j}=p(u),{addIframe:x,thumbnail:N,iframe:w}=l(y,j),k=u.thumbnail||N,C=m({...c(h)}),L=m({...n(h,k)}),V=o({...r(k,h)}),E=o({...i(w)}),v=o({...a(w)}),B=o({...s()});return e("article",{"aria-hidden":!0,className:V,"data-title":f,style:L,onClick:x,children:[t(d,{src:k,alt:b?.altText,title:b?.imageTitle,className:E,isDisableAspectStyle:!0,onClick:x}),t("button",{type:"button",className:v,"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"})})}),w&&t("iframe",{style:C,title:f,frameBorder:"0",allow:"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture",allowFullScreen:!0,src:g,className:B})]})};export{LiteVimeoEmbed as default};

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

@@ -1,12 +1,12 @@
-import{template as e,RenderIf as t,isLocalEnv as s,baseAssetURL as l}from"@gem-sdk/core";import{getSettingPreloadData as i}from"../../helpers.js";import{createStateOrContext as r,createStyle as a,createClass as m,If as o}from"@gem-sdk/system";import{getArticleVimeoClasses as p,getImageVimeoClasses as c,getButtonVimeoClasses as d,getIframeVimeoClasses as f}from"../common/classes.js";import{getIframeVimeoStyle as n,getArticleVimeoStyle as g}from"../common/styles.js";import{getVimeoParams as y}from"../common/helpers.js";import $ from"../../image/components/NextImage.liquid.js";let LiteVimeoEmbed=b=>{let{title:u,id:v,lazy:h,aspectRatio:S,autoplay:j,muted:E,thumbnailLink:w,poster:x}=b,{iframeSrc:L}=y(b),k=!h,I=b.thumbnail,N=r({id:v,thumbnail:w,lazy:h,iframeSrc:L,title:u,autoplay:j,muted:E,style:b?.vimeoStyleIframe||""}),V=a({...n(S)}),A=a({...g(S,"")}),T=m({...p(I,S)}),C=m({...c(k)}),G=m({...d(k)}),M=m({...f()});return e`
+import{template as e,RenderIf as t,isLocalEnv as s,baseAssetURL as i}from"@gem-sdk/core";import{getSettingPreloadData as l}from"../../helpers.js";import{createStateOrContext as r,createStyle as a,createClass as m,If as o}from"@gem-sdk/system";import{getArticleVimeoClasses as p,getImageVimeoClasses as c,getButtonVimeoClasses as d,getIframeVimeoClasses as g}from"../common/classes.js";import{getIframeVimeoStyle as f,getArticleVimeoStyle as n}from"../common/styles.js";import{getVimeoParams as y}from"../common/helpers.js";import $ from"../../image/components/NextImage.liquid.js";let LiteVimeoEmbed=b=>{let{title:h,id:u,lazy:v,aspectRatio:S,autoplay:j,muted:w,thumbnailLink:E,poster:x}=b,{iframeSrc:L}=y(b),k=!v,I=b.thumbnail,N=r({id:u,thumbnail:E,lazy:v,iframeSrc:L,title:h,autoplay:j,muted:w,style:b?.vimeoStyleIframe||""}),V=a({...f(S)}),A=a({...n(S,"")}),T=m({...p(I,S)}),C=m({...c(k)}),G=m({...d(k)}),M=m({...g()});return e`
     <gp-lite-vimeo-embed gp-data='${JSON.stringify(N)}'>
       <article
         aria-hidden
         class="${T}"
-        data-title="${u}"
+        data-title="${h}"
         style="${A}"
       >
-      ${$({src:I,alt:x?.altText,title:x?.imageTitle,className:C,isDisableAspectStyle:!0,enableLazyLoadImage:!0,priority:x?.preload})}
+      ${$({src:I,alt:x?.altText,title:x?.imageTitle,className:C,isDisableAspectStyle:!0,enableLazyLoadImage:!0,priority:x?.preload,height:x?.height,width:x?.width})}
          ${o(!k,e`
           <button type="button" class="${G}" aria-label="Play">
           <svg class="gp-w-5 gp-text-white" viewBox="0 0 24 24">
@@ -19,7 +19,7 @@ import{template as e,RenderIf as t,isLocalEnv as s,baseAssetURL as l}from"@gem-s
         ${o(k,e`
           <iframe
             style="${V}"
-            title="${u}"
+            title="${h}"
             frameborder="0"
             allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
             allowfullscreen
@@ -28,5 +28,5 @@ import{template as e,RenderIf as t,isLocalEnv as s,baseAssetURL as l}from"@gem-s
           ></iframe>`)}
       </article>
     </gp-lite-vimeo-embed>
-    ${t(s,`<script ${i('class="gps-link" delay',"src")}="{{ 'gp-lite-vimeo-embed-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${i('class="gps-link" delay',"src")}="${l}/assets-v2/gp-lite-vimeo-embed-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
+    ${t(s,`<script ${l('class="gps-link" delay',"src")}="{{ 'gp-lite-vimeo-embed-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${l('class="gps-link" delay',"src")}="${i}/assets-v2/gp-lite-vimeo-embed-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
   `};export{LiteVimeoEmbed as default};

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

@@ -1,4 +1,4 @@
-import{template as e,RenderIf as t,isLocalEnv as s,baseAssetURL as l}from"@gem-sdk/core";import r from"../../image/components/NextImage.liquid.js";import{getSettingPreloadData as a}from"../../helpers.js";import{createStateOrContext as i,createClass as o,createStyle as m,If as p}from"@gem-sdk/system";import{getButtonYoutubeClasses as d,getImageYoutubeClasses as c,getArticleYoutubeClasses as u,getIframeYoutubeClasses as f}from"../common/classes.js";import{getIframeYoutubeStyle as y,getArticleYoutubeStyle as b}from"../common/styles.js";import{getYoutubeParams as g}from"../common/helpers.js";let LiteYouTubeEmbed=n=>{let{style:$,iframeClass:h,wrapperClass:v,title:S,poster:j}=n,E=`gp-video-${n.uid}`,{posterUrl:w,iframeSrc:z}=g(n),C=j?.preload,T=i({lazy:n.lazy,style:$,title:S,iframeSrc:z}),k=!n.lazy,x=o({...d(k)}),L=o({...c()}),N=o({...u(C||!1,v)}),A=o({...f(h)}),I=m({...y($)}),M=m({...b($,w)}),G=()=>e`
+import{template as e,RenderIf as t,isLocalEnv as s,baseAssetURL as a}from"@gem-sdk/core";import l from"../../image/components/NextImage.liquid.js";import{getSettingPreloadData as r}from"../../helpers.js";import{createStateOrContext as i,createClass as o,createStyle as p,If as m}from"@gem-sdk/system";import{getButtonYoutubeClasses as d,getImageYoutubeClasses as c,getArticleYoutubeClasses as u,getIframeYoutubeClasses as f}from"../common/classes.js";import{getIframeYoutubeStyle as y,getArticleYoutubeStyle as b}from"../common/styles.js";import{getYoutubeParams as g}from"../common/helpers.js";let LiteYouTubeEmbed=n=>{let{style:$,iframeClass:h,wrapperClass:v,title:S,poster:j}=n,z=`gp-video-${n.uid}`,{posterUrl:E,iframeSrc:w}=g(n),C=j?.preload,L=i({lazy:n.lazy,style:$,title:S,iframeSrc:w}),N=!n.lazy,T=o({...d(N)}),k=o({...c()}),x=o({...u(C||!1,v)}),A=o({...f(h)}),I=p({...y($)}),M=p({...b($,E)}),G=()=>e`
     <iframe
       id="player-wrapper-${n.uid}"
       class="${A}"
@@ -7,18 +7,18 @@ import{template as e,RenderIf as t,isLocalEnv as s,baseAssetURL as l}from"@gem-s
       frameborder="0"
       allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
       allowfullscreen
-      src="${z}"
+      src="${w}"
     ></iframe>
   `;return e`
-    <gp-lite-youtube-embed gp-data='${JSON.stringify(T)}'>
+    <gp-lite-youtube-embed gp-data='${JSON.stringify(L)}'>
       <article
         aria-hidden
-        class="${N}"
+        class="${x}"
         data-title="${S}"
         style="${M}"
       >
-        ${r({id:E,src:w,alt:j?.altText,title:j?.imageTitle,priority:j?.preload,enableLazyLoadImage:!0,className:L,isDisableAspectStyle:!0})}
-        <button type="button" aria-label="Play" class="${x}">
+        ${l({id:z,src:E,alt:j?.altText,title:j?.imageTitle,priority:j?.preload,enableLazyLoadImage:!0,className:k,isDisableAspectStyle:!0,isNotLazyload:j?.preload})}
+        <button type="button" aria-label="Play" class="${T}">
           <svg height="100%" version="1.1" viewBox="0 0 68 48" width="100%">
             <path
               d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z"
@@ -27,8 +27,8 @@ import{template as e,RenderIf as t,isLocalEnv as s,baseAssetURL as l}from"@gem-s
             <path d="M 45,24 27,14 27,34" fill="#fff"></path>
           </svg>
         </button>
-        ${p(k,G())}
+        ${m(N,G())}
       </article>
     </gp-lite-youtube-embed>
-    ${t(s,`<script ${a('class="gps-link" delay',"src")}="{{ 'gp-lite-youtube-embed-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${a('class="gps-link" delay',"src")}="${l}/assets-v2/gp-lite-youtube-embed-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
+    ${t(s,`<script ${r('class="gps-link" delay',"src")}="{{ 'gp-lite-youtube-embed-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${r('class="gps-link" delay',"src")}="${a}/assets-v2/gp-lite-youtube-embed-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
   `};export{LiteYouTubeEmbed as default};

package/dist/esm/video/hooks/useLiteVimeoEmbed.js

@@ -1 +1 @@
-import{useState as e,useEffect as t}from"react";let useLiteVimeoEmbed=(i,o)=>{let[h,m]=e(),[d,r]=e(!i),[s,a]=e();t(()=>{fetch(`https://vimeo.com/api/v2/video/${o}.json`).then(e=>e.json()).then(([e])=>{e?.width&&e?.height&&a((e?.width/e?.height).toFixed(2)),m(e?.thumbnail_large)})},[o]);let l=()=>{d||r(!0)};return{addIframe:l,thumbnail:h,iframe:d,originRatio:s}};export{useLiteVimeoEmbed as default,useLiteVimeoEmbed};
+import{useState as e,useEffect as t}from"react";let useLiteVimeoEmbed=(i,m)=>{let[o,r]=e(),[s,a]=e(!i);t(()=>{fetch(`https://vimeo.com/api/v2/video/${m}.json`).then(e=>e.json()).then(([e])=>{r(e?.thumbnail_large)})},[m]);let l=()=>{s||a(!0)};return{addIframe:l,thumbnail:o,iframe:s}};export{useLiteVimeoEmbed as default,useLiteVimeoEmbed};

package/dist/types/index.d.ts

@@ -3622,6 +3622,7 @@ type OriginalSettingProps$2 = {
         productSrc?: ProductSource;
         productIds?: string[];
         collectionId?: string;
+        collectionHandle?: string;
         productHandles?: string[];
         numOfSelectedProducts?: number;
         relatedTag?: RelatedCondition[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/components",
-  "version": "3.0.0",
+  "version": "3.0.1-staging.1136",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",
@@ -25,9 +25,9 @@
     "scan-all-text": "rollup -c ./scripts/rollup.config.settings.mjs && node ./scripts/scan-all-text && node ./scripts/scan-all-text"
   },
   "devDependencies": {
-    "@gem-sdk/core": "3.0.0",
-    "@gem-sdk/styles": "3.0.0",
-    "@gem-sdk/system": "3.0.0",
+    "@gem-sdk/core": "2.0.0-staging.1120",
+    "@gem-sdk/styles": "2.0.0-staging.1077",
+    "@gem-sdk/system": "2.0.0-staging.1077",
     "tsup": "^8.5.0",
     "@types/react-transition-group": "^4.4.12",
     "xlsx": "^0.18.5"