"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,translatedVideoUrl:i,autoplay:o}=e,c=`gp-video-${e.uid}`,{posterUrl:u,iframeSrc:d}=helpers$1.getYoutubeParams(e),m=!!e.thumbnail,p=r?.preload,y=system.createStateOrContext({lazy:e.lazy,hasThumbnail:m,style:s,title:l,iframeSrc:d,translatedVideoUrl:i,autoplay:o}),g=!e.lazy&&(!m||!!e.autoplay),n=system.createClass({...classes.getButtonYoutubeClasses(g)}),b=system.createClass({...classes.getImageYoutubeClasses()}),f=system.createClass({...classes.getArticleYoutubeClasses(p||!1,a)}),$=system.createClass({...classes.getIframeYoutubeClasses(t)}),h=system.createStyle({...styles.getIframeYoutubeStyle(s)}),C=system.createStyle({...styles.getArticleYoutubeStyle(s,u)}),S=system.createClass({...classes.getYoutubeContentClasses()}),v=()=>{let s=core.template`
    <iframe
      id="player-wrapper-${e.uid}"
      class="${$}"
      style="${h}"
      title="${l}"
      frameborder="0"
      allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
      allowfullscreen
      src="${d}"
    ></iframe>
  `;return e.isHeroBanner?core.template`
        <div class="${S}">${s}</div>
      `:s};return core.template`
    <gp-lite-youtube-embed gp-data='${JSON.stringify(y)}'>
      <article
        aria-hidden
        class="${f}"
        data-title="${l}"
        style="${C}"
      >
        ${NextImage_liquid.default({id:c,src:u,alt:r?.altText,title:r?.imageTitle,priority:r?.preload,enableLazyLoadImage:!0,className:b,isDisableAspectStyle:!0,isNotLazyload:r?.preload})}
        <button type="button" aria-label="Play" class="${n}">
          <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(g,v())}
      </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;
