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