https://clipchat.ai/dist/assets/LongVideoImagesBrowser-DsyGx0b6.js

1const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/main-fFbGxLEq.js","assets/index-Cc7IhL_s.js","assets/index-D743eS6_.css","assets/vendor-mui-CBxi4-UE.js","assets/vendor-react-DJCar8wk.js","assets/vendor-utils-hGafao2v.js"])))=>i.map(i=>d[i]);
2var e=Object.defineProperty,i=Object.getOwnPropertySymbols,l=Object.prototype.hasOwnProperty,s=Object.prototype.propertyIsEnumerable,o=(i,l,s)=>l in i?e(i,l,{enumerable:!0,configurable:!0,writable:!0,value:s}):i[l]=s;import{j as a,b1 as n,B as r,ak as t,Y as d,T as c,af as g,ah as x,ad as m,o as h,bm as p,aE as u,aA as v,cS as j,bZ as b,c5 as f,aa as y,ax as w,ay as I,I as C,bW as V,C as z,az as k,gf as S,e1 as E,U as O,e0 as P,cI as R,a4 as W,ag as L,cd as T}from"./vendor-mui-CBxi4-UE.js";import{b5 as _,b as $,u as D,br as N,_ as U}from"./main-fFbGxLEq.js";import{a as A,i as F,f as B}from"./vendor-react-DJCar8wk.js";import{a as G}from"./actionLogger-BXRfdC3w.js";import"./index-Cc7IhL_s.js";import"./vendor-utils-hGafao2v.js";const H=e=>{var n=e,{src:r,alt:t="",defaultSize:d="640w",fallbackSrc:c=null,className:g="",style:x={}}=n,m=((e,o)=>{var a={};for(var n in e)l.call(e,n)&&o.indexOf(n)<0&&(a[n]=e[n]);if(null!=e&&i)for(var n of i(e))o.indexOf(n)<0&&s.call(e,n)&&(a[n]=e[n]);return a})(n,["src","alt","defaultSize","fallbackSrc","className","style"]);const[h,p]=A.useState(!1);if(!r&&!c)return null;const u=h&&c?c:r,{src:v,srcSet:j,sizes:b}=_(u,d);return a.jsx("img",((e,a)=>{for(var n in a||(a={}))l.call(a,n)&&o(e,n,a[n]);if(i)for(var n of i(a))s.call(a,n)&&o(e,n,a[n]);return e})({src:v,srcSet:h?null:j,sizes:h?null:b,alt:t,onError:()=>{!h&&c&&p(!0)},className:g,style:x,loading:"lazy"},m))};H.propTypes={src:n.string,alt:n.string,defaultSize:n.oneOf(["320w","640w","1024w","1440w","1920w"]),fallbackSrc:n.string,className:n.string,style:n.object};const Y=()=>{var e,i,l;const{id:s}=F(),{t:o}=$(),[n,O]=A.useState(null),[P,R]=A.useState("640w"),[W,L]=A.useState(3),{data:T,loading:_,error:B}=D(N,{variables:{id:s},skip:!s,fetchPolicy:"network-only"}),Y=()=>{G.buttonClicked("close-gallery-viewer","create-long-video",{imageId:null==n?void 0:n.id,longVideoId:s,page:"long-video-images-gallery"}),O(null)},Z=()=>{var e;if(!n||!(null==(e=null==T?void 0:T.longVideo)?void 0:e.images))return;const i=T.longVideo.images.findIndex(e=>e.id===n.id);i>0&&(G.buttonClicked("gallery-navigate-prev","create-long-video",{fromImageId:n.id,fromIndex:i,toIndex:i-1,totalImages:T.longVideo.images.length,longVideoId:s,page:"long-video-images-gallery"}),O(T.longVideo.images[i-1]))},q=()=>{var e;if(!n||!(null==(e=null==T?void 0:T.longVideo)?void 0:e.images))return;const i=T.longVideo.images.findIndex(e=>e.id===n.id);i<T.longVideo.images.length-1&&(G.buttonClicked("gallery-navigate-next","create-long-video",{fromImageId:n.id,fromIndex:i,toIndex:i+1,totalImages:T.longVideo.images.length,longVideoId:s,page:"long-video-images-gallery"}),O(T.longVideo.images[i+1]))},J=e=>{var i,l;G.filterChanged("gallery-image-size","create-long-video",{previousSize:P,newSize:e,columns:W,totalImages:(null==(l=null==(i=null==T?void 0:T.longVideo)?void 0:i.images)?void 0:l.length)||0,longVideoId:s,page:"long-video-images-gallery"}),R(e)},K=e=>{n&&("ArrowLeft"===e.key?Z():"ArrowRight"===e.key?q():"Escape"===e.key&&Y())};if(A.useEffect(()=>(window.addEventListener("keydown",K),()=>{window.removeEventListener("keydown",K)}),[n]),_)return a.jsx(r,{sx:{display:"flex",justifyContent:"center",p:4},children:a.jsx(t,{})});if(B)return a.jsx(d,{elevation:0,sx:{p:3,borderRadius:2,border:"1px solid",borderColor:"error.main"},children:a.jsxs(c,{color:"error",children:[o("errorLoadingImages","Error loading images"),": ",B.message]})});const M=(null==(e=null==T?void 0:T.longVideo)?void 0:e.images)||[];if(0===M.length)return a.jsx(d,{elevation:0,sx:{p:3,borderRadius:2,border:"1px solid",borderColor:"divider"},children:a.jsx(c,{children:o("noImagesFound","No images found for this video")})});const Q=[...M].sort((e,i)=>e.position-i.position);return a.jsxs(r,{children:[a.jsxs(r,{sx:{display:"flex",justifyContent:"space-between",alignItems:"center",mb:3},children:[a.jsxs(c,{variant:"h6",children:[o("generatedImages","Generated Images")," (",M.length,")"]}),a.jsxs(r,{sx:{display:"flex",alignItems:"center",gap:2},children:[a.jsxs(g,{size:"small",sx:{minWidth:120},children:[a.jsx(x,{children:o("previewSize","Preview Size")}),a.jsxs(m,{value:P,label:o("previewSize","Preview Size"),onChange:e=>J(e.target.value),children:[a.jsx(h,{value:"320w",children:"320px"}),a.jsx(h,{value:"640w",children:"640px"}),a.jsx(h,{value:"1024w",children:"1024px"})]})]}),a.jsxs(r,{sx:{width:150},children:[a.jsxs(c,{variant:"caption",color:"text.secondary",sx:{mb:0},children:[o("columns","Columns"),": ",W]}),a.jsx(p,{size:"small",value:W,min:1,max:6,step:1,onChange:(e,i)=>{return l=i,G.filterChanged("gallery-columns","create-long-video",{previousColumns:W,newColumns:l,selectedSize:P,totalImages:(null==(a=null==(o=null==T?void 0:T.longVideo)?void 0:o.images)?void 0:a.length)||0,longVideoId:s,page:"long-video-images-gallery"}),void L(l);var l,o,a},"aria-label":o("columns","Columns")})]})]})]}),a.jsx(u,{container:!0,spacing:2,children:Q.map(e=>a.jsx(u,{item:!0,xs:12,sm:6,md:12/W,children:a.jsxs(v,{sx:{borderRadius:2,overflow:"hidden",height:"100%",display:"flex",flexDirection:"column"},children:[a.jsx(j,{onClick:()=>(e=>{var i,l,o,a;G.buttonClicked("view-gallery-image","create-long-video",{imageId:e.id,imageIndex:(null==(l=null==(i=null==T?void 0:T.longVideo)?void 0:i.images)?void 0:l.findIndex(i=>i.id===e.id))||0,totalImages:(null==(a=null==(o=null==T?void 0:T.longVideo)?void 0:o.images)?void 0:a.length)||0,imageStatus:e.status,selectedSize:P,columns:W,longVideoId:s,page:"long-video-images-gallery"}),O(e)})(e),children:a.jsxs(r,{sx:{position:"relative",pt:"33.33%"},children:[a.jsx(H,{src:e.s3Url||e.url,alt:`Image ${e.position}`,defaultSize:P,style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",objectFit:"cover"}}),a.jsx(r,{sx:{position:"absolute",top:8,left:8,bgcolor:"rgba(0,0,0,0.6)",color:"white",px:1,py:.5,borderRadius:1,fontSize:"0.875rem"},children:e.position}),a.jsx(r,{sx:{position:"absolute",top:8,right:8},children:a.jsx(b,{sx:{color:"white",filter:"drop-shadow(0px 0px 2px rgba(0,0,0,0.5))"}})})]})}),a.jsx(f,{sx:{p:1,pt:1,pb:1,flexGrow:1},children:a.jsxs(r,{sx:{display:"flex",gap:.5,flexWrap:"wrap"},children:[e.style&&a.jsx(y,{label:e.style,size:"small",color:"primary",variant:"outlined"}),e.model&&a.jsx(y,{label:e.model,size:"small",color:"secondary",variant:"outlined"})]})})]})},e.id))}),a.jsx(w,{open:!!n,onClose:Y,maxWidth:"lg",fullWidth:!0,children:n&&a.jsxs(a.Fragment,{children:[a.jsxs(I,{sx:{display:"flex",justifyContent:"space-between",alignItems:"center",pb:1},children:[a.jsxs(r,{sx:{display:"flex",alignItems:"center"},children:[a.jsxs(c,{variant:"h6",children:[o("image","Image")," ",n.position]}),n.style&&a.jsx(y,{label:n.style,size:"small",color:"primary",variant:"outlined",sx:{ml:2}}),n.model&&a.jsx(y,{label:n.model,size:"small",color:"secondary",variant:"outlined",sx:{ml:1}})]}),a.jsxs(r,{children:[a.jsx(g,{size:"small",sx:{minWidth:120,mr:1},children:a.jsxs(m,{value:P,onChange:e=>J(e.target.value),size:"small",displayEmpty:!0,children:[a.jsx(h,{value:"320w",children:"320px"}),a.jsx(h,{value:"640w",children:"640px"}),a.jsx(h,{value:"1024w",children:"1024px"}),a.jsx(h,{value:"1440w",children:"1440px"}),a.jsx(h,{value:"1920w",children:"1920px"})]})}),a.jsx(C,{onClick:()=>{return e=n.s3Url||n.url,i=`image_${n.position}.jpg`,void(e&&(G.buttonClicked("download-gallery-image","create-long-video",{imageId:null==n?void 0:n.id,imageUrl:e,filename:i,longVideoId:s,page:"long-video-images-gallery"}),U(()=>import("./main-fFbGxLEq.js").then(e=>e.db),__vite__mapDeps([0,1,2,3,4,5])).then(l=>{(0,l.default)(e,i)})));var e,i},title:o("downloadImage","Download Image"),children:a.jsx(V,{})}),a.jsx(C,{onClick:Y,title:o("close","Close"),children:a.jsx(z,{})})]})]}),a.jsxs(k,{dividers:!0,sx:{p:0,position:"relative",bgcolor:"black"},children:[a.jsxs(r,{sx:{display:"flex",justifyContent:"center",alignItems:"center",position:"relative"},children:[a.jsx(r,{sx:{width:"100%",maxHeight:"80vh",display:"flex",justifyContent:"center",alignItems:"center",p:2},children:a.jsx(H,{src:n.s3Url||n.url,alt:`Image ${n.position}`,defaultSize:P,style:{maxWidth:"100%",maxHeight:"80vh",objectFit:"contain"},loading:"eager"})}),a.jsx(r,{sx:{position:"absolute",left:0,top:0,bottom:0,display:"flex",alignItems:"center",pl:1},children:a.jsx(C,{onClick:Z,disabled:!(null==(i=null==T?void 0:T.longVideo)?void 0:i.images)||0===T.longVideo.images.indexOf(n),sx:{bgcolor:"rgba(255,255,255,0.3)","&:hover":{bgcolor:"rgba(255,255,255,0.5)"}},children:a.jsx(S,{})})}),a.jsx(r,{sx:{position:"absolute",right:0,top:0,bottom:0,display:"flex",alignItems:"center",pr:1},children:a.jsx(C,{onClick:q,disabled:!(null==(l=null==T?void 0:T.longVideo)?void 0:l.images)||T.longVideo.images.indexOf(n)===T.longVideo.images.length-1,sx:{bgcolor:"rgba(255,255,255,0.3)","&:hover":{bgcolor:"rgba(255,255,255,0.5)"}},children:a.jsx(E,{})})})]}),n.prompt&&a.jsxs(r,{sx:{p:2,bgcolor:"background.paper"},children:[a.jsxs(c,{variant:"subtitle2",gutterBottom:!0,children:[o("prompt","Prompt"),":"]}),a.jsx(c,{variant:"body2",color:"text.secondary",sx:{mb:1},children:n.prompt}),n.width&&n.height&&a.jsxs(c,{variant:"caption",color:"text.secondary",children:[o("dimensions","Dimensions"),": ",n.width," × ",n.height]})]})]})]})})]})},Z=()=>{const{id:e}=F(),{t:i}=$(),l=B();return a.jsx(O,{maxWidth:"xl",children:a.jsxs(r,{sx:{py:3},children:[a.jsxs(P,{"aria-label":"breadcrumb",sx:{mb:2},children:[a.jsx(R,{underline:"hover",color:"inherit",href:"/admin/dashboard",children:i("dashboard","Dashboard")}),a.jsx(R,{underline:"hover",color:"inherit",href:"/admin/long-videos",children:i("longVideos","Long Videos")}),a.jsx(R,{underline:"hover",color:"inherit",href:`/admin/long-videos/edit/${e}`,children:i("edit","Edit")}),a.jsx(c,{color:"text.primary",children:i("images","Images")})]}),a.jsxs(r,{sx:{display:"flex",justifyContent:"space-between",alignItems:"center",mb:3},children:[a.jsx(c,{variant:"h4",component:"h1",children:i("videoImages","Video Images")}),a.jsxs(r,{sx:{display:"flex",gap:2},children:[a.jsx(W,{startIcon:a.jsx(L,{}),onClick:()=>window.location.reload(),children:i("refresh","Refresh")}),a.jsx(W,{variant:"outlined",startIcon:a.jsx(T,{}),onClick:()=>{l(`/admin/long-videos/edit/${e}`)},children:i("backToVideo","Back to Video")})]})]}),a.jsxs(d,{elevation:0,sx:{p:3,borderRadius:2,border:e=>`1px solid ${e.palette.divider}`,mb:4},children:[a.jsx(c,{variant:"body2",color:"text.secondary",paragraph:!0,children:i("imagesInfo","These are the images generated for your long video. You can click on an image to view it in full size and download it. The images are displayed in the order they will appear in the video.")}),a.jsx(c,{variant:"body2",color:"text.secondary",paragraph:!0,children:i("adaptiveImages","Images are available in different sizes: 320px, 640px, 1024px, 1440px, and 1920px width. The system automatically selects the appropriate size based on the device screen.")}),a.jsx(Y,{})]})]})})};export{Z as default};