https://uniai.ai/assets/TvWorkDetailPage-Djv4yaAc.js

1import{b as M,aW as Y,r as a,ex as j,z as y,b1 as ee,j as e,L as V,k as te,aV as se,cg as ae,ao as ie,dA as U,eV as re,cf as W,eY as G,ar as ne,dz as le,af as oe,d as ce,db as de,$ as ue,U as me}from"./index-BawMCgu8.js";import{B as $}from"./BackButton-BZ0REayw.js";import{e as he}from"./ReadOnlyCanvas-7SylNLF0.js";import{S as pe}from"./share-2-CNcYfc7P.js";import"./locale-en-B8Z5F_o1.js";import"./locale-zh-CN-CFdD1mPv.js";import"./locale-fr-j4CMJpfE.js";import"./locale-de-DuE2gagy.js";import"./locale-it-C6yb6RzN.js";import"./locale-ja-VjZBy5eF.js";import"./locale-ko-Cl0W-Az5.js";import"./locale-es-DwboUZze.js";import"./locale-zh-Hant-uT5aTnfX.js";import"./locale-ru-DEr1xfTZ.js";import"./locale-id-Buh3Uolz.js";import"./locale-pt-BR-CqD5J4_0.js";import"./maximize-C_UxdIWU.js";import"./VoiceCloneUpload-16anCSFt.js";import"./useMutation-D0Pwndul.js";import"./sliders-horizontal-Bmdy766e.js";import"./zoom-out-DwpmibdW.js";import"./zoom-in-CWl6FHRb.js";function fe({open:o,onClose:l,work:n,onCloned:i,previewToken:h}){const{t:u,i18n:k}=M(),d=Y(),[t,N]=a.useState(!1),[m,C]=a.useState(n.snapshotData??null),[P,b]=a.useState(!1);a.useEffect(()=>{C(n.snapshotData??null),b(!1)},[n.id]),a.useEffect(()=>{if(!o||m)return;let c=!1;return b(!0),j.get(n.id,!0,h).then(f=>{c||C(f.snapshotData??null)}).catch(()=>{c||y.error(u("tv.processNotPublic","The author has not made the canvas public"))}).finally(()=>{c||b(!1)}),()=>{c=!0}},[o,n.id]),a.useEffect(()=>{if(!o)return;const c=f=>{if(f.key==="Escape"){if(document.fullscreenElement)return;f.stopPropagation(),l()}};return window.addEventListener("keydown",c,!0),()=>window.removeEventListener("keydown",c,!0)},[o,l]),a.useEffect(()=>(o?document.body.style.overflow="hidden":document.body.style.overflow="",()=>{document.body.style.overflow=""}),[o]);const x=a.useCallback(async()=>{var c,f;if(!t){N(!0);try{const p=await j.clone(n.id);y.success(u("tv.copySuccess","Copied to your projects")),i==null||i();const g=`/${k.language}/app/design/${p.projectId}`;window.open(g,"_blank")||d(g)}catch(p){const g=(f=(c=p==null?void 0:p.response)==null?void 0:c.data)==null?void 0:f.message;y.error(g||u("tv.copyFailed","Failed to copy"))}finally{N(!1)}}},[t,n.id,i,k.language,d,u]),v=a.useCallback(()=>{window.history.length>1?d(-1):l()},[d,l]);if(!o)return null;const w={...(m==null?void 0:m.viewport)||{zoom:1,offsetX:0,offsetY:0},connections:(m==null?void 0:m.connections)||[]};return ee.createPortal(e.jsxs("div",{className:"fixed inset-0 z-[9999] bg-[var(--bg-primary)] flex flex-col",children:[P?e.jsx("div",{className:"flex-1 flex items-center justify-center",children:e.jsx(V,{className:"w-8 h-8 animate-spin text-[var(--text-tertiary)]"})}):e.jsx(he,{elements:(m==null?void 0:m.elements)||[],canvasState:w,className:"flex-1"}),e.jsxs("header",{className:"absolute inset-x-0 top-0 z-10 flex items-center justify-between px-4 py-3 bg-gradient-to-b from-[var(--bg-primary)] to-transparent",children:[e.jsxs("div",{className:"flex items-center gap-3 min-w-0",children:[e.jsx($,{onClick:v}),e.jsx("h2",{className:"text-sm font-medium text-[var(--text-primary)] truncate",children:n.title})]}),e.jsxs("button",{onClick:x,disabled:t,className:"flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg bg-[var(--text-primary)] text-[var(--bg-primary)] hover:opacity-90 disabled:opacity-50 transition-opacity shadow-lg shrink-0",children:[t?e.jsx(V,{className:"w-4 h-4 animate-spin"}):e.jsx(te,{className:"w-4 h-4"}),t?u("tv.copying","Cloning..."):u("tv.copyProject","Clone project")]})]})]}),document.body)}function H(o){var l;return{...o,userId:((l=o.user)==null?void 0:l.id)??"",status:"approved",rejectReason:null,createdAt:o.publishedAt??new Date().toISOString(),updatedAt:o.publishedAt??new Date().toISOString(),snapshotData:null,isLiked:!1,isOwner:!1}}function De(){var D,F,B;const{workId:o}=se(),l=Y(),n=ae(),{t:i,i18n:h}=M(),u=ie(s=>s.isAuthenticated),k=new URLSearchParams(n.search).get("previewToken")||void 0,d=n.state??null,[t,N]=a.useState(()=>d!=null&&d.work&&d.work.id===o?H(d.work):null),[m,C]=a.useState(!t),[P,b]=a.useState(!1),[x,v]=a.useState(!1),[E,w]=a.useState(!1),[c,f]=a.useState(!1),[p,g]=a.useState(!1),[,A]=a.useState(0),R=a.useRef(null),[,O]=a.useState(0),[I,_]=a.useState(()=>(d==null?void 0:d.feedItems)??[]);a.useEffect(()=>{if(!o)return;let s=!1;return t||C(!0),b(!1),v(!1),w(!1),j.get(o,!1,k).then(r=>{s||(N(r),g(r.isLiked),A(r.likeCount),O(r.copyCount))}).catch(()=>{s||b(!0)}).finally(()=>{s||C(!1)}),()=>{s=!0}},[o]),a.useEffect(()=>{let s=!1;return j.list({pageSize:12}).then(r=>{if(s)return;const Z=Array.isArray(r==null?void 0:r.items)?r.items:[];_(Z)}).catch(()=>{}),()=>{s=!0}},[]),a.useEffect(()=>{if(!(!t||new URLSearchParams(n.search).get("process")!=="1")&&t.isCanvasPublic){if(!u){S();return}w(!0)}},[t]),a.useEffect(()=>{if(!x)return;const s=r=>{if(r.key==="Escape"){if(document.fullscreenElement)return;v(!1)}};return window.addEventListener("keydown",s),()=>window.removeEventListener("keydown",s)},[x]),a.useEffect(()=>{const s=R.current;s&&(x?(s.muted=!1,s.volume=1,s.play().catch(()=>{})):(s.muted=!0,s.volume=0))},[x]);const S=a.useCallback(()=>

1{l(`/${h.language}/login?redirect=${encodeURIComponent(n.pathname+n.search)}`)},[l,h.language,n.pathname,n.search]),q=a.useCallback(async()=>{if(!(!t||c)){if(!u){S();return}f(!0);try{const s=p?await j.unlike(t.id):await j.like(t.id);g(s.liked),A(s.likeCount)}catch{y.error(i("tv.likeFailed","Failed to update like"))}finally{f(!1)}}},[t,c,u,p,S,i]),T=a.useCallback(()=>{if(t!=null&&t.isCanvasPublic){if(!u){S();return}w(!0)}},[t,u,S]),X=a.useCallback(async()=>{try{await navigator.clipboard.writeText(window.location.href),y.success(i("tv.shareCopied","Link copied"))}catch{y.error(i("tv.shareCopyFailed","Failed to copy link"))}},[i]),J=a.useCallback(s=>{N(r=>r&&{...H(s),updatedAt:s.publishedAt??r.updatedAt}),g(!1),v(!1),l(`/${h.language}/app/design/tv/${s.id}`)},[l,h.language]),K=a.useCallback(()=>{w(!1);const s=new URLSearchParams(n.search);s.get("process")&&(s.delete("process"),l({pathname:n.pathname,search:s.toString()},{replace:!0}))},[n.pathname,n.search,l]),L=!!t&&t.isCanvasPublic;if(m)return e.jsxs("div",{className:"h-screen bg-black flex flex-col animate-pulse overflow-hidden",children:[e.jsxs("div",{className:"flex items-center justify-between px-6 py-4 shrink-0",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"w-20 h-9 rounded-full bg-white/10"}),e.jsx("div",{className:"w-8 h-8 rounded-full bg-white/10"}),e.jsx("div",{className:"w-52 h-5 rounded bg-white/10"})]}),e.jsx("div",{className:"w-56 h-8 rounded bg-white/10"})]}),e.jsx("div",{className:"flex-1 mx-6 md:mx-16 rounded-xl bg-white/5"}),e.jsx("div",{className:"flex gap-2 px-2 py-3 shrink-0 overflow-hidden",children:Array.from({length:9}).map((s,r)=>e.jsx("div",{className:"w-44 aspect-video rounded-md bg-white/5 shrink-0"},r))})]});if(P||!t)return e.jsx("div",{className:"h-screen flex items-center justify-center bg-black",children:e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(U,{className:"w-12 h-12 text-white/20 mx-auto"}),e.jsx("p",{className:"text-white/80 text-sm",children:i("tv.workNotFound","This work does not exist or has been removed")}),e.jsx("button",{onClick:()=>l(`/${h.language}/app/design`),className:"px-5 py-2 text-sm rounded-full bg-white text-black hover:bg-white/90 transition-colors",children:i("common.goHome","Go Home")})]})});const Q=new Date(t.updatedAt).toLocaleString(h.language,{year:"numeric",month:"long",day:"numeric",hour:"2-digit",minute:"2-digit"}),z=t&&!I.some(s=>s.id===t.id)?[t,...I]:I;return e.jsxs("div",{className:"h-screen bg-black text-white relative overflow-hidden",children:[e.jsx(re,{title:t.title,description:t.description,path:`/app/design/tv/${t.id}`}),e.jsx("div",{className:"absolute inset-0 animate-pulse bg-gradient-to-br from-neutral-900 via-neutral-800/70 to-neutral-900"}),t.videoUrl?e.jsx("video",{ref:s=>{R.current=s,s&&!x&&(s.muted=!0,s.volume=0)},src:t.videoUrl,poster:t.coverUrl||void 0,autoPlay:!0,muted:!0,loop:!0,playsInline:!0,crossOrigin:W(t.videoUrl)?"anonymous":void 0,controls:x,className:"absolute inset-0 w-full h-full object-contain"},t.id):t.coverUrl?e.jsx(G,{src:t.coverUrl,alt:t.title,className:"absolute inset-0 w-full h-full object-contain"}):e.jsx("div",{className:"absolute inset-0 flex items-center justify-center bg-black",children:e.jsx(U,{className:"w-14 h-14 text-white/10"})}),e.jsx("span",{className:"absolute bottom-2.5 right-3 z-20 text-[10px] text-white/50 bg-black/40 backdrop-blur-sm px-2 py-0.5 rounded-full pointer-events-none",children:i("tv.aiGeneratedBadge","Contains AI-generated content")}),x?e.jsxs("div",{className:"absolute inset-x-0 top-0 z-10 flex items-center justify-between px-6 py-4 pointer-events-none",children:[e.jsx("div",{className:"pointer-events-auto",children:e.jsx($,{onClick:()=>v(!1)})}),L&&e.jsxs("button",{onClick:T,className:"pointer-events-auto flex items-center gap-1.5 px-4 py-2 text-sm rounded-lg bg-[#1c1c1e]/90 text-white/90 hover:bg-[#2a2a2c] hover:text-white transition-colors",children:[i("tv.viewProcess","View creative process"),e.jsx(ne,{className:"w-4 h-4"})]})]}):e.jsxs("div",{className:"absolute inset-0 z-10 flex flex-col pointer-events-none",children:[e.jsxs("div",{className:"flex items-center justify-between gap-4 px-6 py-4 shrink-0 pointer-events-auto bg-gradient-to-b from-black/60 to-transparent",children:[e.jsxs("div",{className:"flex items-center gap-3 min-w-0",children:[e.jsx($,{onClick:()=>l(`/${h.language}/app/design`)}),e.jsxs("button",{type:"button",onClick:()=>{t.userId&&l(`/${h.language}/app/design/tv/user/${t.userId}`)},className:"group/author flex items-center gap-3 min-w-0 shrink-0",children:[(D=t.user)!=null&&D.avatarUrl?e.jsx(le,{url:t.user.avatarUrl,alt:t.user.name,className:"w-8 h-8 rounded-full object-cover ring-1 ring-white/20 shrink-0"}):e.jsx("div",{className:"w-8 h-8 rounded-full bg-white/10 flex items-center justify-center text-sm text-white/70 shrink-0",children:(((F=t.user)==null?void 0:F.name)||"?").slice(0,1)}),e.jsx("span",{className:"text-sm text-white/85 shrink-0 group-hover/author:text-white transition-colors",children:(B=t.user)==null?void 0:B.name})]}),e.jsx("span",{className:"text-white/25 shrink-0",children:"|"}),e.jsx("h1",{className:"text-base font-medium text-white truncate",children:t.title})]}),e.jsxs("div",{className:"text-right shrink-0",children:[e.jsxs("p",{className:"text-sm text-white/80",children:[i("tv.updatedAtLabel","Updated"),": ",Q]}),e.jsxs("p",{className:"text-[11px] text-white/45 mt-0.5 inline-flex items-center gap-1",children:[e.jsx(oe,{className:"w-3 h-3"}),i("tv.aiGeneratedBadge","Contains AI-generated content")]})]})]}),e.jsxs("div",{className:"flex-1 relative min-h-0",children:[t.isOwner&&t.status!=="approved"&&e.jsxs("div",{className:"absolute top-3 left-6 px-3 py-1.5 rounded-full text-xs bg-yellow-500/20 text-yellow-300 ring-1 ring-yellow-500/30 backdrop-blur-sm pointer-events-auto",children:[t.status==="pending"&&i("tv.ownerPendingBanner","In review — only visible to you for now"),t.status==="rejected"&&`${i("tv.ownerRejectedBanner","Rejected")}${t.rejectReason?`: ${t.rejectReason}`:""}`,t.status==="removed"&&i("tv.ownerRemovedBanner","This work has been taken down")]}),e.jsxs("div",{className:"absolute inset-x-0 bottom-5 flex items-center justify-center gap-3 pointer-events-auto",children:[t.videoUrl&&e.jsxs("button",{onClick:()=>v(!0),className:"flex items-center gap-2 px-6 py-2.5 text-sm font-medium rounded-full bg-white text-black hover:bg-white/90 transition-colors shadow-xl",children:[e.jsx(ce,{className:"w-4 h-4",fill:"

1currentColor"}),i("tv.watchNow","Watch now")]}),e.jsxs("button",{onClick:T,disabled:!L,title:L?void 0:i("tv.processNotPublic","The author has not made the canvas public"),"aria-disabled":!L,className:"flex items-center gap-2 px-5 py-2.5 text-sm rounded-full bg-black/45 backdrop-blur-md ring-1 ring-white/20 text-white hover:bg-black/60 disabled:opacity-40 disabled:cursor-not-allowed transition-colors shadow-xl",children:[e.jsx(de,{className:"w-4 h-4"}),i("tv.viewProcess","View creative process")]}),e.jsx("button",{onClick:()=>{t.userId&&l(`/${h.language}/app/design/tv/user/${t.userId}`)},"aria-label":i("tv.viewAuthor","Visit profile"),title:i("tv.viewAuthor","Visit profile"),className:"flex items-center justify-center w-[42px] h-[42px] rounded-full bg-black/45 backdrop-blur-md ring-1 ring-white/20 text-white hover:bg-black/60 transition-colors shadow-xl",children:e.jsx(ue,{className:"w-4 h-4"})}),e.jsx("button",{onClick:q,disabled:c||t.status!=="approved","aria-pressed":p,className:`flex items-center justify-center w-[42px] h-[42px] rounded-full backdrop-blur-md ring-1 transition-colors shadow-xl disabled:opacity-40 ${p?"bg-red-500/25 text-red-300 ring-red-400/30":"bg-black/45 text-white ring-white/20 hover:bg-black/60"}`,children:e.jsx(me,{className:`w-4 h-4 ${p?"fill-current":""}`})}),e.jsx("button",{onClick:X,"aria-label":i("tv.shareWork","Share"),className:"flex items-center justify-center w-[42px] h-[42px] rounded-full bg-black/45 backdrop-blur-md ring-1 ring-white/20 text-white hover:bg-black/60 transition-colors shadow-xl",children:e.jsx(pe,{className:"w-4 h-4"})})]})]}),z.length>0&&e.jsx("div",{className:"flex gap-2 px-2 py-3 shrink-0 overflow-x-auto pointer-events-auto bg-gradient-to-t from-black/70 to-transparent [-webkit-overflow-scrolling:touch]",children:z.map(s=>{const r=s.id===t.id;return e.jsxs("button",{onClick:()=>{r||J(s)},title:s.title,"aria-current":r,className:`relative w-44 md:w-52 aspect-video rounded-md overflow-hidden bg-neutral-900 shrink-0 transition-all ${r?"ring-2 ring-white":"ring-1 ring-white/10 opacity-55 hover:opacity-90 hover:ring-white/60"}`,children:[e.jsx("div",{className:"absolute inset-0 animate-pulse bg-gradient-to-br from-neutral-800 via-neutral-900 to-neutral-800"}),s.coverUrl?e.jsx(G,{src:s.coverUrl,alt:s.title,className:"absolute inset-0 w-full h-full object-cover"}):s.videoUrl?e.jsx("video",{src:`${s.videoUrl}#t=0.1`,preload:"metadata",muted:!0,playsInline:!0,crossOrigin:W(s.videoUrl)?"anonymous":void 0,className:"absolute inset-0 w-full h-full object-cover"}):e.jsx("div",{className:"absolute inset-0 flex items-center justify-center bg-neutral-900",children:e.jsx(U,{className:"w-6 h-6 text-white/15"})})]},s.id)})})]}),e.jsx(fe,{open:E,onClose:K,work:t,previewToken:k,onCloned:()=>O(s=>s+1)})]})}export{De as default};