"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@gem-sdk/core"),t=require("../../image/components/NextImage.liquid.js"),a=require("../../helpers.js"),s=require("@gem-sdk/system"),o=require("../common/classes.js"),i=require("../common/styles.js"),r=require("../common/attrs.js");exports.default=l=>{let d=`gp-video-${l.uid}`,{thumbnail:n,muted:u,autoplay:c,loop:m,controls:v,src:p,style:g,title:y,className:f,lazy:$,poster:b,wrapperStyles:h}=l,L=c&&u&&!!n,A=!$&&l.isVideoComponent,P=!n||c&&u,E=A?p:void 0,C=s.createAttr({...r.getHtml5Attr({videoId:d,title:y,autoplay:c,preloadThumbnail:L,offLazyLoad:A,src:p,thumbnail:n})}),I=s.createClass({...o.getWrapThumbnailClasses(P)}),S=s.createStyle({...i.getPreloadImageStyle()}),T=s.createClass({...o.getButtonThumbnailClasses()}),w=s.createClass({...o.getImageThumbnailClasses()}),j=s.createClass({...o.getVideoYoutubeClasses(f,A)});return e.template`
  <gp-lite-html5-embed is-check-loaded="${l.isCheckLoaded??!1}" style="${h}">
    ${L?e.template`${t.default({src:n,alt:y,priority:b?.preload,enableLazyLoadImage:!0,style:S})}
    ${s.If(c,`<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('${d}');
              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
    ${{...C}}
      style="${g}"
      class="${j}"
      ${v?"controls":void 0}
      ${m?"loop":void 0}
      ${u?"muted":void 0}
      ${c?"autoplay":void 0}
      playsinline
      ${E?`src="${E}"`:""}
    ></video>
    ${s.If(!P,e.template`
     <div
        role="presentation"
        style="${g}"
        class="${I}"
        >
           ${t.default({id:"video-thumbnail",src:n??"",alt:b?.altText,title:b?.imageTitle,className:w,isDisableAspectStyle:!0,priority:b?.preload,enableLazyLoadImage:!0})}
          <button type="button" class="${T}" 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.RenderIf(e.isLocalEnv,`<script ${a.getSettingPreloadData('class="gps-link" delay',"src")}="{{ 'gp-lite-html5-embed-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${a.getSettingPreloadData('class="gps-link" delay',"src")}="${e.baseAssetURL}/assets-v2/gp-lite-html5-embed-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
  `};
