'use client';
import{jsxs as e,Fragment as t,jsx as o}from"react/jsx-runtime";import{useEditorMode as s}from"@gem-sdk/core";import m from"../../image/components/NextImage.js";import{useLiteHtml5Embed as r}from"../hooks/useLiteHtml5Embed.js";import{createAttr as l,createClass as i,createStyle as a}from"@gem-sdk/system";import{getWrapThumbnailClasses as c,getButtonThumbnailClasses as n,getImageThumbnailClasses as p,getVideoYoutubeClasses as d}from"../common/classes.js";import{getPreloadImageStyle as y}from"../common/styles.js";import{getHtml5Attr as f}from"../common/attrs.js";let HTML5Embed=u=>{let b=s(),g="edit"!==b,{thumbnail:h,muted:j,autoplay:v,loop:x,controls:L,src:N,style:k,title:C,className:T,lazy:w,poster:E}=u,{playVideoAndTurnOffThumbnail:H,videoRef:I,showThumbnail:M}=r(v,j,N),P=!g&&v&&j&&!!h,V=!w&&u.isVideoComponent&&g,z=!h||!M,A=N||void 0,B=l({...f({title:C,autoplay:v,preloadThumbnail:P,offLazyLoad:V,src:N,thumbnail:h})}),D=i({...c(z)}),S=a({...y()}),Z=i({...n()}),q=i({...p()}),F=i({...d(T,V)}),G=()=>P?o(m,{src:h,alt:C,priority:!0,style:S}):"",J=()=>e("div",{role:"presentation",style:k,className:D,onClick:H,children:[o(m,{id:"video-thumbnail",src:h??"",alt:E?.altText,title:E?.imageTitle,priority:E?.preload&&g,className:q,isDisableAspectStyle:!0,enableLazyLoadImage:!0}),o("button",{type:"button",className:Z,"aria-label":"Play",children:o("svg",{className:"gp-w-5 gp-text-white",viewBox:"0 0 24 24",children:o("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"})})})]});return e(t,{children:[G(),o("video",{ref:I,...B,style:k,className:F,controls:L,loop:x,muted:j,autoPlay:v,playsInline:!0,src:A}),!z&&J()]})};export{HTML5Embed as default};
