@gem-sdk/components 4.1.9 → 5.0.2

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}=$,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>
+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,9 +14,9 @@ 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>`)}
@@ -37,7 +37,7 @@ 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}">
+  <gp-lite-html5-embed is-check-loaded="${g.isCheckLoaded??!1}" style="${I}">
     ${H()}
     <video
     ${{...M}}
@@ -48,11 +48,9 @@ import{template as e,RenderIf as t,isLocalEnv as o,baseAssetURL as s}from"@gem-s
       ${h?"muted":void 0}
       ${L?"autoplay":void 0}
       playsinline
-      ${V?void 0:`src="${C}"`}
-    >
-      ${n(V,`<source data-src="${A}" src="${C}" type="video/mp4"></source>`)}
-    </video>
-    ${n(!x,O())}
+      ${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};