"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"),a=require("@gem-sdk/system"),r=require("../common/classes.js"),l=require("../common/styles.js"),i=require("../common/helpers.js");exports.default=o=>{let{style:u,iframeClass:c,wrapperClass:d,title:p,poster:n,translatedVideoUrl:m,autoplay:g,pageContext:y}=o,b=`gp-video-${o.uid}`,{posterUrl:f,iframeSrc:$}=i.getYoutubeParams(o),C=!!o.thumbnail,S=n?.preload,v=a.createStateOrContext({lazy:o.lazy,hasThumbnail:C,style:u,title:p,iframeSrc:$,translatedVideoUrl:m,autoplay:g,isHeroBanner:o.isHeroBanner}),h=!o.lazy&&(!C||!!o.autoplay),j=a.createClass({...r.getButtonYoutubeClasses(h)}),q=a.createClass({...r.getImageYoutubeClasses()}),Y=a.createClass({...r.getArticleYoutubeClasses(S||!1,d)}),I=a.createClass({...r.getIframeYoutubeClasses(c)}),x=a.createStyle({...l.getIframeYoutubeStyle(u)}),A=a.createStyle({...l.getArticleYoutubeStyle(u,f)}),P=a.createClass({...r.getYoutubeContentClasses()});return e.template`
    <gp-lite-youtube-embed gp-data='${JSON.stringify(v)}'>
      <article
        aria-hidden
        class="${Y}"
        data-title="${p}"
        style="${A}"
      >
        ${t.default({id:b,src:f,alt:n?.altText,title:n?.imageTitle,priority:n?.preload,pageContext:y,className:q,isDisableAspectStyle:!0,isNotLazyload:n?.preload})}
        <button type="button" aria-label="Play" class="${j}">
          <svg height="100%" version="1.1" viewBox="0 0 68 48" width="100%">
            <path
              d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z"
              fill="#f00"
            ></path>
            <path d="M 45,24 27,14 27,34" fill="#fff"></path>
          </svg>
        </button>
        ${a.If(h,(()=>{let t=e.template`
    <iframe
      id="player-wrapper-${o.uid}"
      class="${I}"
      style="${x}"
      title="${p}"
      frameborder="0"
      allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
      allowfullscreen
      src="${$}"
    ></iframe>
  `;return o.isHeroBanner?e.template`
        <div class="${P}">${t}</div>
      `:t})())}
      </article>
    </gp-lite-youtube-embed>
    ${e.RenderIf(e.isLocalEnv,`<script ${s.getSettingPreloadData('class="gps-link" delay',"src")}="{{ 'gp-lite-youtube-embed-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${s.getSettingPreloadData('class="gps-link" delay',"src")}="${e.baseAssetURL}/assets-v2/gp-lite-youtube-embed-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
  `};
