https://mystorybooks.ai/assets/StoryVideosPage-DwdoxE7t.js

1import{j as e}from"./ui-vendor-HJDEqx35.js";import{F as c,C as R,i as S,au as V,av as q,Q as o,a4 as C,B as I}from"./index-DNOo7ASW.js";import{u as X}from"./useStoryVideos-5BQUT3DN.js";import{a as u}from"./react-vendor-BFwPUZuF.js";import{V as z}from"./VideoPlayerModal-EXQtGltz.js";import{A as U}from"./AddToFeaturedDialog-BPHoHtz_.js";import{s as B}from"./nativeDownload-DsbSiIxV.js";import{P as T}from"./play-D83O_iHr.js";import{C as O}from"./circle-alert-D2CYwtO0.js";import{L as H}from"./layers-B5-cpncO.js";import{T as D}from"./trash-2-B1f8Mf_1.js";import{S as J}from"./StickyPageHeader-CrXpio5C.js";import"./query-vendor-bYF_98fO.js";import"./charts-vendor-BG5SjjuG.js";import"./label-BCK3J1h4.js";function Q(t){if(!t)return"—";const d=Math.floor(t/60),i=Math.round(t%60);return`${d}:${i.toString().padStart(2,"0")}`}function W(t){return new Date(t).toLocaleDateString("en-US",{month:"short",day:"numeric",year:"numeric"})}const G={queued:"Waiting in queue...",analyzing:"Planning scenes...",rendering:"Generating video",generating_audio:"Adding narration...",merging:"Assembling final video...",ready:"Ready",failed:"Failed"},Y=new Set(["queued","analyzing","rendering","generating_audio","merging"]);function K({job:t,onDelete:d}){const[i,m]=u.useState(!1),[a,g]=u.useState(!1),[h,s]=u.useState(!1),[w,N]=u.useState(t.is_featured??!1),[p,b]=u.useState(!1),[j,_]=u.useState(!1),x=Y.has(t.status),f=t.status==="ready",v=t.status==="failed",F=t.scene_count>0?Math.round(t.current_scene/t.scene_count*100):0,$=()=>{f&&t.r2_final_url&&m(!0)},A=async r=>{if(r.stopPropagation(),!(!t.r2_final_url||h))try{s(!0);const n=await fetch(`/api/v1/story-videos/${t.id}/download`,{credentials:"include"});if(!n.ok)throw new Error("Download failed");const l=await n.blob();await B(l,`${(t.story_title||"video").replace(/[^a-z0-9]/gi,"_")}_video.mp4`)}catch{o.error("Download failed. Please try again.")}finally{s(!1)}},P=r=>{r.stopPropagation(),!p&&(w?E():_(!0))},E=async()=>{if(!p)try{b(!0);const r=C(),n={"Content-Type":"application/json"};r&&(n["X-CSRF-Token"]=r);const l=await fetch(`/api/v1/story-videos/${t.id}/featured`,{method:"PATCH",credentials:"include",headers:n,body:JSON.stringify({is_featured:!1})});if(l.ok)N(!1),o.success("Removed from community");else{const y=await l.json().catch(()=>({}));o.error(y.message||"Failed to remove from community")}}catch{o.error("Something went wrong")}finally{b(!1)}},L=async r=>{const n=C(),l={"Content-Type":"application/json"};n&&(l["X-CSRF-Token"]=n);const y=await fetch(`/api/v1/story-videos/${t.id}/featured`,{method:"PATCH",credentials:"include",headers:l,body:JSON.stringify({is_featured:!0,is_showcase:r})}),M=await y.json().catch(()=>({}));if(y.ok)N(!0),o.success(r?"Shared to community & public showcase!":"Shared to community!");else throw new Error(M.message||"Failed to share")},k=r=>{r.stopPropagation(),a?d(t.id):(g(!0),setTimeout(()=>g(!1),3e3))};return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:`group relative bg-white rounded-2xl overflow-hidden shadow-md transition-all duration-300 flex flex-col ${f?"cursor-pointer hover:shadow-xl hover:-translate-y-0.5":""} ${x?"ring-2 ring-purple-400/50":""}`,onClick:$,children:[e.jsxs("div",{className:"relative aspect-video bg-gray-100 overflow-hidden",children:[f&&(t.r2_poster_url||t.cover_thumb_url||t.cover_image_url)?e.jsxs(e.Fragment,{children:[e.jsx("img",{src:t.r2_poster_url||t.cover_thumb_url||t.cover_image_url||"",alt:t.story_title,className:"w-full h-full object-cover transition-transform duration-300 group-hover:scale-[1.03]"}),e.jsx("div",{className:"absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity bg-black/30",children:e.jsx("div",{className:"w-14 h-14 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center border-2 border-white/50",children:e.jsx(T,{className:"w-6 h-6 text-white ml-1"})})}),e.jsx("div",{className:"absolute inset-0 flex items-center justify-center lg:hidden",children:e.jsx("div",{className:"w-12 h-12 rounded-full bg-black/30 backdrop-blur-sm flex items-center justify-center border border-white/30",children:e.jsx(T,{className:"w-5 h-5 text-white ml-0.5"})})})]}):x?e.jsxs("div",{className:"w-full h-full flex flex-col items-center justify-center gap-3 bg-gradient-to-br from-purple-50 to-pink-50",children:[e.jsxs("div",{className:"relative",children:[e.jsx("div",{className:"w-12 h-12 rounded-full border-4 border-purple-200 border-t-purple-600 animate-spin"}),e.jsx("div",{className:"absolute inset-0 flex items-center justify-center",children:e.jsx(c,{className:"w-5 h-5 text-purple-500"})})]}),x&&e.jsx("div",{className:"absolute inset-0 opacity-20",style:{background:"linear-gradient(90deg, transparent, rgba(168,85,247,0.4), transparent)",backgroundSize:"200% 100%",animation:"shimmer 2s infinite linear"}})]}):v?e.jsx("div",{className:"w-full h-full flex items-center justify-center bg-red-50",children:e.jsx(O,{className:"w-10 h-10 text-red-400"})}):e.jsx("div",{className:"w-full h-full flex items-center justify-center bg-gray-100",children:e.jsx(c,{className:"w-10 h-10 text-gray-300"})}),x&&e.jsx("div",{className:"absolute bottom-0 left-0 right-0",children:e.jsx("div",{className:"h-1 bg-purple-200",children:t.status==="rendering"&&t.scene_count>0?e.jsx("div",{className:"h-full bg-purple-500 transition-all duration-1000",style:{width:`${F}%`}}):e.jsx("div",{className:"h-full bg-purple-500",style:{width:"40%",animation:"indeterminate 1.5s ease-in-out infinite"}})})})]}),e.jsxs("div",{className:"p-3 flex flex-col flex-1",children:[e.jsx("h3",{className:"font-semibold text-gray-900 text-sm leading-snug line-clamp-2 mb-1",children:t.story_title}),x&&e.jsxs("p",{className:"text-xs text-purple-600 font-medium animate-pulse",children:[t.status==="queued"&&t.queue_position!=null?`Queue #${t.queue_position} · ~${Math.ceil(t.scene_count*2.25)} min`:G[t.status],t.status==="rendering"&&t.scene_count>0?` (${t.current_scene}/${t.scene_count}) · ~${Math.ceil((t.scene_count-t.current_scene)*2.25)} min left`:""]}),f&&e.jsxs("div",{className:"flex items-center gap-3 text-xs text-gray-500 mt-0.5",children:[e.jsxs("span",{className:"flex items-center gap-1",children:[e.jsx(R,{className:"w-3 h-3"}),Q(t.duration_seconds)]}),e.jsxs("span",{className:"flex items-center gap-1",children:[e.jsx(H,{className:"w-3 h-3"}),t.scene_count," clips"]}),e.jsx("span",{children:W(t.created_at)})]}),v&&e.jsx("p",{className:"text-xs text-red-500 mt-0.5",children:"Something went wrong. Your credits have been refunded."}),f&&e.jsxs("div",{className:"flex items-center gap-1.5 mt-2 pt-2 border-t border-gray-100",children:[e.jsx("button",{onClick:A,disabled:h,title:"Download",className:"flex items-center justify-center w-8 h-8 rounded-lg bg-blue-50 hover:bg-blue-100 text-blue-600 transition-colors disabled:opacity-60",children:h?e.jsx(S,{className:"w-3.5 h-3.5 animate-spin"}):e.jsx(V,{className:"w-3.5 h-3.5"})}),e.jsx("button",{onClick:P,disabled:p||!t.story_id,title:t.story_id?w?"Remove from community":"Share to public showcase":"Story not available",className:`flex items-center justify-center w-8 h-8 rounded-lg transition-colors disabled:opacity-60 ${w?"bg-purple-100 hover:bg-purple-200 text-purple-600":"bg-gray-100 hover:bg-gray-200 text-gray-400"}`,children:p?e.jsx(S,{className:"w-3.5 h-3.5 animate-spin"}):e.jsx(q,{className:"w-3.5 h-3.5"})}),e.jsxs("button",{onClick:k,title:a?"Click again to confirm delete":"Delete video",className:`flex items-center gap-1 px-2 h-8 rounded-lg transition-all text-xs font-medium ${a?"bg-red-500 text-white hover:bg-red-600":"bg-gray-50 hover:bg-red-50 text-gray-400 hover:text-red-500"}`,children:[e.jsx(D,{className:"w-3.5 h-3.5 flex-shrink-0"}),a&&e.jsx("span",{children:"Confirm?"})]})]}),v&&e.jsx("div",{className:"flex justify-end mt-auto pt-2",children:e.jsxs("button",{onClick:k,className:`text-xs flex items-center gap-1 px-2 py-1 rounded-lg transition-colors ${a?"text-red-600 bg-red-50":"text-gray-400 hover:text-red-500 hover:bg-red-50"}`,children:[e.jsx(D,{className:"w-3 h-3"}),a?"Confirm":"Delete"]})})]})]}),i&&e.jsx(z,{job:t,onClose:()=>m(!1)}),j&&t.story_id&&e.jsx(U,{open:j,onOpenChange:r=>{r||_(!1)},storyTitle:t.story_title,onConfirm:L}),e.jsx("style",{children:`
2        @keyframes shimmer {
3          0% { background-position: -200% 0; }
4          100% { background-position: 200% 0; }
5        }
6        @keyframes indeterminate {
7          0% { margin-left: 0%; width: 40%; }
8          50% { margin-left: 60%; width: 40%; }
9          100% { margin-left: 0%; width: 40%; }
10        }
11      `})]})}function Z({onNavigate:t}){return e.jsxs("div",{className:"flex flex-col items-center justify-center py-24 text-center px-4",children:[e.jsx("style",{children:`
12        @keyframes shimmer-slide {
13          0% { transform: translateX(-100%) skewX(-15deg); }
14          100% { transform: translateX(300%) skewX(-15deg); }
15        }
16        .btn-shimmer::after {
17          content: '';
18          position: absolute;
19          top: 0; left: 0;
20          width: 40%;
21          height: 100%;
22          background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
23          animation: shimmer-slide 2.2s ease-in-out infinite;
24        }
25      `}),e.jsx("div",{className:"w-20 h-20 rounded-2xl bg-gradient-to-br from-purple-500/20 to-pink-500/20 flex items-center justify-center mb-5 border border-purple-500/20",children:e.jsx(c,{className:"w-10 h-10 text-purple-400"})}

25),e.jsx("h2",{className:"text-xl font-bold text-gray-800 mb-2",children:"No story videos yet"}),e.jsx("p",{className:"text-gray-500 text-sm max-w-xs mb-6",children:"Turn your personalized storybooks into magical animated movies with AI-generated narration."}),e.jsxs("button",{onClick:()=>t("playground"),style:{backgroundColor:"#9333ea",color:"white",minWidth:"280px",height:"52px"},className:"btn-shimmer relative overflow-hidden flex items-center justify-center gap-2 px-10 rounded-xl font-medium text-sm hover:opacity-90 transition-opacity whitespace-nowrap",children:[e.jsx(c,{className:"w-4 h-4"}),"Create Story Video"]})]})}function fe({onNavigate:t,onCreateNew:d}){const{jobs:i,isLoading:m,isError:a,deleteJob:g}=X(),h=async s=>{try{await g.mutateAsync(s),o.success("Story video deleted")}catch{o.error("Failed to delete video")}};return e.jsxs("div",{className:"max-w-6xl mx-auto px-4 py-8",children:[e.jsxs(J,{className:"flex items-center justify-between mb-8",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"w-10 h-10 rounded-xl bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center",children:e.jsx(c,{className:"w-5 h-5 text-white"})}),e.jsxs("div",{children:[e.jsx("h1",{className:"text-2xl font-bold text-gray-900",children:"Story Videos"}),e.jsx("p",{className:"text-sm text-gray-700",children:"AI-animated movies from your storybooks"})]})]}),i.length>0&&e.jsxs(I,{onClick:()=>d?d():t("playground"),className:"flex items-center gap-2",style:{backgroundColor:"#9333ea",color:"white",border:"none"},onMouseEnter:s=>s.currentTarget.style.backgroundColor="#7e22ce",onMouseLeave:s=>s.currentTarget.style.backgroundColor="#9333ea",children:[e.jsx(c,{className:"w-4 h-4"}),"Create New"]})]}),m&&e.jsx("div",{className:"grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3",children:[1,2,3,4].map(s=>e.jsxs("div",{className:"bg-white rounded-2xl overflow-hidden shadow-md animate-pulse",children:[e.jsx("div",{className:"aspect-video bg-gray-200"}),e.jsxs("div",{className:"p-3 space-y-2",children:[e.jsx("div",{className:"h-4 bg-gray-200 rounded w-3/4"}),e.jsx("div",{className:"h-3 bg-gray-200 rounded w-1/2"})]})]},s))}),a&&e.jsxs("div",{className:"text-center py-20 text-gray-500",children:[e.jsx(c,{className:"w-12 h-12 mx-auto mb-3 opacity-30"}),e.jsx("p",{children:"Failed to load story videos. Please try again."})]}),!m&&!a&&i.length===0&&e.jsx(Z,{onNavigate:t}),!m&&!a&&i.length>0&&e.jsx("div",{className:"grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3",children:i.map(s=>e.jsx(K,{job:s,onDelete:h},s.id))})]})}export{fe as default};