"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),NextImage_liquid=require("../../image/components/NextImage.liquid.js"),helpers=require("../../helpers.js"),system=require("@gem-sdk/system"),classes=require("../common/classes.js"),styles=require("../common/styles.js"),helpers$1=require("../common/helpers.js");const LiteYouTubeEmbed=e=>{let{style:s,iframeClass:t,wrapperClass:a,title:l,poster:r}=e,i=`gp-video-${e.uid}`,{posterUrl:o,iframeSrc:c}=helpers$1.getYoutubeParams(e),u=r?.preload,d=system.createStateOrContext({lazy:e.lazy,style:s,title:l,iframeSrc:c}),m=!e.lazy,p=system.createClass({...classes.getButtonYoutubeClasses(m)}),y=system.createClass({...classes.getImageYoutubeClasses()}),g=system.createClass({...classes.getArticleYoutubeClasses(u||!1,a)}),b=system.createClass({...classes.getIframeYoutubeClasses(t)}),n=system.createStyle({...styles.getIframeYoutubeStyle(s)}),f=system.createStyle({...styles.getArticleYoutubeStyle(s,o)}),$=()=>core.template`
    <iframe
      id="player-wrapper-${e.uid}"
      class="${b}"
      style="${n}"
      title="${l}"
      frameborder="0"
      allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
      allowfullscreen
      src="${c}"
    ></iframe>
  `;return core.template`
    <gp-lite-youtube-embed gp-data='${JSON.stringify(d)}'>
      <article
        aria-hidden
        class="${g}"
        data-title="${l}"
        style="${f}"
      >
        ${NextImage_liquid.default({id:i,src:o,alt:r?.altText,title:r?.imageTitle,priority:r?.preload,enableLazyLoadImage:!0,className:y,isDisableAspectStyle:!0,isNotLazyload:r?.preload})}
        <button type="button" aria-label="Play" class="${p}">
          <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>
        ${system.If(m,$())}
      </article>
    </gp-lite-youtube-embed>
    ${core.RenderIf(core.isLocalEnv,`<script ${helpers.getSettingPreloadData('class="gps-link" delay',"src")}="{{ 'gp-lite-youtube-embed-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${helpers.getSettingPreloadData('class="gps-link" delay',"src")}="${core.baseAssetURL}/assets-v2/gp-lite-youtube-embed-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
  `};exports.default=LiteYouTubeEmbed;
