import{template as e,RenderIf as t,isLocalEnv as s,baseAssetURL as i}from"@gem-sdk/core";import{getSettingPreloadData as l}from"../../helpers.js";import{createStateOrContext as r,createStyle as a,createClass as m,If as o}from"@gem-sdk/system";import{getArticleVimeoClasses as p,getImageVimeoClasses as c,getButtonVimeoClasses as d,getIframeVimeoClasses as g}from"../common/classes.js";import{getIframeVimeoStyle as f,getArticleVimeoStyle as n}from"../common/styles.js";import{getVimeoParams as y}from"../common/helpers.js";import $ from"../../image/components/NextImage.liquid.js";let b=b=>{let{title:h,id:u,lazy:v,aspectRatio:S,autoplay:j,muted:w,thumbnailLink:x,poster:E,translatedVideoUrl:k}=b,{iframeSrc:I}=y(b),L=!v,N=b.thumbnail,A=r({id:u,thumbnail:x,lazy:v,iframeSrc:I,title:h,autoplay:j,muted:w,style:b?.vimeoStyleIframe||"",translatedVideoUrl:k}),T=a({...f(S)}),V=a({...n(S,"")}),C=m({...p(N,S)}),G=m({...c(L)}),M=m({...d(L)}),O=m({...g()});return e`
    <gp-lite-vimeo-embed gp-data='${JSON.stringify(A)}'>
      <article
        aria-hidden
        class="${C}"
        data-title="${h}"
        style="${V}"
      >
      ${$({src:N,alt:E?.altText,title:E?.imageTitle,className:G,isDisableAspectStyle:!0,enableLazyLoadImage:!0,priority:E?.preload,height:E?.height,width:E?.width})}
         ${o(!L,e`
          <button type="button" class="${M}" 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>`)}
        ${o(L,e`
          <iframe
            style="${T}"
            title="${h}"
            frameborder="0"
            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
            allowfullscreen
            src="${I}"
            class="${O}"
          ></iframe>`)}
      </article>
    </gp-lite-vimeo-embed>
    ${t(s,`<script ${l('class="gps-link" delay',"src")}="{{ 'gp-lite-vimeo-embed-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${l('class="gps-link" delay',"src")}="${i}/assets-v2/gp-lite-vimeo-embed-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
  `};export{b as default};
