import{RenderIf as e,isLocalEnv as t,baseAssetURL as o,template 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 f=f=>{let $=`gp-video-${f.uid}`,{thumbnail:g,muted:h,autoplay:L,loop:b,controls:E,src:A,style:P,title:w,className:T,lazy:j,poster:k,wrapperStyles:S,pageContext:V}=f,x=L&&h&&!!g,C=!j&&f.isVideoComponent,M=!g||L&&h,I=C?A:void 0,N=a({...y({videoId:$,title:w,autoplay:L,preloadThumbnail:x,offLazyLoad:C,src:A,thumbnail:g})}),B=d({...m(M)}),D=l({...v()}),G=d({...c()}),O=d({...u()}),_=d({...p(T,C)});return i`
  <gp-lite-html5-embed is-check-loaded="${f.isCheckLoaded??!1}" style="${S}">
    ${x?i`${r({src:g,alt:w,priority:k?.preload,pageContext:V,style:D})}
    ${n(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() {
              var video = document.getElementById('${$}');
              if (!video) return;
              video.setAttribute('autoplay','true');
              video.setAttribute('playsinline','true');
              var playPromise = video.play();
              if (playPromise !== undefined) {
                playPromise.catch(function(error) {
                  if (error.name === 'AbortError') {
                    video.addEventListener('loadeddata', function onLoaded() {
                      video.removeEventListener('loadeddata', onLoaded);
                      video.play();
                    });
                  }
                });
              }
          }
        });
      </script>`)}
      `:""}
    <video
    ${{...N}}
      style="${P}"
      class="${_}"
      ${E?"controls":void 0}
      ${b?"loop":void 0}
      ${h?"muted":void 0}
      ${L?"autoplay":void 0}
      playsinline
      ${I?`src="${I}"`:""}
    ></video>
    ${n(!M,i`
     <div
        role="presentation"
        style="${P}"
        class="${B}"
        >
           ${r({id:"video-thumbnail",src:g??"",alt:k?.altText,title:k?.imageTitle,className:O,isDisableAspectStyle:!0,priority:k?.preload,pageContext:V})}
          <button type="button" class="${G}" 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>
  `)}
  </gp-lite-html5-embed>
        ${e(t,`<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")}="${o}/assets-v2/gp-lite-html5-embed-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
  `};export{f as default};
