@gem-sdk/components 13.2.1 → 13.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +1 @@
1
- "use strict";var constant=require("../../constant.js"),helpers=require("./helpers.js"),system=require("@gem-sdk/system"),helpers$1=require("../../helpers.js"),constants=require("../constants.js");const getContainerAttrs=(e,t)=>({...e,...t&&{"data-id":t}}),getLinkWrapperAttrs=({urlData:e,imageLink:t,title:r,isLiquid:s=!1})=>{let a=s?{...e,...t?.noFollow&&{rel:"nofollow"},title:r}:{setting:e,title:r};return t?.type!=="go-to-sales-page"?t?.link?a:{}:s?{href:constant.HREF_TO_SALES_PAGE,target:"_self"}:{setting:{href:constant.HREF_TO_SALES_PAGE,target:"_self"}}},getImageLiquidAttrs=({pageContext:e,enableLazyLoadImage:t=!1})=>({...e&&{pageContext:e},...t&&{enableLazyLoadImage:t}}),getAdaptiveImageAttrs=({styles:e,setting:t,mode:r,isLiquid:s})=>{let{alt:a,srcSet:i,priority:l,qualityPercent:g,qualityType:p}=t??{},n=helpers.getAspectRatio({styles:e,setting:t}),o=()=>{helpers$1.handleClickLink(t?.imageLink,r)},c=i?.desktop?.backupFileKey?helpers.getNewBackupFileKey(i?.desktop?.backupFileKey??"",i?.desktop?.src??""):"",A=s?helpers.getImageSrc({src:i?.desktop?.src,backupFileKey:c,backupFilePath:i?.desktop?.backupFilePath,storage:i?.desktop?.storage}):i?.desktop?.src??"",u=l?{}:{"base-src":A??"","quality-type":helpers.safeStringify(p),"quality-percent":helpers.safeStringify(g)};return{pictureClass:"gp-contents",...a&&{alt:a},...i&&{srcSet:i},...l&&constants.PRIORITY_LOAD_ATTRS,...u,...e?.objectFit&&{layout:e.objectFit},onClick:o,aspectRatio:n}},getNextImageAttrs=({styles:e,setting:t})=>{let{objectFit:r}=e??{},{vw:s,alt:a,title:i,quality:l,priority:g,isNotLazyload:p,qualityType:n,qualityPercent:o}=t??{},c=helpers.getAspectRatio({styles:e,setting:t});return{...t?.image,...s&&{vw:s},...a&&{alt:a},...i&&{title:i},...l&&{quality:l},...g&&{priority:g},isNotLazyload:p,setting:{aspectRatio:c,layout:r,qualityType:n,qualityPercent:o}}},getNextImageLiquidAttrs=e=>{let{srcset:t,setting:r,storage:s,baseSrc:a,priority:i,customAttrs:l,width:g=2237,height:p=1678,isNotLazyload:n,backupFileKey:o,backupFilePath:c,srcIsLiquidCode:A,enableLazyLoadImage:u,alt:h=helpers.NEXT_IMAGE_CONFIG.DEFAULT_ALT,title:I,src:E=helpers.NEXT_IMAGE_CONFIG.DEFAULT_SRC,sizes:_=helpers.NEXT_IMAGE_CONFIG.DEFAULT_SIZES}=e,y=!n&&u&&!i,d=()=>{let e=o?helpers.getNewBackupFileKey(o??"",E):"",r=A?a:helpers.getImageSrc({src:E,backupFileKey:e,backupFilePath:c,storage:s}),l=A?E:helpers.getSrcSet(e??"",s??"THEME",E),n={sizes:"100vw",src:helpers.createBlurDataURL(g,p),...r&&!i?{"base-src":r}:{},...r?{"data-src":r}:{},...l?{"data-srcset":l}:{}},u={sizes:_,src:r??"",isNotLazyload:"true",srcset:t??"",...r&&!i?{"base-src":r}:{},...i?{loading:"eager",fetchpriority:"high"}:{loading:"lazy"}};return{"data-sizes":"auto",...y?n:u}},L=()=>{let{qualityPercent:e,qualityType:t}=r??{},s=!i&&t&&e?{"quality-type":helpers.safeStringify(t),"quality-percent":helpers.safeStringify(e)}:{"quality-type":"","quality-percent":""};return{...h&&{alt:h},...I&&{title:I},width:g,height:p,draggable:"false",...s}};return system.createAttr({...l,...L(),...d()})},getNextImageReactAttrs=e=>{let{width:t=helpers.NEXT_IMAGE_CONFIG.DEFAULT_WIDTH_PROPS,height:r=helpers.NEXT_IMAGE_CONFIG.DEFAULT_HEIGHT_PROPS,quality:s,priority:a,isNotLazyload:i,enableLazyLoadImage:l,base64:g=helpers.IMAGE_PLACEHOLDER,alt:p=helpers.NEXT_IMAGE_CONFIG.DEFAULT_ALT,title:n,src:o=helpers.NEXT_IMAGE_CONFIG.DEFAULT_SRC}=e,c=!i&&l&&!a,A=()=>{let e={loading:"lazy",placeholder:"blur",...g&&{blurDataURL:g}},t={loading:"eager",fetchpriority:"high"};return{...c?e:t}},u=()=>({src:o,alt:p,title:n,width:t,height:r,quality:s}),h=u(),I=system.createAttr(A());return{...h,...I}};exports.getAdaptiveImageAttrs=getAdaptiveImageAttrs,exports.getContainerAttrs=getContainerAttrs,exports.getImageLiquidAttrs=getImageLiquidAttrs,exports.getLinkWrapperAttrs=getLinkWrapperAttrs,exports.getNextImageAttrs=getNextImageAttrs,exports.getNextImageLiquidAttrs=getNextImageLiquidAttrs,exports.getNextImageReactAttrs=getNextImageReactAttrs;
1
+ "use strict";var constant=require("../../constant.js"),helpers=require("./helpers.js"),system=require("@gem-sdk/system"),helpers$1=require("../../helpers.js"),constants=require("../constants.js");const getContainerAttrs=(e,t)=>({...e,...t&&{"data-id":t}}),getLinkWrapperAttrs=({urlData:e,imageLink:t,title:r,isLiquid:s=!1})=>{let a=s?{...e,...t?.noFollow&&{rel:"nofollow"},title:r}:{setting:e,title:r};return t?.type!=="go-to-sales-page"?t?.link?a:{}:s?{href:constant.HREF_TO_SALES_PAGE,target:"_self"}:{setting:{href:constant.HREF_TO_SALES_PAGE,target:"_self"}}},getImageLiquidAttrs=({pageContext:e,enableLazyLoadImage:t=!1})=>({...e&&{pageContext:e},...t&&{enableLazyLoadImage:t}}),getAdaptiveImageAttrs=({styles:e,setting:t,mode:r,isLiquid:s})=>{let{alt:a,srcSet:i,priority:l,qualityPercent:g,qualityType:p,title:n}=t??{},o=helpers.getAspectRatio({styles:e,setting:t}),c=()=>{helpers$1.handleClickLink(t?.imageLink,r)},A=i?.desktop?.backupFileKey?helpers.getNewBackupFileKey(i?.desktop?.backupFileKey??"",i?.desktop?.src??""):"",u=s?helpers.getImageSrc({src:i?.desktop?.src,backupFileKey:A,backupFilePath:i?.desktop?.backupFilePath,storage:i?.desktop?.storage}):i?.desktop?.src??"",h=l?{}:{"base-src":u??"","quality-type":helpers.safeStringify(p),"quality-percent":helpers.safeStringify(g)};return{pictureClass:"gp-contents",...a&&{alt:a},...n&&{title:n},...i&&{srcSet:i},...l&&constants.PRIORITY_LOAD_ATTRS,...h,...e?.objectFit&&{layout:e.objectFit},onClick:c,aspectRatio:o}},getNextImageAttrs=({styles:e,setting:t})=>{let{objectFit:r}=e??{},{vw:s,alt:a,title:i,quality:l,priority:g,isNotLazyload:p,qualityType:n,qualityPercent:o}=t??{},c=helpers.getAspectRatio({styles:e,setting:t});return{...t?.image,...s&&{vw:s},...a&&{alt:a},...i&&{title:i},...l&&{quality:l},...g&&{priority:g},isNotLazyload:p,setting:{aspectRatio:c,layout:r,qualityType:n,qualityPercent:o}}},getNextImageLiquidAttrs=e=>{let{srcset:t,setting:r,storage:s,baseSrc:a,priority:i,customAttrs:l,width:g=2237,height:p=1678,isNotLazyload:n,backupFileKey:o,backupFilePath:c,srcIsLiquidCode:A,enableLazyLoadImage:u,alt:h=helpers.NEXT_IMAGE_CONFIG.DEFAULT_ALT,title:I,src:E=helpers.NEXT_IMAGE_CONFIG.DEFAULT_SRC,sizes:_=helpers.NEXT_IMAGE_CONFIG.DEFAULT_SIZES}=e,y=!n&&u&&!i,d=()=>{let e=o?helpers.getNewBackupFileKey(o??"",E):"",r=A?a:helpers.getImageSrc({src:E,backupFileKey:e,backupFilePath:c,storage:s}),l=A?E:helpers.getSrcSet(e??"",s??"THEME",E),n={sizes:"100vw",src:helpers.createBlurDataURL(g,p),...r&&!i?{"base-src":r}:{},...r?{"data-src":r}:{},...l?{"data-srcset":l}:{}},u={sizes:_,src:r??"",isNotLazyload:"true",srcset:t??"",...r&&!i?{"base-src":r}:{},...i?{loading:"eager",fetchpriority:"high"}:{loading:"lazy"}};return{"data-sizes":"auto",...y?n:u}},L=()=>{let{qualityPercent:e,qualityType:t}=r??{},s=!i&&t&&e?{"quality-type":helpers.safeStringify(t),"quality-percent":helpers.safeStringify(e)}:{"quality-type":"","quality-percent":""};return{...h&&{alt:h},...I&&{title:I},width:g,height:p,draggable:"false",...s}};return system.createAttr({...l,...L(),...d()})},getNextImageReactAttrs=e=>{let{width:t=helpers.NEXT_IMAGE_CONFIG.DEFAULT_WIDTH_PROPS,height:r=helpers.NEXT_IMAGE_CONFIG.DEFAULT_HEIGHT_PROPS,quality:s,priority:a,isNotLazyload:i,enableLazyLoadImage:l,base64:g=helpers.IMAGE_PLACEHOLDER,alt:p=helpers.NEXT_IMAGE_CONFIG.DEFAULT_ALT,title:n,src:o=helpers.NEXT_IMAGE_CONFIG.DEFAULT_SRC}=e,c=!i&&l&&!a,A=()=>{let e={loading:"lazy",placeholder:"blur",...g&&{blurDataURL:g}},t={loading:"eager",fetchpriority:"high"};return{...c?e:t}},u=()=>({src:o,alt:p,title:n,width:t,height:r,quality:s}),h=u(),I=system.createAttr(A());return{...h,...I}};exports.getAdaptiveImageAttrs=getAdaptiveImageAttrs,exports.getContainerAttrs=getContainerAttrs,exports.getImageLiquidAttrs=getImageLiquidAttrs,exports.getLinkWrapperAttrs=getLinkWrapperAttrs,exports.getNextImageAttrs=getNextImageAttrs,exports.getNextImageLiquidAttrs=getNextImageLiquidAttrs,exports.getNextImageReactAttrs=getNextImageReactAttrs;
@@ -1,5 +1,5 @@
1
- "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})}
2
- ${system.If(l,`<script>
1
+ "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:o,loop:r,controls:i,src:l,style:d,title:n,className:c,lazy:u,poster:m,wrapperStyles:v}=e,p=o&&a&&!!s,y=!u&&e.isVideoComponent,g=!s||o&&a,f=y?l:void 0,$=system.createAttr({...attrs.getHtml5Attr({videoId:t,title:n,autoplay:o,preloadThumbnail:p,offLazyLoad:y,src:l,thumbnail:s})}),h=system.createClass({...classes.getWrapThumbnailClasses(g)}),b=system.createStyle({...styles.getPreloadImageStyle()}),L=system.createClass({...classes.getButtonThumbnailClasses()}),E=system.createClass({...classes.getImageThumbnailClasses()}),A=system.createClass({...classes.getVideoYoutubeClasses(c,y)}),P=()=>p?core.template`${NextImage_liquid.default({src:s,alt:n,priority:m?.preload,enableLazyLoadImage:!0,style:b})}
2
+ ${system.If(o,`<script>
3
3
  document.addEventListener("DOMContentLoaded", (event) => {
4
4
  const eventList = ["keydown", "mousemove", "wheel", "touchmove", "touchstart", "touchend"];
5
5
  const autoLoadTimeout = setTimeout(runAutoPlayVideo, 0);
@@ -14,9 +14,21 @@
14
14
  });
15
15
  }
16
16
  function runAutoPlayVideo() {
17
- document.getElementById('${t}').setAttribute('autoplay','true');
18
- document.getElementById('${t}').setAttribute('playsinline','true');
19
- document.getElementById('${t}').play();
17
+ var video = document.getElementById('${t}');
18
+ if (!video) return;
19
+ video.setAttribute('autoplay','true');
20
+ video.setAttribute('playsinline','true');
21
+ var playPromise = video.play();
22
+ if (playPromise !== undefined) {
23
+ playPromise.catch(function(error) {
24
+ if (error.name === 'AbortError') {
25
+ video.addEventListener('loadeddata', function onLoaded() {
26
+ video.removeEventListener('loadeddata', onLoaded);
27
+ video.play();
28
+ });
29
+ }
30
+ });
31
+ }
20
32
  }
21
33
  });
22
34
  </script>`)}
@@ -24,7 +36,7 @@
24
36
  <div
25
37
  role="presentation"
26
38
  style="${d}"
27
- class="${b}"
39
+ class="${h}"
28
40
  >
29
41
  ${NextImage_liquid.default({id:"video-thumbnail",src:s??"",alt:m?.altText,title:m?.imageTitle,className:E,isDisableAspectStyle:!0,priority:m?.preload,enableLazyLoadImage:!0})}
30
42
  <button type="button" class="${L}" aria-label="Play">
@@ -37,20 +49,20 @@
37
49
  </button>
38
50
  </div>
39
51
  `;return core.template`
40
- <gp-lite-html5-embed is-check-loaded="${e.isCheckLoaded??!1}" style="${p}">
41
- ${A()}
52
+ <gp-lite-html5-embed is-check-loaded="${e.isCheckLoaded??!1}" style="${v}">
53
+ ${P()}
42
54
  <video
43
- ${{...h}}
55
+ ${{...$}}
44
56
  style="${d}"
45
- class="${I}"
46
- ${r?"controls":void 0}
47
- ${o?"loop":void 0}
57
+ class="${A}"
58
+ ${i?"controls":void 0}
59
+ ${r?"loop":void 0}
48
60
  ${a?"muted":void 0}
49
- ${l?"autoplay":void 0}
61
+ ${o?"autoplay":void 0}
50
62
  playsinline
51
- ${$?`src="${$}"`:""}
63
+ ${f?`src="${f}"`:""}
52
64
  ></video>
53
- ${system.If(!v,C())}
65
+ ${system.If(!g,C())}
54
66
  </gp-lite-html5-embed>
55
67
  ${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>`)}
56
68
  `};exports.default=HTML5Embed;
@@ -1 +1 @@
1
- import{HREF_TO_SALES_PAGE as t}from"../../constant.js";import{getAspectRatio as e,getNewBackupFileKey as r,getImageSrc as a,safeStringify as s,NEXT_IMAGE_CONFIG as i,getSrcSet as l,createBlurDataURL as o,IMAGE_PLACEHOLDER as g}from"./helpers.js";import{createAttr as p}from"@gem-sdk/system";import{handleClickLink as n}from"../../helpers.js";import{PRIORITY_LOAD_ATTRS as c}from"../constants.js";let getContainerAttrs=(t,e)=>({...t,...e&&{"data-id":e}}),getLinkWrapperAttrs=({urlData:e,imageLink:r,title:a,isLiquid:s=!1})=>{let i=s?{...e,...r?.noFollow&&{rel:"nofollow"},title:a}:{setting:e,title:a};return r?.type!=="go-to-sales-page"?r?.link?i:{}:s?{href:t,target:"_self"}:{setting:{href:t,target:"_self"}}},getImageLiquidAttrs=({pageContext:t,enableLazyLoadImage:e=!1})=>({...t&&{pageContext:t},...e&&{enableLazyLoadImage:e}}),getAdaptiveImageAttrs=({styles:t,setting:i,mode:l,isLiquid:o})=>{let{alt:g,srcSet:p,priority:u,qualityPercent:d,qualityType:A}=i??{},m=e({styles:t,setting:i}),y=()=>{n(i?.imageLink,l)},k=p?.desktop?.backupFileKey?r(p?.desktop?.backupFileKey??"",p?.desktop?.src??""):"",L=o?a({src:p?.desktop?.src,backupFileKey:k,backupFilePath:p?.desktop?.backupFilePath,storage:p?.desktop?.storage}):p?.desktop?.src??"",F=u?{}:{"base-src":L??"","quality-type":s(A),"quality-percent":s(d)};return{pictureClass:"gp-contents",...g&&{alt:g},...p&&{srcSet:p},...u&&c,...F,...t?.objectFit&&{layout:t.objectFit},onClick:y,aspectRatio:m}},getNextImageAttrs=({styles:t,setting:r})=>{let{objectFit:a}=t??{},{vw:s,alt:i,title:l,quality:o,priority:g,isNotLazyload:p,qualityType:n,qualityPercent:c}=r??{},u=e({styles:t,setting:r});return{...r?.image,...s&&{vw:s},...i&&{alt:i},...l&&{title:l},...o&&{quality:o},...g&&{priority:g},isNotLazyload:p,setting:{aspectRatio:u,layout:a,qualityType:n,qualityPercent:c}}},getNextImageLiquidAttrs=t=>{let{srcset:e,setting:g,storage:n,baseSrc:c,priority:u,customAttrs:d,width:A=2237,height:m=1678,isNotLazyload:y,backupFileKey:k,backupFilePath:L,srcIsLiquidCode:F,enableLazyLoadImage:b,alt:f=i.DEFAULT_ALT,title:h,src:I=i.DEFAULT_SRC,sizes:T=i.DEFAULT_SIZES}=t,E=!y&&b&&!u,_=()=>{let t=k?r(k??"",I):"",s=F?c:a({src:I,backupFileKey:t,backupFilePath:L,storage:n}),i=F?I:l(t??"",n??"THEME",I),g={sizes:"100vw",src:o(A,m),...s&&!u?{"base-src":s}:{},...s?{"data-src":s}:{},...i?{"data-srcset":i}:{}},p={sizes:T,src:s??"",isNotLazyload:"true",srcset:e??"",...s&&!u?{"base-src":s}:{},...u?{loading:"eager",fetchpriority:"high"}:{loading:"lazy"}};return{"data-sizes":"auto",...E?g:p}},q=()=>{let{qualityPercent:t,qualityType:e}=g??{},r=!u&&e&&t?{"quality-type":s(e),"quality-percent":s(t)}:{"quality-type":"","quality-percent":""};return{...f&&{alt:f},...h&&{title:h},width:A,height:m,draggable:"false",...r}};return p({...d,...q(),..._()})},getNextImageReactAttrs=t=>{let{width:e=i.DEFAULT_WIDTH_PROPS,height:r=i.DEFAULT_HEIGHT_PROPS,quality:a,priority:s,isNotLazyload:l,enableLazyLoadImage:o,base64:n=g,alt:c=i.DEFAULT_ALT,title:u,src:d=i.DEFAULT_SRC}=t,A=!l&&o&&!s,m=()=>{let t={loading:"lazy",placeholder:"blur",...n&&{blurDataURL:n}},e={loading:"eager",fetchpriority:"high"};return{...A?t:e}},y=()=>({src:d,alt:c,title:u,width:e,height:r,quality:a}),k=y(),L=p(m());return{...k,...L}};export{getAdaptiveImageAttrs,getContainerAttrs,getImageLiquidAttrs,getLinkWrapperAttrs,getNextImageAttrs,getNextImageLiquidAttrs,getNextImageReactAttrs};
1
+ import{HREF_TO_SALES_PAGE as t}from"../../constant.js";import{getAspectRatio as e,getNewBackupFileKey as r,getImageSrc as a,safeStringify as s,NEXT_IMAGE_CONFIG as i,getSrcSet as l,createBlurDataURL as o,IMAGE_PLACEHOLDER as g}from"./helpers.js";import{createAttr as p}from"@gem-sdk/system";import{handleClickLink as n}from"../../helpers.js";import{PRIORITY_LOAD_ATTRS as c}from"../constants.js";let getContainerAttrs=(t,e)=>({...t,...e&&{"data-id":e}}),getLinkWrapperAttrs=({urlData:e,imageLink:r,title:a,isLiquid:s=!1})=>{let i=s?{...e,...r?.noFollow&&{rel:"nofollow"},title:a}:{setting:e,title:a};return r?.type!=="go-to-sales-page"?r?.link?i:{}:s?{href:t,target:"_self"}:{setting:{href:t,target:"_self"}}},getImageLiquidAttrs=({pageContext:t,enableLazyLoadImage:e=!1})=>({...t&&{pageContext:t},...e&&{enableLazyLoadImage:e}}),getAdaptiveImageAttrs=({styles:t,setting:i,mode:l,isLiquid:o})=>{let{alt:g,srcSet:p,priority:u,qualityPercent:d,qualityType:A,title:m}=i??{},y=e({styles:t,setting:i}),k=()=>{n(i?.imageLink,l)},L=p?.desktop?.backupFileKey?r(p?.desktop?.backupFileKey??"",p?.desktop?.src??""):"",F=o?a({src:p?.desktop?.src,backupFileKey:L,backupFilePath:p?.desktop?.backupFilePath,storage:p?.desktop?.storage}):p?.desktop?.src??"",b=u?{}:{"base-src":F??"","quality-type":s(A),"quality-percent":s(d)};return{pictureClass:"gp-contents",...g&&{alt:g},...m&&{title:m},...p&&{srcSet:p},...u&&c,...b,...t?.objectFit&&{layout:t.objectFit},onClick:k,aspectRatio:y}},getNextImageAttrs=({styles:t,setting:r})=>{let{objectFit:a}=t??{},{vw:s,alt:i,title:l,quality:o,priority:g,isNotLazyload:p,qualityType:n,qualityPercent:c}=r??{},u=e({styles:t,setting:r});return{...r?.image,...s&&{vw:s},...i&&{alt:i},...l&&{title:l},...o&&{quality:o},...g&&{priority:g},isNotLazyload:p,setting:{aspectRatio:u,layout:a,qualityType:n,qualityPercent:c}}},getNextImageLiquidAttrs=t=>{let{srcset:e,setting:g,storage:n,baseSrc:c,priority:u,customAttrs:d,width:A=2237,height:m=1678,isNotLazyload:y,backupFileKey:k,backupFilePath:L,srcIsLiquidCode:F,enableLazyLoadImage:b,alt:f=i.DEFAULT_ALT,title:h,src:I=i.DEFAULT_SRC,sizes:T=i.DEFAULT_SIZES}=t,E=!y&&b&&!u,_=()=>{let t=k?r(k??"",I):"",s=F?c:a({src:I,backupFileKey:t,backupFilePath:L,storage:n}),i=F?I:l(t??"",n??"THEME",I),g={sizes:"100vw",src:o(A,m),...s&&!u?{"base-src":s}:{},...s?{"data-src":s}:{},...i?{"data-srcset":i}:{}},p={sizes:T,src:s??"",isNotLazyload:"true",srcset:e??"",...s&&!u?{"base-src":s}:{},...u?{loading:"eager",fetchpriority:"high"}:{loading:"lazy"}};return{"data-sizes":"auto",...E?g:p}},q=()=>{let{qualityPercent:t,qualityType:e}=g??{},r=!u&&e&&t?{"quality-type":s(e),"quality-percent":s(t)}:{"quality-type":"","quality-percent":""};return{...f&&{alt:f},...h&&{title:h},width:A,height:m,draggable:"false",...r}};return p({...d,...q(),..._()})},getNextImageReactAttrs=t=>{let{width:e=i.DEFAULT_WIDTH_PROPS,height:r=i.DEFAULT_HEIGHT_PROPS,quality:a,priority:s,isNotLazyload:l,enableLazyLoadImage:o,base64:n=g,alt:c=i.DEFAULT_ALT,title:u,src:d=i.DEFAULT_SRC}=t,A=!l&&o&&!s,m=()=>{let t={loading:"lazy",placeholder:"blur",...n&&{blurDataURL:n}},e={loading:"eager",fetchpriority:"high"};return{...A?t:e}},y=()=>({src:d,alt:c,title:u,width:e,height:r,quality:a}),k=y(),L=p(m());return{...k,...L}};export{getAdaptiveImageAttrs,getContainerAttrs,getImageLiquidAttrs,getLinkWrapperAttrs,getNextImageAttrs,getNextImageLiquidAttrs,getNextImageReactAttrs};
@@ -1,5 +1,5 @@
1
- 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})}
2
- ${d(L,`<script>
1
+ import{template as e,RenderIf as t,isLocalEnv as o,baseAssetURL as i}from"@gem-sdk/core";import r from"../../image/components/NextImage.liquid.js";import{getSettingPreloadData as s}from"../../helpers.js";import{createAttr as a,createClass as d,createStyle as l,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=f=>{let g=`gp-video-${f.uid}`,{thumbnail:$,muted:L,autoplay:h,loop:b,controls:E,src:A,style:P,title:w,className:T,lazy:j,poster:k,wrapperStyles:S}=f,V=h&&L&&!!$,x=!j&&f.isVideoComponent,C=!$||h&&L,I=x?A:void 0,M=a({...y({videoId:g,title:w,autoplay:h,preloadThumbnail:V,offLazyLoad:x,src:A,thumbnail:$})}),N=d({...m(C)}),z=l({...v()}),B=d({...c()}),D=d({...u()}),G=d({...p(T,x)}),H=()=>V?e`${r({src:$,alt:w,priority:k?.preload,enableLazyLoadImage:!0,style:z})}
2
+ ${n(h,`<script>
3
3
  document.addEventListener("DOMContentLoaded", (event) => {
4
4
  const eventList = ["keydown", "mousemove", "wheel", "touchmove", "touchstart", "touchend"];
5
5
  const autoLoadTimeout = setTimeout(runAutoPlayVideo, 0);
@@ -14,20 +14,32 @@ import{template as e,RenderIf as t,isLocalEnv as o,baseAssetURL as s}from"@gem-s
14
14
  });
15
15
  }
16
16
  function runAutoPlayVideo() {
17
- document.getElementById('${$}').setAttribute('autoplay','true');
18
- document.getElementById('${$}').setAttribute('playsinline','true');
19
- document.getElementById('${$}').play();
17
+ var video = document.getElementById('${g}');
18
+ if (!video) return;
19
+ video.setAttribute('autoplay','true');
20
+ video.setAttribute('playsinline','true');
21
+ var playPromise = video.play();
22
+ if (playPromise !== undefined) {
23
+ playPromise.catch(function(error) {
24
+ if (error.name === 'AbortError') {
25
+ video.addEventListener('loadeddata', function onLoaded() {
26
+ video.removeEventListener('loadeddata', onLoaded);
27
+ video.play();
28
+ });
29
+ }
30
+ });
31
+ }
20
32
  }
21
33
  });
22
34
  </script>`)}
23
35
  `:"",O=()=>e`
24
36
  <div
25
37
  role="presentation"
26
- style="${w}"
27
- class="${B}"
38
+ style="${P}"
39
+ class="${N}"
28
40
  >
29
- ${i({id:"video-thumbnail",src:f??"",alt:k?.altText,title:k?.imageTitle,className:D,isDisableAspectStyle:!0,priority:k?.preload,enableLazyLoadImage:!0})}
30
- <button type="button" class="${z}" aria-label="Play">
41
+ ${r({id:"video-thumbnail",src:$??"",alt:k?.altText,title:k?.imageTitle,className:D,isDisableAspectStyle:!0,priority:k?.preload,enableLazyLoadImage:!0})}
42
+ <button type="button" class="${B}" aria-label="Play">
31
43
  <svg class="gp-w-5 gp-text-white" viewBox="0 0 24 24">
32
44
  <path
33
45
  fill="currentColor"
@@ -37,20 +49,20 @@ import{template as e,RenderIf as t,isLocalEnv as o,baseAssetURL as s}from"@gem-s
37
49
  </button>
38
50
  </div>
39
51
  `;return e`
40
- <gp-lite-html5-embed is-check-loaded="${g.isCheckLoaded??!1}" style="${I}">
52
+ <gp-lite-html5-embed is-check-loaded="${f.isCheckLoaded??!1}" style="${S}">
41
53
  ${H()}
42
54
  <video
43
55
  ${{...M}}
44
- style="${w}"
56
+ style="${P}"
45
57
  class="${G}"
46
58
  ${E?"controls":void 0}
47
59
  ${b?"loop":void 0}
48
- ${h?"muted":void 0}
49
- ${L?"autoplay":void 0}
60
+ ${L?"muted":void 0}
61
+ ${h?"autoplay":void 0}
50
62
  playsinline
51
- ${C?`src="${C}"`:""}
63
+ ${I?`src="${I}"`:""}
52
64
  ></video>
53
- ${d(!x,O())}
65
+ ${n(!C,O())}
54
66
  </gp-lite-html5-embed>
55
- ${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>`)}
67
+ ${t(o,`<script ${s('class="gps-link" delay',"src")}="{{ 'gp-lite-html5-embed-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${s('class="gps-link" delay',"src")}="${i}/assets-v2/gp-lite-html5-embed-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
56
68
  `};export{HTML5Embed as default};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gem-sdk/components",
3
- "version": "13.2.1",
3
+ "version": "13.2.3",
4
4
  "license": "MIT",
5
5
  "sideEffects": false,
6
6
  "main": "dist/cjs/index.js",