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);
          eventList.forEach(function(event) {
              window.addEventListener(event, triggerAutoPlay, { passive: true })
          });
          function triggerAutoPlay() {
              runAutoPlayVideo();
              clearTimeout(autoLoadTimeout);
              eventList.forEach(function(event) {
                  window.removeEventListener(event, triggerAutoPlay, { passive: true });
              });
          }
          function runAutoPlayVideo() {
              document.getElementById('${$}').setAttribute('autoplay','true');
              document.getElementById('${$}').setAttribute('playsinline','true');
              document.getElementById('${$}').play();
          }
        });
      </script>`)}
      `:"",O=()=>e`
     <div
        role="presentation"
        style="${w}"
        class="${B}"
        >
           ${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"
                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"
              />
            </svg>
          </button>
        </div>
  `;return e`
  <gp-lite-html5-embed is-check-loaded="${g.isCheckLoaded??!1}" style="${I}">
    ${H()}
    <video
    ${{...M}}
      style="${w}"
      class="${G}"
      ${E?"controls":void 0}
      ${b?"loop":void 0}
      ${h?"muted":void 0}
      ${L?"autoplay":void 0}
      playsinline
      ${C?`src="${C}"`:""}
    ></video>
    ${d(!x,O())}
  </gp-lite-html5-embed>
        ${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};
