├── app ├── favicon.ico ├── page.tsx ├── layout.tsx ├── api │ ├── video-title │ │ └── route.ts │ ├── videos │ │ └── [id] │ │ │ ├── content │ │ │ └── route.ts │ │ │ └── route.ts │ ├── remix-video │ │ └── route.ts │ ├── generate-images │ │ └── route.ts │ ├── suggest-prompt │ │ └── route.ts │ └── generate-video │ │ └── route.ts └── globals.css ├── public ├── sora-2.png └── sora-demo-visual.jpg ├── postcss.config.mjs ├── next.config.ts ├── types └── generated.ts ├── lib ├── utils.ts └── sora.ts ├── ui ├── index.ts ├── Card.tsx ├── CardContent.tsx ├── Label.tsx ├── Input.tsx ├── Select.tsx ├── Textarea.tsx └── Button.tsx ├── eslint.config.mjs ├── .gitignore ├── components ├── ui │ ├── label.tsx │ ├── textarea.tsx │ ├── separator.tsx │ ├── input.tsx │ ├── tooltip.tsx │ ├── button.tsx │ ├── empty.tsx │ ├── input-group.tsx │ ├── select.tsx │ └── field.tsx ├── VideoSidebar.tsx ├── VideoPreviewOverlay.tsx ├── VideoCard.tsx ├── VideoForm.tsx └── App.tsx ├── tsconfig.json ├── LICENSE ├── package.json ├── hooks ├── useVideoPolling.ts ├── usePersistedState.ts ├── useThumbnails.ts ├── usePreview.ts └── useVideoForm.ts ├── utils ├── titles.ts ├── formatters.ts ├── image.ts └── video.ts ├── middleware.ts ├── README.md └── services └── soraApi.ts /app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/openai/openai-sora-sample-app/HEAD/app/favicon.ico -------------------------------------------------------------------------------- /public/sora-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/openai/openai-sora-sample-app/HEAD/public/sora-2.png -------------------------------------------------------------------------------- /postcss.config.mjs: -------------------------------------------------------------------------------- 1 | const config = { 2 | plugins: ["@tailwindcss/postcss"], 3 | }; 4 | 5 | export default config; 6 | -------------------------------------------------------------------------------- /public/sora-demo-visual.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/openai/openai-sora-sample-app/HEAD/public/sora-demo-visual.jpg -------------------------------------------------------------------------------- /app/page.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import App from "@/components/App"; 4 | 5 | export default function Page() { 6 | return ; 7 | } 8 | -------------------------------------------------------------------------------- /next.config.ts: -------------------------------------------------------------------------------- 1 | import type { NextConfig } from "next"; 2 | 3 | const nextConfig: NextConfig = { 4 | devIndicators: false, 5 | }; 6 | 7 | export default nextConfig; 8 | -------------------------------------------------------------------------------- /types/generated.ts: -------------------------------------------------------------------------------- 1 | export interface GeneratedImageSuggestion { 2 | id: string; 3 | url: string; 4 | base64?: string | null; 5 | description?: string | null; 6 | } 7 | -------------------------------------------------------------------------------- /lib/utils.ts: -------------------------------------------------------------------------------- 1 | import { clsx, type ClassValue } from "clsx" 2 | import { twMerge } from "tailwind-merge" 3 | 4 | export function cn(...inputs: ClassValue[]) { 5 | return twMerge(clsx(inputs)) 6 | } 7 | -------------------------------------------------------------------------------- /ui/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Card } from "./Card"; 2 | export { default as CardContent } from "./CardContent"; 3 | export { default as Input } from "./Input"; 4 | export { default as Label } from "./Label"; 5 | export { default as Select } from "./Select"; 6 | export { default as Textarea } from "./Textarea"; 7 | -------------------------------------------------------------------------------- /ui/Card.tsx: -------------------------------------------------------------------------------- 1 | import type { PropsWithChildren } from "react"; 2 | 3 | export type CardProps = PropsWithChildren<{ className?: string }>; 4 | 5 | const Card = ({ children, className = "" }: CardProps) => ( 6 |

7 | {children} 8 |

9 | ); 10 | 11 | export default Card; 12 | -------------------------------------------------------------------------------- /ui/CardContent.tsx: -------------------------------------------------------------------------------- 1 | import type { PropsWithChildren } from "react"; 2 | 3 | export type CardContentProps = PropsWithChildren<{ className?: string }>; 4 | 5 | const CardContent = ({ children, className = "" }: CardContentProps) => ( 6 |

7 | {children} 8 |

9 | ); 10 | 11 | export default CardContent; 12 | -------------------------------------------------------------------------------- /ui/Label.tsx: -------------------------------------------------------------------------------- 1 | import type { LabelHTMLAttributes, PropsWithChildren } from "react"; 2 | 3 | export type LabelProps = PropsWithChildren>; 4 | 5 | const Label = ({ children, className = "", ...rest }: LabelProps) => ( 6 | 7 | {children} 8 | 9 | ); 10 | 11 | export default Label; 12 | -------------------------------------------------------------------------------- /ui/Input.tsx: -------------------------------------------------------------------------------- 1 | import type { InputHTMLAttributes } from "react"; 2 | 3 | export type InputProps = InputHTMLAttributes; 4 | 5 | const Input = ({ className = "", ...props }: InputProps) => ( 6 | 10 | ); 11 | 12 | export default Input; 13 | -------------------------------------------------------------------------------- /ui/Select.tsx: -------------------------------------------------------------------------------- 1 | import type { SelectHTMLAttributes } from "react"; 2 | 3 | export type SelectProps = SelectHTMLAttributes; 4 | 5 | const Select = ({ className = "", ...props }: SelectProps) => ( 6 |

10 | );
11 | 
12 | export default Textarea;
13 |

--------------------------------------------------------------------------------
/eslint.config.mjs:
--------------------------------------------------------------------------------
 1 | import { dirname } from "path";
 2 | import { fileURLToPath } from "url";
 3 | import { FlatCompat } from "@eslint/eslintrc";
 4 | 
 5 | const __filename = fileURLToPath(import.meta.url);
 6 | const __dirname = dirname(__filename);
 7 | 
 8 | const compat = new FlatCompat({
 9 |   baseDirectory: __dirname,
10 | });
11 | 
12 | const eslintConfig = [
13 |   ...compat.extends("next/core-web-vitals", "next/typescript"),
14 |   {
15 |     ignores: [
16 |       "node_modules/**",
17 |       ".next/**",
18 |       "out/**",
19 |       "build/**",
20 |       "next-env.d.ts",
21 |     ],
22 |   },
23 | ];
24 | 
25 | export default eslintConfig;
26 |

--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.*
 7 | .yarn/*
 8 | !.yarn/patches
 9 | !.yarn/plugins
10 | !.yarn/releases
11 | !.yarn/versions
12 | 
13 | # testing
14 | /coverage
15 | 
16 | # next.js
17 | /.next/
18 | /out/
19 | 
20 | # production
21 | /build
22 | 
23 | # misc
24 | .DS_Store
25 | *.pem
26 | 
27 | # debug
28 | npm-debug.log*
29 | yarn-debug.log*
30 | yarn-error.log*
31 | .pnpm-debug.log*
32 | 
33 | # env files (can opt-in for committing if needed)
34 | .env*
35 | 
36 | # vercel
37 | .vercel
38 | 
39 | # typescript
40 | *.tsbuildinfo
41 | next-env.d.ts
42 |

--------------------------------------------------------------------------------
/components/ui/label.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as LabelPrimitive from "@radix-ui/react-label"
 3 | 
 4 | import { cn } from "@/lib/utils"
 5 | 
 6 | function Label({
 7 |   className,
 8 |   ...props
 9 | }: React.ComponentProps<typeof LabelPrimitive.Root>) {
10 |   return (
11 |     <LabelPrimitive.Root
12 |       data-slot="label"
13 |       className={cn(
14 |         "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
15 |         className
16 |       )}
17 |       {...props}
18 |     />
19 |   )
20 | }
21 | 
22 | export { Label }
23 |

--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ES2017",
 4 |     "lib": ["dom", "dom.iterable", "esnext"],
 5 |     "allowJs": true,
 6 |     "skipLibCheck": true,
 7 |     "strict": true,
 8 |     "noEmit": true,
 9 |     "esModuleInterop": true,
10 |     "module": "esnext",
11 |     "moduleResolution": "bundler",
12 |     "resolveJsonModule": true,
13 |     "isolatedModules": true,
14 |     "jsx": "preserve",
15 |     "incremental": true,
16 |     "plugins": [
17 |       {
18 |         "name": "next"
19 |       }
20 |     ],
21 |     "paths": {
22 |       "@/*": ["./*"]
23 |     }
24 |   },
25 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
26 |   "exclude": ["node_modules"]
27 | }
28 |

--------------------------------------------------------------------------------
/components/ui/textarea.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | const Textarea = React.forwardRef<
 6 |   HTMLTextAreaElement,
 7 |   React.ComponentProps<"textarea">
 8 | >(({ className, ...props }, ref) => {
 9 |   return (
10 |     <textarea
11 |       className={cn(
12 |         "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
13 |         className
14 |       )}
15 |       ref={ref}
16 |       {...props}
17 |     />
18 |   )
19 | })
20 | Textarea.displayName = "Textarea"
21 | 
22 | export { Textarea }
23 |

--------------------------------------------------------------------------------
/components/ui/separator.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as SeparatorPrimitive from "@radix-ui/react-separator"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | function Separator({
 9 |   className,
10 |   orientation = "horizontal",
11 |   decorative = true,
12 |   ...props
13 | }: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
14 |   return (
15 |     <SeparatorPrimitive.Root
16 |       data-slot="separator"
17 |       decorative={decorative}
18 |       orientation={orientation}
19 |       className={cn(
20 |         "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
21 |         className
22 |       )}
23 |       {...props}
24 |     />
25 |   )
26 | }
27 | 
28 | export { Separator }
29 |

--------------------------------------------------------------------------------
/components/ui/input.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
 6 |   ({ className, type, ...props }, ref) => {
 7 |     return (
 8 |       <input
 9 |         type={type}
10 |         className={cn(
11 |           "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
12 |           className
13 |         )}
14 |         ref={ref}
15 |         {...props}
16 |       />
17 |     )
18 |   }
19 | )
20 | Input.displayName = "Input"
21 | 
22 | export { Input }
23 |

--------------------------------------------------------------------------------
/ui/Button.tsx:
--------------------------------------------------------------------------------
 1 | import type { ButtonHTMLAttributes, PropsWithChildren } from "react";
 2 | 
 3 | export type ButtonVariant = "default" | "secondary" | "ghost";
 4 | 
 5 | export type ButtonProps = PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>> & {
 6 |   variant?: ButtonVariant;
 7 | };
 8 | 
 9 | const Button = ({ children, className = "", variant = "default", ...rest }: ButtonProps) => {
10 |   const base = "inline-flex items-center gap-2 rounded-xl px-4 py-2 text-sm font-medium shadow-sm transition-colors";
11 |   const style = variant === "ghost"
12 |     ? "bg-transparent text-foreground hover:bg-accent"
13 |     : variant === "secondary"
14 |       ? "border border-border bg-card text-foreground hover:bg-muted/60"
15 |       : "bg-primary text-primary-foreground hover:bg-primary/90";
16 | 
17 |   return (
18 |     <button {...rest} className={`${base} ${style} ${className}`}>
19 |       {children}
20 |     </button>
21 |   );
22 | };
23 | 
24 | export default Button;
25 |

--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2025 OpenAI
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |

--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "sora-sample-app",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "eslint"
10 |   },
11 |   "dependencies": {
12 |     "@radix-ui/react-label": "^2.1.7",
13 |     "@radix-ui/react-select": "^2.2.6",
14 |     "@radix-ui/react-separator": "^1.1.7",
15 |     "@radix-ui/react-slot": "^1.2.3",
16 |     "@radix-ui/react-tooltip": "^1.2.8",
17 |     "class-variance-authority": "^0.7.1",
18 |     "clsx": "^2.1.1",
19 |     "lucide-react": "^0.460.0",
20 |     "next": "^15.5.9",
21 |     "openai": "^4.70.0",
22 |     "react": "19.1.0",
23 |     "react-dom": "19.1.0",
24 |     "tailwind-merge": "^3.3.1",
25 |     "tailwindcss-animate": "^1.0.7",
26 |     "tw-animate-css": "^1.4.0"
27 |   },
28 |   "devDependencies": {
29 |     "@eslint/eslintrc": "^3",
30 |     "@tailwindcss/postcss": "^4",
31 |     "@types/node": "^20",
32 |     "@types/react": "^19",
33 |     "@types/react-dom": "^19",
34 |     "eslint": "^9",
35 |     "eslint-config-next": "15.5.4",
36 |     "tailwindcss": "^4",
37 |     "typescript": "^5"
38 |   }
39 | }
40 |

--------------------------------------------------------------------------------
/hooks/useVideoPolling.ts:
--------------------------------------------------------------------------------
 1 | import { useEffect } from "react";
 2 | import { fetchVideo } from "../services/soraApi";
 3 | import { normalizeVideo, type VideoItem } from "../utils/video";
 4 | 
 5 | type UpdateFn = (current: VideoItem) => VideoItem;
 6 | 
 7 | type UseVideoPollingOptions = {
 8 |   items: VideoItem[];
 9 |   onUpdate: (id: string, updater: UpdateFn) => void;
10 | };
11 | 
12 | const shouldPoll = (item: VideoItem | null | undefined): boolean => {
13 |   const status = (item?.status || "").toLowerCase();
14 |   return status === "queued" || status === "in_progress";
15 | };
16 | 
17 | const useVideoPolling = ({ items, onUpdate }: UseVideoPollingOptions): void => {
18 |   useEffect(() => {
19 |     if (items.length === 0) return undefined;
20 | 
21 |     const interval = setInterval(async () => {
22 |       for (const item of items) {
23 |         if (!item?.id) continue;
24 |         if (!shouldPoll(item)) continue;
25 |         try {
26 |           const payload = await fetchVideo<Record<string, unknown>>({ videoId: item.id });
27 |           onUpdate(item.id, (current) => normalizeVideo(payload, current));
28 |         } catch {
29 |           // swallow polling errors to keep loop running
30 |         }
31 |       }
32 |     }, 10000);
33 | 
34 |     return () => clearInterval(interval);
35 |   }, [items, onUpdate]);
36 | };
37 | 
38 | export default useVideoPolling;
39 |

--------------------------------------------------------------------------------
/components/ui/tooltip.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as TooltipPrimitive from "@radix-ui/react-tooltip"
 3 | 
 4 | import { cn } from "@/lib/utils"
 5 | 
 6 | const TooltipProvider = TooltipPrimitive.Provider
 7 | 
 8 | const Tooltip = TooltipPrimitive.Root
 9 | 
10 | const TooltipTrigger = TooltipPrimitive.Trigger
11 | 
12 | const TooltipContent = React.forwardRef<
13 |   React.ElementRef<typeof TooltipPrimitive.Content>,
14 |   React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
15 | >(({ className, sideOffset = 4, ...props }, ref) => (
16 |   <TooltipPrimitive.Portal>
17 |     <TooltipPrimitive.Content
18 |       ref={ref}
19 |       sideOffset={sideOffset}
20 |       className={cn(
21 |         "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]",
22 |         className
23 |       )}
24 |       {...props}
25 |     />
26 |   </TooltipPrimitive.Portal>
27 | ))
28 | TooltipContent.displayName = TooltipPrimitive.Content.displayName
29 | 
30 | export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
31 |

--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import type { Metadata } from "next";
 2 | import { Geist, Geist_Mono } from "next/font/google";
 3 | import "./globals.css";
 4 | 
 5 | const geistSans = Geist({
 6 |   variable: "--font-geist-sans",
 7 |   subsets: ["latin"],
 8 | });
 9 | 
10 | const geistMono = Geist_Mono({
11 |   variable: "--font-geist-mono",
12 |   subsets: ["latin"],
13 | });
14 | 
15 | export const metadata: Metadata = {
16 |   title: "Sora Sample App",
17 |   description:
18 |     "Sample frontend for generating videos with the OpenAI Sora models",
19 |   icons: {
20 |     icon: "/sora-2.png",
21 |   },
22 | };
23 | 
24 | export default function RootLayout({
25 |   children,
26 | }: Readonly<{
27 |   children: React.ReactNode;
28 | }>) {
29 |   const systemThemeScript = `(() => {
30 |     const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
31 |     const applyTheme = (isDark) => {
32 |       const root = document.documentElement;
33 |       root.classList.toggle('dark', isDark);
34 |       root.style.colorScheme = isDark ? 'dark' : 'light';
35 |     };
36 |     applyTheme(mediaQuery.matches);
37 |     const listener = (event) => applyTheme(event.matches);
38 |     mediaQuery.addEventListener ? mediaQuery.addEventListener('change', listener) : mediaQuery.addListener(listener);
39 |   })();`;
40 | 
41 |   return (
42 |     <html lang="en" className="h-full" suppressHydrationWarning>
43 |       <body
44 |         className={`${geistSans.variable} ${geistMono.variable} antialiased h-full bg-background text-foreground`}
45 |       >
46 |         <script
47 |           dangerouslySetInnerHTML={{ __html: systemThemeScript }}
48 |         />
49 |         {children}
50 |       </body>
51 |     </html>
52 |   );
53 | }
54 |

--------------------------------------------------------------------------------
/hooks/usePersistedState.ts:
--------------------------------------------------------------------------------
 1 | import { useEffect, useRef, useState } from "react";
 2 | import type { Dispatch, SetStateAction } from "react";
 3 | 
 4 | 
 5 | type Serializer<T> = (value: T) => string;
 6 | 
 7 | type Deserializer<T> = (value: string) => T;
 8 | 
 9 | const defaultSerializer = <T,>(value: T): string => JSON.stringify(value);
10 | 
11 | const defaultDeserializer = <T,>(value: string): T => JSON.parse(value) as T;
12 | 
13 | const usePersistedState = <T,>(
14 |   key: string,
15 |   initialValue: T,
16 |   options: {
17 |     serializer?: Serializer<T>;
18 |     deserializer?: Deserializer<T>;
19 |   } = {},
20 | ): [T, Dispatch<SetStateAction<T>>] => {
21 |   const { serializer = defaultSerializer<T>, deserializer = defaultDeserializer<T> } = options;
22 | 
23 |   const initialRef = useRef(initialValue);
24 |   const [value, setValue] = useState<T>(() => initialRef.current);
25 |   const [hasHydrated, setHasHydrated] = useState(false);
26 | 
27 |   useEffect(() => {
28 |     if (typeof window === "undefined") return;
29 |     try {
30 |       const stored = window.localStorage.getItem(key);
31 |       if (stored !== null) {
32 |         setValue(deserializer(stored));
33 |       } else {
34 |         setValue(initialRef.current);
35 |       }
36 |     } catch {
37 |       setValue(initialRef.current);
38 |     } finally {
39 |       setHasHydrated(true);
40 |     }
41 |   }, [deserializer, key]);
42 | 
43 |   useEffect(() => {
44 |     if (typeof window === "undefined") return;
45 |     if (!hasHydrated) return;
46 |     try {
47 |       window.localStorage.setItem(key, serializer(value));
48 |     } catch {
49 |       /* ignore serialization failures */
50 |     }
51 |   }, [hasHydrated, key, serializer, value]);
52 | 
53 |   return [value, setValue];
54 | };
55 | 
56 | export default usePersistedState;
57 |

--------------------------------------------------------------------------------
/utils/titles.ts:
--------------------------------------------------------------------------------
 1 | export const TITLE_MODEL = "gpt-4.1-mini" as const;
 2 | 
 3 | type NestedContent = string | { text?: NestedContent; content?: NestedContent; value?: NestedContent } | NestedContent[] | null | undefined;
 4 | 
 5 | type TitleResponse = {
 6 |   output_text?: string[];
 7 |   output?: NestedContent[];
 8 |   choices?: Array<{ message?: { content?: NestedContent } }>;
 9 |   text?: string | null;
10 |   result?: string | null;
11 | };
12 | 
13 | const gatherContent = (content: NestedContent): string => {
14 |   if (!content) return "";
15 |   if (typeof content === "string") return content;
16 |   if (Array.isArray(content)) {
17 |     return content.map(gatherContent).filter(Boolean).join(" ");
18 |   }
19 |   if (typeof content === "object") {
20 |     if ("text" in content) return gatherContent(content.text);
21 |     if ("content" in content) return gatherContent(content.content);
22 |     if ("value" in content) return gatherContent(content.value);
23 |   }
24 |   return "";
25 | };
26 | 
27 | export const extractTitleFromResponse = (payload: TitleResponse | null | undefined): string => {
28 |   if (!payload) return "";
29 |   if (Array.isArray(payload.output_text) && payload.output_text.length) {
30 |     return payload.output_text.join(" ").trim();
31 |   }
32 | 
33 |   if (Array.isArray(payload.output)) {
34 |     for (const node of payload.output) {
35 |       const text = gatherContent(node);
36 |       if (text.trim()) return text.trim();
37 |     }
38 |   }
39 | 
40 |   const choice = payload?.choices?.[0]?.message?.content;
41 |   const choiceText = gatherContent(choice);
42 |   if (choiceText.trim()) return choiceText.trim();
43 | 
44 |   const fallback = [payload?.text, payload?.result]
45 |     .filter((value): value is string => typeof value === "string" && value.trim().length > 0)
46 |     .join(" ");
47 |   return fallback.trim();
48 | };
49 |

--------------------------------------------------------------------------------
/app/api/video-title/route.ts:
--------------------------------------------------------------------------------
 1 | import { NextResponse } from "next/server";
 2 | import OpenAI from "openai";
 3 | import { describeError, resolveErrorStatus } from "@/lib/sora";
 4 | import { TITLE_MODEL } from "@/utils/titles";
 5 | 
 6 | export async function POST(request: Request) {
 7 |   const apiKey = process.env.OPENAI_API_KEY?.trim();
 8 |   if (!apiKey) {
 9 |     const message = "OPENAI_API_KEY is not configured";
10 |     return NextResponse.json({ error: { message } }, { status: 500 });
11 |   }
12 | 
13 |   const client = new OpenAI({ apiKey });
14 | 
15 |   let payload: unknown;
16 |   try {
17 |     payload = await request.json();
18 |   } catch {
19 |     return NextResponse.json(
20 |       { error: { message: "Invalid JSON payload" } },
21 |       { status: 400 }
22 |     );
23 |   }
24 | 
25 |   const prompt =
26 |     typeof (payload as { prompt?: unknown })?.prompt === "string"
27 |       ? (payload as { prompt: string }).prompt.trim()
28 |       : "";
29 |   if (!prompt) {
30 |     return NextResponse.json(
31 |       { error: { message: "Prompt is required" } },
32 |       { status: 400 }
33 |     );
34 |   }
35 | 
36 |   try {
37 |     const response = await client.responses.create({
38 |       model: TITLE_MODEL,
39 |       input: [
40 |         {
41 |           role: "user",
42 |           content: [
43 |             {
44 |               type: "input_text",
45 |               text: `Propose a short reel-style title for this video prompt (don't include quotes around the title): ${prompt}`,
46 |             },
47 |           ],
48 |         },
49 |       ],
50 |       max_output_tokens: 80,
51 |     });
52 | 
53 |     return NextResponse.json(response);
54 |   } catch (error) {
55 |     const message = describeError(error, "Failed to generate title");
56 |     const status = resolveErrorStatus(error);
57 |     return NextResponse.json({ error: { message } }, { status });
58 |   }
59 | }
60 |

--------------------------------------------------------------------------------
/app/api/videos/[id]/content/route.ts:
--------------------------------------------------------------------------------
 1 | import OpenAI from "openai";
 2 | import { describeError, resolveErrorStatus } from "@/lib/sora";
 3 | 
 4 | const asVariant = (value: string | null): "video" | "thumbnail" | "spritesheet" | undefined => {
 5 |   if (!value) return undefined;
 6 |   if (value === "video" || value === "thumbnail" || value === "spritesheet") {
 7 |     return value;
 8 |   }
 9 |   return undefined;
10 | };
11 | 
12 | export async function GET(request: Request, { params }: { params: Promise<{ id: string }> }) {
13 |   const apiKey = process.env.OPENAI_API_KEY?.trim();
14 |   if (!apiKey) {
15 |     const message = "OPENAI_API_KEY is not configured";
16 |     return Response.json({ error: { message } }, { status: 500 });
17 |   }
18 | 
19 |   const client = new OpenAI({ apiKey });
20 | 
21 |   const { id } = await params;
22 |   const videoId = typeof id === "string" ? id.trim() : "";
23 |   if (!videoId) {
24 |     return Response.json({ error: { message: "Video id is required" } }, { status: 400 });
25 |   }
26 | 
27 |   const url = new URL(request.url);
28 |   const variant = asVariant(url.searchParams.get("variant"));
29 | 
30 |   try {
31 |     const request = client.get(`/videos/${videoId}/content`, {
32 |       query: variant ? { variant } : undefined,
33 |       headers: { Accept: "application/binary" },
34 |       __binaryResponse: true,
35 |     });
36 | 
37 |     const apiResponse = await request.asResponse();
38 | 
39 |     const arrayBuffer = await apiResponse.arrayBuffer();
40 |     const contentType = apiResponse.headers.get("content-type")
41 |       || (variant === "thumbnail" ? "image/png" : "video/mp4");
42 | 
43 |     return new Response(arrayBuffer, {
44 |       status: 200,
45 |       headers: {
46 |         "Content-Type": contentType,
47 |       },
48 |     });
49 |   } catch (error) {
50 |     const message = describeError(error, "Failed to fetch video content");
51 |     const status = resolveErrorStatus(error);
52 |     return Response.json({ error: { message } }, { status });
53 |   }
54 | }
55 |

--------------------------------------------------------------------------------
/utils/formatters.ts:
--------------------------------------------------------------------------------
 1 | type UnixLike = number | string | Date | null | undefined;
 2 | 
 3 | const toDate = (value: UnixLike): Date | null => {
 4 |   if (value === null || value === undefined) return null;
 5 |   if (value instanceof Date) return Number.isNaN(value.getTime()) ? null : value;
 6 |   if (typeof value === "number") {
 7 |     const ms = value > 1e12 ? value : value * 1000;
 8 |     const date = new Date(ms);
 9 |     return Number.isNaN(date.getTime()) ? null : date;
10 |   }
11 |   if (typeof value === "string") {
12 |     const trimmed = value.trim();
13 |     if (!trimmed) return null;
14 |     const numeric = Number(trimmed);
15 |     if (Number.isFinite(numeric)) {
16 |       const ms = numeric > 1e12 ? numeric : numeric * 1000;
17 |       const numericDate = new Date(ms);
18 |       if (!Number.isNaN(numericDate.getTime())) return numericDate;
19 |     }
20 |     const parsed = new Date(trimmed);
21 |     return Number.isNaN(parsed.getTime()) ? null : parsed;
22 |   }
23 |   return null;
24 | };
25 | 
26 | export const formatDateTime = (value: UnixLike): string => {
27 |   const date = toDate(value);
28 |   if (!date) return "";
29 |   return date.toLocaleString(undefined, {
30 |     month: "short",
31 |     day: "numeric",
32 |     hour: "2-digit",
33 |     minute: "2-digit",
34 |   });
35 | };
36 | 
37 | export const formatDurationMinutes = (start: UnixLike, end: UnixLike): string => {
38 |   const startDate = toDate(start);
39 |   const endDate = toDate(end);
40 |   if (!startDate || !endDate) return "";
41 |   const diffSec = Math.round((endDate.getTime() - startDate.getTime()) / 1000);
42 |   if (diffSec <= 0) return "";
43 |   const minutes = Math.max(1, Math.round(diffSec / 60));
44 |   return `${minutes} min`;
45 | };
46 | 
47 | export const formatProgressPercent = (value: unknown): string | null => {
48 |   const num = typeof value === "number" ? value : Number(value);
49 |   if (!Number.isFinite(num)) return null;
50 |   const clamped = Math.min(100, Math.max(0, num));
51 |   return Number.isInteger(clamped) ? String(clamped) : clamped.toFixed(1);
52 | };
53 |

--------------------------------------------------------------------------------
/app/api/videos/[id]/route.ts:
--------------------------------------------------------------------------------
 1 | import OpenAI from "openai";
 2 | import {
 3 |   coerceVideoModel,
 4 |   coerceVideoSeconds,
 5 |   coerceVideoSize,
 6 |   describeError,
 7 |   isRecord,
 8 |   normalizeVideoResponse,
 9 |   resolveErrorStatus,
10 |   VideoRequestPayload,
11 | } from "@/lib/sora";
12 | 
13 | export async function GET(
14 |   _request: Request,
15 |   { params }: { params: Promise<{ id: string }> }
16 | ) {
17 |   const apiKey = process.env.OPENAI_API_KEY?.trim();
18 |   if (!apiKey) {
19 |     const message = "OPENAI_API_KEY is not configured";
20 |     return Response.json({ error: { message } }, { status: 500 });
21 |   }
22 | 
23 |   const client = new OpenAI({ apiKey });
24 | 
25 |   const { id } = await params;
26 |   const videoId = typeof id === "string" ? id.trim() : "";
27 |   if (!videoId) {
28 |     return Response.json(
29 |       { error: { message: "Video id is required" } },
30 |       { status: 400 }
31 |     );
32 |   }
33 | 
34 |   try {
35 |     const video = await client.get(`/videos/${videoId}`);
36 |     const videoRecord = isRecord(video) ? video : {};
37 | 
38 |     const prompt =
39 |       typeof videoRecord.prompt === "string" && videoRecord.prompt.trim()
40 |         ? videoRecord.prompt.trim()
41 |         : "";
42 | 
43 |     const fallback: VideoRequestPayload = {
44 |       prompt,
45 |       model: coerceVideoModel(
46 |         typeof videoRecord.model === "string" ? videoRecord.model : null
47 |       ),
48 |       size: coerceVideoSize(
49 |         typeof videoRecord.size === "string" ? videoRecord.size : null
50 |       ),
51 |       seconds: coerceVideoSeconds(
52 |         videoRecord.seconds !== undefined && videoRecord.seconds !== null
53 |           ? String(videoRecord.seconds)
54 |           : null
55 |       ),
56 |     };
57 | 
58 |     const normalized = normalizeVideoResponse(video, fallback);
59 |     return Response.json(normalized);
60 |   } catch (error) {
61 |     const message = describeError(error, "Failed to fetch video");
62 |     const status = resolveErrorStatus(error);
63 |     return Response.json({ error: { message } }, { status });
64 |   }
65 | }
66 |

--------------------------------------------------------------------------------
/components/ui/button.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { Slot } from "@radix-ui/react-slot"
 3 | import { cva, type VariantProps } from "class-variance-authority"
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | 
 7 | const buttonVariants = cva(
 8 |   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default:
13 |           "bg-primary text-primary-foreground hover:bg-primary/90",
14 |         destructive:
15 |           "bg-destructive text-destructive-foreground hover:bg-destructive/90",
16 |         outline:
17 |           "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
18 |         secondary:
19 |           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
20 |         ghost: "hover:bg-accent hover:text-accent-foreground",
21 |         link: "text-primary underline-offset-4 hover:underline",
22 |       },
23 |       size: {
24 |         default: "h-9 px-4 py-2",
25 |         sm: "h-8 rounded-md px-3 text-xs",
26 |         lg: "h-10 rounded-md px-8",
27 |         icon: "h-9 w-9",
28 |       },
29 |     },
30 |     defaultVariants: {
31 |       variant: "default",
32 |       size: "default",
33 |     },
34 |   }
35 | )
36 | 
37 | export interface ButtonProps
38 |   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
39 |     VariantProps<typeof buttonVariants> {
40 |   asChild?: boolean
41 | }
42 | 
43 | const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
44 |   ({ className, variant, size, asChild = false, ...props }, ref) => {
45 |     const Comp = asChild ? Slot : "button"
46 |     return (
47 |       <Comp
48 |         className={cn(buttonVariants({ variant, size, className }))}
49 |         ref={ref}
50 |         {...props}
51 |       />
52 |     )
53 |   }
54 | )
55 | Button.displayName = "Button"
56 | 
57 | export { Button, buttonVariants }
58 |

--------------------------------------------------------------------------------
/app/api/remix-video/route.ts:
--------------------------------------------------------------------------------
 1 | import OpenAI from "openai";
 2 | import {
 3 |   coerceVideoModel,
 4 |   coerceVideoSeconds,
 5 |   coerceVideoSize,
 6 |   describeError,
 7 |   isRecord,
 8 |   normalizeVideoResponse,
 9 |   resolveErrorStatus,
10 |   VideoRequestPayload,
11 | } from "@/lib/sora";
12 | 
13 | export async function POST(request: Request) {
14 |   const apiKey = process.env.OPENAI_API_KEY?.trim();
15 |   if (!apiKey) {
16 |     const message = "OPENAI_API_KEY is not configured";
17 |     return Response.json({ error: { message } }, { status: 500 });
18 |   }
19 | 
20 |   const client = new OpenAI({ apiKey });
21 | 
22 |   let rawPayload: unknown;
23 |   try {
24 |     rawPayload = await request.json();
25 |   } catch {
26 |     return Response.json({ error: { message: "Invalid JSON payload" } }, { status: 400 });
27 |   }
28 | 
29 |   const payload = isRecord(rawPayload) ? rawPayload : {};
30 | 
31 |   const videoId = typeof payload.videoId === "string" ? payload.videoId.trim() : "";
32 |   if (!videoId) {
33 |     return Response.json({ error: { message: "videoId is required" } }, { status: 400 });
34 |   }
35 | 
36 |   const prompt = typeof payload.prompt === "string" ? payload.prompt.trim() : "";
37 |   if (!prompt) {
38 |     return Response.json({ error: { message: "Prompt is required" } }, { status: 400 });
39 |   }
40 | 
41 |   const fallback: VideoRequestPayload = {
42 |     prompt,
43 |     model: coerceVideoModel(typeof payload.model === "string" ? payload.model : null),
44 |     size: coerceVideoSize(typeof payload.size === "string" ? payload.size : null),
45 |     seconds: coerceVideoSeconds(payload.seconds != null ? String(payload.seconds) : null),
46 |   };
47 | 
48 |   try {
49 |     const video = await client.post(`/videos/${videoId}/remix`, {
50 |       body: { prompt },
51 |     });
52 |     const normalized = normalizeVideoResponse(video, fallback);
53 |     return Response.json(normalized);
54 |   } catch (error) {
55 |     const message = describeError(error, "Failed to remix video");
56 |     const status = resolveErrorStatus(error);
57 |     return Response.json({ error: { message } }, { status });
58 |   }
59 | }
60 |

--------------------------------------------------------------------------------
/hooks/useThumbnails.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 |   useCallback,
 3 |   useEffect,
 4 |   useRef,
 5 |   useState,
 6 | } from "react";
 7 | import { fetchVideoContent } from "../services/soraApi";
 8 | import type { VideoItem } from "../utils/video";
 9 | 
10 | type UseThumbnailsOptions = {
11 |   items: VideoItem[];
12 | };
13 | 
14 | type ThumbnailMap = Record<string, string>;
15 | 
16 | type InFlightMap = Record<string, Promise<void> | null | undefined>;
17 | 
18 | const useThumbnails = ({ items }: UseThumbnailsOptions): ThumbnailMap => {
19 |   const [thumbnails, setThumbnails] = useState<ThumbnailMap>({});
20 |   const inFlightRef = useRef<InFlightMap>({});
21 |   const thumbnailsRef = useRef<ThumbnailMap>({});
22 | 
23 |   useEffect(() => {
24 |     thumbnailsRef.current = thumbnails;
25 |   }, [thumbnails]);
26 | 
27 |   useEffect(() => () => {
28 |     Object.values(thumbnailsRef.current).forEach((url) => {
29 |       if (url) URL.revokeObjectURL(url);
30 |     });
31 |   }, []);
32 | 
33 |   const fetchThumbnail = useCallback(async (id: string): Promise<string> => {
34 |     const blob = await fetchVideoContent({ videoId: id, variant: "thumbnail" });
35 |     return URL.createObjectURL(blob);
36 |   }, []);
37 | 
38 |   useEffect(() => {
39 |     if (!items.length) return;
40 | 
41 |     const validIds = new Set(items.map((it) => it?.id).filter((id): id is string => Boolean(id)));
42 |     Object.keys(inFlightRef.current).forEach((id) => {
43 |       if (!validIds.has(id)) {
44 |         delete inFlightRef.current[id];
45 |       }
46 |     });
47 | 
48 |     setThumbnails((prev) => {
49 |       let changed = false;
50 |       const next: ThumbnailMap = {};
51 |       Object.entries(prev).forEach(([id, url]) => {
52 |         const keep = validIds.has(id);
53 |         if (keep) {
54 |           next[id] = url;
55 |         } else {
56 |           changed = true;
57 |           if (url) URL.revokeObjectURL(url);
58 |         }
59 |       });
60 |       return changed ? next : prev;
61 |     });
62 | 
63 |     for (const item of items) {
64 |       const id = item?.id;
65 |       if (!id) continue;
66 |       if (thumbnailsRef.current[id]) continue;
67 |       if (inFlightRef.current[id]) continue;
68 |       inFlightRef.current[id] = fetchThumbnail(id)
69 |         .then((url) => {
70 |           setThumbnails((prev) => {
71 |             const previousUrl = prev[id];
72 |             if (previousUrl) URL.revokeObjectURL(previousUrl);
73 |             return { ...prev, [id]: url };
74 |           });
75 |         })
76 |         .catch(() => {
77 |           // ignore thumbnail failures
78 |         })
79 |         .finally(() => {
80 |           delete inFlightRef.current[id];
81 |         });
82 |     }
83 |   }, [items, fetchThumbnail]);
84 | 
85 |   return thumbnails;
86 | };
87 | 
88 | export default useThumbnails;
89 |

--------------------------------------------------------------------------------
/utils/image.ts:
--------------------------------------------------------------------------------
 1 | export const cropImageToCover = (
 2 |   file: File,
 3 |   targetWidth: number,
 4 |   targetHeight: number,
 5 | ): Promise<File> => new Promise((resolve, reject) => {
 6 |   const img = new Image();
 7 |   const url = URL.createObjectURL(file);
 8 | 
 9 |   img.onload = () => {
10 |     URL.revokeObjectURL(url);
11 | 
12 |     const canvas = document.createElement("canvas");
13 |     canvas.width = targetWidth;
14 |     canvas.height = targetHeight;
15 | 
16 |     const ctx = canvas.getContext("2d");
17 |     if (!ctx) {
18 |       reject(new Error("Canvas context unavailable"));
19 |       return;
20 |     }
21 | 
22 |     const sourceRatio = img.width / img.height;
23 |     const targetRatio = targetWidth / targetHeight;
24 |     let sx: number;
25 |     let sy: number;
26 |     let sWidth: number;
27 |     let sHeight: number;
28 | 
29 |     if (sourceRatio > targetRatio) {
30 |       sHeight = img.height;
31 |       sWidth = targetRatio * sHeight;
32 |       sx = (img.width - sWidth) / 2;
33 |       sy = 0;
34 |     } else {
35 |       sWidth = img.width;
36 |       sHeight = sWidth / targetRatio;
37 |       sx = 0;
38 |       sy = (img.height - sHeight) / 2;
39 |     }
40 | 
41 |     ctx.drawImage(img, sx, sy, sWidth, sHeight, 0, 0, targetWidth, targetHeight);
42 | 
43 |     const outputType = file.type || "image/png";
44 |     canvas.toBlob((blob) => {
45 |       if (!blob) {
46 |         reject(new Error("Failed to process image"));
47 |         return;
48 |       }
49 | 
50 |       const ext = outputType.split("/")[1] || "png";
51 |       const baseName = file.name.replace(/\.[^.]+$/, "");
52 |       const croppedFile = new File(
53 |         [blob],
54 |         `${baseName}-${targetWidth}x${targetHeight}.${ext}`,
55 |         { type: outputType },
56 |       );
57 |       resolve(croppedFile);
58 |     }, outputType);
59 |   };
60 | 
61 |   img.onerror = () => {
62 |     URL.revokeObjectURL(url);
63 |     reject(new Error("Unable to load image"));
64 |   };
65 | 
66 |   img.src = url;
67 | });
68 | 
69 | export const dataUrlToFile = async (
70 |   dataUrl: string,
71 |   filename = "generated.png",
72 | ): Promise<File> => {
73 |   if (!dataUrl) throw new Error("Missing data URL");
74 |   const response = await fetch(dataUrl);
75 |   if (!response.ok) {
76 |     throw new Error("Failed to convert data URL");
77 |   }
78 |   const blob = await response.blob();
79 |   const type = blob.type || "image/png";
80 |   return new File([blob], filename, { type });
81 | };
82 | 
83 | export const fetchImageAsFile = async (
84 |   url: string,
85 |   filename = "generated.png",
86 | ): Promise<File> => {
87 |   if (!url) throw new Error("Missing image URL");
88 |   const response = await fetch(url);
89 |   if (!response.ok) {
90 |     throw new Error("Failed to fetch image");
91 |   }
92 |   const blob = await response.blob();
93 |   const type = blob.type || "image/png";
94 |   return new File([blob], filename, { type });
95 | };
96 |

--------------------------------------------------------------------------------
/components/ui/empty.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | type EmptyProps = React.HTMLAttributes<HTMLDivElement>
 6 | 
 7 | const Empty = React.forwardRef<HTMLDivElement, EmptyProps>(
 8 |   ({ className, ...props }, ref) => (
 9 |     <div
10 |       ref={ref}
11 |       className={cn(
12 |         "flex w-full flex-col items-center justify-center gap-3 rounded-2xl border border-dashed border-muted-foreground/30 bg-muted/20 px-6 py-10 text-center",
13 |         className,
14 |       )}
15 |       {...props}
16 |     />
17 |   ),
18 | )
19 | Empty.displayName = "Empty"
20 | 
21 | type EmptyHeaderProps = React.HTMLAttributes<HTMLDivElement>
22 | 
23 | const EmptyHeader = React.forwardRef<HTMLDivElement, EmptyHeaderProps>(
24 |   ({ className, ...props }, ref) => (
25 |     <div
26 |       ref={ref}
27 |       className={cn("flex flex-col items-center gap-2", className)}
28 |       {...props}
29 |     />
30 |   ),
31 | )
32 | EmptyHeader.displayName = "EmptyHeader"
33 | 
34 | type EmptyContentProps = React.HTMLAttributes<HTMLDivElement>
35 | 
36 | const EmptyContent = React.forwardRef<HTMLDivElement, EmptyContentProps>(
37 |   ({ className, ...props }, ref) => (
38 |     <div
39 |       ref={ref}
40 |       className={cn("mt-4 flex flex-col items-center gap-2", className)}
41 |       {...props}
42 |     />
43 |   ),
44 | )
45 | EmptyContent.displayName = "EmptyContent"
46 | 
47 | type EmptyMediaVariant = "default" | "icon"
48 | 
49 | type EmptyMediaProps = React.HTMLAttributes<HTMLDivElement> & {
50 |   variant?: EmptyMediaVariant
51 | }
52 | 
53 | const MEDIA_VARIANT_CLASSNAMES: Record<EmptyMediaVariant, string> = {
54 |   default:
55 |     "flex h-20 w-20 items-center justify-center rounded-full border border-dashed border-muted-foreground/30 bg-background text-muted-foreground",
56 |   icon:
57 |     "flex h-14 w-14 items-center justify-center rounded-full border border-dashed border-muted-foreground/40 bg-background text-muted-foreground",
58 | }
59 | 
60 | const EmptyMedia = React.forwardRef<HTMLDivElement, EmptyMediaProps>(
61 |   ({ className, variant = "default", ...props }, ref) => (
62 |     <div
63 |       ref={ref}
64 |       className={cn(MEDIA_VARIANT_CLASSNAMES[variant], className)}
65 |       {...props}
66 |     />
67 |   ),
68 | )
69 | EmptyMedia.displayName = "EmptyMedia"
70 | 
71 | type EmptyTitleProps = React.HTMLAttributes<HTMLHeadingElement>
72 | 
73 | const EmptyTitle = React.forwardRef<HTMLHeadingElement, EmptyTitleProps>(
74 |   ({ className, ...props }, ref) => (
75 |     <h3
76 |       ref={ref}
77 |       className={cn("text-lg font-semibold text-foreground", className)}
78 |       {...props}
79 |     />
80 |   ),
81 | )
82 | EmptyTitle.displayName = "EmptyTitle"
83 | 
84 | type EmptyDescriptionProps = React.HTMLAttributes<HTMLParagraphElement>
85 | 
86 | const EmptyDescription = React.forwardRef<HTMLParagraphElement, EmptyDescriptionProps>(
87 |   ({ className, ...props }, ref) => (
88 |     <p
89 |       ref={ref}
90 |       className={cn("max-w-sm text-sm text-muted-foreground", className)}
91 |       {...props}
92 |     />
93 |   ),
94 | )
95 | EmptyDescription.displayName = "EmptyDescription"
96 | 
97 | export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle }
98 |

--------------------------------------------------------------------------------
/middleware.ts:
--------------------------------------------------------------------------------
 1 | // Middleware to protect the API routes
 2 | import { NextRequest, NextResponse } from "next/server";
 3 | 
 4 | const getAllowedOrigins = (): Set<string> => {
 5 |   const s = new Set<string>();
 6 | 
 7 |   // Add explicit env override (optional)
 8 |   // e.g. NEXT_PUBLIC_APP_URL=https://yourapp.example
 9 |   if (process.env.NEXT_PUBLIC_APP_URL) {
10 |     s.add(process.env.NEXT_PUBLIC_APP_URL);
11 |   }
12 | 
13 |   // If deploying on Vercel, allow the (preview) host returned in VERCEL_URL
14 |   if (process.env.VERCEL_URL) {
15 |     s.add(`https://${process.env.VERCEL_URL}`);
16 |   }
17 | 
18 |   return s;
19 | };
20 | 
21 | const ALLOWED_FROM_ENV = getAllowedOrigins();
22 | 
23 | export function middleware(req: NextRequest) {
24 |   if (!req.nextUrl.pathname.startsWith("/api/")) return NextResponse.next();
25 | 
26 |   // Let OPTIONS preflights pass
27 |   if (req.method === "OPTIONS") return new NextResponse(null, { status: 204 });
28 | 
29 |   // Allow root path without origin checks (optional)
30 |   if (req.nextUrl.pathname === "/") return NextResponse.next();
31 | 
32 |   // Get the incoming Origin header (may be null for same-origin navigations)
33 |   const incomingOrigin = req.headers.get("origin");
34 | 
35 |   // Derive this app's runtime origin from the request URL.
36 |   // This handles dev and prod automatically (e.g., http://localhost:3000 or https://yourapp.example).
37 |   const appOrigin = req.nextUrl.origin;
38 | 
39 |   // Build the allowed set for this request: appOrigin has priority (auto-injected)
40 |   const allowed = new Set(ALLOWED_FROM_ENV);
41 |   allowed.add(appOrigin);
42 | 
43 |   // For strictness: reject requests without Origin (they could be forms),
44 |   // but many same-origin browser requests won't send Origin (so we allow referer fallback).
45 |   if (!incomingOrigin) {
46 |     // Try referer fallback (safer than outright deny).
47 |     const referer = req.headers.get("referer");
48 |     if (referer) {
49 |       try {
50 |         const u = new URL(referer);
51 |         if (!allowed.has(`${u.protocol}//${u.host}`)) {
52 |           return NextResponse.json(
53 |             { error: "Forbidden — invalid Referer" },
54 |             { status: 403 }
55 |           );
56 |         }
57 |       } catch {
58 |         return NextResponse.json(
59 |           { error: "Forbidden — invalid Referer" },
60 |           { status: 403 }
61 |         );
62 |       }
63 |     } else {
64 |       // No Origin and no Referer — conservative block (prevents form PoC).
65 |       return NextResponse.json(
66 |         { error: "Forbidden — missing Origin/Referer" },
67 |         { status: 403 }
68 |       );
69 |     }
70 |   } else {
71 |     // If incoming Origin is present, ensure it matches what we expect.
72 |     if (!allowed.has(incomingOrigin)) {
73 |       return NextResponse.json(
74 |         { error: "Forbidden — invalid Origin" },
75 |         { status: 403 }
76 |       );
77 |     }
78 |   }
79 | 
80 |   // Additionally: for POSTs, enforce JSON content-type to block form posts
81 |   if (req.method === "POST") {
82 |     const ct = (req.headers.get("content-type") || "").toLowerCase();
83 |     if (!ct.startsWith("application/json")) {
84 |       return NextResponse.json(
85 |         { error: "Unsupported Media Type" },
86 |         { status: 415 }
87 |       );
88 |     }
89 |   }
90 | 
91 |   return NextResponse.next();
92 | }
93 | 
94 | export const config = {
95 |   matcher: ["/api/:path*"],
96 | };
97 |

--------------------------------------------------------------------------------
/app/api/generate-images/route.ts:
--------------------------------------------------------------------------------
  1 | import { NextResponse } from "next/server";
  2 | import OpenAI from "openai";
  3 | import { describeError, resolveErrorStatus } from "@/lib/sora";
  4 | import type { GeneratedImageSuggestion } from "@/types/generated";
  5 | 
  6 | const IMAGE_MODEL_FALLBACK = "gpt-image-1";
  7 | const ALLOWED_IMAGE_MODELS = new Set<string>(["gpt-image-1"]);
  8 | const MAX_IMAGE_COUNT = 4;
  9 | const DEFAULT_IMAGE_COUNT = 3;
 10 | 
 11 | type ImageSize = OpenAI.Images.ImageGenerateParams["size"];
 12 | 
 13 | const DEFAULT_IMAGE_SIZE: ImageSize = "1024x1024";
 14 | const ALLOWED_IMAGE_SIZES = new Set<ImageSize>([
 15 |   "256x256",
 16 |   "512x512",
 17 |   "1024x1024",
 18 |   "1024x1536",
 19 |   "1536x1024",
 20 |   "1024x1792",
 21 |   "1792x1024",
 22 |   "auto",
 23 | ]);
 24 | 
 25 | interface GenerateImagesPayload {
 26 |   prompt?: unknown;
 27 |   size?: unknown;
 28 |   count?: unknown;
 29 |   model?: unknown;
 30 | }
 31 | 
 32 | const readString = (value: unknown): string | null =>
 33 |   typeof value === "string" && value.trim() ? value.trim() : null;
 34 | 
 35 | const readNumber = (value: unknown): number | null => {
 36 |   if (typeof value === "number" && Number.isFinite(value)) {
 37 |     return value;
 38 |   }
 39 |   if (typeof value === "string") {
 40 |     const parsed = Number(value);
 41 |     if (Number.isFinite(parsed)) {
 42 |       return parsed;
 43 |     }
 44 |   }
 45 |   return null;
 46 | };
 47 | 
 48 | const coerceImageCount = (value: unknown): number => {
 49 |   const parsed = readNumber(value);
 50 |   if (parsed === null) return DEFAULT_IMAGE_COUNT;
 51 |   if (parsed <= 1) return 1;
 52 |   if (parsed >= MAX_IMAGE_COUNT) return MAX_IMAGE_COUNT;
 53 |   return Math.round(parsed);
 54 | };
 55 | 
 56 | const coerceImageModel = (value: unknown): string => {
 57 |   const candidate = readString(value);
 58 |   if (!candidate) return IMAGE_MODEL_FALLBACK;
 59 |   if (ALLOWED_IMAGE_MODELS.has(candidate)) return candidate;
 60 |   return IMAGE_MODEL_FALLBACK;
 61 | };
 62 | 
 63 | const coerceImageSize = (value: unknown): ImageSize => {
 64 |   const candidate = readString(value);
 65 |   if (!candidate) return DEFAULT_IMAGE_SIZE;
 66 |   if (ALLOWED_IMAGE_SIZES.has(candidate as ImageSize)) {
 67 |     return candidate as ImageSize;
 68 |   }
 69 |   return DEFAULT_IMAGE_SIZE;
 70 | };
 71 | 
 72 | export async function POST(request: Request) {
 73 |   const apiKey = process.env.OPENAI_API_KEY?.trim();
 74 |   if (!apiKey) {
 75 |     const message = "OPENAI_API_KEY is not configured";
 76 |     return NextResponse.json({ error: { message } }, { status: 500 });
 77 |   }
 78 | 
 79 |   const client = new OpenAI({ apiKey });
 80 | 
 81 |   let rawPayload: GenerateImagesPayload;
 82 |   try {
 83 |     rawPayload = (await request.json()) as GenerateImagesPayload;
 84 |   } catch {
 85 |     return NextResponse.json(
 86 |       { error: { message: "Invalid JSON payload" } },
 87 |       { status: 400 }
 88 |     );
 89 |   }
 90 | 
 91 |   const prompt = readString(rawPayload.prompt);
 92 |   if (!prompt) {
 93 |     return NextResponse.json(
 94 |       { error: { message: "Prompt is required" } },
 95 |       { status: 400 }
 96 |     );
 97 |   }
 98 | 
 99 |   const size = coerceImageSize(rawPayload.size);
100 |   const count = coerceImageCount(rawPayload.count);
101 |   const model = coerceImageModel(rawPayload.model);
102 | 
103 |   try {
104 |     const generation = await client.images.generate({
105 |       model,
106 |       prompt,
107 |       size,
108 |       quality: "high",
109 |       n: count,
110 |     });
111 | 
112 |     const suggestions = (generation.data ?? []).reduce<
113 |       GeneratedImageSuggestion[]
114 |     >((acc, entry, index) => {
115 |       const base64 = entry.b64_json ?? null;
116 |       const url = base64
117 |         ? `data:image/png;base64,${base64}`
118 |         : readString(entry.url);
119 |       if (!url) return acc;
120 |       acc.push({
121 |         id: `generated-${Date.now()}-${index}`,
122 |         url,
123 |         base64,
124 |         description: prompt,
125 |       });
126 |       return acc;
127 |     }, []);
128 | 
129 |     return NextResponse.json({ images: suggestions });
130 |   } catch (error) {
131 |     const message = describeError(error, "Failed to generate images");
132 |     const status = resolveErrorStatus(error);
133 |     return NextResponse.json({ error: { message } }, { status });
134 |   }
135 | }
136 |

--------------------------------------------------------------------------------
/hooks/usePreview.ts:
--------------------------------------------------------------------------------
  1 | import { useCallback, useEffect, useRef, useState } from "react";
  2 | import { fetchVideoContent } from "../services/soraApi";
  3 | 
  4 | export interface PreviewState {
  5 |   previewUrl: string | null;
  6 |   previewingId: string | null;
  7 |   previewLoading: boolean;
  8 |   playPreview: (videoId: string) => Promise<void>;
  9 |   clearPreview: () => void;
 10 |   prefetchPreviews: (videoIds: string[]) => Promise<void>;
 11 | }
 12 | 
 13 | const usePreview = (): PreviewState => {
 14 |   const [previewUrl, setPreviewUrl] = useState<string | null>(null);
 15 |   const [previewingId, setPreviewingId] = useState<string | null>(null);
 16 |   const [loading, setLoading] = useState<boolean>(false);
 17 |   const cacheRef = useRef<Record<string, string>>({});
 18 |   const inFlightRef = useRef<Record<string, Promise<string | null> | null>>({});
 19 | 
 20 |   const clearPreview = useCallback(() => {
 21 |     setPreviewUrl(null);
 22 |     setPreviewingId(null);
 23 |   }, []);
 24 | 
 25 |   const revokeUrl = useCallback((id: string) => {
 26 |     const url = cacheRef.current[id];
 27 |     if (!url) return;
 28 |     URL.revokeObjectURL(url);
 29 |     delete cacheRef.current[id];
 30 |   }, []);
 31 | 
 32 |   useEffect(() => () => {
 33 |     Object.keys(cacheRef.current).forEach(revokeUrl);
 34 |   }, [revokeUrl]);
 35 | 
 36 |   const fetchAndCache = useCallback(async (videoId: string): Promise<string> => {
 37 |     const blob = await fetchVideoContent({ videoId });
 38 |     const objectUrl = URL.createObjectURL(blob);
 39 |     const existing = cacheRef.current[videoId];
 40 |     if (existing) URL.revokeObjectURL(existing);
 41 |     cacheRef.current[videoId] = objectUrl;
 42 |     return objectUrl;
 43 |   }, []);
 44 | 
 45 |   const ensureCached = useCallback(async (videoId: string): Promise<string | null> => {
 46 |     if (!videoId) return null;
 47 |     if (cacheRef.current[videoId]) return cacheRef.current[videoId];
 48 | 
 49 |     const existingPromise = inFlightRef.current[videoId];
 50 |     if (existingPromise) {
 51 |       try {
 52 |         const result = await existingPromise;
 53 |         return result;
 54 |       } catch {
 55 |         return null;
 56 |       }
 57 |     }
 58 | 
 59 |     const promise = fetchAndCache(videoId)
 60 |       .then((url) => url)
 61 |       .catch((error) => {
 62 |         revokeUrl(videoId);
 63 |         throw error;
 64 |       })
 65 |       .finally(() => {
 66 |         delete inFlightRef.current[videoId];
 67 |       });
 68 | 
 69 |     inFlightRef.current[videoId] = promise;
 70 | 
 71 |     try {
 72 |       const result = await promise;
 73 |       return result;
 74 |     } catch {
 75 |       return null;
 76 |     }
 77 |   }, [fetchAndCache, revokeUrl]);
 78 | 
 79 |   const prefetchPreviews = useCallback(async (videoIds: string[]): Promise<void> => {
 80 |     const uniqueIds = Array.from(new Set((videoIds || []).filter(Boolean)));
 81 |     const validSet = new Set(uniqueIds);
 82 | 
 83 |     Object.keys(cacheRef.current).forEach((cachedId) => {
 84 |       if (!validSet.has(cachedId)) {
 85 |         revokeUrl(cachedId);
 86 |       }
 87 |     });
 88 | 
 89 |     Object.keys(inFlightRef.current).forEach((pendingId) => {
 90 |       if (!validSet.has(pendingId)) {
 91 |         delete inFlightRef.current[pendingId];
 92 |       }
 93 |     });
 94 | 
 95 |     if (uniqueIds.length === 0) {
 96 |       return;
 97 |     }
 98 | 
 99 |     await Promise.allSettled(uniqueIds.map((id) => ensureCached(id)));
100 |   }, [ensureCached, revokeUrl]);
101 | 
102 |   const playPreview = useCallback(async (videoId: string) => {
103 |     if (!videoId) return;
104 |     if (previewingId === videoId && previewUrl) return;
105 | 
106 |     if (cacheRef.current[videoId]) {
107 |       setPreviewUrl(cacheRef.current[videoId]);
108 |       setPreviewingId(videoId);
109 |       return;
110 |     }
111 | 
112 |     setLoading(true);
113 |     try {
114 |       const cachedUrl = await ensureCached(videoId);
115 |       if (cachedUrl) {
116 |         setPreviewUrl(cachedUrl);
117 |         setPreviewingId(videoId);
118 |       }
119 |     } finally {
120 |       setLoading(false);
121 |     }
122 |   }, [ensureCached, previewUrl, previewingId]);
123 | 
124 |   return {
125 |     previewUrl,
126 |     previewingId,
127 |     previewLoading: loading,
128 |     playPreview,
129 |     clearPreview,
130 |     prefetchPreviews,
131 |   };
132 | };
133 | 
134 | export default usePreview;
135 |

--------------------------------------------------------------------------------
/app/api/suggest-prompt/route.ts:
--------------------------------------------------------------------------------
  1 | import { NextResponse } from "next/server";
  2 | import OpenAI from "openai";
  3 | import {
  4 |   coerceVideoModel,
  5 |   coerceVideoSeconds,
  6 |   coerceVideoSize,
  7 |   describeError,
  8 |   resolveErrorStatus,
  9 | } from "@/lib/sora";
 10 | 
 11 | const PROMPT_MODEL = "gpt-4.1-mini";
 12 | 
 13 | interface SuggestPromptPayload {
 14 |   prompt?: unknown;
 15 |   model?: unknown;
 16 |   size?: unknown;
 17 |   seconds?: unknown;
 18 | }
 19 | 
 20 | const readString = (value: unknown): string | null =>
 21 |   typeof value === "string" && value.trim() ? value.trim() : null;
 22 | 
 23 | const gatherText = (value: unknown): string => {
 24 |   if (!value) return "";
 25 |   if (typeof value === "string") return value;
 26 |   if (Array.isArray(value)) {
 27 |     return value.map(gatherText).filter(Boolean).join(" ");
 28 |   }
 29 |   if (typeof value === "object") {
 30 |     const node = value as {
 31 |       text?: unknown;
 32 |       content?: unknown;
 33 |       value?: unknown;
 34 |     };
 35 |     if (node.text !== undefined) return gatherText(node.text);
 36 |     if (node.content !== undefined) return gatherText(node.content);
 37 |     if (node.value !== undefined) return gatherText(node.value);
 38 |   }
 39 |   return "";
 40 | };
 41 | 
 42 | const extractTextFromResponse = (response: unknown): string => {
 43 |   const output = (response as { output_text?: string[] }).output_text;
 44 |   if (Array.isArray(output) && output.length) {
 45 |     return output.join(" ");
 46 |   }
 47 | 
 48 |   const generic = gatherText((response as { output?: unknown }).output);
 49 |   if (generic.trim()) return generic;
 50 | 
 51 |   const choiceContent = gatherText(
 52 |     (response as { choices?: Array<{ message?: { content?: unknown } }> })
 53 |       .choices?.[0]?.message?.content,
 54 |   );
 55 |   if (choiceContent.trim()) return choiceContent;
 56 | 
 57 |   return (
 58 |     gatherText((response as { text?: unknown }).text)
 59 |     || gatherText((response as { result?: unknown }).result)
 60 |   );
 61 | };
 62 | 
 63 | export async function POST(request: Request) {
 64 |   const apiKey = process.env.OPENAI_API_KEY?.trim();
 65 |   if (!apiKey) {
 66 |     const message = "OPENAI_API_KEY is not configured";
 67 |     return NextResponse.json({ error: { message } }, { status: 500 });
 68 |   }
 69 | 
 70 |   const client = new OpenAI({ apiKey });
 71 | 
 72 |   let payload: SuggestPromptPayload;
 73 |   try {
 74 |     payload = (await request.json()) as SuggestPromptPayload;
 75 |   } catch {
 76 |     return NextResponse.json({ error: { message: "Invalid JSON payload" } }, { status: 400 });
 77 |   }
 78 | 
 79 |   const existingPrompt = readString(payload.prompt);
 80 |   const model = coerceVideoModel(readString(payload.model));
 81 |   const size = coerceVideoSize(readString(payload.size));
 82 |   const seconds = coerceVideoSeconds(readString(payload.seconds));
 83 | 
 84 |   const contextLines = [
 85 |     `Target model: ${model}`,
 86 |     `Frame size: ${size}`,
 87 |     `Duration: ${seconds} seconds`,
 88 |   ];
 89 | 
 90 |   if (existingPrompt) {
 91 |     contextLines.push(`Existing prompt: ${existingPrompt}`);
 92 |   }
 93 | 
 94 |   try {
 95 |     const response = await client.responses.create({
 96 |       model: PROMPT_MODEL,
 97 |       max_output_tokens: 200,
 98 |       temperature: 0.8,
 99 |       input: [
100 |         {
101 |           role: "system",
102 |           content: [
103 |             {
104 |               type: "input_text",
105 |               text: "You are a creative director crafting vivid video prompts for the OpenAI Sora model. Respond with a single prompt, without additional commentary.",
106 |             },
107 |           ],
108 |         },
109 |         {
110 |           role: "user",
111 |           content: [
112 |             {
113 |               type: "input_text",
114 |               text: `Context for the video prompt:\n${contextLines.join("\n")}`,
115 |             },
116 |           ],
117 |         },
118 |       ],
119 |     });
120 | 
121 |     const suggestion = extractTextFromResponse(response).trim();
122 |     if (!suggestion) {
123 |       return NextResponse.json(
124 |         { error: { message: "Prompt suggestion unavailable. Try again." } },
125 |         { status: 502 },
126 |       );
127 |     }
128 | 
129 |     return NextResponse.json({ prompt: suggestion });
130 |   } catch (error) {
131 |     const message = describeError(error, "Failed to generate prompt suggestion");
132 |     const status = resolveErrorStatus(error);
133 |     return NextResponse.json({ error: { message } }, { status });
134 |   }
135 | }
136 |

--------------------------------------------------------------------------------
/app/globals.css:
--------------------------------------------------------------------------------
  1 | @import "tailwindcss";
  2 | 
  3 | @plugin "tailwindcss-animate";
  4 | @import "tw-animate-css";
  5 | 
  6 | @custom-variant dark (&:is(.dark *));
  7 | 
  8 | @theme inline {
  9 |   --radius-sm: calc(var(--radius) - 4px);
 10 |   --radius-md: calc(var(--radius) - 2px);
 11 |   --radius-lg: var(--radius);
 12 |   --radius-xl: calc(var(--radius) + 4px);
 13 |   --color-background: var(--background);
 14 |   --color-foreground: var(--foreground);
 15 |   --color-card: var(--card);
 16 |   --color-card-foreground: var(--card-foreground);
 17 |   --color-popover: var(--popover);
 18 |   --color-popover-foreground: var(--popover-foreground);
 19 |   --color-primary: var(--primary);
 20 |   --color-primary-foreground: var(--primary-foreground);
 21 |   --color-secondary: var(--secondary);
 22 |   --color-secondary-foreground: var(--secondary-foreground);
 23 |   --color-muted: var(--muted);
 24 |   --color-muted-foreground: var(--muted-foreground);
 25 |   --color-accent: var(--accent);
 26 |   --color-accent-foreground: var(--accent-foreground);
 27 |   --color-destructive: var(--destructive);
 28 |   --color-border: var(--border);
 29 |   --color-input: var(--input);
 30 |   --color-ring: var(--ring);
 31 |   --color-chart-1: var(--chart-1);
 32 |   --color-chart-2: var(--chart-2);
 33 |   --color-chart-3: var(--chart-3);
 34 |   --color-chart-4: var(--chart-4);
 35 |   --color-chart-5: var(--chart-5);
 36 |   --color-sidebar: var(--sidebar);
 37 |   --color-sidebar-foreground: var(--sidebar-foreground);
 38 |   --color-sidebar-primary: var(--sidebar-primary);
 39 |   --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
 40 |   --color-sidebar-accent: var(--sidebar-accent);
 41 |   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
 42 |   --color-sidebar-border: var(--sidebar-border);
 43 |   --color-sidebar-ring: var(--sidebar-ring);
 44 | }
 45 | 
 46 | :root {
 47 |   --radius: 0.625rem;
 48 |   color-scheme: light;
 49 |   --background: oklch(1 0 0);
 50 |   --foreground: oklch(0.145 0 0);
 51 |   --card: oklch(1 0 0);
 52 |   --card-foreground: oklch(0.145 0 0);
 53 |   --popover: oklch(1 0 0);
 54 |   --popover-foreground: oklch(0.145 0 0);
 55 |   --primary: oklch(0.205 0 0);
 56 |   --primary-foreground: oklch(0.985 0 0);
 57 |   --secondary: oklch(0.97 0 0);
 58 |   --secondary-foreground: oklch(0.205 0 0);
 59 |   --muted: oklch(0.97 0 0);
 60 |   --muted-foreground: oklch(0.556 0 0);
 61 |   --accent: oklch(0.97 0 0);
 62 |   --accent-foreground: oklch(0.205 0 0);
 63 |   --destructive: oklch(0.577 0.245 27.325);
 64 |   --border: oklch(0.922 0 0);
 65 |   --input: oklch(0.922 0 0);
 66 |   --ring: oklch(0.708 0 0);
 67 |   --chart-1: oklch(0.646 0.222 41.116);
 68 |   --chart-2: oklch(0.6 0.118 184.704);
 69 |   --chart-3: oklch(0.398 0.07 227.392);
 70 |   --chart-4: oklch(0.828 0.189 84.429);
 71 |   --chart-5: oklch(0.769 0.188 70.08);
 72 |   --sidebar: oklch(0.985 0 0);
 73 |   --sidebar-foreground: oklch(0.145 0 0);
 74 |   --sidebar-primary: oklch(0.205 0 0);
 75 |   --sidebar-primary-foreground: oklch(0.985 0 0);
 76 |   --sidebar-accent: oklch(0.97 0 0);
 77 |   --sidebar-accent-foreground: oklch(0.205 0 0);
 78 |   --sidebar-border: oklch(0.922 0 0);
 79 |   --sidebar-ring: oklch(0.708 0 0);
 80 | }
 81 | 
 82 | .dark {
 83 |   color-scheme: dark;
 84 |   --background: oklch(0.145 0 0);
 85 |   --foreground: oklch(0.985 0 0);
 86 |   --card: oklch(0.205 0 0);
 87 |   --card-foreground: oklch(0.985 0 0);
 88 |   --popover: oklch(0.205 0 0);
 89 |   --popover-foreground: oklch(0.985 0 0);
 90 |   --primary: oklch(0.922 0 0);
 91 |   --primary-foreground: oklch(0.205 0 0);
 92 |   --secondary: oklch(0.269 0 0);
 93 |   --secondary-foreground: oklch(0.985 0 0);
 94 |   --muted: oklch(0.269 0 0);
 95 |   --muted-foreground: oklch(0.708 0 0);
 96 |   --accent: oklch(0.269 0 0);
 97 |   --accent-foreground: oklch(0.985 0 0);
 98 |   --destructive: oklch(0.704 0.191 22.216);
 99 |   --border: oklch(1 0 0 / 10%);
100 |   --input: oklch(1 0 0 / 15%);
101 |   --ring: oklch(0.556 0 0);
102 |   --chart-1: oklch(0.488 0.243 264.376);
103 |   --chart-2: oklch(0.696 0.17 162.48);
104 |   --chart-3: oklch(0.769 0.188 70.08);
105 |   --chart-4: oklch(0.627 0.265 303.9);
106 |   --chart-5: oklch(0.645 0.246 16.439);
107 |   --sidebar: oklch(0.205 0 0);
108 |   --sidebar-foreground: oklch(0.985 0 0);
109 |   --sidebar-primary: oklch(0.488 0.243 264.376);
110 |   --sidebar-primary-foreground: oklch(0.985 0 0);
111 |   --sidebar-accent: oklch(0.269 0 0);
112 |   --sidebar-accent-foreground: oklch(0.985 0 0);
113 |   --sidebar-border: oklch(1 0 0 / 10%);
114 |   --sidebar-ring: oklch(0.556 0 0);
115 | }
116 | 
117 | @layer base {
118 |   * {
119 |     @apply border-border outline-ring/50;
120 |   }
121 |   body {
122 |     @apply bg-background text-foreground;
123 |   }
124 | }
125 |

--------------------------------------------------------------------------------
/app/api/generate-video/route.ts:
--------------------------------------------------------------------------------
  1 | import { Buffer } from "node:buffer";
  2 | import {
  3 |   coerceVideoModel,
  4 |   coerceVideoSeconds,
  5 |   coerceVideoSize,
  6 |   describeError,
  7 |   isRecord,
  8 |   normalizeVideoResponse,
  9 |   resolveErrorStatus,
 10 |   VideoRequestPayload,
 11 | } from "@/lib/sora";
 12 | 
 13 | type VideoCreateParams = {
 14 |   prompt: string;
 15 |   model: string;
 16 |   size: string;
 17 |   seconds: string;
 18 | };
 19 | 
 20 | export async function POST(request: Request) {
 21 |   const apiKey = process.env.OPENAI_API_KEY?.trim();
 22 |   if (!apiKey) {
 23 |     const message = "OPENAI_API_KEY is not configured";
 24 |     return Response.json({ error: { message } }, { status: 500 });
 25 |   }
 26 | 
 27 |   let rawPayload: unknown;
 28 |   try {
 29 |     rawPayload = await request.json();
 30 |   } catch {
 31 |     return Response.json(
 32 |       { error: { message: "Invalid JSON payload" } },
 33 |       { status: 400 }
 34 |     );
 35 |   }
 36 | 
 37 |   const payload = isRecord(rawPayload) ? rawPayload : {};
 38 | 
 39 |   const prompt =
 40 |     typeof payload.prompt === "string" ? payload.prompt.trim() : "";
 41 |   if (!prompt) {
 42 |     return Response.json(
 43 |       { error: { message: "Prompt is required" } },
 44 |       { status: 400 }
 45 |     );
 46 |   }
 47 | 
 48 |   const model = coerceVideoModel(
 49 |     typeof payload.model === "string" ? payload.model : null
 50 |   );
 51 |   const size = coerceVideoSize(
 52 |     typeof payload.size === "string" ? payload.size : null
 53 |   );
 54 |   const seconds = coerceVideoSeconds(
 55 |     payload.seconds != null ? String(payload.seconds) : null
 56 |   );
 57 | 
 58 |   const imageData = isRecord(payload.image) ? payload.image : null;
 59 | 
 60 |   const videoPayload: VideoRequestPayload = {
 61 |     prompt,
 62 |     model,
 63 |     size,
 64 |     seconds,
 65 |   };
 66 | 
 67 |   try {
 68 |     const endpointBase =
 69 |       process.env.OPENAI_BASE_URL?.trim() || "https://api.openai.com/v1";
 70 |     const endpoint = `${endpointBase.replace(/\/$/, "")}/videos`;
 71 |     const headers: Record<string, string> = {
 72 |       Authorization: `Bearer ${apiKey}`,
 73 |     };
 74 | 
 75 |     const organization = process.env.OPENAI_ORG_ID?.trim();
 76 |     if (organization) {
 77 |       headers["OpenAI-Organization"] = organization;
 78 |     }
 79 |     const project = process.env.OPENAI_PROJECT_ID?.trim();
 80 |     if (project) {
 81 |       headers["OpenAI-Project"] = project;
 82 |     }
 83 | 
 84 |     let response: Response;
 85 |     if (imageData?.data != null) {
 86 |       const formData = new FormData();
 87 |       formData.set("prompt", prompt);
 88 |       formData.set("model", model);
 89 |       formData.set("size", size);
 90 |       formData.set("seconds", seconds);
 91 | 
 92 |       const buffer = Buffer.from(String(imageData.data), "base64");
 93 |       const mimeType =
 94 |         typeof imageData.mimeType === "string" && imageData.mimeType.trim()
 95 |           ? imageData.mimeType
 96 |           : "image/png";
 97 |       const filename =
 98 |         typeof imageData.name === "string" && imageData.name.trim()
 99 |           ? imageData.name.trim()
100 |           : "input-reference";
101 |       const blob = new Blob([buffer], { type: mimeType });
102 |       formData.append("input_reference", blob, filename);
103 | 
104 |       response = await fetch(endpoint, {
105 |         method: "POST",
106 |         headers,
107 |         body: formData,
108 |       });
109 |     } else {
110 |       headers["Content-Type"] = "application/json";
111 |       const payload: VideoCreateParams = {
112 |         prompt,
113 |         model,
114 |         size,
115 |         seconds,
116 |       };
117 |       response = await fetch(endpoint, {
118 |         method: "POST",
119 |         headers,
120 |         body: JSON.stringify(payload),
121 |       });
122 |     }
123 | 
124 |     const result = await response.json().catch(() => null);
125 |     if (!response.ok || !result) {
126 |       const message = describeError(result, "Failed to create video");
127 |       const derivedStatus = result ? resolveErrorStatus(result) : undefined;
128 |       const status =
129 |         typeof derivedStatus === "number" && derivedStatus > 0
130 |           ? derivedStatus
131 |           : response.status || 500;
132 |       return Response.json({ error: { message } }, { status });
133 |     }
134 | 
135 |     const normalized = normalizeVideoResponse(result, videoPayload);
136 |     return Response.json(normalized);
137 |   } catch (error) {
138 |     console.error("generate-video error", error);
139 |     const message = describeError(error, "Failed to create video");
140 |     const status = resolveErrorStatus(error);
141 |     return Response.json({ error: { message } }, { status });
142 |   }
143 | }
144 |

--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Sora Video API sample app
  2 | 
  3 | [![MIT License](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE)
  4 | ![NextJS](https://img.shields.io/badge/Built_with-NextJS-blue)
  5 | ![Sora Video API](https://img.shields.io/badge/Powered_by-Sora_Video_API-orange)
  6 | 
  7 | This repository contains a NextJS sample app built on top of the [Sora Video API](https://platform.openai.com/docs/guides/video-generation) and OpenAI SDK.
  8 | It provides a simple UI for experimentation, using text prompts and optionally image inputs to generate and remix videos.
  9 | 
 10 | ![Sora demo visual](./public/sora-demo-visual.jpg)
 11 | 
 12 | Features:
 13 | 
 14 | - Generate new videos or remix existing runs through the `/videos` endpoints.
 15 | - Queue multiple variations in one click with **Versions Count** and follow progress via automatic polling.
 16 | - Auto-title runs so finished clips stay recognizable.
 17 | - Automatically optimize prompts.
 18 | - Generate starter imagery with `gpt-image-1` to use as image inputs.
 19 | - Preview, download, remix, or retry completed runs directly from the history panel.
 20 | - Persist preferences and run history in `localStorage` so refreshes do not wipe context.
 21 | 
 22 | This app is meant to be used as a starting point to build Sora-powered video experiences that you can customize to your needs.
 23 | 
 24 | ## How to use
 25 | 
 26 | 1. **Get access to the Sora Video API:**
 27 | 
 28 |    - Sora is currently in limited availability. Request access through your OpenAI account team or the [Video API waitlist](https://openai.com/waitlist/sora).
 29 |    - Once approved, review the [video generation guide](https://platform.openai.com/docs/guides/video-generation) to understand supported parameters and limits.
 30 | 
 31 | 2. **Set the OpenAI API key:**
 32 | 
 33 |    2 options:
 34 | 
 35 |    - Export the `OPENAI_API_KEY` environment variable [globally on your machine](https://platform.openai.com/docs/libraries#create-and-export-an-api-key).
 36 |    - Create a `.env.local` file at the project root (see below)
 37 | 
 38 |    ```bash
 39 |    OPENAI_API_KEY="your-openai-api-key"
 40 |    ```
 41 | 
 42 | 3. **Clone the repository:**
 43 | 
 44 |    ```bash
 45 |    git clone https://github.com/openai/sora-starter-app.git
 46 |    ```
 47 | 
 48 | 4. **Install dependencies:**
 49 | 
 50 |    Run in the project root:
 51 | 
 52 |    ```bash
 53 |    npm install
 54 |    ```
 55 | 
 56 | 5. **Run the app:**
 57 | 
 58 |    ```bash
 59 |    npm run dev
 60 |    ```
 61 | 
 62 |    The app will be available at [`http://localhost:3000`](http://localhost:3000).
 63 | 
 64 | ## Video helpers
 65 | 
 66 | This sample app highlights common Sora workflows and wraps each one in a small UI helper to speed up iteration.
 67 | 
 68 | ### Generate new videos
 69 | 
 70 | - Fill in your prompt, choose a Sora model (`sora-2` or `sora-2-pro`), aspect ratio, and duration (4s, 8s, or 12s).
 71 | - Optionally upload an image; the app crops it to the chosen aspect ratio before sending it along as `input_reference`.
 72 | - Submit one or many variations at once via **Versions Count**. The sidebar polls `/videos/{id}` until each job completes.
 73 | 
 74 | ### Remix existing runs
 75 | 
 76 | - Paste an existing `video_id` into the Remix section or click **Remix** on a completed run.
 77 | - Adjust prompt, model, size, or duration and resubmit. The history keeps both parent and remix entries linked for fast comparison.
 78 | 
 79 | ### Prompt optimization
 80 | 
 81 | Use **Generate prompt** to call the Responses API to optimize your prompt for the selected model, size, and duration.
 82 | 
 83 | ### Image ideation
 84 | 
 85 | - Let `gpt-image-1` propose stills aligned with your prompt. Choose the one you like and send it as the next `input_reference`.
 86 | - Swap between generated and uploaded imagery without losing form state.
 87 | 
 88 | ### Run management
 89 | 
 90 | - Preview, download, remix, or retry finished runs without leaving the page.
 91 | - Remove unwanted runs from the history and bulk download completed clips.
 92 | 
 93 | ## Demo flows
 94 | 
 95 | ### Try a fresh generation
 96 | 
 97 | - Enter a descriptive prompt such as `A sweeping drone shot over neon-drenched Kyoto at night`.
 98 | - Select `sora-2-pro`, set duration to 8 seconds, and bump **Versions Count** to 3.
 99 | - Click **Generate**. Watch each run stream through queued → processing → completed states, then preview the outputs inline.
100 | 
101 | ### Try a remix
102 | 
103 | - Pick your favorite completed clip and hit **Remix**.
104 | - Add guidance like `with a vintage film grain feel` and submit. Compare the remix to the original using the preview overlay navigation.
105 | 
106 | ### Try prompt and image suggestions
107 | 
108 | - Click **Suggest prompt** after entering a rough idea—e.g., `A playful golden retriever in the snow`—and apply the refined version.
109 | - Ask for image ideas, select one of the generated stills, and run a new generation to see how the reference shapes the motion.
110 | 
111 | ## Contributing
112 | 
113 | You are welcome to open issues or submit PRs to improve this app, however, please note that we may not review all suggestions.
114 | 
115 | ## License
116 | 
117 | This project is licensed under the MIT License. See the LICENSE file for details.
118 |

--------------------------------------------------------------------------------
/components/ui/input-group.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import { Slot } from "@radix-ui/react-slot"
  3 | 
  4 | import { Button, type ButtonProps } from "@/components/ui/button"
  5 | import { cn } from "@/lib/utils"
  6 | 
  7 | type InputGroupProps = React.HTMLAttributes<HTMLDivElement>
  8 | 
  9 | const InputGroup = React.forwardRef<HTMLDivElement, InputGroupProps>(
 10 |   ({ className, ...props }, ref) => {
 11 |     return (
 12 |       <div
 13 |         ref={ref}
 14 |         className={cn(
 15 |           "group/input-group relative flex min-w-0 flex-wrap items-stretch gap-px rounded-xl bg-background/80 transition [--input-group-addon-gap:0.5rem] focus-within:ring-2 focus-within:ring-ring/40 focus-within:ring-offset-1",
 16 |           className,
 17 |         )}
 18 |         {...props}
 19 |       />
 20 |     )
 21 |   },
 22 | )
 23 | InputGroup.displayName = "InputGroup"
 24 | 
 25 | type InputGroupAddonAlign =
 26 |   | "inline-start"
 27 |   | "inline-end"
 28 |   | "block-start"
 29 |   | "block-end"
 30 | 
 31 | type InputGroupAddonProps = React.HTMLAttributes<HTMLDivElement> & {
 32 |   align?: InputGroupAddonAlign
 33 | }
 34 | 
 35 | const ALIGN_CLASSNAMES: Record<InputGroupAddonAlign, string> = {
 36 |   "inline-start": "order-0 inline-flex items-center gap-[--input-group-addon-gap] px-3 py-2",
 37 |   "inline-end": "order-1 ml-auto inline-flex items-center gap-[--input-group-addon-gap] px-3 py-2",
 38 |   "block-start": "order-0 flex w-full items-center gap-[--input-group-addon-gap] px-3 py-2",
 39 |   "block-end": "order-2 flex w-full items-center gap-[--input-group-addon-gap] px-3 py-2",
 40 | }
 41 | 
 42 | const InputGroupAddon = React.forwardRef<HTMLDivElement, InputGroupAddonProps>(
 43 |   ({ className, align = "inline-end", ...props }, ref) => {
 44 |     return (
 45 |       <div
 46 |         ref={ref}
 47 |         className={cn(
 48 |           "bg-background/90 text-muted-foreground",
 49 |           ALIGN_CLASSNAMES[align],
 50 |           className,
 51 |         )}
 52 |         {...props}
 53 |       />
 54 |     )
 55 |   },
 56 | )
 57 | InputGroupAddon.displayName = "InputGroupAddon"
 58 | 
 59 | const inputGroupControlClasses =
 60 |   "flex-1 min-w-0 rounded-xl border-0 bg-transparent px-4 py-3 text-base text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0 disabled:cursor-not-allowed disabled:opacity-50"
 61 | 
 62 | type InputGroupInputProps = React.InputHTMLAttributes<HTMLInputElement> & {
 63 |   asChild?: boolean
 64 | }
 65 | 
 66 | const InputGroupInput = React.forwardRef<HTMLInputElement, InputGroupInputProps>(
 67 |   ({ className, asChild, type, ...props }, ref) => {
 68 |     if (asChild) {
 69 |       return (
 70 |         <Slot
 71 |           ref={ref as React.Ref<HTMLDivElement>}
 72 |           data-slot="input-group-control"
 73 |           className={cn(inputGroupControlClasses, className)}
 74 |           {...props}
 75 |         />
 76 |       )
 77 |     }
 78 | 
 79 |     return (
 80 |       <input
 81 |         ref={ref}
 82 |         type={type}
 83 |         data-slot="input-group-control"
 84 |         className={cn(inputGroupControlClasses, className)}
 85 |         {...props}
 86 |       />
 87 |     )
 88 |   },
 89 | )
 90 | InputGroupInput.displayName = "InputGroupInput"
 91 | 
 92 | type InputGroupTextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>
 93 | 
 94 | const InputGroupTextarea = React.forwardRef<HTMLTextAreaElement, InputGroupTextareaProps>(
 95 |   ({ className, rows = 5, ...props }, ref) => {
 96 |     return (
 97 |       <textarea
 98 |         ref={ref}
 99 |         rows={rows}
100 |         data-slot="input-group-control"
101 |         className={cn(
102 |           inputGroupControlClasses,
103 |           "block field-sizing-content min-h-[180px] w-full resize-none leading-relaxed",
104 |           className,
105 |         )}
106 |         {...props}
107 |       />
108 |     )
109 |   },
110 | )
111 | InputGroupTextarea.displayName = "InputGroupTextarea"
112 | 
113 | type InputGroupButtonSize = "xs" | "icon-xs" | "sm" | "icon-sm"
114 | 
115 | type InputGroupButtonProps = Omit<ButtonProps, "size"> & {
116 |   size?: InputGroupButtonSize
117 | }
118 | 
119 | const INPUT_GROUP_BUTTON_SIZE: Record<InputGroupButtonSize, string> = {
120 |   xs: "h-7 rounded-md px-2 text-xs",
121 |   "icon-xs": "h-7 w-7 rounded-md",
122 |   sm: "h-8 rounded-md px-3 text-sm",
123 |   "icon-sm": "h-8 w-8 rounded-md",
124 | }
125 | 
126 | const InputGroupButton = React.forwardRef<HTMLButtonElement, InputGroupButtonProps>(
127 |   ({ className, size = "xs", variant = "ghost", ...props }, ref) => {
128 |     const sizeKey: InputGroupButtonSize = size ?? "xs"
129 |     return (
130 |       <Button
131 |         ref={ref}
132 |         variant={variant}
133 |         size="sm"
134 |         className={cn(INPUT_GROUP_BUTTON_SIZE[sizeKey], className)}
135 |         {...props}
136 |       />
137 |     )
138 |   },
139 | )
140 | InputGroupButton.displayName = "InputGroupButton"
141 | 
142 | type InputGroupTextProps = React.HTMLAttributes<HTMLSpanElement>
143 | 
144 | const InputGroupText = React.forwardRef<HTMLSpanElement, InputGroupTextProps>(
145 |   ({ className, ...props }, ref) => (
146 |     <span
147 |       ref={ref}
148 |       className={cn("text-xs font-medium uppercase tracking-wide text-muted-foreground", className)}
149 |       {...props}
150 |     />
151 |   ),
152 | )
153 | InputGroupText.displayName = "InputGroupText"
154 | 
155 | export {
156 |   InputGroup,
157 |   InputGroupAddon,
158 |   InputGroupButton,
159 |   InputGroupInput,
160 |   InputGroupTextarea,
161 |   InputGroupText,
162 | }
163 |

--------------------------------------------------------------------------------
/components/VideoSidebar.tsx:
--------------------------------------------------------------------------------
  1 | import { useMemo } from "react";
  2 | import { Download, Loader2, X, PlayCircle } from "lucide-react";
  3 | import { Button } from "@/components/ui/button";
  4 | import {
  5 |   Empty,
  6 |   EmptyDescription,
  7 |   EmptyHeader,
  8 |   EmptyMedia,
  9 |   EmptyTitle,
 10 | } from "@/components/ui/empty";
 11 | import { cn } from "@/lib/utils";
 12 | import VideoCard from "./VideoCard";
 13 | import { isCompletedStatus, type VideoItem } from "../utils/video";
 14 | 
 15 | type AsyncMaybe = void | Promise<unknown>;
 16 | 
 17 | export type SidebarPreviewState = {
 18 |   previewingId: string | null;
 19 |   previewLoading: boolean;
 20 | };
 21 | 
 22 | export interface VideoSidebarProps {
 23 |   items: VideoItem[];
 24 |   thumbnails: Record<string, string>;
 25 |   onDownloadAll: () => void;
 26 |   downloadingAll: boolean;
 27 |   onDownload: (item: VideoItem) => AsyncMaybe;
 28 |   onPlayPreview: (item: VideoItem) => AsyncMaybe;
 29 |   onRemix: (item: VideoItem) => AsyncMaybe;
 30 |   onRetry: (item: VideoItem) => AsyncMaybe;
 31 |   onRefresh: (item: VideoItem) => AsyncMaybe;
 32 |   onRemove: (item: VideoItem) => AsyncMaybe;
 33 |   refreshingMap: Record<string, boolean>;
 34 |   previewState: SidebarPreviewState;
 35 |   isMobileOpen: boolean;
 36 |   onMobileClose: () => void;
 37 | }
 38 | 
 39 | const VideoSidebar = ({
 40 |   items,
 41 |   thumbnails,
 42 |   onDownloadAll,
 43 |   downloadingAll,
 44 |   onDownload,
 45 |   onPlayPreview,
 46 |   onRemix,
 47 |   onRetry,
 48 |   onRefresh,
 49 |   onRemove,
 50 |   refreshingMap,
 51 |   previewState,
 52 |   isMobileOpen,
 53 |   onMobileClose,
 54 | }: VideoSidebarProps) => {
 55 |   const hasDownloadable = useMemo(
 56 |     () =>
 57 |       items.some(
 58 |         (item) => item?.id && isCompletedStatus(item.status) && !item.downloaded
 59 |       ),
 60 |     [items]
 61 |   );
 62 | 
 63 |   const downloadHint = downloadingAll
 64 |     ? "Downloading completed videos…"
 65 |     : "Downloads may expire after one hour.";
 66 | 
 67 |   return (
 68 |     <aside
 69 |       className={cn(
 70 |         "order-1 h-screen w-full flex-none overflow-y-auto border-b border-border/60 bg-card/90 backdrop-blur-sm shadow-sm transition-all lg:order-1 lg:h-screen lg:max-h-screen lg:w-[30rem] lg:border-b-0 lg:border-r lg:border-border/60 lg:shadow-none xl:w-[32rem] lg:sticky lg:top-0",
 71 |         isMobileOpen ? "fixed inset-0 z-50 flex" : "hidden",
 72 |         "lg:flex lg:flex-col"
 73 |       )}
 74 |     >
 75 |       <div className="flex h-full min-h-0 flex-col overflow-hidden">
 76 |         <div className="flex items-start justify-between gap-3 border-b border-border/60 px-5 py-5">
 77 |           <div className="flex flex-col gap-1">
 78 |             <div className="text-[11px] uppercase tracking-[0.18em] text-muted-foreground">
 79 |               Library
 80 |             </div>
 81 |             <div className="text-xl font-semibold text-foreground">
 82 |               Your generations
 83 |             </div>
 84 |             <div className="text-xs text-muted-foreground">{downloadHint}</div>
 85 |           </div>
 86 |           <div className="flex items-center gap-2">
 87 |             <Button
 88 |               size="sm"
 89 |               variant="outline"
 90 |               onClick={onDownloadAll}
 91 |               disabled={downloadingAll || !hasDownloadable}
 92 |               className="hidden rounded-full whitespace-nowrap lg:inline-flex"
 93 |             >
 94 |               {downloadingAll ? (
 95 |                 <Loader2 className="h-4 w-4 animate-spin" />
 96 |               ) : (
 97 |                 <Download className="h-4 w-4" />
 98 |               )}
 99 |               Download all
100 |             </Button>
101 |             <Button
102 |               size="sm"
103 |               variant="outline"
104 |               onClick={onDownloadAll}
105 |               disabled={downloadingAll || !hasDownloadable}
106 |               className="inline-flex whitespace-nowrap lg:hidden"
107 |             >
108 |               {downloadingAll ? (
109 |                 <Loader2 className="h-4 w-4 animate-spin" />
110 |               ) : (
111 |                 <Download className="h-4 w-4" />
112 |               )}
113 |               Download
114 |             </Button>
115 |             <Button
116 |               type="button"
117 |               variant="ghost"
118 |               size="icon"
119 |               onClick={onMobileClose}
120 |               className="-mr-1 text-muted-foreground hover:text-foreground lg:hidden"
121 |               aria-label="Close sidebar"
122 |             >
123 |               <X className="h-5 w-5" />
124 |             </Button>
125 |           </div>
126 |         </div>
127 |         <div className="min-h-0 flex-1 overflow-y-auto bg-muted/40 px-3 py-4">
128 |           {items.length === 0 ? (
129 |             <div className="flex h-full items-center justify-center px-2 py-6">
130 |               <Empty className="max-w-sm border-none bg-transparent shadow-none">
131 |                 <EmptyHeader>
132 |                   <EmptyMedia variant="icon">
133 |                     <PlayCircle className="h-6 w-6" />
134 |                   </EmptyMedia>
135 |                   <EmptyTitle>No videos generated yet</EmptyTitle>
136 |                   <EmptyDescription>
137 |                     Start by generating videos to see them appear in your
138 |                     library.
139 |                   </EmptyDescription>
140 |                 </EmptyHeader>
141 |               </Empty>
142 |             </div>
143 |           ) : (
144 |             <div className="flex flex-col gap-3">
145 |               {items.map((item) => (
146 |                 <VideoCard
147 |                   key={item.id}
148 |                   item={item}
149 |                   thumbnailUrl={thumbnails[item.id]}
150 |                   onDownload={onDownload}
151 |                   onPlayPreview={onPlayPreview}
152 |                   onRemix={onRemix}
153 |                   onRetry={onRetry}
154 |                   onRefresh={onRefresh}
155 |                   onRemove={onRemove}
156 |                   isRefreshing={Boolean(refreshingMap[item.id])}
157 |                   isPreviewing={previewState.previewingId === item.id}
158 |                   previewLoading={previewState.previewLoading}
159 |                 />
160 |               ))}
161 |             </div>
162 |           )}
163 |         </div>
164 |       </div>
165 |     </aside>
166 |   );
167 | };
168 | 
169 | export default VideoSidebar;
170 |

--------------------------------------------------------------------------------
/components/ui/select.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react";
  2 | import * as SelectPrimitive from "@radix-ui/react-select";
  3 | import { Check, ChevronDown, ChevronUp } from "lucide-react";
  4 | 
  5 | import { cn } from "@/lib/utils";
  6 | 
  7 | const Select = SelectPrimitive.Root;
  8 | 
  9 | const SelectGroup = SelectPrimitive.Group;
 10 | 
 11 | const SelectValue = SelectPrimitive.Value;
 12 | 
 13 | const SelectTrigger = React.forwardRef<
 14 |   React.ElementRef<typeof SelectPrimitive.Trigger>,
 15 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
 16 | >(({ className, children, ...props }, ref) => (
 17 |   <SelectPrimitive.Trigger
 18 |     ref={ref}
 19 |     className={cn(
 20 |       "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
 21 |       className
 22 |     )}
 23 |     {...props}
 24 |   >
 25 |     {children}
 26 |     <SelectPrimitive.Icon asChild>
 27 |       <ChevronDown className="h-4 w-4 opacity-50" />
 28 |     </SelectPrimitive.Icon>
 29 |   </SelectPrimitive.Trigger>
 30 | ));
 31 | SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
 32 | 
 33 | const SelectScrollUpButton = React.forwardRef<
 34 |   React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
 35 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
 36 | >(({ className, ...props }, ref) => (
 37 |   <SelectPrimitive.ScrollUpButton
 38 |     ref={ref}
 39 |     className={cn(
 40 |       "flex cursor-default items-center justify-center py-1",
 41 |       className
 42 |     )}
 43 |     {...props}
 44 |   >
 45 |     <ChevronUp className="h-4 w-4" />
 46 |   </SelectPrimitive.ScrollUpButton>
 47 | ));
 48 | SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
 49 | 
 50 | const SelectScrollDownButton = React.forwardRef<
 51 |   React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
 52 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
 53 | >(({ className, ...props }, ref) => (
 54 |   <SelectPrimitive.ScrollDownButton
 55 |     ref={ref}
 56 |     className={cn(
 57 |       "flex cursor-default items-center justify-center py-1",
 58 |       className
 59 |     )}
 60 |     {...props}
 61 |   >
 62 |     <ChevronDown className="h-4 w-4" />
 63 |   </SelectPrimitive.ScrollDownButton>
 64 | ));
 65 | SelectScrollDownButton.displayName =
 66 |   SelectPrimitive.ScrollDownButton.displayName;
 67 | 
 68 | const SelectContent = React.forwardRef<
 69 |   React.ElementRef<typeof SelectPrimitive.Content>,
 70 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
 71 | >(({ className, children, position = "popper", ...props }, ref) => (
 72 |   <SelectPrimitive.Portal>
 73 |     <SelectPrimitive.Content
 74 |       ref={ref}
 75 |       className={cn(
 76 |         "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
 77 |         position === "popper" &&
 78 |           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
 79 |         className
 80 |       )}
 81 |       position={position}
 82 |       {...props}
 83 |     >
 84 |       <SelectScrollUpButton />
 85 |       <SelectPrimitive.Viewport
 86 |         className={cn(
 87 |           "p-1",
 88 |           position === "popper" &&
 89 |             "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
 90 |         )}
 91 |       >
 92 |         {children}
 93 |       </SelectPrimitive.Viewport>
 94 |       <SelectScrollDownButton />
 95 |     </SelectPrimitive.Content>
 96 |   </SelectPrimitive.Portal>
 97 | ));
 98 | SelectContent.displayName = SelectPrimitive.Content.displayName;
 99 | 
100 | const SelectLabel = React.forwardRef<
101 |   React.ElementRef<typeof SelectPrimitive.Label>,
102 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
103 | >(({ className, ...props }, ref) => (
104 |   <SelectPrimitive.Label
105 |     ref={ref}
106 |     className={cn("px-2 py-1.5 text-sm font-semibold", className)}
107 |     {...props}
108 |   />
109 | ));
110 | SelectLabel.displayName = SelectPrimitive.Label.displayName;
111 | 
112 | const SelectItem = React.forwardRef<
113 |   React.ElementRef<typeof SelectPrimitive.Item>,
114 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
115 | >(({ className, children, ...props }, ref) => (
116 |   <SelectPrimitive.Item
117 |     ref={ref}
118 |     className={cn(
119 |       "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
120 |       className
121 |     )}
122 |     {...props}
123 |   >
124 |     <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
125 |       <SelectPrimitive.ItemIndicator>
126 |         <Check className="h-4 w-4" />
127 |       </SelectPrimitive.ItemIndicator>
128 |     </span>
129 |     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
130 |   </SelectPrimitive.Item>
131 | ));
132 | SelectItem.displayName = SelectPrimitive.Item.displayName;
133 | 
134 | const SelectSeparator = React.forwardRef<
135 |   React.ElementRef<typeof SelectPrimitive.Separator>,
136 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
137 | >(({ className, ...props }, ref) => (
138 |   <SelectPrimitive.Separator
139 |     ref={ref}
140 |     className={cn("-mx-1 my-1 h-px bg-muted", className)}
141 |     {...props}
142 |   />
143 | ));
144 | SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
145 | 
146 | export {
147 |   Select,
148 |   SelectGroup,
149 |   SelectValue,
150 |   SelectTrigger,
151 |   SelectContent,
152 |   SelectLabel,
153 |   SelectItem,
154 |   SelectSeparator,
155 |   SelectScrollUpButton,
156 |   SelectScrollDownButton,
157 | };
158 |

--------------------------------------------------------------------------------
/services/soraApi.ts:
--------------------------------------------------------------------------------
  1 | import type { GeneratedImageSuggestion } from "@/types/generated";
  2 | 
  3 | export interface HttpError<T = unknown> extends Error {
  4 |   status: number;
  5 |   payload: T;
  6 | }
  7 | 
  8 | const API_BASE = "/api" as const;
  9 | 
 10 | const parseJson = async <T = unknown>(response: Response): Promise<T> => {
 11 |   const text = await response.text();
 12 |   if (!text) return {} as T;
 13 |   try {
 14 |     return JSON.parse(text) as T;
 15 |   } catch (error) {
 16 |     console.error("Failed to parse JSON", error);
 17 |     return {} as T;
 18 |   }
 19 | };
 20 | 
 21 | const buildHttpError = <T>(response: Response, payload: T): HttpError<T> => {
 22 |   const message = (payload as { error?: { message?: string } })?.error?.message
 23 |     || response.statusText
 24 |     || "Request failed";
 25 |   const error = new Error(message) as HttpError<T>;
 26 |   error.status = response.status;
 27 |   error.payload = payload;
 28 |   return error;
 29 | };
 30 | 
 31 | const ensureOk = async <T = unknown>(response: Response): Promise<void> => {
 32 |   if (response.ok) return;
 33 |   const payload = await parseJson<T>(response);
 34 |   throw buildHttpError(response, payload);
 35 | };
 36 | 
 37 | const fileToBase64 = (file: File): Promise<string> => new Promise((resolve, reject) => {
 38 |   const reader = new FileReader();
 39 |   reader.onload = () => {
 40 |     const { result } = reader;
 41 |     if (typeof result === "string") {
 42 |       const base64 = result.split(",")[1] || result;
 43 |       resolve(base64);
 44 |     } else if (result instanceof ArrayBuffer) {
 45 |       const bytes = new Uint8Array(result);
 46 |       let binary = "";
 47 |       bytes.forEach((b) => {
 48 |         binary += String.fromCharCode(b);
 49 |       });
 50 |       resolve(btoa(binary));
 51 |     } else {
 52 |       reject(new Error("Unsupported file format"));
 53 |     }
 54 |   };
 55 |   reader.onerror = () => reject(reader.error || new Error("Failed to read file"));
 56 |   reader.readAsDataURL(file);
 57 | });
 58 | 
 59 | export const requestVideoTitle = async <T = unknown>(prompt: string): Promise<T> => {
 60 |   const response = await fetch(`${API_BASE}/video-title`, {
 61 |     method: "POST",
 62 |     headers: { "Content-Type": "application/json" },
 63 |     body: JSON.stringify({ prompt }),
 64 |   });
 65 |   await ensureOk(response);
 66 |   return parseJson<T>(response);
 67 | };
 68 | 
 69 | export interface CreateVideoOptions {
 70 |   prompt: string;
 71 |   model: string;
 72 |   size: string;
 73 |   seconds: string | number;
 74 |   imageFile?: File | null;
 75 | }
 76 | 
 77 | export const createVideo = async <T = unknown>({
 78 |   prompt,
 79 |   model,
 80 |   size,
 81 |   seconds,
 82 |   imageFile,
 83 | }: CreateVideoOptions): Promise<T> => {
 84 |   let imagePayload: Record<string, string> | null = null;
 85 |   if (imageFile) {
 86 |     const base64 = await fileToBase64(imageFile);
 87 |     imagePayload = {
 88 |       data: base64,
 89 |       mimeType: imageFile.type || "application/octet-stream",
 90 |       name: imageFile.name || "uploaded-image",
 91 |     };
 92 |   }
 93 | 
 94 |   const response = await fetch(`${API_BASE}/generate-video`, {
 95 |     method: "POST",
 96 |     headers: { "Content-Type": "application/json" },
 97 |     body: JSON.stringify({ prompt, model, size, seconds, image: imagePayload }),
 98 |   });
 99 |   const payload = await parseJson<T>(response);
100 |   if (!response.ok) {
101 |     throw buildHttpError(response, payload);
102 |   }
103 |   return payload;
104 | };
105 | 
106 | export interface RemixVideoOptions {
107 |   videoId: string;
108 |   prompt: string;
109 |   model: string;
110 |   size: string;
111 |   seconds: string | number;
112 | }
113 | 
114 | export const remixVideo = async <T = unknown>({
115 |   videoId,
116 |   prompt,
117 |   model,
118 |   size,
119 |   seconds,
120 | }: RemixVideoOptions): Promise<T> => {
121 |   const response = await fetch(`${API_BASE}/remix-video`, {
122 |     method: "POST",
123 |     headers: { "Content-Type": "application/json" },
124 |     body: JSON.stringify({ videoId, prompt, model, size, seconds }),
125 |   });
126 |   const payload = await parseJson<T>(response);
127 |   if (!response.ok) {
128 |     throw buildHttpError(response, payload);
129 |   }
130 |   return payload;
131 | };
132 | 
133 | export interface FetchVideoOptions {
134 |   videoId: string;
135 | }
136 | 
137 | export const fetchVideo = async <T = unknown>({ videoId }: FetchVideoOptions): Promise<T> => {
138 |   const response = await fetch(`${API_BASE}/videos/${encodeURIComponent(videoId)}`);
139 |   await ensureOk(response);
140 |   return parseJson<T>(response);
141 | };
142 | 
143 | export interface FetchVideoContentOptions extends FetchVideoOptions {
144 |   variant?: string | null;
145 | }
146 | 
147 | export const fetchVideoContent = async ({
148 |   videoId,
149 |   variant,
150 | }: FetchVideoContentOptions): Promise<Blob> => {
151 |   const query = variant ? `?variant=${encodeURIComponent(variant)}` : "";
152 |   const response = await fetch(`${API_BASE}/videos/${encodeURIComponent(videoId)}/content${query}`);
153 |   if (!response.ok) {
154 |     const payload = await parseJson(response);
155 |     throw buildHttpError(response, payload);
156 |   }
157 |   return response.blob();
158 | };
159 | 
160 | export interface GenerateImagesRequest {
161 |   prompt: string;
162 |   size?: string;
163 |   count?: number;
164 |   model?: string;
165 | }
166 | 
167 | export interface GenerateImagesResponse {
168 |   images: GeneratedImageSuggestion[];
169 | }
170 | 
171 | export const generateImages = async ({
172 |   prompt,
173 |   size,
174 |   count,
175 |   model,
176 | }: GenerateImagesRequest): Promise<GeneratedImageSuggestion[]> => {
177 |   const response = await fetch(`${API_BASE}/generate-images`, {
178 |     method: "POST",
179 |     headers: { "Content-Type": "application/json" },
180 |     body: JSON.stringify({ prompt, size, count, model }),
181 |   });
182 |   const payload = await parseJson<GenerateImagesResponse>(response);
183 |   if (!response.ok) {
184 |     throw buildHttpError(response, payload);
185 |   }
186 |   return Array.isArray(payload.images) ? payload.images : [];
187 | };
188 | 
189 | export interface SuggestPromptRequest {
190 |   prompt?: string;
191 |   seconds?: string | number;
192 |   model?: string;
193 |   size?: string;
194 | }
195 | 
196 | export interface SuggestPromptResponse {
197 |   prompt: string;
198 | }
199 | 
200 | export const suggestVideoPrompt = async (
201 |   params: SuggestPromptRequest,
202 | ): Promise<string> => {
203 |   const response = await fetch(`${API_BASE}/suggest-prompt`, {
204 |     method: "POST",
205 |     headers: { "Content-Type": "application/json" },
206 |     body: JSON.stringify(params),
207 |   });
208 |   const payload = await parseJson<SuggestPromptResponse>(response);
209 |   if (!response.ok) {
210 |     throw buildHttpError(response, payload);
211 |   }
212 |   return typeof payload.prompt === "string" ? payload.prompt.trim() : "";
213 | };
214 | 
215 | export { ensureOk };
216 |

--------------------------------------------------------------------------------
/components/ui/field.tsx:
--------------------------------------------------------------------------------
  1 | import { useMemo } from "react"
  2 | import { cva, type VariantProps } from "class-variance-authority"
  3 | 
  4 | import { cn } from "@/lib/utils"
  5 | import { Label } from "@/components/ui/label"
  6 | import { Separator } from "@/components/ui/separator"
  7 | 
  8 | function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
  9 |   return (
 10 |     <fieldset
 11 |       data-slot="field-set"
 12 |       className={cn(
 13 |         "flex flex-col gap-6",
 14 |         "has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
 15 |         className
 16 |       )}
 17 |       {...props}
 18 |     />
 19 |   )
 20 | }
 21 | 
 22 | function FieldLegend({
 23 |   className,
 24 |   variant = "legend",
 25 |   ...props
 26 | }: React.ComponentProps<"legend"> & { variant?: "legend" | "label" }) {
 27 |   return (
 28 |     <legend
 29 |       data-slot="field-legend"
 30 |       data-variant={variant}
 31 |       className={cn(
 32 |         "mb-3 font-medium",
 33 |         "data-[variant=legend]:text-base",
 34 |         "data-[variant=label]:text-sm",
 35 |         className
 36 |       )}
 37 |       {...props}
 38 |     />
 39 |   )
 40 | }
 41 | 
 42 | function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
 43 |   return (
 44 |     <div
 45 |       data-slot="field-group"
 46 |       className={cn(
 47 |         "group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4",
 48 |         className
 49 |       )}
 50 |       {...props}
 51 |     />
 52 |   )
 53 | }
 54 | 
 55 | const fieldVariants = cva(
 56 |   "group/field data-[invalid=true]:text-destructive flex w-full gap-3",
 57 |   {
 58 |     variants: {
 59 |       orientation: {
 60 |         vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
 61 |         horizontal: [
 62 |           "flex-row items-center",
 63 |           "[&>[data-slot=field-label]]:flex-auto",
 64 |           "has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px has-[>[data-slot=field-content]]:items-start",
 65 |         ],
 66 |         responsive: [
 67 |           "@md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto flex-col [&>*]:w-full [&>.sr-only]:w-auto",
 68 |           "@md/field-group:[&>[data-slot=field-label]]:flex-auto",
 69 |           "@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
 70 |         ],
 71 |       },
 72 |     },
 73 |     defaultVariants: {
 74 |       orientation: "vertical",
 75 |     },
 76 |   }
 77 | )
 78 | 
 79 | function Field({
 80 |   className,
 81 |   orientation = "vertical",
 82 |   ...props
 83 | }: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) {
 84 |   return (
 85 |     <div
 86 |       role="group"
 87 |       data-slot="field"
 88 |       data-orientation={orientation}
 89 |       className={cn(fieldVariants({ orientation }), className)}
 90 |       {...props}
 91 |     />
 92 |   )
 93 | }
 94 | 
 95 | function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
 96 |   return (
 97 |     <div
 98 |       data-slot="field-content"
 99 |       className={cn(
100 |         "group/field-content flex flex-1 flex-col gap-1.5 leading-snug",
101 |         className
102 |       )}
103 |       {...props}
104 |     />
105 |   )
106 | }
107 | 
108 | function FieldLabel({
109 |   className,
110 |   ...props
111 | }: React.ComponentProps<typeof Label>) {
112 |   return (
113 |     <Label
114 |       data-slot="field-label"
115 |       className={cn(
116 |         "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50",
117 |         "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>[data-slot=field]]:p-4",
118 |         "has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10",
119 |         className
120 |       )}
121 |       {...props}
122 |     />
123 |   )
124 | }
125 | 
126 | function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
127 |   return (
128 |     <div
129 |       data-slot="field-label"
130 |       className={cn(
131 |         "flex w-fit items-center gap-2 text-sm font-medium leading-snug group-data-[disabled=true]/field:opacity-50",
132 |         className
133 |       )}
134 |       {...props}
135 |     />
136 |   )
137 | }
138 | 
139 | function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
140 |   return (
141 |     <p
142 |       data-slot="field-description"
143 |       className={cn(
144 |         "text-muted-foreground text-sm font-normal leading-normal group-has-[[data-orientation=horizontal]]/field:text-balance",
145 |         "nth-last-2:-mt-1 last:mt-0 [[data-variant=legend]+&]:-mt-1.5",
146 |         "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
147 |         className
148 |       )}
149 |       {...props}
150 |     />
151 |   )
152 | }
153 | 
154 | function FieldSeparator({
155 |   children,
156 |   className,
157 |   ...props
158 | }: React.ComponentProps<"div"> & {
159 |   children?: React.ReactNode
160 | }) {
161 |   return (
162 |     <div
163 |       data-slot="field-separator"
164 |       data-content={!!children}
165 |       className={cn(
166 |         "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
167 |         className
168 |       )}
169 |       {...props}
170 |     >
171 |       <Separator className="absolute inset-0 top-1/2" />
172 |       {children && (
173 |         <span
174 |           className="bg-background text-muted-foreground relative mx-auto block w-fit px-2"
175 |           data-slot="field-separator-content"
176 |         >
177 |           {children}
178 |         </span>
179 |       )}
180 |     </div>
181 |   )
182 | }
183 | 
184 | function FieldError({
185 |   className,
186 |   children,
187 |   errors,
188 |   ...props
189 | }: React.ComponentProps<"div"> & {
190 |   errors?: Array<{ message?: string } | undefined>
191 | }) {
192 |   const content = useMemo(() => {
193 |     if (children) {
194 |       return children
195 |     }
196 | 
197 |     if (!errors) {
198 |       return null
199 |     }
200 | 
201 |     if (errors?.length === 1 && errors[0]?.message) {
202 |       return errors[0].message
203 |     }
204 | 
205 |     return (
206 |       <ul className="ml-4 flex list-disc flex-col gap-1">
207 |         {errors.map(
208 |           (error, index) =>
209 |             error?.message && <li key={index}>{error.message}</li>
210 |         )}
211 |       </ul>
212 |     )
213 |   }, [children, errors])
214 | 
215 |   if (!content) {
216 |     return null
217 |   }
218 | 
219 |   return (
220 |     <div
221 |       role="alert"
222 |       data-slot="field-error"
223 |       className={cn("text-destructive text-sm font-normal", className)}
224 |       {...props}
225 |     >
226 |       {content}
227 |     </div>
228 |   )
229 | }
230 | 
231 | export {
232 |   Field,
233 |   FieldLabel,
234 |   FieldDescription,
235 |   FieldError,
236 |   FieldGroup,
237 |   FieldLegend,
238 |   FieldSeparator,
239 |   FieldSet,
240 |   FieldContent,
241 |   FieldTitle,
242 | }
243 |

--------------------------------------------------------------------------------
/lib/sora.ts:
--------------------------------------------------------------------------------
  1 | type VideoModel = "sora-2" | "sora-2-pro";
  2 | type VideoSeconds = "4" | "8" | "12";
  3 | type VideoSize = "720x1280" | "1280x720" | "1024x1792" | "1792x1024";
  4 | 
  5 | type UnknownRecord = Record<string, unknown>;
  6 | 
  7 | const MODEL_FALLBACK: VideoModel = "sora-2";
  8 | const SIZE_FALLBACK: VideoSize = "1280x720";
  9 | const SECONDS_FALLBACK: VideoSeconds = "4";
 10 | 
 11 | const ALLOWED_MODELS = new Set<VideoModel>(["sora-2", "sora-2-pro"]);
 12 | const ALLOWED_SIZES = new Set<VideoSize>(["720x1280", "1280x720", "1024x1792", "1792x1024"]);
 13 | const ALLOWED_SECONDS = new Set<VideoSeconds>(["4", "8", "12"]);
 14 | 
 15 | export const isRecord = (value: unknown): value is UnknownRecord =>
 16 |   typeof value === "object" && value !== null && !Array.isArray(value);
 17 | 
 18 | export type VideoRequestPayload = {
 19 |   prompt: string;
 20 |   model: VideoModel;
 21 |   size: VideoSize;
 22 |   seconds: VideoSeconds;
 23 | };
 24 | 
 25 | const coerceUnionValue = <T extends string>(
 26 |   value: string | null | undefined,
 27 |   set: Set<T>,
 28 |   fallback: T,
 29 | ): T => {
 30 |   if (!value) return fallback;
 31 |   const trimmed = value.trim();
 32 |   if (!trimmed) return fallback;
 33 |   if (set.has(trimmed as T)) {
 34 |     return trimmed as T;
 35 |   }
 36 |   return fallback;
 37 | };
 38 | 
 39 | export const coerceVideoModel = (value: string | null | undefined): VideoModel =>
 40 |   coerceUnionValue(value, ALLOWED_MODELS, MODEL_FALLBACK);
 41 | 
 42 | export const coerceVideoSize = (value: string | null | undefined): VideoSize =>
 43 |   coerceUnionValue(value, ALLOWED_SIZES, SIZE_FALLBACK);
 44 | 
 45 | export const coerceVideoSeconds = (value: string | null | undefined): VideoSeconds =>
 46 |   coerceUnionValue(value, ALLOWED_SECONDS, SECONDS_FALLBACK);
 47 | 
 48 | const toUnixSeconds = (value: unknown): number | null => {
 49 |   if (value === null || value === undefined) return null;
 50 |   if (typeof value === "number" && Number.isFinite(value)) {
 51 |     return value > 1e12 ? Math.round(value / 1000) : Math.round(value);
 52 |   }
 53 |   if (typeof value === "string") {
 54 |     const trimmed = value.trim();
 55 |     if (!trimmed) return null;
 56 |     const parsed = Number(trimmed);
 57 |     if (Number.isFinite(parsed)) {
 58 |       return parsed > 1e12 ? Math.round(parsed / 1000) : Math.round(parsed);
 59 |     }
 60 |     const timestamp = Date.parse(trimmed);
 61 |     if (Number.isFinite(timestamp)) {
 62 |       return Math.round(timestamp / 1000);
 63 |     }
 64 |   }
 65 |   return null;
 66 | };
 67 | 
 68 | const readString = (value: unknown): string | null => (typeof value === "string" ? value : null);
 69 | 
 70 | const extractDownloadUrl = (video: unknown): string | null => {
 71 |   if (!isRecord(video)) return null;
 72 | 
 73 |   const directDownload = readString(video.download_url) || readString(video.content_url);
 74 |   if (directDownload) {
 75 |     return directDownload;
 76 |   }
 77 | 
 78 |   if (isRecord(video.assets) && isRecord(video.assets.video)) {
 79 |     const nestedDownload = readString(video.assets.video.download_url);
 80 |     if (nestedDownload) {
 81 |       return nestedDownload;
 82 |     }
 83 |   }
 84 | 
 85 |   const searchInCollection = (collection: unknown): string | null => {
 86 |     if (!Array.isArray(collection)) return null;
 87 |     for (const entry of collection) {
 88 |       if (!isRecord(entry)) continue;
 89 |       const url = readString(entry.download_url) || readString(entry.url);
 90 |       if (url) return url;
 91 |     }
 92 |     return null;
 93 |   };
 94 | 
 95 |   const downloadFromAssets = searchInCollection(video.assets);
 96 |   if (downloadFromAssets) {
 97 |     return downloadFromAssets;
 98 |   }
 99 | 
100 |   return searchInCollection(video.output);
101 | };
102 | 
103 | const extractThumbnailUrl = (video: unknown): string | null => {
104 |   if (!isRecord(video)) return null;
105 | 
106 |   const directThumbnail = readString(video.thumbnail_url);
107 |   if (directThumbnail) {
108 |     return directThumbnail;
109 |   }
110 | 
111 |   if (isRecord(video.assets) && isRecord(video.assets.thumbnail)) {
112 |     const nestedThumbnail = readString(video.assets.thumbnail.url);
113 |     if (nestedThumbnail) {
114 |       return nestedThumbnail;
115 |     }
116 |   }
117 | 
118 |   if (Array.isArray(video.assets)) {
119 |     for (const asset of video.assets) {
120 |       if (!isRecord(asset)) continue;
121 |       if (readString(asset.type) === "thumbnail") {
122 |         const url = readString(asset.url);
123 |         if (url) return url;
124 |       }
125 |     }
126 |   }
127 | 
128 |   return null;
129 | };
130 | 
131 | export type NormalizedVideoResponse = UnknownRecord & {
132 |   id: string;
133 |   status: string;
134 |   prompt: string;
135 |   model: VideoModel;
136 |   size: VideoSize;
137 |   seconds: VideoSeconds;
138 |   created_at: number;
139 |   completed_at: number | null;
140 |   remix_video_id: string | null;
141 |   download_url: string | null;
142 |   thumbnail_url: string | null;
143 |   error: unknown;
144 | };
145 | 
146 | const resolveVideoId = (video: UnknownRecord, now: number): string => {
147 |   const directId = readString(video.id) || readString(video.video_id);
148 |   if (directId) return directId;
149 | 
150 |   if (isRecord(video.data)) {
151 |     const nestedId = readString(video.data.id);
152 |     if (nestedId) return nestedId;
153 |   }
154 | 
155 |   return `video_${now}`;
156 | };
157 | 
158 | export const normalizeVideoResponse = (
159 |   video: unknown,
160 |   fallback: VideoRequestPayload,
161 | ): NormalizedVideoResponse => {
162 |   const now = Math.floor(Date.now() / 1000);
163 |   const videoData: UnknownRecord = isRecord(video) ? video : {};
164 | 
165 |   const statusRaw =
166 |     readString(videoData.status)
167 |     || readString(videoData.state)
168 |     || "queued";
169 | 
170 |   const createdAt = toUnixSeconds(videoData.created_at) ?? now;
171 |   const completedAt = toUnixSeconds(videoData.completed_at)
172 |     ?? (statusRaw === "completed" ? now : null);
173 | 
174 |   const remixVideoId = readString(videoData.remix_video_id)
175 |     || readString(videoData.remix_of)
176 |     || readString(videoData.remixed_from_video_id)
177 |     || null;
178 | 
179 |   const response: NormalizedVideoResponse = {
180 |     ...videoData,
181 |     id: resolveVideoId(videoData, now),
182 |     status: statusRaw,
183 |     prompt: fallback.prompt,
184 |     model: fallback.model,
185 |     size: fallback.size,
186 |     seconds: fallback.seconds,
187 |     created_at: createdAt,
188 |     completed_at: completedAt,
189 |     remix_video_id: remixVideoId,
190 |     download_url: extractDownloadUrl(videoData),
191 |     thumbnail_url: extractThumbnailUrl(videoData),
192 |     error: "error" in videoData ? videoData.error ?? null : null,
193 |   };
194 | 
195 |   return response;
196 | };
197 | 
198 | export const describeError = (error: unknown, fallbackMessage: string) => {
199 |   if (error && typeof error === "object") {
200 |     const anyError = error as { message?: string };
201 |     if (typeof anyError.message === "string" && anyError.message.trim()) {
202 |       return anyError.message;
203 |     }
204 |   }
205 |   return fallbackMessage;
206 | };
207 | 
208 | export const resolveErrorStatus = (error: unknown, fallbackStatus = 500) => {
209 |   if (isRecord(error) && typeof error.status === "number") {
210 |     return error.status;
211 |   }
212 | 
213 |   if (typeof error === "object" && error !== null && "status" in error) {
214 |     const statusValue = (error as { status?: unknown }).status;
215 |     if (typeof statusValue === "number") {
216 |       return statusValue;
217 |     }
218 |   }
219 | 
220 |   return fallbackStatus;
221 | };
222 |

--------------------------------------------------------------------------------
/hooks/useVideoForm.ts:
--------------------------------------------------------------------------------
  1 | import {
  2 |   useCallback,
  3 |   useEffect,
  4 |   useMemo,
  5 |   useRef,
  6 |   useState,
  7 | } from "react";
  8 | import type { ChangeEvent, Dispatch, SetStateAction } from "react";
  9 | import usePersistedState from "./usePersistedState";
 10 | import {
 11 |   DEFAULT_SIZE,
 12 |   MODEL_OPTIONS,
 13 |   SECONDS_OPTIONS,
 14 |   getModelSizeOptions,
 15 |   sanitizeModel,
 16 |   sanitizeSizeForModel,
 17 |   ensurePrompt,
 18 |   parseSize,
 19 |   sanitizeSeconds,
 20 |   type SoraModel,
 21 |   type SizeOptionGroups,
 22 |   type VideoItem,
 23 |   type SoraSeconds,
 24 | } from "../utils/video";
 25 | import { cropImageToCover, dataUrlToFile, fetchImageAsFile } from "../utils/image";
 26 | 
 27 | export interface ImagePreviewMeta {
 28 |   name: string;
 29 |   width: number;
 30 |   height: number;
 31 | }
 32 | 
 33 | export interface UseVideoFormResult {
 34 |   prompt: string;
 35 |   setPrompt: Dispatch<SetStateAction<string>>;
 36 |   model: SoraModel;
 37 |   setModel: Dispatch<SetStateAction<SoraModel>>;
 38 |   size: string;
 39 |   setSize: Dispatch<SetStateAction<string>>;
 40 |   seconds: SoraSeconds;
 41 |   setSeconds: Dispatch<SetStateAction<SoraSeconds>>;
 42 |   versionsCount: number;
 43 |   setVersionsCount: Dispatch<SetStateAction<number>>;
 44 |   remixId: string;
 45 |   setRemixId: Dispatch<SetStateAction<string>>;
 46 |   imageFile: File | null;
 47 |   imagePreviewUrl: string | null;
 48 |   imagePreviewMeta: ImagePreviewMeta | null;
 49 |   handleImageSelect: (event: ChangeEvent<HTMLInputElement>) => Promise<void>;
 50 |   applyImageFile: (file: File | null, currentSize?: string) => Promise<void>;
 51 |   handleGeneratedImageDataUrl: (dataUrl: string, filename?: string, currentSize?: string) => Promise<void>;
 52 |   handleGeneratedImageUrl: (url: string, filename?: string, currentSize?: string) => Promise<void>;
 53 |   clearForm: () => void;
 54 |   applyVideoToForm: (item: Partial<VideoItem> | null, currentPrompt?: string) => void;
 55 |   sizeOptionGroups: SizeOptionGroups;
 56 | }
 57 | 
 58 | const useVideoForm = (): UseVideoFormResult => {
 59 |   const [prompt, setPrompt] = useState<string>("");
 60 |   const [model, setModel] = usePersistedState<SoraModel>("sora.model", MODEL_OPTIONS[0]);
 61 |   const [size, setSize] = usePersistedState<string>("sora.size", DEFAULT_SIZE);
 62 |   const [seconds, setSeconds] = usePersistedState<SoraSeconds>("sora.seconds", "4");
 63 |   const [versionsCount, setVersionsCount] = usePersistedState<number>("sora.versions", 1);
 64 |   const [imageFile, setImageFile] = useState<File | null>(null);
 65 |   const [originalImageFile, setOriginalImageFile] = useState<File | null>(null);
 66 |   const [remixId, setRemixId] = useState<string>("");
 67 |   const [imagePreviewUrl, setImagePreviewUrl] = useState<string | null>(null);
 68 |   const [imagePreviewMeta, setImagePreviewMeta] = useState<ImagePreviewMeta | null>(null);
 69 | 
 70 |   const resolvedModel = sanitizeModel(model);
 71 |   useEffect(() => {
 72 |     if (model !== resolvedModel) {
 73 |       setModel(resolvedModel);
 74 |     }
 75 |   }, [model, resolvedModel, setModel]);
 76 | 
 77 |   const resolvedSize = sanitizeSizeForModel(size, resolvedModel);
 78 |   useEffect(() => {
 79 |     if (size !== resolvedSize) {
 80 |       setSize(resolvedSize);
 81 |     }
 82 |   }, [size, resolvedSize, setSize]);
 83 | 
 84 |   const sizeOptionGroups = useMemo<SizeOptionGroups>(
 85 |     () => getModelSizeOptions(resolvedModel),
 86 |     [resolvedModel],
 87 |   );
 88 |   const lastCroppedImageKeyRef = useRef<string | null>(null);
 89 | 
 90 |   const clearImagePreview = useCallback(() => {
 91 |     if (imagePreviewUrl) {
 92 |       URL.revokeObjectURL(imagePreviewUrl);
 93 |     }
 94 |     setImagePreviewUrl(null);
 95 |     setImagePreviewMeta(null);
 96 |     lastCroppedImageKeyRef.current = null;
 97 |   }, [imagePreviewUrl]);
 98 | 
 99 |   useEffect(() => () => {
100 |     if (imagePreviewUrl) {
101 |       URL.revokeObjectURL(imagePreviewUrl);
102 |     }
103 |   }, [imagePreviewUrl]);
104 | 
105 |   const applyCroppedImage = useCallback(async (file: File, sizeStr: string) => {
106 |     const key = `${file.name || "file"}-${file.lastModified || ""}-${sizeStr}`;
107 |     if (lastCroppedImageKeyRef.current === key) return;
108 |     lastCroppedImageKeyRef.current = key;
109 |     const { width, height } = parseSize(sizeStr);
110 |     try {
111 |       const cropped = await cropImageToCover(file, width, height);
112 |       setImageFile(cropped);
113 |       setImagePreviewMeta({
114 |         name: cropped.name,
115 |         width,
116 |         height,
117 |       });
118 |       const nextUrl = URL.createObjectURL(cropped);
119 |       setImagePreviewUrl((prevUrl) => {
120 |         if (prevUrl) URL.revokeObjectURL(prevUrl);
121 |         return nextUrl;
122 |       });
123 |     } catch (error) {
124 |       lastCroppedImageKeyRef.current = null;
125 |       throw error;
126 |     }
127 |   }, []);
128 | 
129 |   const applyImageFile = useCallback(async (file: File | null, currentSize = resolvedSize) => {
130 |     if (!file) {
131 |       setImageFile(null);
132 |       setOriginalImageFile(null);
133 |       clearImagePreview();
134 |       return;
135 |     }
136 |     setOriginalImageFile(file);
137 |     await applyCroppedImage(file, currentSize);
138 |   }, [applyCroppedImage, clearImagePreview, resolvedSize]);
139 | 
140 |   const handleImageSelect = useCallback(async (event: ChangeEvent<HTMLInputElement>, currentSize = resolvedSize) => {
141 |     const file = event.target?.files?.[0];
142 |     if (!file) {
143 |       await applyImageFile(null, currentSize);
144 |       return;
145 |     }
146 |     await applyImageFile(file, currentSize);
147 |   }, [applyImageFile, resolvedSize]);
148 | 
149 |   const handleGeneratedImageDataUrl = useCallback(async (dataUrl: string, filename = "generated.png", currentSize = resolvedSize) => {
150 |     const file = await dataUrlToFile(dataUrl, filename);
151 |     await applyImageFile(file, currentSize);
152 |   }, [applyImageFile, resolvedSize]);
153 | 
154 |   const handleGeneratedImageUrl = useCallback(async (url: string, filename = "generated.png", currentSize = resolvedSize) => {
155 |     const file = await fetchImageAsFile(url, filename);
156 |     await applyImageFile(file, currentSize);
157 |   }, [applyImageFile, resolvedSize]);
158 | 
159 |   useEffect(() => {
160 |     if (!originalImageFile) return;
161 |     applyCroppedImage(originalImageFile, resolvedSize).catch(() => {
162 |       /* ignore recrop errors */
163 |     });
164 |   }, [originalImageFile, resolvedSize, applyCroppedImage]);
165 | 
166 |   const resetImage = useCallback(() => {
167 |     setImageFile(null);
168 |     setOriginalImageFile(null);
169 |     clearImagePreview();
170 |   }, [clearImagePreview]);
171 | 
172 |   const clearForm = useCallback(() => {
173 |     setPrompt("");
174 |     resetImage();
175 |     setRemixId("");
176 |   }, [resetImage]);
177 | 
178 |   const applyVideoToForm = useCallback((item: Partial<VideoItem> | null, currentPrompt?: string) => {
179 |     if (!item) return;
180 |     const nextPrompt = ensurePrompt(item as VideoItem, currentPrompt ?? prompt);
181 |     setPrompt(nextPrompt);
182 |     const sanitizedModel = sanitizeModel((item.model as string | undefined) ?? MODEL_OPTIONS[0]);
183 |     setModel(sanitizedModel);
184 |     setSize(sanitizeSizeForModel((item.size as string | undefined) ?? DEFAULT_SIZE, sanitizedModel));
185 |     setSeconds(sanitizeSeconds((item.seconds as string | number | null | undefined) ?? SECONDS_OPTIONS[0]));
186 |     resetImage();
187 |   }, [prompt, resetImage, setModel, setSeconds, setSize]);
188 | 
189 |   return {
190 |     prompt,
191 |     setPrompt,
192 |     model: resolvedModel,
193 |     setModel,
194 |     size: resolvedSize,
195 |     setSize,
196 |     seconds,
197 |     setSeconds,
198 |     versionsCount,
199 |     setVersionsCount,
200 |     remixId,
201 |     setRemixId,
202 |     imageFile,
203 |     imagePreviewUrl,
204 |     imagePreviewMeta,
205 |     handleImageSelect,
206 |     applyImageFile,
207 |     handleGeneratedImageDataUrl,
208 |     handleGeneratedImageUrl,
209 |     clearForm,
210 |     applyVideoToForm,
211 |     sizeOptionGroups,
212 |   };
213 | };
214 | 
215 | export default useVideoForm;
216 |

--------------------------------------------------------------------------------
/utils/video.ts:
--------------------------------------------------------------------------------
  1 | export const DEFAULT_SIZE = "1280x720" as const;
  2 | 
  3 | export const MODEL_OPTIONS = ["sora-2", "sora-2-pro"] as const;
  4 | export type SoraModel = (typeof MODEL_OPTIONS)[number];
  5 | 
  6 | export type SizeOptionGroups = {
  7 |   portrait: readonly string[];
  8 |   landscape: readonly string[];
  9 | };
 10 | 
 11 | export const MODEL_SIZE_OPTIONS: Record<SoraModel, SizeOptionGroups> = {
 12 |   "sora-2": {
 13 |     portrait: ["720x1280"],
 14 |     landscape: [DEFAULT_SIZE],
 15 |   },
 16 |   "sora-2-pro": {
 17 |     portrait: ["720x1280", "1024x1792"],
 18 |     landscape: [DEFAULT_SIZE, "1792x1024"],
 19 |   },
 20 | };
 21 | 
 22 | export const SECONDS_OPTIONS = ["4", "8", "12"] as const;
 23 | export type SoraSeconds = (typeof SECONDS_OPTIONS)[number];
 24 | 
 25 | export const sanitizeSeconds = (value: string | number | null | undefined): SoraSeconds => {
 26 |   const str = typeof value === "number" ? String(value) : (value ?? "").trim();
 27 |   return SECONDS_OPTIONS.includes(str as SoraSeconds) ? (str as SoraSeconds) : SECONDS_OPTIONS[0];
 28 | };
 29 | 
 30 | export const IMAGE_INPUT_ALERT = "This video used an image input. Please select the correct image manually before generating.";
 31 | 
 32 | export type VideoStatus = "queued" | "in_progress" | "completed" | "succeeded" | "failed" | string;
 33 | 
 34 | export interface VideoItem extends Record<string, unknown> {
 35 |   id: string;
 36 |   status: VideoStatus;
 37 |   title: string;
 38 |   prompt?: string | null;
 39 |   model: SoraModel;
 40 |   size: string;
 41 |   seconds: SoraSeconds;
 42 |   remix_video_id: string | null;
 43 |   createdAt: string | null;
 44 |   completedAt: string | null;
 45 |   download_url?: string | null;
 46 |   thumbnail_url?: string | null;
 47 |   progress?: number | string | null;
 48 |   downloaded: boolean;
 49 |   image_input_required: boolean;
 50 |   error: unknown;
 51 | }
 52 | 
 53 | const coerceProgressPercent = (value: unknown): number | null => {
 54 |   if (value === null || value === undefined) return null;
 55 |   if (typeof value === "number" && Number.isFinite(value)) {
 56 |     const normalized = value <= 1 ? value * 100 : value;
 57 |     return Math.max(0, Math.min(100, normalized));
 58 |   }
 59 |   if (typeof value === "string") {
 60 |     const trimmed = value.trim();
 61 |     if (!trimmed) return null;
 62 |     const numeric = Number(trimmed.replace(/%+$/, ""));
 63 |     if (!Number.isFinite(numeric)) return null;
 64 |     const normalized = numeric <= 1 ? numeric * 100 : numeric;
 65 |     return Math.max(0, Math.min(100, normalized));
 66 |   }
 67 |   return null;
 68 | };
 69 | 
 70 | export const sanitizeModel = (value: string): SoraModel => (
 71 |   MODEL_OPTIONS.includes(value as SoraModel) ? (value as SoraModel) : MODEL_OPTIONS[0]
 72 | );
 73 | 
 74 | export const getModelSizeOptions = (modelKey: string): SizeOptionGroups => {
 75 |   const key = sanitizeModel(modelKey);
 76 |   return MODEL_SIZE_OPTIONS[key] ?? MODEL_SIZE_OPTIONS[MODEL_OPTIONS[0]];
 77 | };
 78 | 
 79 | export const sanitizeSizeForModel = (sizeValue: string, modelKey: string): string => {
 80 |   const { portrait, landscape } = getModelSizeOptions(modelKey);
 81 |   const allowed = [...portrait, ...landscape];
 82 |   if (allowed.includes(sizeValue)) return sizeValue;
 83 |   return landscape[0] ?? portrait[0] ?? DEFAULT_SIZE;
 84 | };
 85 | 
 86 | const ONE_DAY_MS = 24 * 60 * 60 * 1000;
 87 | 
 88 | type TimestampLike = string | number | Date | null | undefined;
 89 | 
 90 | type NullableNumber = number | null;
 91 | 
 92 | type WithTimestamp = Partial<Pick<VideoItem, "completed_at" | "completedAt" | "created_at" | "createdAt">> & Record<string, unknown>;
 93 | 
 94 | const toTimestampLike = (value: unknown): TimestampLike => {
 95 |   if (value === null || value === undefined) return null;
 96 |   if (typeof value === "string" || typeof value === "number") return value;
 97 |   if (value instanceof Date) return value;
 98 |   return null;
 99 | };
100 | 
101 | export const getCompletedTimestampMs = (item: WithTimestamp | null | undefined): NullableNumber => {
102 |   if (!item) return null;
103 |   const raw = item.completed_at ?? item.completedAt ?? null;
104 |   if (raw === null || raw === undefined) return null;
105 |   if (typeof raw === "number") {
106 |     if (!Number.isFinite(raw)) return null;
107 |     return raw > 1e12 ? raw : raw * 1000;
108 |   }
109 |   if (typeof raw === "string") {
110 |     const trimmed = raw.trim();
111 |     if (!trimmed) return null;
112 |     const ms = Date.parse(trimmed);
113 |     return Number.isFinite(ms) ? ms : null;
114 |   }
115 |   if (raw instanceof Date && Number.isFinite(raw.getTime())) {
116 |     return raw.getTime();
117 |   }
118 |   return null;
119 | };
120 | 
121 | export const isWithinLast24Hours = (item: WithTimestamp | null | undefined): boolean => {
122 |   const ms = getCompletedTimestampMs(item);
123 |   if (ms === null) return false;
124 |   return (Date.now() - ms) <= ONE_DAY_MS;
125 | };
126 | 
127 | export const isCompletedStatus = (status: VideoStatus | null | undefined): boolean =>
128 |   status === "completed" || status === "succeeded";
129 | 
130 | export const isFailedStatus = (status: VideoStatus | null | undefined): boolean => status === "failed";
131 | 
132 | const normalizeTimestamp = (value: TimestampLike): string | null => {
133 |   if (value === null || value === undefined) return null;
134 |   if (typeof value === "number") {
135 |     const date = new Date(value * 1000);
136 |     if (!Number.isNaN(date.getTime())) return date.toISOString();
137 |     return null;
138 |   }
139 |   if (typeof value === "string") {
140 |     const trimmed = value.trim();
141 |     if (!trimmed) return null;
142 |     const date = new Date(trimmed);
143 |     if (!Number.isNaN(date.getTime())) return date.toISOString();
144 |     return null;
145 |   }
146 |   if (value instanceof Date && !Number.isNaN(value.getTime())) {
147 |     return value.toISOString();
148 |   }
149 |   return null;
150 | };
151 | 
152 | export interface SizeDimensions {
153 |   width: number;
154 |   height: number;
155 | }
156 | 
157 | export const parseSize = (sizeStr: string): SizeDimensions => {
158 |   if (typeof sizeStr !== "string") return { width: 1280, height: 720 };
159 |   const [wRaw, hRaw] = sizeStr.split("x");
160 |   const w = Number(wRaw);
161 |   const h = Number(hRaw);
162 |   if (!Number.isFinite(w) || !Number.isFinite(h) || w <= 0 || h <= 0) {
163 |     return { width: 1280, height: 720 };
164 |   }
165 |   return { width: w, height: h };
166 | };
167 | 
168 | type PartialVideoItem = Partial<VideoItem> & Record<string, unknown>;
169 | 
170 | export const normalizeVideo = (
171 |   raw: PartialVideoItem | null | undefined,
172 |   fallback: PartialVideoItem = {},
173 | ): VideoItem => {
174 |   const source = (raw ?? {}) as PartialVideoItem;
175 |   const fallbackSource = (fallback ?? {}) as PartialVideoItem;
176 | 
177 |   const completedAt = normalizeTimestamp(
178 |     toTimestampLike(source.completed_at ?? source.completedAt)
179 |   )
180 |     || normalizeTimestamp(
181 |       toTimestampLike(fallbackSource.completed_at ?? fallbackSource.completedAt)
182 |     )
183 |     || null;
184 |   const createdAt = normalizeTimestamp(
185 |     toTimestampLike(source.created_at ?? source.createdAt)
186 |   )
187 |     || normalizeTimestamp(
188 |       toTimestampLike(fallbackSource.created_at ?? fallbackSource.createdAt)
189 |     )
190 |     || null;
191 |   const status = (source.status ?? fallbackSource.status ?? "unknown") as VideoStatus;
192 |   const title = (source.title || fallbackSource.title || source.name || "").toString().trim();
193 |   const promptSource = (source.prompt ?? fallbackSource.prompt) as string | null | undefined;
194 |   const prompt = typeof promptSource === "string" && promptSource.trim()
195 |     ? promptSource.trim()
196 |     : typeof fallbackSource.prompt === "string"
197 |       ? fallbackSource.prompt
198 |       : "";
199 |   const model = sanitizeModel((source.model ?? fallbackSource.model ?? MODEL_OPTIONS[0]) as string);
200 |   const size = sanitizeSizeForModel((source.size ?? fallbackSource.size ?? DEFAULT_SIZE) as string, model);
201 |   const seconds = sanitizeSeconds(source.seconds ?? fallbackSource.seconds ?? SECONDS_OPTIONS[0]);
202 |   const remix_video_id = (source.remix_video_id
203 |     ?? source.remixVideoId
204 |     ?? source.remix_of
205 |     ?? source.remixOf
206 |     ?? source.source_video_id
207 |     ?? source.sourceVideoId
208 |     ?? fallbackSource.remix_video_id
209 |     ?? null) as string | null;
210 |   const image_input_required = Boolean(source.image_input_required ?? fallbackSource.image_input_required ?? false);
211 |   const downloaded = Boolean(source.downloaded ?? fallbackSource.downloaded ?? false);
212 |   const error = source.error ?? fallbackSource.error ?? null;
213 |   const download_url = typeof source.download_url === "string"
214 |     ? source.download_url
215 |     : typeof fallbackSource.download_url === "string"
216 |       ? fallbackSource.download_url
217 |       : null;
218 |   let progress = coerceProgressPercent(source.progress ?? fallbackSource.progress ?? null);
219 | 
220 |   let finalCompletedAt = completedAt;
221 |   if (!finalCompletedAt && isCompletedStatus(status)) {
222 |     finalCompletedAt = fallbackSource.completedAt ?? new Date().toISOString();
223 |   }
224 | 
225 |   let finalStatus = status;
226 |   if (!isCompletedStatus(finalStatus)) {
227 |     if (progress !== null && progress >= 100) {
228 |       finalStatus = "completed";
229 |     } else if (download_url) {
230 |       finalStatus = "completed";
231 |     }
232 |   }
233 | 
234 |   if (!finalCompletedAt && isCompletedStatus(finalStatus)) {
235 |     finalCompletedAt = new Date().toISOString();
236 |   }
237 | 
238 |   if (isCompletedStatus(finalStatus) && (progress === null || progress < 100)) {
239 |     progress = 100;
240 |   }
241 | 
242 |   return {
243 |     ...fallbackSource,
244 |     ...source,
245 |     id: String(source.id ?? fallbackSource.id ?? ""),
246 |     status: finalStatus,
247 |     title,
248 |     prompt,
249 |     model,
250 |     size,
251 |     seconds,
252 |     remix_video_id,
253 |     createdAt,
254 |     completedAt: finalCompletedAt,
255 |     progress,
256 |     download_url,
257 |     downloaded,
258 |     image_input_required,
259 |     error,
260 |   } satisfies VideoItem;
261 | };
262 | 
263 | export const ensurePrompt = (
264 |   item: Pick<VideoItem, "prompt" | "title"> | null | undefined,
265 |   currentPrompt = "",
266 | ): string => {
267 |   if (item?.prompt && item.prompt.trim()) return item.prompt;
268 |   if (currentPrompt && currentPrompt.trim()) return currentPrompt;
269 |   if (item?.title && item.title.trim()) return item.title.trim();
270 |   return "Regenerate previous Sora video";
271 | };
272 | 
273 | export const buildDownloadName = (id: string, title: string | null | undefined): string => {
274 |   const safe = (title || "")
275 |     .replace(/[<>:"/\\|?*]+/g, "")
276 |     .replace(/\s+/g, " ")
277 |     .trim();
278 |   if (!safe) return `${id}.mp4`;
279 |   const normalized = safe
280 |     .split(" ")
281 |     .map((part) => part.trim())
282 |     .filter(Boolean)
283 |     .join("-");
284 |   return `${normalized.slice(0, 60) || id}.mp4`;
285 | };
286 |

--------------------------------------------------------------------------------
/components/VideoPreviewOverlay.tsx:
--------------------------------------------------------------------------------
  1 | import { useEffect, useRef, useState } from "react";
  2 | import {
  3 |   Check,
  4 |   ChevronLeft,
  5 |   ChevronRight,
  6 |   Copy,
  7 |   Download,
  8 |   Loader2,
  9 |   X,
 10 | } from "lucide-react";
 11 | import { Button } from "@/components/ui/button";
 12 | import { cn } from "@/lib/utils";
 13 | import { ensurePrompt, type VideoItem } from "../utils/video";
 14 | 
 15 | type AsyncMaybe = void | Promise<unknown>;
 16 | 
 17 | export interface VideoPreviewOverlayProps {
 18 |   isOpen: boolean;
 19 |   item: VideoItem | null;
 20 |   previewUrl: string | null;
 21 |   loading: boolean;
 22 |   onClose: () => void;
 23 |   onPrev: () => void;
 24 |   onNext: () => void;
 25 |   hasPrev: boolean;
 26 |   hasNext: boolean;
 27 |   onDownload?: (item: VideoItem) => AsyncMaybe;
 28 | }
 29 | 
 30 | const VideoPreviewOverlay = ({
 31 |   isOpen,
 32 |   item,
 33 |   previewUrl,
 34 |   loading,
 35 |   onClose,
 36 |   onPrev,
 37 |   onNext,
 38 |   hasPrev,
 39 |   hasNext,
 40 |   onDownload,
 41 | }: VideoPreviewOverlayProps) => {
 42 |   const [downloading, setDownloading] = useState(false);
 43 |   const [copiedKey, setCopiedKey] = useState<"id" | "prompt" | null>(null);
 44 |   const copyTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 45 |   const [videoDimensions, setVideoDimensions] = useState<{
 46 |     width: number;
 47 |     height: number;
 48 |   } | null>(null);
 49 | 
 50 |   useEffect(() => {
 51 |     if (!isOpen) return undefined;
 52 | 
 53 |     const handleKeyDown = (event: KeyboardEvent) => {
 54 |       if (event.key === "Escape") {
 55 |         event.preventDefault();
 56 |         onClose();
 57 |       } else if (event.key === "ArrowLeft" && hasPrev) {
 58 |         event.preventDefault();
 59 |         onPrev();
 60 |       } else if (event.key === "ArrowRight" && hasNext) {
 61 |         event.preventDefault();
 62 |         onNext();
 63 |       }
 64 |     };
 65 | 
 66 |     const previousOverflow = document.body.style.overflow;
 67 |     document.body.style.overflow = "hidden";
 68 |     window.addEventListener("keydown", handleKeyDown);
 69 |     return () => {
 70 |       document.body.style.overflow = previousOverflow;
 71 |       window.removeEventListener("keydown", handleKeyDown);
 72 |     };
 73 |   }, [hasNext, hasPrev, isOpen, onClose, onNext, onPrev]);
 74 | 
 75 |   useEffect(
 76 |     () => () => {
 77 |       if (copyTimeoutRef.current) {
 78 |         clearTimeout(copyTimeoutRef.current);
 79 |       }
 80 |     },
 81 |     []
 82 |   );
 83 | 
 84 |   useEffect(() => {
 85 |     setVideoDimensions(null);
 86 |   }, [previewUrl]);
 87 | 
 88 |   if (!isOpen) return null;
 89 | 
 90 |   const handleDownloadClick = async () => {
 91 |     if (!onDownload || !item?.id) return;
 92 |     setDownloading(true);
 93 |     try {
 94 |       await onDownload(item);
 95 |     } finally {
 96 |       setDownloading(false);
 97 |     }
 98 |   };
 99 | 
100 |   const handleCopy = async (
101 |     value: string | null | undefined,
102 |     key: "id" | "prompt"
103 |   ) => {
104 |     const text = (value ?? "").toString().trim();
105 |     if (!text) return;
106 |     try {
107 |       await navigator.clipboard.writeText(text);
108 |       setCopiedKey(key);
109 |       if (copyTimeoutRef.current) {
110 |         clearTimeout(copyTimeoutRef.current);
111 |       }
112 |       copyTimeoutRef.current = setTimeout(() => setCopiedKey(null), 1500);
113 |     } catch (error) {
114 |       console.error("Failed to copy text", error);
115 |     }
116 |   };
117 | 
118 |   const metaChips = [
119 |     item?.seconds ? `${item.seconds}s` : null,
120 |     item?.model || null,
121 |     item?.size || null,
122 |   ].filter(Boolean) as string[];
123 | 
124 |   const storedPrompt = item?.prompt?.toString().trim() || "";
125 |   const fallbackPrompt = ensurePrompt(item ?? undefined, "");
126 |   const promptText = storedPrompt || fallbackPrompt || "";
127 |   const isPromptFallback = !storedPrompt && Boolean(promptText);
128 | 
129 |   const renderVideoArea = () => {
130 |     if (previewUrl) {
131 |       const aspectRatio = videoDimensions
132 |         ? `${videoDimensions.width} / ${videoDimensions.height}`
133 |         : undefined;
134 | 
135 |       return (
136 |         <div
137 |           className="flex max-h-full max-w-full items-center justify-center"
138 |           style={
139 |             aspectRatio
140 |               ? { aspectRatio, maxHeight: "100%", maxWidth: "100%" }
141 |               : { width: "100%", height: "100%" }
142 |           }
143 |         >
144 |           <video
145 |             key={previewUrl}
146 |             src={previewUrl}
147 |             controls
148 |             onLoadedMetadata={(event) => {
149 |               const { videoWidth, videoHeight } = event.currentTarget;
150 |               if (videoWidth && videoHeight) {
151 |                 setVideoDimensions({ width: videoWidth, height: videoHeight });
152 |               }
153 |             }}
154 |             className="max-h-full max-w-full rounded-lg bg-black"
155 |           />
156 |         </div>
157 |       );
158 |     }
159 | 
160 |     return (
161 |       <div className="flex h-full flex-col items-center justify-center bg-muted text-sm text-muted-foreground">
162 |         {loading ? "Loading preview…" : "Preview not available."}
163 |       </div>
164 |     );
165 |   };
166 | 
167 |   return (
168 |     <div
169 |       className="fixed inset-0 z-50 flex items-center justify-center bg-neutral-950/70 px-4 py-8 backdrop-blur"
170 |       role="dialog"
171 |       aria-modal="true"
172 |       onMouseDown={(event) => {
173 |         if (event.target === event.currentTarget) {
174 |           onClose();
175 |         }
176 |       }}
177 |     >
178 |       <div className="relative flex h-[90vh] w-full max-w-5xl flex-col overflow-hidden rounded-3xl border border-border/60 bg-card/90 shadow-2xl">
179 |         <div className="flex items-start justify-between gap-4 border-b border-border/60 px-6 py-5">
180 |           <div className="min-w-0 space-y-3">
181 |             <div className="text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">
182 |               Previewing
183 |             </div>
184 |             <div className="line-clamp-2 text-xl font-semibold leading-6 text-foreground">
185 |               {item?.title?.trim() || "Untitled Video"}
186 |             </div>
187 |             <div className="flex items-center gap-1 font-mono text-[11px] text-muted-foreground">
188 |               <span className="max-w-[16rem] truncate">{item?.id}</span>
189 |               <Button
190 |                 type="button"
191 |                 variant="ghost"
192 |                 size="icon"
193 |                 onClick={() => handleCopy(item?.id, "id")}
194 |                 className="h-6 w-6 text-muted-foreground hover:text-foreground"
195 |                 aria-label="Copy video id"
196 |               >
197 |                 {copiedKey === "id" ? (
198 |                   <Check className="h-3.5 w-3.5" />
199 |                 ) : (
200 |                   <Copy className="h-3.5 w-3.5" />
201 |                 )}
202 |               </Button>
203 |             </div>
204 |             {metaChips.length ? (
205 |               <div className="flex flex-wrap items-center gap-2 text-[11px] text-muted-foreground">
206 |                 {metaChips.map((chip) => (
207 |                   <span
208 |                     key={chip}
209 |                     className="rounded-full bg-muted/60 px-2 py-0.5"
210 |                   >
211 |                     {chip}
212 |                   </span>
213 |                 ))}
214 |               </div>
215 |             ) : null}
216 |           </div>
217 |           <div className="flex items-center gap-2">
218 |             <Button
219 |               variant="secondary"
220 |               size="sm"
221 |               onClick={handleDownloadClick}
222 |               disabled={!item?.id || !onDownload || downloading}
223 |               className="rounded-full px-3 text-xs"
224 |             >
225 |               {downloading ? (
226 |                 <Loader2 className="h-3.5 w-3.5 animate-spin" />
227 |               ) : (
228 |                 <Download className="h-3.5 w-3.5" />
229 |               )}
230 |               Download
231 |             </Button>
232 |             <Button
233 |               variant="ghost"
234 |               size="icon"
235 |               onClick={onClose}
236 |               className="h-9 w-9 rounded-full text-muted-foreground hover:bg-accent hover:text-foreground"
237 |               aria-label="Close preview"
238 |             >
239 |               <X className="h-4 w-4" />
240 |             </Button>
241 |           </div>
242 |         </div>
243 |         <div className="flex flex-1 min-h-0 flex-col gap-4 overflow-y-auto px-6 py-5">
244 |           <div className="relative flex flex-1 min-h-[320px] w-full items-center justify-center overflow-hidden rounded-2xl border border-border/60 bg-black">
245 |             {renderVideoArea()}
246 |             {loading ? (
247 |               <div className="absolute inset-0 flex items-center justify-center bg-black/30">
248 |                 <Loader2 className="h-12 w-12 animate-spin text-white" />
249 |               </div>
250 |             ) : null}
251 |             <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-2 md:pl-4">
252 |               <Button
253 |                 type="button"
254 |                 size="icon"
255 |                 variant="ghost"
256 |                 onClick={hasPrev ? onPrev : undefined}
257 |                 disabled={!hasPrev}
258 |                 className="pointer-events-auto h-10 w-10 rounded-full border border-border/60 bg-background/80 text-foreground shadow transition hover:bg-background"
259 |                 aria-label="Previous preview"
260 |               >
261 |                 <ChevronLeft className="h-5 w-5" />
262 |               </Button>
263 |             </div>
264 |             <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2 md:pr-4">
265 |               <Button
266 |                 type="button"
267 |                 size="icon"
268 |                 variant="ghost"
269 |                 onClick={hasNext ? onNext : undefined}
270 |                 disabled={!hasNext}
271 |                 className="pointer-events-auto h-10 w-10 rounded-full border border-border/60 bg-background/80 text-foreground shadow transition hover:bg-background"
272 |                 aria-label="Next preview"
273 |               >
274 |                 <ChevronRight className="h-5 w-5" />
275 |               </Button>
276 |             </div>
277 |           </div>
278 |           {promptText ? (
279 |             <div className="rounded-2xl border border-border/60 bg-card/80 p-4">
280 |               <div className="mb-2 flex items-center justify-between">
281 |                 <span className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
282 |                   Prompt
283 |                 </span>
284 |                 <Button
285 |                   type="button"
286 |                   size="sm"
287 |                   variant="ghost"
288 |                   onClick={() => handleCopy(promptText, "prompt")}
289 |                   className="h-7 gap-2 rounded-full text-xs text-muted-foreground hover:bg-accent hover:text-foreground"
290 |                   aria-label="Copy prompt"
291 |                 >
292 |                   {copiedKey === "prompt" ? (
293 |                     <Check className="h-3.5 w-3.5" />
294 |                   ) : (
295 |                     <Copy className="h-3.5 w-3.5" />
296 |                   )}
297 |                   Copy prompt
298 |                 </Button>
299 |               </div>
300 |               <p
301 |                 className={cn(
302 |                   "whitespace-pre-line text-sm leading-5",
303 |                   isPromptFallback
304 |                     ? "italic text-muted-foreground"
305 |                     : "text-foreground/90"
306 |                 )}
307 |               >
308 |                 {promptText}
309 |               </p>
310 |             </div>
311 |           ) : null}
312 |         </div>
313 |       </div>
314 |     </div>
315 |   );
316 | };
317 | 
318 | export default VideoPreviewOverlay;
319 |

--------------------------------------------------------------------------------
/components/VideoCard.tsx:
--------------------------------------------------------------------------------
  1 | import { useEffect, useRef, useState } from "react";
  2 | import {
  3 |   Check,
  4 |   Copy,
  5 |   Download,
  6 |   Loader2,
  7 |   RefreshCcw,
  8 |   Play,
  9 |   Wand2,
 10 |   X,
 11 | } from "lucide-react";
 12 | import { Button } from "@/components/ui/button";
 13 | import { cn } from "@/lib/utils";
 14 | import { Card, CardContent } from "../ui";
 15 | import {
 16 |   formatDateTime,
 17 |   formatDurationMinutes,
 18 |   formatProgressPercent,
 19 | } from "../utils/formatters";
 20 | import {
 21 |   ensurePrompt,
 22 |   isCompletedStatus,
 23 |   isFailedStatus,
 24 |   type VideoItem,
 25 |   type VideoStatus,
 26 | } from "../utils/video";
 27 | 
 28 | type AsyncMaybe = void | Promise<unknown>;
 29 | 
 30 | export interface VideoCardProps {
 31 |   item: VideoItem;
 32 |   thumbnailUrl?: string;
 33 |   onDownload: (item: VideoItem) => AsyncMaybe;
 34 |   onPlayPreview: (item: VideoItem) => AsyncMaybe;
 35 |   onRemix: (item: VideoItem) => AsyncMaybe;
 36 |   onRetry: (item: VideoItem) => AsyncMaybe;
 37 |   onRefresh: (item: VideoItem) => AsyncMaybe;
 38 |   onRemove: (item: VideoItem) => AsyncMaybe;
 39 |   isRefreshing: boolean;
 40 |   isPreviewing: boolean;
 41 |   previewLoading: boolean;
 42 | }
 43 | 
 44 | const extractErrorReason = (error: unknown): string | undefined => {
 45 |   if (!error) return undefined;
 46 |   if (typeof error === "string") return error;
 47 |   if (typeof error === "object") {
 48 |     const candidate = error as { message?: unknown; code?: unknown };
 49 |     if (typeof candidate.message === "string" && candidate.message.trim()) {
 50 |       return candidate.message;
 51 |     }
 52 |     if (typeof candidate.code === "string" && candidate.code.trim()) {
 53 |       return candidate.code;
 54 |     }
 55 |   }
 56 |   return undefined;
 57 | };
 58 | 
 59 | const STATUS_BADGE_META: Record<string, { label: string; className: string }> =
 60 |   {
 61 |     completed: {
 62 |       label: "Ready",
 63 |       className:
 64 |         "border border-emerald-500/30 bg-emerald-500/10 text-emerald-500",
 65 |     },
 66 |     succeeded: {
 67 |       label: "Ready",
 68 |       className:
 69 |         "border border-emerald-500/30 bg-emerald-500/10 text-emerald-500",
 70 |     },
 71 |     queued: {
 72 |       label: "Queued",
 73 |       className: "border border-blue-500/30 bg-blue-500/10 text-blue-500",
 74 |     },
 75 |     in_progress: {
 76 |       label: "Processing",
 77 |       className: "border border-amber-500/30 bg-amber-500/10 text-amber-500",
 78 |     },
 79 |     failed: {
 80 |       label: "Failed",
 81 |       className:
 82 |         "border border-destructive/40 bg-destructive/10 text-destructive",
 83 |     },
 84 |   };
 85 | 
 86 | const formatStatusLabel = (status: string): string =>
 87 |   status
 88 |     .split(/[_-]+/g)
 89 |     .filter(Boolean)
 90 |     .map((segment) => segment[0]?.toUpperCase() + segment.slice(1))
 91 |     .join(" ") || "Unknown";
 92 | 
 93 | const getStatusBadgeMeta = (status: VideoStatus | null | undefined) => {
 94 |   const normalized = (status || "unknown").toLowerCase();
 95 |   const fallback = {
 96 |     label: status ? formatStatusLabel(status) : "Unknown",
 97 |     className: "border border-border/60 bg-muted/60 text-muted-foreground",
 98 |   };
 99 |   return STATUS_BADGE_META[normalized] ?? fallback;
100 | };
101 | 
102 | const VideoCard = ({
103 |   item,
104 |   thumbnailUrl,
105 |   onDownload,
106 |   onPlayPreview,
107 |   onRemix,
108 |   onRetry,
109 |   onRefresh,
110 |   onRemove,
111 |   isRefreshing,
112 |   isPreviewing,
113 |   previewLoading,
114 | }: VideoCardProps) => {
115 |   const [copiedKey, setCopiedKey] = useState<"id" | "prompt" | null>(null);
116 |   const copyTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
117 | 
118 |   useEffect(() => {
119 |     return () => {
120 |       if (copyTimeoutRef.current) {
121 |         clearTimeout(copyTimeoutRef.current);
122 |       }
123 |     };
124 |   }, []);
125 | 
126 |   if (!item) return null;
127 | 
128 |   const handleCopy = async (
129 |     value: string | null | undefined,
130 |     key: "id" | "prompt"
131 |   ) => {
132 |     const text = (value ?? "").toString().trim();
133 |     if (!text) return;
134 |     try {
135 |       await navigator.clipboard.writeText(text);
136 |       setCopiedKey(key);
137 |       if (copyTimeoutRef.current) {
138 |         clearTimeout(copyTimeoutRef.current);
139 |       }
140 |       copyTimeoutRef.current = setTimeout(() => setCopiedKey(null), 1500);
141 |     } catch (error) {
142 |       console.error("Failed to copy text", error);
143 |     }
144 |   };
145 | 
146 |   const showCompletedMeta = () => {
147 |     if (!item.completedAt) return null;
148 |     const duration = formatDurationMinutes(item.createdAt, item.completedAt);
149 |     return (
150 |       <div className="flex flex-wrap items-center gap-1 text-[11px] text-muted-foreground">
151 |         <span>Completed {formatDateTime(item.completedAt)}</span>
152 |         {duration ? (
153 |           <>
154 |             <span className="text-muted-foreground/70">•</span>
155 |             <span>{duration}</span>
156 |           </>
157 |         ) : null}
158 |       </div>
159 |     );
160 |   };
161 | 
162 |   const renderActions = () => {
163 |     if (isCompletedStatus(item.status)) {
164 |       return (
165 |         <>
166 |           <Button
167 |             onClick={() => onDownload(item)}
168 |             size="sm"
169 |             variant="secondary"
170 |             aria-label="Download video"
171 |             className={cn(
172 |               "rounded-full px-3 text-xs font-semibold",
173 |               item.downloaded ? "opacity-60" : ""
174 |             )}
175 |           >
176 |             <Download className="h-3.5 w-3.5" />
177 |             Download
178 |           </Button>
179 |           <Button
180 |             variant="outline"
181 |             onClick={() => onRemix(item)}
182 |             size="sm"
183 |             className="rounded-full border-border px-3 text-xs text-foreground hover:bg-accent"
184 |           >
185 |             <Wand2 className="h-3.5 w-3.5" />
186 |             Remix
187 |           </Button>
188 |         </>
189 |       );
190 |     }
191 | 
192 |     if (isFailedStatus(item.status)) {
193 |       const reason = extractErrorReason(item.error);
194 | 
195 |       return (
196 |         <div className="flex flex-col gap-2 rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-destructive">
197 |           <div className="flex flex-wrap items-center gap-2 text-xs font-medium">
198 |             <span>Generation failed</span>
199 |             <Button
200 |               variant="outline"
201 |               onClick={() => onRetry(item)}
202 |               size="sm"
203 |               className="h-7 rounded-full border-destructive/50 px-3 text-[11px] text-destructive hover:bg-destructive/15"
204 |             >
205 |               <RefreshCcw className="h-3.5 w-3.5" />
206 |               Retry
207 |             </Button>
208 |           </div>
209 |           {reason ? (
210 |             <div className="text-[11px] text-destructive/90">{reason}</div>
211 |           ) : null}
212 |         </div>
213 |       );
214 |     }
215 | 
216 |     return (
217 |       <>
218 |         <div className="flex items-center gap-2 rounded-full bg-muted/60 px-3 py-1 text-[11px] text-muted-foreground">
219 |           <Loader2 className="h-3 w-3 animate-spin" />
220 |           <span>Processing…</span>
221 |         </div>
222 |         <Button
223 |           type="button"
224 |           variant="outline"
225 |           size="sm"
226 |           onClick={() => onRefresh(item)}
227 |           disabled={isRefreshing}
228 |           className="rounded-full border-border px-3 text-[11px] text-foreground hover:bg-accent"
229 |         >
230 |           {isRefreshing ? (
231 |             <Loader2 className="h-3.5 w-3.5 animate-spin" />
232 |           ) : (
233 |             <RefreshCcw className="h-3.5 w-3.5" />
234 |           )}
235 |           {isRefreshing ? "Refreshing" : "Refresh"}
236 |         </Button>
237 |       </>
238 |     );
239 |   };
240 | 
241 |   const { label: statusLabel, className: statusClass } = getStatusBadgeMeta(
242 |     item.status
243 |   );
244 | 
245 |   const progress = formatProgressPercent(item.progress ?? null);
246 |   const showProgress =
247 |     (item.status || "").toLowerCase() === "in_progress" && progress;
248 |   const progressValue = showProgress ? Number(progress) : null;
249 |   const hasValidProgress =
250 |     typeof progressValue === "number" && Number.isFinite(progressValue);
251 |   const progressWidth = hasValidProgress
252 |     ? Math.min(100, Math.max(0, progressValue ?? 0))
253 |     : 0;
254 | 
255 |   const metaChips = [
256 |     item.seconds ? `${item.seconds}s` : null,
257 |     item.model || null,
258 |     item.size || null,
259 |   ].filter(Boolean) as string[];
260 |   const storedPrompt =
261 |     typeof item.prompt === "string" ? item.prompt.trim() : "";
262 |   const fallbackPrompt = ensurePrompt(item, "");
263 |   const promptText = storedPrompt || fallbackPrompt || "";
264 |   const isPromptFallback = !storedPrompt && Boolean(promptText);
265 | 
266 |   return (
267 |     <Card className="group relative w-full overflow-hidden rounded-xl border border-border/60 bg-card/80 transition-colors hover:bg-card">
268 |       <CardContent className="p-0">
269 |         <div className="grid gap-0 md:h-[260px] md:grid-cols-[200px_1fr]">
270 |           <div className="relative h-[260px] overflow-hidden border-b border-border/60 bg-muted/60 md:h-full md:border-b-0 md:border-r">
271 |             {thumbnailUrl ? (
272 |               // eslint-disable-next-line @next/next/no-img-element
273 |               <img
274 |                 src={thumbnailUrl}
275 |                 alt={`Thumbnail for ${item.title?.trim() || item.id}`}
276 |                 className="h-full w-full object-cover transition duration-300 group-hover:scale-[1.02]"
277 |               />
278 |             ) : (
279 |               <div className="flex h-full w-full items-center justify-center bg-gradient-to-br from-muted/70 via-muted/60 to-muted/70 text-muted-foreground"></div>
280 |             )}
281 |             <div
282 |               className={cn(
283 |                 "pointer-events-none absolute inset-0 flex items-center justify-center bg-black/0 transition",
284 |                 isPreviewing ? "bg-black/25" : "group-hover:bg-black/15"
285 |               )}
286 |             >
287 |               <Button
288 |                 type="button"
289 |                 size="icon"
290 |                 variant="secondary"
291 |                 onClick={() => onPlayPreview(item)}
292 |                 disabled={previewLoading && isPreviewing}
293 |                 aria-label={
294 |                   thumbnailUrl ? "Preview video" : "Preview video (placeholder)"
295 |                 }
296 |                 className="pointer-events-auto h-9 w-9 rounded-full border border-border/60 bg-card/90 text-foreground transition hover:scale-[1.02] focus-visible:scale-[1.02]"
297 |               >
298 |                 {previewLoading && isPreviewing ? (
299 |                   <Loader2 className="h-4 w-4 animate-spin" />
300 |                 ) : (
301 |                   <Play className="h-4 w-4" />
302 |                 )}
303 |               </Button>
304 |             </div>
305 |           </div>
306 |           <div className="flex flex-col gap-3 p-4">
307 |             <Button
308 |               type="button"
309 |               size="icon"
310 |               variant="ghost"
311 |               aria-label="Remove video from list"
312 |               onClick={() => onRemove(item)}
313 |               className="absolute right-1 top-1 h-7 w-7 text-muted-foreground hover:bg-accent hover:text-foreground"
314 |             >
315 |               <X className="h-3.5 w-3.5" />
316 |             </Button>
317 |             <div className="flex items-start justify-between gap-4">
318 |               <div className="min-w-0 space-y-2">
319 |                 <div className="mt-1 mr-4 line-clamp-2 text-sm font-semibold leading-5 text-foreground">
320 |                   {item.title?.trim().replaceAll('"', "") || "Untitled Video"}
321 |                 </div>
322 |                 <div className="flex justify-start items-center gap-2">
323 |                   <div className="flex items-center gap-1 font-mono text-[11px] text-muted-foreground">
324 |                     <span className="max-w-24 truncate">{item.id}</span>
325 |                     <Button
326 |                       type="button"
327 |                       variant="ghost"
328 |                       size="icon"
329 |                       onClick={() => handleCopy(item.id, "id")}
330 |                       className="h-6 w-6 text-muted-foreground hover:text-foreground"
331 |                       aria-label="Copy video id"
332 |                     >
333 |                       {copiedKey === "id" ? (
334 |                         <Check className="h-3.5 w-3.5" />
335 |                       ) : (
336 |                         <Copy className="h-3.5 w-3.5" />
337 |                       )}
338 |                     </Button>
339 |                   </div>
340 |                   <span
341 |                     className={cn(
342 |                       "rounded-full px-3 py-1 text-xs font-semibold uppercase leading-3 tracking-wide",
343 |                       statusClass
344 |                     )}
345 |                   >
346 |                     {statusLabel}
347 |                   </span>
348 |                 </div>
349 |                 {promptText ? (
350 |                   <div className="flex items-start">
351 |                     <p
352 |                       className={cn(
353 |                         "line-clamp-2 min-w-0 flex-1 break-words whitespace-pre-line text-xs",
354 |                         isPromptFallback
355 |                           ? "italic text-muted-foreground"
356 |                           : "text-foreground/90"
357 |                       )}
358 |                     >
359 |                       {promptText}
360 |                     </p>
361 |                     <Button
362 |                       type="button"
363 |                       size="sm"
364 |                       variant="ghost"
365 |                       onClick={() => handleCopy(promptText, "prompt")}
366 |                       className="shrink-0 gap-2 pb-2 text-xs text-muted-foreground hover:bg-accent hover:text-foreground"
367 |                       aria-label="Copy prompt"
368 |                     >
369 |                       {copiedKey === "prompt" ? (
370 |                         <Check className="h-3.5 w-3.5" />
371 |                       ) : (
372 |                         <Copy className="h-3.5 w-3.5" />
373 |                       )}
374 |                     </Button>
375 |                   </div>
376 |                 ) : null}
377 |                 {metaChips.length ? (
378 |                   <div className="flex flex-nowrap items-center gap-2 overflow-x-auto text-[11px] text-muted-foreground">
379 |                     {metaChips.map((chip) => (
380 |                       <span
381 |                         key={chip}
382 |                         className="shrink-0 rounded-full bg-muted/60 px-2 py-0.5"
383 |                       >
384 |                         {chip}
385 |                       </span>
386 |                     ))}
387 |                   </div>
388 |                 ) : null}
389 |                 {showCompletedMeta()}
390 |               </div>
391 |             </div>
392 |             {showProgress && hasValidProgress ? (
393 |               <div className="flex flex-col gap-2">
394 |                 <div className="flex items-center justify-between text-[11px] text-amber-600">
395 |                   <span>Processing {progress}%</span>
396 |                 </div>
397 |                 <div className="h-1.5 w-full overflow-hidden rounded-full bg-amber-100">
398 |                   <div
399 |                     className="h-full rounded-full bg-amber-500 transition-all duration-300 ease-out"
400 |                     style={{ width: `${progressWidth}%` }}
401 |                   />
402 |                 </div>
403 |               </div>
404 |             ) : null}
405 |             <div className="flex flex-wrap items-center gap-2 text-[11px] text-muted-foreground">
406 |               {renderActions()}
407 |             </div>
408 |           </div>
409 |         </div>
410 |       </CardContent>
411 |     </Card>
412 |   );
413 | };
414 | 
415 | export default VideoCard;
416 |

--------------------------------------------------------------------------------
/components/VideoForm.tsx:
--------------------------------------------------------------------------------
  1 | import {
  2 |   Fragment,
  3 |   useEffect,
  4 |   useMemo,
  5 |   useRef,
  6 |   useState,
  7 |   type ChangeEvent,
  8 | } from "react";
  9 | import { ImageIcon, Loader2, Sparkles, Wand2, X } from "lucide-react";
 10 | import { Button } from "@/components/ui/button";
 11 | import {
 12 |   Select,
 13 |   SelectContent,
 14 |   SelectItem,
 15 |   SelectTrigger,
 16 |   SelectValue,
 17 | } from "@/components/ui/select";
 18 | import { Input } from "@/components/ui/input";
 19 | import {
 20 |   InputGroup,
 21 |   InputGroupAddon,
 22 |   InputGroupButton,
 23 |   InputGroupTextarea,
 24 | } from "@/components/ui/input-group";
 25 | import { cn } from "@/lib/utils";
 26 | import {
 27 |   Tooltip,
 28 |   TooltipContent,
 29 |   TooltipProvider,
 30 |   TooltipTrigger,
 31 | } from "@/components/ui/tooltip";
 32 | import { Card, CardContent } from "../ui";
 33 | import {
 34 |   SECONDS_OPTIONS,
 35 |   type SizeOptionGroups,
 36 |   type SoraModel,
 37 |   type SoraSeconds,
 38 | } from "../utils/video";
 39 | import type { ImagePreviewMeta } from "../hooks/useVideoForm";
 40 | import type { GeneratedImageSuggestion } from "@/types/generated";
 41 | 
 42 | type AsyncMaybe = void | Promise<unknown>;
 43 | 
 44 | const VERSION_OPTIONS = [1, 2, 3, 4];
 45 | 
 46 | type OrientationId = "portrait" | "landscape";
 47 | 
 48 | const formatSizeKey = (orientation: OrientationId, sizeValue: string) =>
 49 |   `${orientation}|${sizeValue}`;
 50 | 
 51 | const parseSizeKey = (
 52 |   key: string
 53 | ): { orientation: OrientationId; size: string } => {
 54 |   const [rawOrientation, rawSize] = key.split("|", 2);
 55 |   const orientation: OrientationId =
 56 |     rawOrientation === "portrait" ? "portrait" : "landscape";
 57 |   return { orientation, size: rawSize ?? key };
 58 | };
 59 | 
 60 | const deriveSizeKey = (
 61 |   sizeValue: string,
 62 |   groups: SizeOptionGroups,
 63 |   preferredOrientation?: OrientationId
 64 | ) => {
 65 |   const matches = (orientation: OrientationId) => {
 66 |     const options = groups[orientation] ?? [];
 67 |     return options.includes(sizeValue)
 68 |       ? formatSizeKey(orientation, sizeValue)
 69 |       : null;
 70 |   };
 71 | 
 72 |   if (preferredOrientation) {
 73 |     const preferred = matches(preferredOrientation);
 74 |     if (preferred) return preferred;
 75 |   }
 76 | 
 77 |   return (
 78 |     matches("portrait") ||
 79 |     matches("landscape") ||
 80 |     formatSizeKey("landscape", sizeValue)
 81 |   );
 82 | };
 83 | 
 84 | const CONTROL_TRIGGER_CLASS =
 85 |   "flex h-9 items-center gap-2 rounded-full border border-border/60 bg-card px-3 text-sm text-foreground/90 shadow-none transition-colors focus:outline-none focus:ring-0 focus:ring-offset-0 focus-visible:outline-none focus-visible:ring-0 data-[state=open]:bg-card/90";
 86 | 
 87 | const CONTROL_TRIGGER_CONTENT_CLASS = "flex w-full items-center gap-3";
 88 | 
 89 | const CONTROL_TRIGGER_LABEL_CLASS =
 90 |   "mt-0.5 text-[11px] uppercase tracking-wide text-muted-foreground";
 91 | 
 92 | const CONTROL_TRIGGER_VALUE_CLASS = "flex-1 truncate text-foreground";
 93 | 
 94 | const CONTROL_CONTENT_CLASS =
 95 |   "rounded-xl border border-border/60 bg-card/95 p-0 shadow-none";
 96 | 
 97 | export interface BatchProgressState {
 98 |   total: number;
 99 |   current: number;
100 | }
101 | 
102 | export interface VideoFormProps {
103 |   prompt: string;
104 |   onPromptChange: (value: string) => void;
105 |   model: SoraModel;
106 |   onModelChange: (value: SoraModel) => void;
107 |   modelOptions: readonly SoraModel[];
108 |   size: string;
109 |   onSizeChange: (value: string) => void;
110 |   sizeOptionGroups: SizeOptionGroups;
111 |   seconds: SoraSeconds;
112 |   onSecondsChange: (value: SoraSeconds) => void;
113 |   versionsCount: number;
114 |   onVersionsCountChange: (value: number) => void;
115 |   remixId: string;
116 |   onRemixIdChange: (value: string) => void;
117 |   onImageSelect: (event: ChangeEvent<HTMLInputElement>) => AsyncMaybe;
118 |   imagePreviewUrl: string | null;
119 |   imagePreviewMeta: ImagePreviewMeta | null;
120 |   onGenerateImages: () => AsyncMaybe;
121 |   generatingImages: boolean;
122 |   generatedImages: GeneratedImageSuggestion[];
123 |   onSelectGeneratedImage: (image: GeneratedImageSuggestion) => AsyncMaybe;
124 |   selectedGeneratedImageId: string | null;
125 |   generatedImageError: string;
126 |   onSubmit: () => AsyncMaybe;
127 |   onClear: () => void;
128 |   onGeneratePrompt?: () => AsyncMaybe;
129 |   generatingPrompt?: boolean;
130 |   submitting: boolean;
131 |   canSubmit: boolean;
132 |   generatingTitle: boolean;
133 |   currentTitle: string;
134 |   batchProgress: BatchProgressState | null;
135 |   remixDisabled: boolean;
136 | }
137 | 
138 | const VideoForm = ({
139 |   prompt,
140 |   onPromptChange,
141 |   model,
142 |   onModelChange,
143 |   modelOptions,
144 |   size,
145 |   onSizeChange,
146 |   sizeOptionGroups,
147 |   seconds,
148 |   onSecondsChange,
149 |   versionsCount,
150 |   onVersionsCountChange,
151 |   remixId,
152 |   onRemixIdChange,
153 |   onImageSelect,
154 |   imagePreviewUrl,
155 |   imagePreviewMeta,
156 |   onGenerateImages,
157 |   generatingImages,
158 |   generatedImages = [],
159 |   onSelectGeneratedImage,
160 |   selectedGeneratedImageId,
161 |   generatedImageError,
162 |   onSubmit,
163 |   onClear,
164 |   onGeneratePrompt,
165 |   generatingPrompt = false,
166 |   submitting,
167 |   canSubmit,
168 |   generatingTitle,
169 |   currentTitle,
170 |   batchProgress,
171 |   remixDisabled,
172 | }: VideoFormProps) => {
173 |   const fileInputRef = useRef<HTMLInputElement | null>(null);
174 |   const versionValue = useMemo(() => {
175 |     const parsed = Number(versionsCount) || 1;
176 |     const normalized = Math.min(4, Math.max(1, parsed));
177 |     return String(normalized);
178 |   }, [versionsCount]);
179 | 
180 |   const sizeSections = useMemo(
181 |     () =>
182 |       (
183 |         [
184 |           {
185 |             id: "portrait" as OrientationId,
186 |             label: "Portrait",
187 |             options: sizeOptionGroups.portrait,
188 |           },
189 |           {
190 |             id: "landscape" as OrientationId,
191 |             label: "Landscape",
192 |             options: sizeOptionGroups.landscape,
193 |           },
194 |         ] as const
195 |       ).filter((section) => section.options.length > 0),
196 |     [sizeOptionGroups]
197 |   );
198 | 
199 |   const [sizeSelectionKey, setSizeSelectionKey] = useState(() =>
200 |     deriveSizeKey(size, sizeOptionGroups)
201 |   );
202 | 
203 |   useEffect(() => {
204 |     setSizeSelectionKey((previous) => {
205 |       const { orientation } = parseSizeKey(previous);
206 |       const next = deriveSizeKey(size, sizeOptionGroups, orientation);
207 |       return previous === next ? previous : next;
208 |     });
209 |   }, [size, sizeOptionGroups]);
210 | 
211 |   const hasPrompt = prompt.trim().length > 0;
212 |   const promptTooltip = hasPrompt
213 |     ? "Uses your current prompt to guide the result."
214 |     : "Add a prompt to enable this action.";
215 | 
216 |   const handleGeneratePromptClick = () => {
217 |     if (!hasPrompt || !onGeneratePrompt) return;
218 |     void onGeneratePrompt();
219 |   };
220 | 
221 |   const handleVersionChange = (value: string) => {
222 |     const parsed = Number(value);
223 |     onVersionsCountChange(Number.isFinite(parsed) ? parsed : 1);
224 |   };
225 | 
226 |   const handleSizeSelect = (value: string) => {
227 |     const { orientation, size: nextSize } = parseSizeKey(value);
228 |     setSizeSelectionKey(formatSizeKey(orientation, nextSize));
229 |     onSizeChange(nextSize);
230 |   };
231 | 
232 |   const triggerFileDialog = () => {
233 |     if (remixDisabled) return;
234 |     fileInputRef.current?.click();
235 |   };
236 | 
237 |   const promptHasImage = Boolean(imagePreviewUrl);
238 | 
239 |   return (
240 |     <Card className="flex h-full flex-col overflow-hidden border-none  shadow-none">
241 |       <CardContent className="flex flex-1 min-h-0 flex-col overflow-y-auto space-y-6 px-0">
242 |         <section className="rounded-xl border border-border/60 bg-card/80 p-5 shadow-none backdrop-blur-sm">
243 |           <div className="flex flex-col gap-5">
244 |             <div className="flex flex-wrap items-center gap-3 text-sm text-muted-foreground">
245 |               <label
246 |                 htmlFor="remix-id"
247 |                 className="text-[11px] font-medium uppercase tracking-wide text-muted-foreground"
248 |               >
249 |                 Remix from video ID
250 |               </label>
251 |               <Input
252 |                 id="remix-id"
253 |                 value={remixId}
254 |                 onChange={(event) => onRemixIdChange(event.target.value)}
255 |                 placeholder="video_..."
256 |                 className="h-9 w-full max-w-xs rounded-none border-0 border-b border-border/70 bg-transparent px-0 text-sm text-foreground shadow-none transition focus-visible:border-border focus-visible:outline-none focus-visible:ring-0"
257 |               />
258 |             </div>
259 | 
260 |             <div className="relative">
261 |               <InputGroup
262 |                 className={cn(
263 |                   "flex gap-0 rounded-xl bg-muted/40 focus-within:ring-0 focus-within:ring-offset-0",
264 |                   remixDisabled ? "opacity-80" : ""
265 |                 )}
266 |               >
267 |                 <div className="relative w-full">
268 |                   {promptHasImage ? (
269 |                     <div className="absolute left-5 top-5 flex gap-3">
270 |                       <div className="h-16 w-16 overflow-hidden rounded-lg border border-border/50 bg-card/40">
271 |                         {imagePreviewUrl ? (
272 |                           // eslint-disable-next-line @next/next/no-img-element
273 |                           <img
274 |                             src={imagePreviewUrl}
275 |                             alt="Prompt reference"
276 |                             className="h-full w-full object-cover"
277 |                           />
278 |                         ) : null}
279 |                       </div>
280 |                     </div>
281 |                   ) : null}
282 |                   <InputGroupTextarea
283 |                     value={prompt}
284 |                     onChange={(event) => onPromptChange(event.target.value)}
285 |                     placeholder="Describe the scene you want Sora to create..."
286 |                     className={cn(
287 |                       "min-h-[220px] w-full resize-none border-0 bg-transparent px-6 pb-16 pt-6 text-base leading-relaxed text-foreground",
288 |                       promptHasImage ? "pl-[7.5rem]" : ""
289 |                     )}
290 |                   />
291 |                   <Button
292 |                     type="button"
293 |                     variant="ghost"
294 |                     size="icon"
295 |                     onClick={onClear}
296 |                     className="absolute right-5 top-5 h-8 w-8 rounded-full border border-border/60 bg-card/85 text-muted-foreground hover:text-foreground"
297 |                     aria-label="Clear form"
298 |                   >
299 |                     <X className="h-4 w-4" />
300 |                   </Button>
301 | 
302 |                   {imagePreviewMeta ? (
303 |                     <p className="text-xs text-muted-foreground pb-2 pl-2">
304 |                       {imagePreviewMeta.name} • {imagePreviewMeta.width}x
305 |                       {imagePreviewMeta.height}
306 |                     </p>
307 |                   ) : null}
308 |                 </div>
309 | 
310 |                 <InputGroupAddon
311 |                   align="block-end"
312 |                   className="flex w-full flex-col gap-2 px-4 pb-4 pt-3 text-sm bg-transparent rounded-xl text-muted-foreground"
313 |                 >
314 |                   <input
315 |                     ref={fileInputRef}
316 |                     type="file"
317 |                     accept="image/png,image/jpeg,image/webp"
318 |                     className="hidden"
319 |                     disabled={remixDisabled}
320 |                     onChange={(event: ChangeEvent<HTMLInputElement>) => {
321 |                       void onImageSelect(event);
322 |                     }}
323 |                   />
324 |                   <div className="flex w-full items-center gap-3 overflow-x-auto pb-1">
325 |                     <InputGroupButton
326 |                       size="sm"
327 |                       variant="ghost"
328 |                       onClick={triggerFileDialog}
329 |                       disabled={remixDisabled}
330 |                       className="whitespace-nowrap bg-card rounded-full py-1 border border-dashed border-border/70 px-3 text-sm text-muted-foreground hover:border-border hover:bg-muted/60"
331 |                     >
332 |                       <ImageIcon className="h-4 w-4" />
333 |                       Add image
334 |                     </InputGroupButton>
335 | 
336 |                     <div className="flex min-w-max items-center gap-2">
337 |                       <Select
338 |                         value={model}
339 |                         onValueChange={(value) =>
340 |                           onModelChange(value as SoraModel)
341 |                         }
342 |                         disabled={remixDisabled}
343 |                       >
344 |                         <SelectTrigger className={CONTROL_TRIGGER_CLASS}>
345 |                           <div className={CONTROL_TRIGGER_CONTENT_CLASS}>
346 |                             <span className={CONTROL_TRIGGER_LABEL_CLASS}>
347 |                               Model
348 |                             </span>
349 |                             <div className={CONTROL_TRIGGER_VALUE_CLASS}>
350 |                               <SelectValue placeholder="Model" />
351 |                             </div>
352 |                           </div>
353 |                         </SelectTrigger>
354 |                         <SelectContent className={CONTROL_CONTENT_CLASS}>
355 |                           <div className="px-3 py-2 text-[11px] uppercase tracking-wide text-muted-foreground">
356 |                             Model
357 |                           </div>
358 |                           {modelOptions.map((option) => (
359 |                             <SelectItem key={option} value={option}>
360 |                               {option}
361 |                             </SelectItem>
362 |                           ))}
363 |                         </SelectContent>
364 |                       </Select>
365 | 
366 |                       <Select
367 |                         value={sizeSelectionKey}
368 |                         onValueChange={handleSizeSelect}
369 |                         disabled={remixDisabled}
370 |                       >
371 |                         <SelectTrigger className={CONTROL_TRIGGER_CLASS}>
372 |                           <div className={CONTROL_TRIGGER_CONTENT_CLASS}>
373 |                             <span className={CONTROL_TRIGGER_LABEL_CLASS}>
374 |                               Size
375 |                             </span>
376 |                             <div className={CONTROL_TRIGGER_VALUE_CLASS}>
377 |                               <SelectValue placeholder="Size" />
378 |                             </div>
379 |                           </div>
380 |                         </SelectTrigger>
381 |                         <SelectContent className={CONTROL_CONTENT_CLASS}>
382 |                           {sizeSections.map((section) => (
383 |                             <Fragment key={section.label}>
384 |                               <div className="px-3 py-2 text-[11px] uppercase tracking-wide text-muted-foreground">
385 |                                 {section.label}
386 |                               </div>
387 |                               {section.options.map((option) => (
388 |                                 <SelectItem
389 |                                   key={`${section.id}-${option}`}
390 |                                   value={formatSizeKey(section.id, option)}
391 |                                 >
392 |                                   {option}
393 |                                 </SelectItem>
394 |                               ))}
395 |                             </Fragment>
396 |                           ))}
397 |                         </SelectContent>
398 |                       </Select>
399 | 
400 |                       <Select
401 |                         value={seconds}
402 |                         onValueChange={(value) =>
403 |                           onSecondsChange(value as SoraSeconds)
404 |                         }
405 |                         disabled={remixDisabled}
406 |                       >
407 |                         <SelectTrigger className={CONTROL_TRIGGER_CLASS}>
408 |                           <div className={CONTROL_TRIGGER_CONTENT_CLASS}>
409 |                             <span className={CONTROL_TRIGGER_LABEL_CLASS}>
410 |                               Seconds
411 |                             </span>
412 |                             <div className={CONTROL_TRIGGER_VALUE_CLASS}>
413 |                               <SelectValue placeholder="Seconds" />
414 |                             </div>
415 |                           </div>
416 |                         </SelectTrigger>
417 |                         <SelectContent className={CONTROL_CONTENT_CLASS}>
418 |                           <div className="px-3 py-2 text-[11px] uppercase tracking-wide text-muted-foreground">
419 |                             Duration
420 |                           </div>
421 |                           {SECONDS_OPTIONS.map((option) => (
422 |                             <SelectItem key={option} value={option}>
423 |                               {option}
424 |                             </SelectItem>
425 |                           ))}
426 |                         </SelectContent>
427 |                       </Select>
428 | 
429 |                       <Select
430 |                         value={versionValue}
431 |                         onValueChange={handleVersionChange}
432 |                       >
433 |                         <SelectTrigger className={CONTROL_TRIGGER_CLASS}>
434 |                           <div className={CONTROL_TRIGGER_CONTENT_CLASS}>
435 |                             <span className={CONTROL_TRIGGER_LABEL_CLASS}>
436 |                               Versions
437 |                             </span>
438 |                             <div className={CONTROL_TRIGGER_VALUE_CLASS}>
439 |                               <SelectValue placeholder="Versions" />
440 |                             </div>
441 |                           </div>
442 |                         </SelectTrigger>
443 |                         <SelectContent className={CONTROL_CONTENT_CLASS}>
444 |                           <div className="px-3 py-2 text-[11px] uppercase tracking-wide text-muted-foreground">
445 |                             Versions
446 |                           </div>
447 |                           {VERSION_OPTIONS.map((option) => {
448 |                             const value = String(option);
449 |                             return (
450 |                               <SelectItem key={value} value={value}>
451 |                                 {value}
452 |                               </SelectItem>
453 |                             );
454 |                           })}
455 |                         </SelectContent>
456 |                       </Select>
457 |                     </div>
458 |                   </div>
459 |                 </InputGroupAddon>
460 |               </InputGroup>
461 |             </div>
462 | 
463 |             <TooltipProvider delayDuration={150}>
464 |               <div className="flex flex-col md:flex-row md:items-center justify-end gap-2">
465 |                 <Tooltip>
466 |                   <TooltipTrigger asChild>
467 |                     <span className="inline-flex">
468 |                       <Button
469 |                         type="button"
470 |                         variant="ghost"
471 |                         size="lg"
472 |                         onClick={handleGeneratePromptClick}
473 |                         disabled={
474 |                           !hasPrompt || generatingPrompt || !onGeneratePrompt
475 |                         }
476 |                         className="w-full rounded-full bg-muted/60 px-5 text-xs text-foreground hover:bg-muted/70 disabled:opacity-50 md:w-auto md:text-sm"
477 |                       >
478 |                         {generatingPrompt ? (
479 |                           <Loader2 className="h-4 w-4 animate-spin" />
480 |                         ) : (
481 |                           <Sparkles className="h-4 w-4" />
482 |                         )}
483 |                         Generate prompt
484 |                       </Button>
485 |                     </span>
486 |                   </TooltipTrigger>
487 |                   <TooltipContent className="rounded-md border border-border bg-card/95 px-3 py-1.5 text-xs text-muted-foreground shadow-none">
488 |                     {promptTooltip}
489 |                   </TooltipContent>
490 |                 </Tooltip>
491 | 
492 |                 <Tooltip>
493 |                   <TooltipTrigger asChild>
494 |                     <span className="inline-flex">
495 |                       <Button
496 |                         type="button"
497 |                         variant="ghost"
498 |                         size="lg"
499 |                         disabled={
500 |                           !hasPrompt || remixDisabled || generatingImages
501 |                         }
502 |                         onClick={() => {
503 |                           if (!hasPrompt) return;
504 |                           void onGenerateImages();
505 |                         }}
506 |                         className="w-full rounded-full bg-muted/60 px-5 text-xs text-foreground hover:bg-muted/70 disabled:opacity-50 md:w-auto md:text-sm"
507 |                       >
508 |                         {generatingImages ? (
509 |                           <Loader2 className="h-4 w-4 animate-spin" />
510 |                         ) : (
511 |                           <ImageIcon className="h-4 w-4" />
512 |                         )}
513 |                         Generate image
514 |                       </Button>
515 |                     </span>
516 |                   </TooltipTrigger>
517 |                   <TooltipContent className="rounded-md border border-border bg-card/95 px-3 py-1.5 text-xs text-muted-foreground shadow-none">
518 |                     {promptTooltip}
519 |                   </TooltipContent>
520 |                 </Tooltip>
521 | 
522 |                 <Button
523 |                   onClick={() => {
524 |                     void onSubmit();
525 |                   }}
526 |                   disabled={submitting || !canSubmit}
527 |                   size="lg"
528 |                   className="rounded-full px-6 text-xs font-semibold md:text-sm"
529 |                 >
530 |                   {submitting ? (
531 |                     <Loader2 className="h-4 w-4 animate-spin" />
532 |                   ) : (
533 |                     <Wand2 className="h-4 w-4" />
534 |                   )}
535 |                   Generate video
536 |                 </Button>
537 |               </div>
538 |             </TooltipProvider>
539 |           </div>
540 |         </section>
541 | 
542 |         <div className="space-y-4">
543 |           {generatingTitle ? (
544 |             <div className="flex items-center gap-2 text-sm text-muted-foreground">
545 |               <Loader2 className="h-4 w-4 animate-spin" />
546 |               <span>Generating title...</span>
547 |             </div>
548 |           ) : null}
549 | 
550 |           {!generatingTitle && currentTitle ? (
551 |             <div className="rounded-lg border border-border bg-card/80 px-4 py-6 text-sm text-foreground">
552 |               <span className="font-medium">Generated title:</span>{" "}
553 |               {currentTitle}
554 |             </div>
555 |           ) : null}
556 | 
557 |           {generatedImageError ? (
558 |             <p className="text-xs text-destructive">{generatedImageError}</p>
559 |           ) : null}
560 | 
561 |           {generatedImages.length > 0 ? (
562 |             <section className="rounded-xl border border-border/60 bg-card/80 p-4 shadow-none">
563 |               <p className="text-xs uppercase tracking-wide text-muted-foreground">
564 |                 Generated suggestions
565 |               </p>
566 |               <div className="mt-3 grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
567 |                 {generatedImages.map((image) => {
568 |                   const isSelected = selectedGeneratedImageId === image.id;
569 |                   return (
570 |                     <Button
571 |                       key={image.id}
572 |                       type="button"
573 |                       variant="ghost"
574 |                       size="sm"
575 |                       onClick={() => {
576 |                         void onSelectGeneratedImage(image);
577 |                       }}
578 |                       className={cn(
579 |                         "group relative flex h-auto w-full overflow-hidden rounded-lg border bg-card p-0",
580 |                         isSelected
581 |                           ? "border-indigo-500 ring-2 ring-indigo-200"
582 |                           : "border-border hover:border-border/70"
583 |                       )}
584 |                     >
585 |                       <div className="relative h-24 w-full">
586 |                         {/* eslint-disable-next-line @next/next/no-img-element */}
587 |                         <img
588 |                           src={image.url}
589 |                           alt={image.description || "Generated option"}
590 |                           className="h-full w-full object-cover"
591 |                         />
592 |                       </div>
593 |                       {isSelected ? (
594 |                         <span className="absolute inset-0 bg-indigo-500/10" />
595 |                       ) : null}
596 |                     </Button>
597 |                   );
598 |                 })}
599 |               </div>
600 |             </section>
601 |           ) : null}
602 | 
603 |           {batchProgress && batchProgress.total > 1 ? (
604 |             <div className="flex items-center gap-2 text-sm text-muted-foreground">
605 |               <Loader2 className="h-4 w-4 animate-spin" />
606 |               <span>
607 |                 Generating version {batchProgress.current} of{" "}
608 |                 {batchProgress.total}...
609 |               </span>
610 |             </div>
611 |           ) : null}
612 |         </div>
613 |       </CardContent>
614 |     </Card>
615 |   );
616 | };
617 | 
618 | export default VideoForm;
619 | 
620 | export type { GeneratedImageSuggestion } from "@/types/generated";
621 |

--------------------------------------------------------------------------------
/components/App.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { useCallback, useEffect, useMemo, useState } from "react";
  4 | import type { ChangeEvent } from "react";
  5 | import { Loader2, Menu } from "lucide-react";
  6 | import { Button } from "@/components/ui/button";
  7 | import VideoForm, {
  8 |   type BatchProgressState,
  9 |   type GeneratedImageSuggestion,
 10 | } from "@/components/VideoForm";
 11 | import VideoSidebar, {
 12 |   type SidebarPreviewState,
 13 | } from "@/components/VideoSidebar";
 14 | import VideoPreviewOverlay from "@/components/VideoPreviewOverlay";
 15 | import usePersistedState from "@/hooks/usePersistedState";
 16 | import usePreview from "@/hooks/usePreview";
 17 | import useThumbnails from "@/hooks/useThumbnails";
 18 | import useVideoForm from "@/hooks/useVideoForm";
 19 | import useVideoPolling from "@/hooks/useVideoPolling";
 20 | import {
 21 |   IMAGE_INPUT_ALERT,
 22 |   MODEL_OPTIONS,
 23 |   buildDownloadName,
 24 |   ensurePrompt,
 25 |   isCompletedStatus,
 26 |   normalizeVideo,
 27 |   parseSize,
 28 |   sanitizeModel,
 29 |   sanitizeSizeForModel,
 30 |   type VideoItem,
 31 |   type SoraModel,
 32 |   type SoraSeconds,
 33 | } from "@/utils/video";
 34 | import { extractTitleFromResponse } from "@/utils/titles";
 35 | import {
 36 |   createVideo,
 37 |   fetchVideo,
 38 |   fetchVideoContent,
 39 |   generateImages,
 40 |   remixVideo,
 41 |   requestVideoTitle,
 42 |   suggestVideoPrompt,
 43 | } from "@/services/soraApi";
 44 | 
 45 | type CreateVideoOverrideOptions = {
 46 |   overridePrompt?: string;
 47 |   overrideModel?: SoraModel;
 48 |   overrideSize?: string;
 49 |   overrideSeconds?: SoraSeconds;
 50 |   overrideRemixId?: string | null;
 51 |   overrideTitle?: string;
 52 |   replaceId?: string;
 53 | };
 54 | 
 55 | type DownloadResult = boolean;
 56 | 
 57 | const scrollToTop = () => {
 58 |   window.scrollTo({ top: 0, behavior: "smooth" });
 59 | };
 60 | 
 61 | const IMAGE_GENERATION_MODEL = "gpt-image-1";
 62 | 
 63 | const usePreviewState = () => {
 64 |   const preview = usePreview();
 65 |   const previewState: SidebarPreviewState = {
 66 |     previewingId: preview.previewingId,
 67 |     previewLoading: preview.previewLoading,
 68 |   };
 69 |   return { preview, previewState };
 70 | };
 71 | 
 72 | export default function App() {
 73 |   const [items, setItems] = usePersistedState<VideoItem[]>("sora.items", []);
 74 |   const [submitting, setSubmitting] = useState<boolean>(false);
 75 |   const [batchProgress, setBatchProgress] = useState<BatchProgressState | null>(
 76 |     null
 77 |   );
 78 |   const [currentTitle, setCurrentTitle] = useState<string>("");
 79 |   const [generatingTitle, setGeneratingTitle] = useState<boolean>(false);
 80 |   const [downloadingAll, setDownloadingAll] = useState<boolean>(false);
 81 |   const [generatingImages, setGeneratingImages] = useState<boolean>(false);
 82 |   const [generatedImages, setGeneratedImages] = useState<
 83 |     GeneratedImageSuggestion[]
 84 |   >([]);
 85 |   const [generatedImageError, setGeneratedImageError] = useState<string>("");
 86 |   const [selectedGeneratedImageId, setSelectedGeneratedImageId] = useState<
 87 |     string | null
 88 |   >(null);
 89 |   const [generatingPrompt, setGeneratingPrompt] = useState<boolean>(false);
 90 |   const [isMobileSidebarOpen, setMobileSidebarOpen] = useState<boolean>(false);
 91 |   const [refreshingVideos, setRefreshingVideos] = useState<
 92 |     Record<string, boolean>
 93 |   >({});
 94 | 
 95 |   const closeMobileSidebar = useCallback(() => {
 96 |     setMobileSidebarOpen(false);
 97 |   }, []);
 98 | 
 99 |   const openMobileSidebar = useCallback(() => {
100 |     setMobileSidebarOpen(true);
101 |   }, []);
102 | 
103 |   const {
104 |     prompt,
105 |     setPrompt,
106 |     model,
107 |     setModel,
108 |     size,
109 |     setSize,
110 |     seconds,
111 |     setSeconds,
112 |     versionsCount,
113 |     setVersionsCount,
114 |     remixId,
115 |     setRemixId,
116 |     imageFile,
117 |     imagePreviewUrl,
118 |     imagePreviewMeta,
119 |     handleImageSelect,
120 |     handleGeneratedImageDataUrl,
121 |     handleGeneratedImageUrl,
122 |     clearForm: resetFormFields,
123 |     applyVideoToForm,
124 |     sizeOptionGroups,
125 |   } = useVideoForm();
126 | 
127 |   const { preview, previewState } = usePreviewState();
128 |   const { prefetchPreviews } = preview;
129 | 
130 |   const thumbnails = useThumbnails({ items });
131 |   const previewableItems = useMemo(
132 |     () => items.filter((item) => item?.id && isCompletedStatus(item.status)),
133 |     [items]
134 |   );
135 | 
136 |   useEffect(() => {
137 |     const ids = previewableItems
138 |       .map((item) => item.id)
139 |       .filter((id): id is string => Boolean(id));
140 |     prefetchPreviews(ids).catch((error) => {
141 |       console.error("Preview prefetch failed", error);
142 |     });
143 |   }, [prefetchPreviews, previewableItems]);
144 | 
145 |   const currentPreviewIndex = useMemo(
146 |     () =>
147 |       previewableItems.findIndex((item) => item.id === preview.previewingId),
148 |     [previewableItems, preview.previewingId]
149 |   );
150 |   const currentPreviewItem =
151 |     currentPreviewIndex >= 0 ? previewableItems[currentPreviewIndex] : null;
152 |   const hasPrevPreview = currentPreviewIndex > 0;
153 |   const hasNextPreview =
154 |     currentPreviewIndex >= 0 &&
155 |     currentPreviewIndex < previewableItems.length - 1;
156 |   const showPreviewSpinner = preview.previewLoading && !preview.previewingId;
157 |   const derivedPromptForImages = useMemo(() => prompt.trim(), [prompt]);
158 |   const imageGenerationSize = useMemo(() => {
159 |     const { width, height } = parseSize(size);
160 |     return height > width ? "1024x1536" : "1536x1024";
161 |   }, [size]);
162 |   const handleUpdateItem = useCallback(
163 |     (id: string, updater: (existing: VideoItem) => VideoItem) => {
164 |       setItems((prev) =>
165 |         prev.map((existing) =>
166 |           existing.id === id ? updater(existing) : existing
167 |         )
168 |       );
169 |     },
170 |     [setItems]
171 |   );
172 | 
173 |   const handleRefreshVideo = useCallback(
174 |     async (item: VideoItem) => {
175 |       if (!item?.id) return;
176 |       if (refreshingVideos[item.id]) return;
177 |       setRefreshingVideos((prev) => ({ ...prev, [item.id]: true }));
178 |       try {
179 |         const payload = await fetchVideo<Record<string, unknown>>({
180 |           videoId: item.id,
181 |         });
182 |         handleUpdateItem(item.id, (current) =>
183 |           normalizeVideo(payload, current)
184 |         );
185 |       } catch (error) {
186 |         console.error("Video refresh failed", error);
187 |       } finally {
188 |         setRefreshingVideos((prev) => {
189 |           const next = { ...prev };
190 |           delete next[item.id];
191 |           return next;
192 |         });
193 |       }
194 |     },
195 |     [handleUpdateItem, refreshingVideos]
196 |   );
197 | 
198 |   useVideoPolling({ items, onUpdate: handleUpdateItem });
199 | 
200 |   const requestGeneratedTitle = useCallback(async (seedPrompt: string) => {
201 |     try {
202 |       const response = await requestVideoTitle<unknown>(
203 |         seedPrompt || "Untitled"
204 |       );
205 |       const generated = extractTitleFromResponse(
206 |         response as Record<string, unknown>
207 |       );
208 |       return generated?.trim() ? generated.trim().slice(0, 80) : "";
209 |     } catch (error) {
210 |       console.error("Title generation failed", error);
211 |       return "";
212 |     }
213 |   }, []);
214 | 
215 |   const handleCreateVideo = useCallback(
216 |     async (options: CreateVideoOverrideOptions = {}) => {
217 |       const {
218 |         overridePrompt,
219 |         overrideModel,
220 |         overrideSize,
221 |         overrideSeconds,
222 |         overrideRemixId,
223 |         overrideTitle,
224 |         replaceId,
225 |       } = options;
226 | 
227 |       const effectivePromptRaw = ensurePrompt(
228 |         { prompt: overridePrompt, title: overrideTitle || "" },
229 |         prompt
230 |       );
231 |       const trimmedPrompt = effectivePromptRaw.trim();
232 |       if (!trimmedPrompt) {
233 |         setGeneratingTitle(false);
234 |         setSubmitting(false);
235 |         console.log(
236 |           "Cannot generate without a prompt. Please provide one before retrying."
237 |         );
238 |         return;
239 |       }
240 | 
241 |       setCurrentTitle("");
242 | 
243 |       const fallbackTitle =
244 |         trimmedPrompt.split("\n")[0].slice(0, 60) || "Untitled Video";
245 |       const effectiveModel = sanitizeModel((overrideModel ?? model) as string);
246 |       const effectiveSize = sanitizeSizeForModel(
247 |         overrideSize ?? size,
248 |         effectiveModel
249 |       );
250 |       const effectiveSeconds = String(overrideSeconds ?? seconds);
251 |       const effectiveRemixId = overrideRemixId ?? remixId;
252 |       const runs = replaceId ? 1 : Math.max(1, Number(versionsCount) || 1);
253 |       const isRemix = Boolean(effectiveRemixId);
254 | 
255 |       if (isRemix && imageFile) {
256 |         console.log(
257 |           "Remix currently ignores uploaded image overrides. Remove the image to continue, or create a fresh video instead."
258 |         );
259 |         return;
260 |       }
261 | 
262 |       setSubmitting(true);
263 |       setBatchProgress(null);
264 | 
265 |       let videoTitle = overrideTitle?.trim() || "";
266 |       if (!videoTitle) {
267 |         videoTitle = fallbackTitle;
268 |         setGeneratingTitle(true);
269 |         const generated = await requestGeneratedTitle(trimmedPrompt);
270 |         if (generated) {
271 |           videoTitle = generated;
272 |         }
273 |         setGeneratingTitle(false);
274 |       }
275 |       setCurrentTitle(videoTitle);
276 | 
277 |       try {
278 |         for (let runIndex = 0; runIndex < runs; runIndex += 1) {
279 |           if (runs > 1) {
280 |             setBatchProgress({ total: runs, current: runIndex + 1 });
281 |           }
282 | 
283 |           let payload: Record<string, unknown>;
284 |           if (isRemix) {
285 |             payload = await remixVideo<Record<string, unknown>>({
286 |               videoId: effectiveRemixId as string,
287 |               prompt: effectivePromptRaw,
288 |               model: effectiveModel,
289 |               size: effectiveSize,
290 |               seconds: effectiveSeconds,
291 |             });
292 |           } else {
293 |             payload = await createVideo<Record<string, unknown>>({
294 |               prompt: effectivePromptRaw,
295 |               model: effectiveModel,
296 |               size: effectiveSize,
297 |               seconds: effectiveSeconds,
298 |               imageFile,
299 |             });
300 |           }
301 | 
302 |           const rawItem: Record<string, unknown> = {
303 |             ...payload,
304 |             prompt: effectivePromptRaw,
305 |             model: effectiveModel,
306 |             size: effectiveSize,
307 |             seconds: String(effectiveSeconds),
308 |             remix_video_id:
309 |               effectiveRemixId ||
310 |               payload.remix_video_id ||
311 |               payload.remixVideoId ||
312 |               payload.remix_of ||
313 |               payload.source_video_id ||
314 |               null,
315 |             image_input_required: Boolean(imageFile),
316 |             error: payload.error ?? null,
317 |             createdAt: new Date().toISOString(),
318 |             created_at:
319 |               (payload.created_at as number | undefined) ??
320 |               (payload.createdAt as number | undefined) ??
321 |               Date.now() / 1000,
322 |             retry_of: replaceId || null,
323 |             title: videoTitle,
324 |           };
325 | 
326 |           const normalized = normalizeVideo(rawItem);
327 | 
328 |           setItems((prev) => {
329 |             if (replaceId && runIndex === 0) {
330 |               let updated = false;
331 |               const mapped = prev.map((existing) => {
332 |                 if (existing.id === replaceId) {
333 |                   updated = true;
334 |                   return normalizeVideo(rawItem, existing);
335 |                 }
336 |                 return existing;
337 |               });
338 |               return updated ? mapped : [normalized, ...prev];
339 |             }
340 |             return [normalized, ...prev];
341 |           });
342 | 
343 |           if (runs > 1 && runIndex < runs - 1) {
344 |             await new Promise((resolve) => setTimeout(resolve, 1000));
345 |           }
346 |         }
347 | 
348 |         setRemixId("");
349 |       } catch (error) {
350 |         console.error(error);
351 |         console.error(
352 |           `Create failed: ${
353 |             error instanceof Error ? error.message : error || "Unknown error"
354 |           }`
355 |         );
356 |       } finally {
357 |         setSubmitting(false);
358 |         setBatchProgress(null);
359 |       }
360 |     },
361 |     [
362 |       imageFile,
363 |       model,
364 |       prompt,
365 |       remixId,
366 |       requestGeneratedTitle,
367 |       seconds,
368 |       setItems,
369 |       setCurrentTitle,
370 |       setRemixId,
371 |       size,
372 |       versionsCount,
373 |     ]
374 |   );
375 | 
376 |   const handleDownload = useCallback(
377 |     async (item: VideoItem): Promise<DownloadResult> => {
378 |       try {
379 |         const blob = await fetchVideoContent({ videoId: item.id });
380 |         const url = URL.createObjectURL(blob);
381 |         const anchor = document.createElement("a");
382 |         anchor.href = url;
383 |         anchor.download = buildDownloadName(item.id, item.title);
384 |         anchor.click();
385 |         URL.revokeObjectURL(url);
386 |         setItems((prev) =>
387 |           prev.map((existing) =>
388 |             existing.id === item.id
389 |               ? { ...existing, downloaded: true }
390 |               : existing
391 |           )
392 |         );
393 |         return true;
394 |       } catch (error) {
395 |         console.error(
396 |           `Download failed: ${
397 |             error instanceof Error ? error.message : String(error)
398 |           }`
399 |         );
400 |         return false;
401 |       }
402 |     },
403 |     [setItems]
404 |   );
405 | 
406 |   const handleDownloadAll = useCallback(async () => {
407 |     const ready = items.filter(
408 |       (item) => item?.id && isCompletedStatus(item.status) && !item.downloaded
409 |     );
410 |     if (ready.length === 0) {
411 |       console.log("No completed videos are available for download yet.");
412 |       return;
413 |     }
414 |     setDownloadingAll(true);
415 |     try {
416 |       for (let index = 0; index < ready.length; index += 1) {
417 |         const entry = ready[index];
418 |         await handleDownload(entry);
419 |         if (index < ready.length - 1) {
420 |           await new Promise((resolve) => setTimeout(resolve, 400));
421 |         }
422 |       }
423 |     } finally {
424 |       setDownloadingAll(false);
425 |     }
426 |   }, [handleDownload, items]);
427 | 
428 |   const handlePlayPreview = useCallback(
429 |     async (item: VideoItem) => {
430 |       try {
431 |         closeMobileSidebar();
432 |         await preview.playPreview(item.id);
433 |       } catch (error) {
434 |         console.error(
435 |           `Preview failed: ${
436 |             error instanceof Error ? error.message : String(error)
437 |           }`
438 |         );
439 |       }
440 |     },
441 |     [closeMobileSidebar, preview]
442 |   );
443 | 
444 |   const handlePreviewClose = useCallback(() => {
445 |     preview.clearPreview();
446 |   }, [preview]);
447 | 
448 |   const handlePreviewNavigate = useCallback(
449 |     (direction: number) => {
450 |       if (currentPreviewIndex < 0) return;
451 |       const targetIndex = currentPreviewIndex + direction;
452 |       if (targetIndex < 0 || targetIndex >= previewableItems.length) return;
453 |       const targetItem = previewableItems[targetIndex];
454 |       if (!targetItem?.id) return;
455 |       preview.playPreview(targetItem.id).catch((error) => {
456 |         console.error(
457 |           `Preview failed: ${
458 |             error instanceof Error ? error.message : String(error)
459 |           }`
460 |         );
461 |       });
462 |     },
463 |     [currentPreviewIndex, preview, previewableItems]
464 |   );
465 | 
466 |   const handleResetForm = useCallback(() => {
467 |     resetFormFields();
468 |     setCurrentTitle("");
469 |     preview.clearPreview();
470 |     setGeneratedImages([]);
471 |     setGeneratedImageError("");
472 |     setSelectedGeneratedImageId(null);
473 |   }, [preview, resetFormFields, setCurrentTitle]);
474 | 
475 |   const handleRemixFrom = useCallback(
476 |     (item: VideoItem) => {
477 |       if (!item?.id) return;
478 |       const nextPrompt = ensurePrompt(item, prompt);
479 |       applyVideoToForm(item, nextPrompt);
480 |       setRemixId(item.id);
481 |       setCurrentTitle(item.title || "");
482 |       preview.clearPreview();
483 |       scrollToTop();
484 |       closeMobileSidebar();
485 |     },
486 |     [
487 |       applyVideoToForm,
488 |       closeMobileSidebar,
489 |       preview,
490 |       prompt,
491 |       setCurrentTitle,
492 |       setRemixId,
493 |     ]
494 |   );
495 | 
496 |   const handleRemove = useCallback(
497 |     (item: VideoItem) => {
498 |       if (!item?.id) return;
499 |       setItems((prev) => prev.filter((existing) => existing.id !== item.id));
500 |       if (preview.previewingId === item.id) {
501 |         preview.clearPreview();
502 |       }
503 |     },
504 |     [preview, setItems]
505 |   );
506 | 
507 |   const handleRetry = useCallback(
508 |     async (item: VideoItem) => {
509 |       if (!item?.id) return;
510 |       const nextPrompt = ensurePrompt(item, prompt);
511 |       applyVideoToForm(item, nextPrompt);
512 |       setRemixId(item.remix_video_id || "");
513 |       setCurrentTitle(item.title || "");
514 |       preview.clearPreview();
515 |       closeMobileSidebar();
516 |       if (item.image_input_required) {
517 |         console.log(IMAGE_INPUT_ALERT);
518 |         scrollToTop();
519 |         return;
520 |       }
521 |       await handleCreateVideo({
522 |         overridePrompt: nextPrompt,
523 |         overrideModel: item.model,
524 |         overrideSize: item.size,
525 |         overrideSeconds: item.seconds as SoraSeconds,
526 |         overrideRemixId: item.remix_video_id,
527 |         overrideTitle: item.title,
528 |         replaceId: item.id,
529 |       });
530 |     },
531 |     [
532 |       applyVideoToForm,
533 |       closeMobileSidebar,
534 |       preview,
535 |       handleCreateVideo,
536 |       prompt,
537 |       setCurrentTitle,
538 |       setRemixId,
539 |     ]
540 |   );
541 | 
542 |   const handleLocalImageSelect = useCallback(
543 |     async (event: ChangeEvent<HTMLInputElement>) => {
544 |       setCurrentTitle("");
545 |       setSelectedGeneratedImageId(null);
546 |       if (event?.target?.files?.length) {
547 |         setGeneratedImages([]);
548 |         setGeneratedImageError("");
549 |       }
550 |       await handleImageSelect(event);
551 |     },
552 |     [handleImageSelect, setCurrentTitle]
553 |   );
554 | 
555 |   const handleGenerateInputImages = useCallback(async () => {
556 |     if (!derivedPromptForImages) {
557 |       setGeneratedImageError(
558 |         "Provide a prompt before generating reference images."
559 |       );
560 |       setGeneratedImages([]);
561 |       setSelectedGeneratedImageId(null);
562 |       return;
563 |     }
564 | 
565 |     setCurrentTitle("");
566 |     setGeneratingImages(true);
567 |     setGeneratedImageError("");
568 |     setGeneratedImages([]);
569 |     setSelectedGeneratedImageId(null);
570 | 
571 |     try {
572 |       const normalizedCount = Math.max(
573 |         1,
574 |         Math.min(
575 |           4,
576 |           Number.isFinite(versionsCount) ? Math.round(versionsCount) : 3
577 |         )
578 |       );
579 | 
580 |       const images = await generateImages({
581 |         prompt: derivedPromptForImages,
582 |         size: imageGenerationSize,
583 |         count: normalizedCount,
584 |         model: IMAGE_GENERATION_MODEL,
585 |       });
586 | 
587 |       setGeneratedImages(images);
588 |       if (images.length === 0) {
589 |         setGeneratedImageError("No images returned. Try another prompt.");
590 |       }
591 |     } catch (error) {
592 |       console.error(error);
593 |       const message =
594 |         error instanceof Error ? error.message : "Failed to generate images.";
595 |       setGeneratedImageError(message);
596 |     } finally {
597 |       setGeneratingImages(false);
598 |     }
599 |   }, [
600 |     derivedPromptForImages,
601 |     imageGenerationSize,
602 |     setCurrentTitle,
603 |     versionsCount,
604 |   ]);
605 | 
606 |   const handleGeneratedImageSelect = useCallback(
607 |     async (image: GeneratedImageSuggestion) => {
608 |       if (!image?.url) return;
609 |       setCurrentTitle("");
610 |       setGeneratedImageError("");
611 |       setSelectedGeneratedImageId(image.id);
612 |       try {
613 |         if (image.url.startsWith("data:")) {
614 |           await handleGeneratedImageDataUrl(image.url, `${image.id}.png`);
615 |         } else {
616 |           await handleGeneratedImageUrl(image.url, `${image.id}.png`);
617 |         }
618 |       } catch (error) {
619 |         console.error(error);
620 |         setGeneratedImageError(
621 |           error instanceof Error
622 |             ? error.message
623 |             : "Failed to apply generated image."
624 |         );
625 |       }
626 |     },
627 |     [handleGeneratedImageDataUrl, handleGeneratedImageUrl, setCurrentTitle]
628 |   );
629 | 
630 |   const handleSuggestPrompt = useCallback(async () => {
631 |     setCurrentTitle("");
632 |     setGeneratingPrompt(true);
633 |     try {
634 |       const suggestion = await suggestVideoPrompt({
635 |         prompt,
636 |         seconds,
637 |         model,
638 |         size,
639 |       });
640 | 
641 |       const trimmed = suggestion.trim();
642 |       if (!trimmed) {
643 |         console.log("Prompt suggestion unavailable. Try again.");
644 |         return;
645 |       }
646 | 
647 |       setPrompt(trimmed);
648 |       setSelectedGeneratedImageId(null);
649 |       setGeneratedImages([]);
650 |       setGeneratedImageError("");
651 |     } catch (error) {
652 |       console.error("Prompt suggestion failed", error);
653 |       const message =
654 |         error instanceof Error
655 |           ? error.message
656 |           : "Failed to generate a prompt suggestion.";
657 |       console.log(message);
658 |     } finally {
659 |       setGeneratingPrompt(false);
660 |     }
661 |   }, [
662 |     model,
663 |     prompt,
664 |     seconds,
665 |     setCurrentTitle,
666 |     setGeneratedImageError,
667 |     setGeneratedImages,
668 |     setPrompt,
669 |     setSelectedGeneratedImageId,
670 |     size,
671 |   ]);
672 | 
673 |   const handlePromptChange = useCallback(
674 |     (value: string) => {
675 |       setCurrentTitle("");
676 |       setPrompt(value);
677 |     },
678 |     [setCurrentTitle, setPrompt]
679 |   );
680 | 
681 |   return (
682 |     <div className="flex min-h-screen w-full flex-col bg-background text-foreground">
683 |       <div className="flex flex-1 flex-col lg:flex-row overflow-hidden">
684 |         <VideoSidebar
685 |           items={items}
686 |           thumbnails={thumbnails}
687 |           onDownloadAll={handleDownloadAll}
688 |           downloadingAll={downloadingAll}
689 |           onDownload={handleDownload}
690 |           onPlayPreview={handlePlayPreview}
691 |           onRemix={handleRemixFrom}
692 |           onRetry={handleRetry}
693 |           onRefresh={handleRefreshVideo}
694 |           onRemove={handleRemove}
695 |           refreshingMap={refreshingVideos}
696 |           previewState={previewState}
697 |           isMobileOpen={isMobileSidebarOpen}
698 |           onMobileClose={closeMobileSidebar}
699 |         />
700 |         <main className="order-2 h-screen flex-1 overflow-y-auto px-4 py-5 bg-neutral-100 dark:bg-neutral-800 lg:px-10 lg:py-8">
701 |           <div className="mx-auto flex w-full max-w-5xl flex-col gap-6">
702 |             <header className="mb-1.5 flex items-start justify-between gap-3">
703 |               <div>
704 |                 <h1 className="mb-2 text-3xl font-semibold">Sora API Demo</h1>
705 |                 <p className="text-sm text-muted-foreground">
706 |                   Try Sora models in the API, with different parameters and text
707 |                   + image inputs.
708 |                 </p>
709 |               </div>
710 |               <Button
711 |                 type="button"
712 |                 variant="outline"
713 |                 size="icon"
714 |                 onClick={openMobileSidebar}
715 |                 className="mt-1 h-10 w-10 rounded-full border-border text-muted-foreground hover:bg-accent hover:text-foreground lg:hidden"
716 |                 aria-label="Open generations sidebar"
717 |               >
718 |                 <Menu className="h-5 w-5" />
719 |               </Button>
720 |             </header>
721 |             <VideoForm
722 |               prompt={prompt}
723 |               onPromptChange={handlePromptChange}
724 |               model={model}
725 |               onModelChange={(value) => setModel(sanitizeModel(value))}
726 |               modelOptions={MODEL_OPTIONS}
727 |               size={size}
728 |               onSizeChange={(value) =>
729 |                 setSize(sanitizeSizeForModel(value, model))
730 |               }
731 |               sizeOptionGroups={sizeOptionGroups}
732 |               seconds={seconds}
733 |               onSecondsChange={(value) => setSeconds(value)}
734 |               versionsCount={versionsCount}
735 |               onVersionsCountChange={setVersionsCount}
736 |               remixId={remixId}
737 |               onRemixIdChange={setRemixId}
738 |               onImageSelect={handleLocalImageSelect}
739 |               imagePreviewUrl={imagePreviewUrl}
740 |               imagePreviewMeta={imagePreviewMeta}
741 |               onGenerateImages={handleGenerateInputImages}
742 |               generatingImages={generatingImages}
743 |               generatedImages={generatedImages}
744 |               onSelectGeneratedImage={handleGeneratedImageSelect}
745 |               selectedGeneratedImageId={selectedGeneratedImageId}
746 |               generatedImageError={generatedImageError}
747 |               onSubmit={() => handleCreateVideo()}
748 |               onClear={handleResetForm}
749 |               onGeneratePrompt={handleSuggestPrompt}
750 |               generatingPrompt={generatingPrompt}
751 |               submitting={submitting}
752 |               canSubmit={prompt.trim().length > 0}
753 |               generatingTitle={generatingTitle}
754 |               currentTitle={currentTitle}
755 |               batchProgress={batchProgress}
756 |               remixDisabled={Boolean(remixId)}
757 |             />
758 |           </div>
759 |         </main>
760 |       </div>
761 |       {showPreviewSpinner ? (
762 |         <div className="fixed inset-0 z-40 flex items-center justify-center bg-neutral-950/70 px-4 py-4 backdrop-blur">
763 |           <div className="flex items-center gap-3 rounded-2xl border border-border/60 bg-card/95 px-4 py-3 text-sm font-medium text-foreground shadow-lg">
764 |             <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
765 |             Loading preview…
766 |           </div>
767 |         </div>
768 |       ) : null}
769 |       <VideoPreviewOverlay
770 |         isOpen={Boolean(preview.previewingId)}
771 |         item={currentPreviewItem}
772 |         previewUrl={preview.previewUrl}
773 |         loading={preview.previewLoading}
774 |         onClose={handlePreviewClose}
775 |         onPrev={() => handlePreviewNavigate(-1)}
776 |         onNext={() => handlePreviewNavigate(1)}
777 |         hasPrev={hasPrevPreview}
778 |         hasNext={hasNextPreview}
779 |         onDownload={handleDownload}
780 |       />
781 |     </div>
782 |   );
783 | }
784 |

--------------------------------------------------------------------------------