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