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