'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 r from"../../image/components/NextImage.js";import l from"../hooks/useLiteHtml5Embed.js";import{createAttr as m,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 u=u=>{let g=s(),b="edit"!==g,{thumbnail:h,muted:j,autoplay:v,loop:x,controls:N,src:L,style:k,title:C,className:w,lazy:I,poster:T}=u,{playVideoAndTurnOffThumbnail:E,videoRef:H,showThumbnail:M}=l(v,j,L),P=!b&&v&&j&&!!h,V=!I&&u.isVideoComponent&&b,z=!h||!M,A=L||void 0,B=m({...f({title:C,autoplay:v,preloadThumbnail:P,offLazyLoad:V,src:L,thumbnail:h})}),D=i({...c(z)}),S=a({...y()}),Z=i({...n()}),q=i({...p()}),F=i({...d(w,V)});return e(t,{children:[P?o(r,{src:h,alt:C,priority:!0,style:S}):"",o("video",{ref:H,...B,style:k,className:F,controls:N,loop:x,muted:j,autoPlay:v,playsInline:!0,src:A}),!z&&e("div",{role:"presentation",style:k,className:D,onClick:E,children:[o(r,{id:"video-thumbnail",src:h??"",alt:T?.altText,title:T?.imageTitle,priority:T?.preload&&b,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"})})})]})]})};export{u as default};
