import{RenderIf as e,isLocalEnv as t,baseAssetURL as s,template as r}from"@gem-sdk/core";import a from"../../image/components/NextImage.liquid.js";import{getSettingPreloadData as l}from"../../helpers.js";import{createStateOrContext as i,createClass as o,createStyle as p,If as m}from"@gem-sdk/system";import{getButtonYoutubeClasses as d,getImageYoutubeClasses as c,getArticleYoutubeClasses as u,getIframeYoutubeClasses as n,getYoutubeContentClasses as f}from"../common/classes.js";import{getIframeYoutubeStyle as y,getArticleYoutubeStyle as $}from"../common/styles.js";import{getYoutubeParams as g}from"../common/helpers.js";let b=b=>{let{style:h,iframeClass:v,wrapperClass:S,title:j,poster:w,translatedVideoUrl:z,autoplay:C,pageContext:E}=b,N=`gp-video-${b.uid}`,{posterUrl:k,iframeSrc:x}=g(b),B=!!b.thumbnail,T=w?.preload,A=i({lazy:b.lazy,hasThumbnail:B,style:h,title:j,iframeSrc:x,translatedVideoUrl:z,autoplay:C,isHeroBanner:b.isHeroBanner}),H=!b.lazy&&(!B||!!b.autoplay),M=o({...d(H)}),G=o({...c()}),I=o({...u(T||!1,S)}),L=o({...n(v)}),O=p({...y(h)}),P=p({...$(h,k)}),_=o({...f()});return r`
    <gp-lite-youtube-embed gp-data='${JSON.stringify(A)}'>
      <article
        aria-hidden
        class="${I}"
        data-title="${j}"
        style="${P}"
      >
        ${a({id:N,src:k,alt:w?.altText,title:w?.imageTitle,priority:w?.preload,pageContext:E,className:G,isDisableAspectStyle:!0,isNotLazyload:w?.preload})}
        <button type="button" aria-label="Play" class="${M}">
          <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>
        ${m(H,(()=>{let e=r`
    <iframe
      id="player-wrapper-${b.uid}"
      class="${L}"
      style="${O}"
      title="${j}"
      frameborder="0"
      allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
      allowfullscreen
      src="${x}"
    ></iframe>
  `;return b.isHeroBanner?r`
        <div class="${_}">${e}</div>
      `:e})())}
      </article>
    </gp-lite-youtube-embed>
    ${e(t,`<script ${l('class="gps-link" delay',"src")}="{{ 'gp-lite-youtube-embed-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${l('class="gps-link" delay',"src")}="${s}/assets-v2/gp-lite-youtube-embed-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
  `};export{b as default};
