"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})}
    ${system.If(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('${t}').setAttribute('autoplay','true');
              document.getElementById('${t}').setAttribute('playsinline','true');
              document.getElementById('${t}').play();
          }
        });
      </script>`)}
      `:"",C=()=>core.template`
     <div
        role="presentation"
        style="${d}"
        class="${b}"
        >
           ${NextImage_liquid.default({id:"video-thumbnail",src:s??"",alt:m?.altText,title:m?.imageTitle,className:E,isDisableAspectStyle:!0,priority:m?.preload,enableLazyLoadImage:!0})}
          <button type="button" class="${L}" 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 core.template`
  <gp-lite-html5-embed is-check-loaded="${e.isCheckLoaded??!1}" style="${p}">
    ${A()}
    <video
    ${{...h}}
      style="${d}"
      class="${I}"
      ${r?"controls":void 0}
      ${o?"loop":void 0}
      ${a?"muted":void 0}
      ${l?"autoplay":void 0}
      playsinline
      ${$?`src="${$}"`:""}
    ></video>
    ${system.If(!v,C())}
  </gp-lite-html5-embed>
        ${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>`)}
  `};exports.default=HTML5Embed;
