"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),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"),NextImage_liquid=require("../../image/components/NextImage.liquid.js");const LiteVimeoEmbed=e=>{let{title:s,id:t,lazy:l,aspectRatio:a,autoplay:r,muted:i,thumbnailLink:m,poster:c,translatedVideoUrl:o}=e,{iframeSrc:p}=helpers$1.getVimeoParams(e),d=!l,g=e.thumbnail,y=system.createStateOrContext({id:t,thumbnail:m,lazy:l,iframeSrc:p,title:s,autoplay:r,muted:i,style:e?.vimeoStyleIframe||"",translatedVideoUrl:o}),n=system.createStyle({...styles.getIframeVimeoStyle(a)}),u=system.createStyle({...styles.getArticleVimeoStyle(a,"")}),f=system.createClass({...classes.getArticleVimeoClasses(g,a)}),h=system.createClass({...classes.getImageVimeoClasses(d)}),$=system.createClass({...classes.getButtonVimeoClasses(d)}),b=system.createClass({...classes.getIframeVimeoClasses()});return core.template`
    <gp-lite-vimeo-embed gp-data='${JSON.stringify(y)}'>
      <article
        aria-hidden
        class="${f}"
        data-title="${s}"
        style="${u}"
      >
      ${NextImage_liquid.default({src:g,alt:c?.altText,title:c?.imageTitle,className:h,isDisableAspectStyle:!0,enableLazyLoadImage:!0,priority:c?.preload,height:c?.height,width:c?.width})}
         ${system.If(!d,core.template`
          <button type="button" class="${$}" aria-label="Play">
          <svg class="gp-w-5 gp-text-white" viewBox="0 0 24 24">
            <path
              fill="currentColor"
              d="M5 5.274c0-1.707 1.826-2.792 3.325-1.977l12.362 6.726c1.566.853 1.566 3.101 0 3.953L8.325 20.702C6.826 21.518 5 20.432 5 18.726V5.274Z"
            />
          </svg>
        </button>`)}
        ${system.If(d,core.template`
          <iframe
            style="${n}"
            title="${s}"
            frameborder="0"
            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
            allowfullscreen
            src="${p}"
            class="${b}"
          ></iframe>`)}
      </article>
    </gp-lite-vimeo-embed>
    ${core.RenderIf(core.isLocalEnv,`<script ${helpers.getSettingPreloadData('class="gps-link" delay',"src")}="{{ 'gp-lite-vimeo-embed-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${helpers.getSettingPreloadData('class="gps-link" delay',"src")}="${core.baseAssetURL}/assets-v2/gp-lite-vimeo-embed-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
  `};exports.default=LiteVimeoEmbed;
