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