[dyad] Added custom video titles - wrote 2 file(s), executed 1 SQL queries

src/app/clips/[id]/page.tsx

@@ -13,7 +13,7 @@ type ClipPageProps = {
 export default async function ClipPage({ params }: ClipPageProps) {
   const { data: clip, error } = await supabase
     .from('clips')
-    .select('storage_path, original_file_name')
+    .select('storage_path, original_file_name, title')
     .eq('short_id', params.id)
     .single();
 
@@ -39,7 +39,7 @@ export default async function ClipPage({ params }: ClipPageProps) {
       <Card className="w-full max-w-3xl">
         <CardHeader>
           <CardTitle className="truncate">
-            {clip.original_file_name || "Shared Clip"}
+            {clip.title || clip.original_file_name || "Shared Clip"}
           </CardTitle>
         </CardHeader>
         <CardContent>

src/components/video-editor.tsx

@@ -17,6 +17,7 @@ import { Toaster } from "@/components/ui/sonner";
 export function VideoEditor() {
   const [videoSrc, setVideoSrc] = useState<string | null>(null);
   const [videoFile, setVideoFile] = useState<File | null>(null);
+  const [videoTitle, setVideoTitle] = useState("");
   const [duration, setDuration] = useState(0);
   const [trimValues, setTrimValues] = useState([0, 0]);
   const [isProcessing, setIsProcessing] = useState(false);
@@ -59,6 +60,7 @@ export function VideoEditor() {
     const file = event.target.files?.[0];
     if (file) {
       setVideoFile(file);
+      setVideoTitle(file.name.replace(/\.[^/.]+$/, ""));
       const url = URL.createObjectURL(file);
       setVideoSrc(url);
       setShareableLink(null);
@@ -128,6 +130,7 @@ export function VideoEditor() {
         storage_path: storagePath,
         short_id: shortId,
         original_file_name: videoFile.name,
+        title: videoTitle,
       });
       if (dbError) throw new Error(`Database Error: ${dbError.message}`);
 
@@ -152,6 +155,7 @@ export function VideoEditor() {
     setVideoSrc(null); setVideoFile(null); setDuration(0);
     setTrimValues([0, 0]); setIsProcessing(false);
     setShareableLink(null); setProgress(0);
+    setVideoTitle("");
   };
 
   const copyToClipboard = () => {
@@ -176,6 +180,16 @@ export function VideoEditor() {
               <div className="aspect-video w-full overflow-hidden rounded-lg border">
                 <video ref={videoRef} src={videoSrc} controls className="w-full h-full object-contain bg-black" onLoadedMetadata={handleLoadedMetadata} />
               </div>
+              <div className="space-y-2">
+                <Label htmlFor="video-title">Title</Label>
+                <Input
+                  id="video-title"
+                  value={videoTitle}
+                  onChange={(e) => setVideoTitle(e.target.value)}
+                  placeholder="Enter a title for your clip"
+                  disabled={isProcessing}
+                />
+              </div>
               <div>
                 <h3 className="text-lg font-semibold mb-4">Trim Video</h3>
                 <div className="space-y-4">