\n {/* Mobile hamburger */}\n setSidebarOpen(!sidebarOpen)}\n class=\"lg:hidden fixed top-4 left-4 z-50 bg-gray-800 p-2 rounded-lg border border-gray-700\"\n >\n \n \n\n {/* Overlay for mobile */}\n {sidebarOpen && (\n

setSidebarOpen(false)} />\n )}\n\n { setPage(p); setSidebarOpen(false); }} open={sidebarOpen} />\n\n

\n {loading ? (\n

🎬

Loading Clip Factory...

\n ) : (\n

{renderPage()}

\n )}\n

\n );\n}\n\ncreateRoot(document.getElementById(\"root\")!).render();\n",[],[137,185],"5fa67d56-3a9e-11f1-b888-42b51c65c3df","index.html","b63cdb34-3a9d-11f1-952a-42b51c65c3df",12,["D",1776458730884],"\n\n\n \n \n 🎬 Clip Factory — AI Video Clipper\n \n \n \n \n \n\n\n

\n \n\n\n",[],[137,194],"c971a2e8-3a9d-11f1-bfe6-42b51c65c3df","StatsBar.tsx","c971a400-3a9d-11f1-bfe6-42b51c65c3df","74496da2-cf10-4ad3-997c-58e1cb48e6ee",6,["D",1776458478898],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\n\nexport function StatsBar({ stats }) {\n const cards = [\n { label: \"Total Clips\", value: stats.total, icon: \"📋\", color: \"from-blue-600/20 to-blue-900/20 border-blue-800/50\" },\n { label: \"Ideas\", value: stats.ideas, icon: \"💡\", color: \"from-yellow-600/20 to-yellow-900/20 border-yellow-800/50\" },\n { label: \"In Editing\", value: stats.editing, icon: \"✂️\", color: \"from-orange-600/20 to-orange-900/20 border-orange-800/50\" },\n { label: \"Published\", value: stats.published, icon: \"🚀\", color: \"from-green-600/20 to-green-900/20 border-green-800/50\" },\n { label: \"Total Views\", value: formatViews(stats.totalViews), icon: \"👁️\", color: \"from-purple-600/20 to-purple-900/20 border-purple-800/50\" },\n ];\n\n return (\n

\n {cards.map(card => (\n \n

\n {card.icon}\n {card.label}\n

{card.value}

\n ))}\n

\n );\n}\n\nfunction formatViews(n: number): string {\n if (n >= 1_000_000) return (n / 1_000_000).toFixed(1) + \"M\";\n if (n >= 1_000) return (n / 1_000).toFixed(1) + \"K\";\n return String(n);\n}\n",[],[137,210,202],"components","6fc4de80-3a9e-11f1-9032-42b51c65c3df","Sidebar.tsx","6fc4df5c-3a9e-11f1-9032-42b51c65c3df",14,["D",1776458757946],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\n\nconst NAV = [\n { id: \"dashboard\", label: \"Dashboard\", icon: \"📊\" },\n { id: \"clipper\", label: \"Clip Video\", icon: \"✂️\" },\n { id: \"clips\", label: \"My Clips\", icon: \"🎬\" },\n { id: \"creators\", label: \"Creators\", icon: \"⭐\" },\n];\n\nexport function Sidebar({ page, setPage, open }) {\n return (\n

\n {/* Logo */}\n

\n 🎬\n

\n Clip Factory\n

Video Clipper

\n\n {/* Navigation */}\n

\n {NAV.map(item => {\n const active = page === item.id;\n return (\n setPage(item.id)}\n class={`w-full flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-medium transition-all ${\n active\n ? \"bg-gradient-to-r from-purple-600/20 to-pink-600/20 text-white border border-purple-500/30 shadow-lg shadow-purple-900/10\"\n : \"text-gray-400 hover:text-white hover:bg-gray-800/50\"\n }`}\n >\n {item.icon}\n {item.label}\n {active &&

}\n \n );\n })}\n

\n\n {/* Footer */}\n

🚀 Pro Tip

Paste any YouTube URL and create viral-ready clips for TikTok, Reels & Shorts.

\n view source\n

\n );\n}\n",[],[137,210,212],"b1984a0e-3a9e-11f1-a3e4-42b51c65c3df","MyClipsPage.tsx","b1984aa4-3a9e-11f1-a3e4-42b51c65c3df",17,["D",1776458868389],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function MyClipsPage({ clips, refresh }) {\n const [filter, setFilter] = useState(\"all\");\n const [copiedId, setCopiedId] = useState(null);\n\n const filtered = filter === \"all\" ? clips : clips.filter(c => c.status === filter);\n\n async function handleDownload(clip) {\n // Track the download\n await fetch(`/api/clips/${clip.id}/download`, { method: \"POST\" });\n\n // Generate a downloadable text file with clip details + cobalt download link\n const info = [\n `🎬 CLIP: ${clip.title}`,\n `━━━━━━━━━━━━━━━━━━━━━━━━━━━`,\n `📺 Source: ${clip.video_title}`,\n `🎤 Channel: ${clip.channel_name}`,\n `⏱️ Timestamps: ${clip.start_time} → ${clip.end_time} (${clip.duration_sec}s)`,\n ``,\n `📱 DOWNLOAD THE VIDEO CLIP:`,\n `1. Go to https://cobalt.tools`,\n `2. Paste this URL: https://youtube.com/watch?v=${clip.video_id}`,\n `3. Download the video, then trim ${clip.start_time} to ${clip.end_time}`,\n ``,\n `✂️ QUICK TRIM (use any of these free tools):`,\n `• CapCut (Mobile/Desktop): https://www.capcut.com`,\n `• Canva Video Editor: https://www.canva.com/video-editor`,\n `• Kapwing: https://www.kapwing.com/tools/trim-video`,\n ``,\n clip.caption ? `📝 CAPTION:\\n${clip.caption}\\n` : \"\",\n clip.hashtags ? `# HASHTAGS:\\n${clip.hashtags}\\n` : \"\",\n `━━━━━━━━━━━━━━━━━━━━━━━━━━━`,\n `Generated by Clip Factory 🎬`,\n ].filter(Boolean).join(\"\\n\");\n\n const blob = new Blob([info], { type: \"text/plain\" });\n const a = document.createElement(\"a\");\n a.href = URL.createObjectURL(blob);\n a.download = `clip-${clip.title.replace(/[^a-zA-Z0-9]/g, \"-\").toLowerCase()}.txt`;\n a.click();\n URL.revokeObjectURL(a.href);\n refresh();\n }\n\n function copyCaption(clip) {\n const text = `${clip.caption || clip.title}\\n\\n${clip.hashtags || \"\"}`;\n navigator.clipboard.writeText(text);\n setCopiedId(clip.id);\n setTimeout(() => setCopiedId(null), 2000);\n }\n\n async function handleDelete(id) {\n if (!confirm(\"Delete this clip?\")) return;\n await fetch(`/api/clips/${id}`, { method: \"DELETE\" });\n refresh();\n }\n\n async function handleStatusChange(id, status) {\n await fetch(`/api/clips/${id}/status`, {\n method: \"PATCH\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ status }),\n });\n refresh();\n }\n\n const statusCfg = {\n ready: { label: \"Ready\", icon: \"✅\", color: \"text-green-400\", bg: \"bg-green-900/20\", border: \"border-green-800/40\" },\n posted: { label: \"Posted\", icon: \"🚀\", color: \"text-blue-400\", bg: \"bg-blue-900/20\", border: \"border-blue-800/40\" },\n viral: { label: \"Viral\", icon: \"🔥\", color: \"text-orange-400\", bg: \"bg-orange-900/20\", border: \"border-orange-800/40\" },\n };\n\n return (\n

🎬 My Clips

{clips.length} clips ready to dominate social media

\n\n {/* Filters */}\n

\n {[\n { value: \"all\", label: \"All\", icon: \"📋\" },\n { value: \"ready\", label: \"Ready\", icon: \"✅\" },\n { value: \"posted\", label: \"Posted\", icon: \"🚀\" },\n { value: \"viral\", label: \"Viral\", icon: \"🔥\" },\n ].map(f => (\n setFilter(f.value)}\n class={`px-4 py-2 rounded-xl text-sm font-medium transition-all flex items-center gap-1.5 ${\n filter === f.value\n ? \"bg-purple-600/20 text-purple-300 border border-purple-500/30\"\n : \"bg-gray-900 text-gray-400 border border-gray-800 hover:border-gray-700\"\n }`}\n >\n {f.icon} {f.label}\n \n ))}\n

\n\n {/* Clips */}\n {filtered.length === 0 ? (\n

✂️

No clips here yet

Go to \"Clip Video\" to import a YouTube video and start creating clips!

\n ) : (\n

\n {filtered.map(clip => {\n const st = statusCfg[clip.status] || statusCfg.ready;\n return (\n

\n {/* Thumbnail header */}\n

\n {clip.thumbnail ? (\n $\"\"$ \n ) : (\n

🎬

\n )}\n

\n \n {st.icon} {st.label}\n \n

\n ⏱ {clip.start_time} → {clip.end_time}\n

\n {clip.duration_sec}s\n

\n\n

{clip.title}

from {clip.video_title}

\n\n {clip.caption && (\n

\n 📝 {clip.caption}\n

\n )}\n\n {clip.hashtags && (\n

{clip.hashtags}

\n )}\n\n {/* Actions */}\n

\n handleDownload(clip)}\n class=\"flex-1 bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-500 hover:to-pink-500 text-white font-bold py-2 rounded-xl text-xs transition-all shadow-lg shadow-purple-900/20 flex items-center justify-center gap-1.5\"\n >\n 📥 Download\n \n copyCaption(clip)}\n class=\"px-3 py-2 bg-gray-800 hover:bg-gray-700 rounded-xl text-xs transition flex items-center gap-1\"\n title=\"Copy caption + hashtags\"\n >\n {copiedId === clip.id ? \"✅\" : \"📋\"}\n \n

\n \n \n

\n\n

\n 📥 {clip.download_count} downloads\n 📱 9:16 vertical\n

\n );\n })}\n

\n )}\n

\n );\n}\n",[],[137,210,220],"808a7554-3a9e-11f1-8290-42b51c65c3df","DashboardPage.tsx","808a75fe-3a9e-11f1-8290-42b51c65c3df",15,["D",1776458786089],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\n\nexport function DashboardPage({ stats, projects, clips }) {\n const recentClips = clips.slice(0, 6);\n const recentProjects = projects.slice(0, 4);\n\n const statCards = [\n { label: \"Videos Imported\", value: stats.totalProjects, icon: \"📥\", gradient: \"from-blue-600 to-cyan-600\", bg: \"from-blue-900/20 to-cyan-900/20\", border: \"border-blue-800/40\" },\n { label: \"Clips Created\", value: stats.totalClips, icon: \"✂️\", gradient: \"from-purple-600 to-pink-600\", bg: \"from-purple-900/20 to-pink-900/20\", border: \"border-purple-800/40\" },\n { label: \"Downloads\", value: stats.totalDownloads, icon: \"📤\", gradient: \"from-green-600 to-emerald-600\", bg: \"from-green-900/20 to-emerald-900/20\", border: \"border-green-800/40\" },\n { label: \"Tracked Creators\", value: stats.totalCreators, icon: \"⭐\", gradient: \"from-orange-600 to-red-600\", bg: \"from-orange-900/20 to-red-900/20\", border: \"border-orange-800/40\" },\n ];\n\n return (\n

\n {/* Header */}\n

Dashboard

Your clip factory at a glance

\n\n {/* Stats Grid */}\n

\n {statCards.map(s => (\n

\n {s.icon}\n

{s.value}

{s.label}

\n ))}\n

\n\n {/* How it works banner */}\n

⚡ How Clip Factory Works

\n {[\n { step: \"1\", icon: \"🔗\", title: \"Paste URL\", desc: \"Drop any YouTube video link\" },\n { step: \"2\", icon: \"✂️\", title: \"Create Clips\", desc: \"Define start/end times for each clip\" },\n { step: \"3\", icon: \"📱\", title: \"Optimize\", desc: \"Add captions & hashtags for platforms\" },\n { step: \"4\", icon: \"📥\", title: \"Download\", desc: \"Export and post to TikTok, Reels, Shorts\" },\n ].map(s => (\n

\n {s.step}\n

{s.icon} {s.title}

{s.desc}

\n ))}\n

\n\n

\n {/* Recent Projects */}\n

📥 Recent Videos

\n {recentProjects.length === 0 ? (\n

📭

No videos imported yet. Go to \"Clip Video\" to start!

\n ) : (\n

\n {recentProjects.map(p => (\n

\n {p.thumbnail ? (\n $\"\"$ \n ) : (\n

🎥

\n )}\n

{p.title || \"Untitled\"}

{p.channel_name || \"Unknown\"} • {p.duration || \"?\"}

\n {p.status}\n

\n ))}\n

\n )}\n

\n\n {/* Recent Clips */}\n

🎬 Recent Clips

\n {recentClips.length === 0 ? (\n

✂️

No clips created yet. Import a video and start clipping!

\n ) : (\n

\n {recentClips.map(c => (\n

🎬

{c.title}

{c.start_time} → {c.end_time} • {c.duration_sec}s

\n 📥 {c.download_count}\n

\n ))}\n

\n )}\n

\n\n {/* Platform badges */}\n

\n Optimized for:\n 📱 TikTok\n 📸 Instagram Reels\n 🎬 YouTube Shorts\n 🐦 Twitter/X\n

\n );\n}\n",[],[137,210,228],"c42223ee-3a9d-11f1-8a0a-42b51c65c3df","Dashboard.tsx","c42224d4-3a9d-11f1-8a0a-42b51c65c3df",5,["D",1776458469988],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport { StatsBar } from \"./StatsBar.tsx\";\nimport { ClipCard } from \"./ClipCard.tsx\";\nimport { AddClipModal } from \"./AddClipModal.tsx\";\n\nexport function Dashboard({ creators, clips, stats, filterStatus, setFilterStatus, filterCreator, setFilterCreator, loading, refresh }) {\n const [showAdd, setShowAdd] = useState(false);\n\n const statuses = [\n { value: \"\", label: \"All Clips\", icon: \"📋\" },\n { value: \"idea\", label: \"Ideas\", icon: \"💡\" },\n { value: \"editing\", label: \"Editing\", icon: \"✂️\" },\n { value: \"ready\", label: \"Ready\", icon: \"✅\" },\n { value: \"published\", label: \"Published\", icon: \"🚀\" },\n ];\n\n return (\n

\n {/* Header */}\n

\n 🎬\n \n Clip Factory\n \n

Your faceless YouTube clips command center

\n view source\n setShowAdd(true)}\n class=\"bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-500 hover:to-pink-500 text-white font-bold px-5 py-2.5 rounded-xl transition-all shadow-lg shadow-purple-900/30 flex items-center gap-2\"\n >\n + New Clip\n \n

\n\n

\n {/* Stats */}\n \n\n {/* Filters */}\n

\n {statuses.map(s => (\n setFilterStatus(s.value)}\n class={`px-3 py-1.5 rounded-lg text-sm font-medium transition-all flex items-center gap-1.5 ${\n filterStatus === s.value\n ? \"bg-gray-700 text-white shadow\"\n : \"text-gray-400 hover:text-gray-200\"\n }`}\n >\n {s.icon} {s.label}\n \n ))}\n

\n\n setFilterCreator(e.target.value)}\n class=\"bg-gray-900 border border-gray-800 rounded-xl px-4 py-2 text-sm text-gray-300 focus:outline-none focus:border-purple-500\"\n >\n \n {creators.map(c => (\n \n ))}\n \n

\n\n {/* Clips Grid */}\n {loading ? (\n

🎬 Loading...

\n ) : clips.length === 0 ? (\n

📭

No clips yet

Hit \"+ New Clip\" to start building your content pipeline!

\n ) : (\n

\n {clips.map(clip => (\n \n ))}\n

\n )}\n

\n\n {/* Add Modal */}\n {showAdd && (\n setShowAdd(false)} refresh={refresh} />\n )}\n

\n );\n}\n",[],[137,210,236],"bf4e7b64-3a9e-11f1-80f8-42b51c65c3df","CreatorsPage.tsx","bf4e7c40-3a9e-11f1-80f8-42b51c65c3df",18,["D",1776458891394],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function CreatorsPage({ creators, refresh }) {\n const [showAdd, setShowAdd] = useState(false);\n const [name, setName] = useState(\"\");\n const [emoji, setEmoji] = useState(\"🎮\");\n const [color, setColor] = useState(\"#6366f1\");\n const [channelUrl, setChannelUrl] = useState(\"\");\n const [saving, setSaving] = useState(false);\n\n async function handleAdd(e) {\n e.preventDefault();\n if (!name.trim()) return;\n setSaving(true);\n await fetch(\"/api/creators\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ name, emoji, color, channelUrl }),\n });\n setName(\"\"); setEmoji(\"🎮\"); setColor(\"#6366f1\"); setChannelUrl(\"\");\n setShowAdd(false); setSaving(false);\n refresh();\n }\n\n const popularEmojis = [\"🎮\", \"⚡\", \"🎤\", \"🏀\", \"🎰\", \"🎯\", \"😂\", \"🔥\", \"💀\", \"👑\", \"🎬\", \"🎵\", \"💪\", \"🐐\", \"🦁\"];\n\n return (\n

⭐ Creators

Track your favorite creators to clip from

\n setShowAdd(!showAdd)}\n class=\"bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-500 hover:to-pink-500 text-white font-bold px-5 py-2.5 rounded-xl transition-all shadow-lg shadow-purple-900/30 text-sm\"\n >\n + Add Creator\n \n

\n\n {/* Add Form */}\n {showAdd && (\n

➕ Add New Creator

\n Name\n setName(e.target.value)}\n placeholder=\"e.g. IShowSpeed\"\n class=\"w-full bg-gray-800 border border-gray-700 rounded-xl px-4 py-2.5 text-white placeholder-gray-600 focus:outline-none focus:border-purple-500 text-sm\"\n required\n />\n

\n Channel URL\n setChannelUrl(e.target.value)}\n placeholder=\"https://youtube.com/@...\"\n class=\"w-full bg-gray-800 border border-gray-700 rounded-xl px-4 py-2.5 text-white placeholder-gray-600 focus:outline-none focus:border-purple-500 text-sm\"\n />\n

\n Color\n setColor(e.target.value)}\n class=\"w-full h-10 bg-gray-800 border border-gray-700 rounded-xl cursor-pointer\"\n />\n

\n Emoji Avatar\n

\n {popularEmojis.map(e => (\n setEmoji(e)}\n class={`w-10 h-10 rounded-xl text-xl flex items-center justify-center transition ${\n emoji === e ? \"bg-purple-600/30 border-2 border-purple-500 scale-110\" : \"bg-gray-800 border border-gray-700 hover:bg-gray-700\"\n }`}\n >{e}\n ))}\n

\n \n {saving ? \"Adding...\" : \"✅ Add Creator\"}\n \n \n

\n )}\n\n {/* Creators Grid */}\n

\n {creators.map(c => (\n \n

\n \n {c.avatar_emoji}\n

{c.name}

\n Creator\n

\n {c.channel_url && (\n \n 📺 View Channel →\n \n )}\n

\n {c.clips_made} clips made\n Added {new Date(c.created_at).toLocaleDateString()}\n

\n ))}\n

\n );\n}\n",[],[137,210,244],"9b7248ec-3a9e-11f1-ba14-42b51c65c3df","ClipperPage.tsx","9b7249aa-3a9e-11f1-ba14-42b51c65c3df",16,["D",1776458831228],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\n\nfunction extractVideoId(url: string): string | null {\n const patterns = [\n /(?:youtube\\.com\\/watch\\?v=|youtu\\.be\\/|youtube\\.com\\/embed\\/|youtube\\.com\\/shorts\\/)([a-zA-Z0-9_-]{11})/,\n ];\n for (const p of patterns) {\n const match = url.match(p);\n if (match) return match[1];\n }\n return null;\n}\n\nfunction parseTime(t: string): number {\n const parts = t.split(\":\").map(Number);\n if (parts.length === 3) return parts[0] * 3600 + parts[1] * 60 + parts[2];\n if (parts.length === 2) return parts[0] * 60 + parts[1];\n return parts[0] || 0;\n}\n\nexport function ClipperPage({ projects, refresh }) {\n const [url, setUrl] = useState(\"\");\n const [importing, setImporting] = useState(false);\n const [videoInfo, setVideoInfo] = useState(null);\n const [error, setError] = useState(\"\");\n\n // Clip creation\n const [clipTitle, setClipTitle] = useState(\"\");\n const [startTime, setStartTime] = useState(\"\");\n const [endTime, setEndTime] = useState(\"\");\n const [caption, setCaption] = useState(\"\");\n const [hashtags, setHashtags] = useState(\"#viral #fyp #clips\");\n const [addingClip, setAddingClip] = useState(false);\n const [clipAdded, setClipAdded] = useState(false);\n\n async function handleImport() {\n setError(\"\"); setVideoInfo(null);\n const videoId = extractVideoId(url);\n if (!videoId) { setError(\"Invalid YouTube URL. Please paste a valid link.\"); return; }\n\n setImporting(true);\n try {\n const res = await fetch(\"/api/projects\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ url, videoId }),\n });\n const data = await res.json();\n if (data.error) { setError(data.error); }\n else { setVideoInfo(data); await refresh(); }\n } catch (e) { setError(\"Failed to import video.\"); }\n setImporting(false);\n }\n\n async function handleAddClip() {\n if (!videoInfo || !clipTitle || !startTime || !endTime) return;\n setAddingClip(true);\n const durSec = parseTime(endTime) - parseTime(startTime);\n await fetch(\"/api/clips\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({\n projectId: videoInfo.id, title: clipTitle,\n startTime, endTime, durationSec: Math.max(0, durSec),\n caption, hashtags,\n }),\n });\n setClipTitle(\"\"); setStartTime(\"\"); setEndTime(\"\"); setCaption(\"\");\n setClipAdded(true);\n setTimeout(() => setClipAdded(false), 2000);\n setAddingClip(false);\n refresh();\n }\n\n return (\n

✂️ Clip Video

Import a YouTube video and create short-form clips

\n\n {/* URL Input */}\n

\n 🔗 YouTube Video URL\n

\n setUrl(e.target.value)}\n onKeyDown={e => e.key === \"Enter\" && handleImport()}\n placeholder=\"https://youtube.com/watch?v=... or https://youtu.be/...\"\n class=\"flex-1 bg-gray-800 border border-gray-700 rounded-xl px-5 py-3.5 text-white placeholder-gray-600 focus:outline-none focus:border-purple-500 focus:ring-1 focus:ring-purple-500/30 transition text-sm\"\n />\n \n {importing ? (\n \n ⏳ Importing...\n \n ) : \"📥 Import Video\"}\n \n

\n {error &&

⚠️ {error}

}\n

\n\n {/* Video Preview + Clip Creator */}\n {videoInfo && (\n

\n {/* Video Info Card */}\n

\n {videoInfo.thumbnail ? (\n $\"\"$ \n ) : (\n

🎥

\n )}\n

\n ✅ Imported\n

{videoInfo.title}

\n 📺 {videoInfo.channel_name}\n ⏱️ {videoInfo.duration}\n

\n ID: {videoInfo.video_id}\n

\n\n {/* Create Clip Form */}\n

\n ✂️ Create a Clip\n {clipAdded && ✅ Clip added!}\n

\n\n

\n Clip Title\n setClipTitle(e.target.value)}\n placeholder=\"e.g. Speed goes crazy on stream\"\n class=\"w-full bg-gray-800 border border-gray-700 rounded-xl px-4 py-3 text-white placeholder-gray-600 focus:outline-none focus:border-purple-500 text-sm\"\n />\n

\n ⏱ Start Time\n setStartTime(e.target.value)}\n placeholder=\"0:30 or 1:02:30\"\n class=\"w-full bg-gray-800 border border-gray-700 rounded-xl px-4 py-3 text-white placeholder-gray-600 focus:outline-none focus:border-purple-500 text-sm font-mono\"\n />\n

\n ⏱ End Time\n setEndTime(e.target.value)}\n placeholder=\"1:00 or 1:03:00\"\n class=\"w-full bg-gray-800 border border-gray-700 rounded-xl px-4 py-3 text-white placeholder-gray-600 focus:outline-none focus:border-purple-500 text-sm font-mono\"\n />\n

\n\n

\n 📝 Caption (for posting)\n setCaption(e.target.value)}\n placeholder=\"Write the caption you'll use when posting this clip...\"\n rows={2}\n class=\"w-full bg-gray-800 border border-gray-700 rounded-xl px-4 py-3 text-white placeholder-gray-600 focus:outline-none focus:border-purple-500 text-sm resize-none\"\n />\n

\n # Hashtags\n setHashtags(e.target.value)}\n placeholder=\"#viral #fyp #clips\"\n rows={2}\n class=\"w-full bg-gray-800 border border-gray-700 rounded-xl px-4 py-3 text-white placeholder-gray-600 focus:outline-none focus:border-purple-500 text-sm resize-none\"\n />\n

\n\n {startTime && endTime && (\n

\n Preview:\n {startTime} → {endTime}\n ({Math.max(0, parseTime(endTime) - parseTime(startTime))}s clip)\n {parseTime(endTime) - parseTime(startTime) > 60 && (\n ⚠️ Over 60s — consider shorter for Shorts/Reels\n )}\n

\n )}\n\n \n {addingClip ? \"Adding...\" : \"✂️ Create Clip\"}\n \n

\n\n {/* YouTube Embed */}\n

🎥 Video Reference

\n \n

Use this to find timestamps for your clips. Pause at the right moment and note the time!

\n )}\n\n {/* Recent Projects */}\n {!videoInfo && projects.length > 0 && (\n

📁 Your Imported Videos

\n {projects.map(p => (\n

setVideoInfo(p)}>\n {p.thumbnail ? (\n $\"\"$ \n ) : (\n

🎥

\n )}\n

{p.title || \"Untitled\"}

{p.channel_name} • {p.duration}

\n ))}\n

\n )}\n

\n );\n}\n",[],[137,210,252],"d4b21958-3a9d-11f1-a95c-42b51c65c3df","ClipCard.tsx","d4b21a20-3a9d-11f1-a95c-42b51c65c3df",7,["D",1776458497779],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\n\nconst STATUS_CONFIG = {\n idea: { label: \"Idea\", icon: \"💡\", bg: \"bg-yellow-900/30\", text: \"text-yellow-300\", border: \"border-yellow-700/50\" },\n editing: { label: \"Editing\", icon: \"✂️\", bg: \"bg-orange-900/30\", text: \"text-orange-300\", border: \"border-orange-700/50\" },\n ready: { label: \"Ready\", icon: \"✅\", bg: \"bg-blue-900/30\", text: \"text-blue-300\", border: \"border-blue-700/50\" },\n published: { label: \"Published\", icon: \"🚀\", bg: \"bg-green-900/30\", text: \"text-green-300\", border: \"border-green-700/50\" },\n};\n\nconst PRIORITY_CONFIG = {\n low: { label: \"Low\", color: \"text-gray-400\" },\n medium: { label: \"Med\", color: \"text-yellow-400\" },\n high: { label: \"High\", color: \"text-red-400\" },\n};\n\nexport function ClipCard({ clip, refresh }) {\n const [editingViews, setEditingViews] = useState(false);\n const [views, setViews] = useState(clip.views);\n const status = STATUS_CONFIG[clip.status] || STATUS_CONFIG.idea;\n const priority = PRIORITY_CONFIG[clip.priority] || PRIORITY_CONFIG.medium;\n const nextStatuses = [\"idea\", \"editing\", \"ready\", \"published\"].filter(s => s !== clip.status);\n\n async function changeStatus(newStatus: string) {\n await fetch(`/api/clips/${clip.id}/status`, {\n method: \"PATCH\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ status: newStatus }),\n });\n refresh();\n }\n\n async function saveViews() {\n await fetch(`/api/clips/${clip.id}/views`, {\n method: \"PATCH\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ views: Number(views) }),\n });\n setEditingViews(false);\n refresh();\n }\n\n async function handleDelete() {\n if (!confirm(\"Delete this clip?\")) return;\n await fetch(`/api/clips/${clip.id}`, { method: \"DELETE\" });\n refresh();\n }\n\n return (\n

\n {/* Header */}\n

\n \n {clip.avatar_emoji}\n \n {clip.creator_name}\n

\n \n {status.icon} {status.label}\n \n

\n\n {/* Title */}\n

{clip.title}

\n\n {/* Notes */}\n {clip.notes && (\n

{clip.notes}

\n )}\n\n {/* Meta row */}\n

\n ● {priority.label} priority\n {clip.source_url && (\n \n 🔗 Source\n \n )}\n

\n\n {/* Views (published only) */}\n {clip.status === \"published\" && (\n

\n 👁️\n {editingViews ? (\n

\n setViews(e.target.value)}\n class=\"bg-gray-800 border border-gray-700 rounded px-2 py-0.5 text-xs w-24 text-white\"\n />\n \n

\n ) : (\n setEditingViews(true)}\n class=\"text-xs text-gray-400 hover:text-white\"\n >\n {Number(clip.views).toLocaleString()} views\n \n )}\n

\n )}\n\n {/* Actions */}\n

\n {nextStatuses.map(s => {\n const cfg = STATUS_CONFIG[s];\n return (\n changeStatus(s)}\n class={`text-xs px-2 py-1 rounded-lg ${cfg.bg} ${cfg.text} hover:opacity-80 transition`}\n title={`Move to ${cfg.label}`}\n >\n {cfg.icon}\n \n );\n })}\n

\n \n 🗑️\n \n

\n );\n}\n",[],[137,210,260],"df5d23fc-3a9d-11f1-a715-42b51c65c3df","AddClipModal.tsx","df5d24e2-3a9d-11f1-a715-42b51c65c3df",8,["D",1776458515674],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function AddClipModal({ creators, onClose, refresh }) {\n const [creatorId, setCreatorId] = useState(creators[0]?.id || \"\");\n const [title, setTitle] = useState(\"\");\n const [sourceUrl, setSourceUrl] = useState(\"\");\n const [priority, setPriority] = useState(\"medium\");\n const [notes, setNotes] = useState(\"\");\n const [saving, setSaving] = useState(false);\n\n async function handleSubmit(e: React.FormEvent) {\n e.preventDefault();\n if (!title.trim() || !creatorId) return;\n setSaving(true);\n await fetch(\"/api/clips\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ creatorId, title, sourceUrl, priority, notes }),\n });\n refresh();\n onClose();\n }\n\n return (\n

\n e.stopPropagation()}\n >\n

\n 🎬 New Clip Idea\n

\n \n

\n\n

\n {/* Creator */}\n

\n Creator\n setCreatorId(e.target.value)}\n class=\"w-full bg-gray-800 border border-gray-700 rounded-xl px-4 py-2.5 text-white focus:outline-none focus:border-purple-500\"\n required\n >\n {creators.map(c => (\n \n ))}\n \n

\n\n {/* Title */}\n

\n Clip Title\n setTitle(e.target.value)}\n placeholder=\"e.g. Speed reacts to getting banned\"\n class=\"w-full bg-gray-800 border border-gray-700 rounded-xl px-4 py-2.5 text-white placeholder-gray-600 focus:outline-none focus:border-purple-500\"\n required\n />\n

\n\n {/* Source URL */}\n

\n Source URL (optional)\n setSourceUrl(e.target.value)}\n placeholder=\"https://youtube.com/watch?v=...\"\n class=\"w-full bg-gray-800 border border-gray-700 rounded-xl px-4 py-2.5 text-white placeholder-gray-600 focus:outline-none focus:border-purple-500\"\n />\n

\n\n {/* Priority */}\n

\n Priority\n

\n {[\n { value: \"low\", label: \"Low\", color: \"border-gray-600 text-gray-400 hover:border-gray-500\" },\n { value: \"medium\", label: \"Medium\", color: \"border-yellow-700 text-yellow-400 hover:border-yellow-600\" },\n { value: \"high\", label: \"High 🔥\", color: \"border-red-700 text-red-400 hover:border-red-600\" },\n ].map(p => (\n setPriority(p.value)}\n class={`flex-1 py-2 rounded-xl text-sm font-semibold border transition-all ${\n priority === p.value\n ? p.color + \" bg-gray-800 ring-1 ring-white/10\"\n : \"border-gray-800 text-gray-600\"\n }`}\n >\n {p.label}\n \n ))}\n

\n\n {/* Notes */}\n

\n Notes (optional)\n setNotes(e.target.value)}\n placeholder=\"Timestamp, edit ideas, caption notes...\"\n rows={2}\n class=\"w-full bg-gray-800 border border-gray-700 rounded-xl px-4 py-2.5 text-white placeholder-gray-600 focus:outline-none focus:border-purple-500 resize-none\"\n />\n

\n\n {/* Submit */}\n \n {saving ? \"Adding...\" : \"Add Clip 🎬\"}\n \n \n

\n );\n}\n",[],[137,210,268],"c422626e-3a9d-11f1-8a0a-42b51c65c3df",["D",1776458469988],[164,165,166,167,168,169,170,171,172],[137,210],["D",1776458446670],[163,173,174],[137],"5a25803e-3a9e-11f1-8cae-42b51c65c3df","queries.ts","b2fa50dc-3a9d-11f1-884c-42b51c65c3df",11,["D",1776458721665],"import { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\n\n// --- Projects ---\nexport async function getProjects() {\n const result = await sqlite.execute(\"SELECT * FROM projects ORDER BY created_at DESC\");\n return result.rows;\n}\n\nexport async function addProject(youtubeUrl: string, videoId: string, title: string, thumbnail: string, channelName: string, duration: string) {\n const result = await sqlite.execute({\n sql: \"INSERT INTO projects (youtube_url, video_id, title, thumbnail, channel_name, duration, status) VALUES (?, ?, ?, ?, ?, ?, 'ready')\",\n args: [youtubeUrl, videoId, title, thumbnail, channelName, duration],\n });\n return result.lastInsertRowid;\n}\n\nexport async function deleteProject(id: number) {\n await sqlite.batch([\n { sql: \"DELETE FROM clips WHERE project_id = ?\", args: [id] },\n { sql: \"DELETE FROM projects WHERE id = ?\", args: [id] },\n ]);\n}\n\n// --- Clips ---\nexport async function getClips(projectId?: number) {\n let sql = `SELECT clips.*, projects.title as video_title, projects.thumbnail, projects.video_id, projects.channel_name\n FROM clips JOIN projects ON clips.project_id = projects.id`;\n const args: any[] = [];\n if (projectId) { sql += \" WHERE clips.project_id = ?\"; args.push(projectId); }\n sql += \" ORDER BY clips.created_at DESC\";\n return (await sqlite.execute({ sql, args })).rows;\n}\n\nexport async function addClip(projectId: number, title: string, startTime: string, endTime: string, durationSec: number, caption?: string, hashtags?: string) {\n await sqlite.execute({\n sql: \"INSERT INTO clips (project_id, title, start_time, end_time, duration_sec, caption, hashtags) VALUES (?, ?, ?, ?, ?, ?, ?)\",\n args: [projectId, title, startTime, endTime, durationSec, caption || null, hashtags || null],\n });\n}\n\nexport async function updateClipStatus(id: number, status: string) {\n await sqlite.execute({ sql: \"UPDATE clips SET status = ? WHERE id = ?\", args: [status, id] });\n}\n\nexport async function incrementDownload(id: number) {\n await sqlite.execute({ sql: \"UPDATE clips SET download_count = download_count + 1 WHERE id = ?\", args: [id] });\n}\n\nexport async function deleteClip(id: number) {\n await sqlite.execute({ sql: \"DELETE FROM clips WHERE id = ?\", args: [id] });\n}\n\n// --- Creators ---\nexport async function getCreators() {\n return (await sqlite.execute(\"SELECT * FROM creators ORDER BY name\")).rows;\n}\n\nexport async function addCreator(name: string, emoji: string, color: string, channelUrl?: string) {\n await sqlite.execute({\n sql: \"INSERT INTO creators (name, avatar_emoji, color, channel_url) VALUES (?, ?, ?, ?)\",\n args: [name, emoji, color, channelUrl || null],\n });\n}\n\n// --- Stats ---\nexport async function getStats() {\n const [projects, clips, downloads, creators] = await Promise.all([\n sqlite.execute(\"SELECT COUNT(*) as c FROM projects\"),\n sqlite.execute(\"SELECT COUNT(*) as c FROM clips\"),\n sqlite.execute(\"SELECT COALESCE(SUM(download_count), 0) as c FROM clips\"),\n sqlite.execute(\"SELECT COUNT(*) as c FROM creators\"),\n ]);\n return {\n totalProjects: projects.rows[0].c,\n totalClips: clips.rows[0].c,\n totalDownloads: downloads.rows[0].c,\n totalCreators: creators.rows[0].c,\n };\n}\n",[],[144,283],"e228cf0e-3a9e-11f1-a2e6-42b51c65c3df","migrations.ts","ac9f61aa-3a9d-11f1-ade9-42b51c65c3df",22,["D",1776458949847],"import { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\n\nexport async function runMigrations() {\n await sqlite.batch([\n {\n sql: `CREATE TABLE IF NOT EXISTS projects (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n youtube_url TEXT NOT NULL,\n video_id TEXT,\n title TEXT,\n thumbnail TEXT,\n channel_name TEXT,\n duration TEXT,\n status TEXT DEFAULT 'processing',\n created_at TEXT DEFAULT (datetime('now'))\n )`,\n },\n {\n sql: `CREATE TABLE IF NOT EXISTS clips (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n project_id INTEGER NOT NULL,\n title TEXT NOT NULL,\n start_time TEXT NOT NULL,\n end_time TEXT NOT NULL,\n duration_sec INTEGER DEFAULT 0,\n aspect_ratio TEXT DEFAULT '9:16',\n platform TEXT DEFAULT 'all',\n status TEXT DEFAULT 'ready',\n download_count INTEGER DEFAULT 0,\n caption TEXT,\n hashtags TEXT,\n created_at TEXT DEFAULT (datetime('now')),\n FOREIGN KEY (project_id) REFERENCES projects(id)\n )`,\n },\n {\n sql: `CREATE TABLE IF NOT EXISTS creators (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n name TEXT NOT NULL,\n channel_url TEXT,\n avatar_emoji TEXT DEFAULT '🎮',\n color TEXT DEFAULT '#6366f1',\n clips_made INTEGER DEFAULT 0,\n created_at TEXT DEFAULT (datetime('now'))\n )`,\n },\n ]);\n}\n\nexport async function seedDefaults() {\n const existing = await sqlite.execute(\"SELECT COUNT(*) as count FROM creators\");\n if (existing.rows[0].count > 0) return;\n\n await sqlite.batch([\n { sql: \"INSERT INTO creators (name, avatar_emoji, color, channel_url) VALUES (?, ?, ?, ?)\", args: [\"IShowSpeed\", \"⚡\", \"#ef4444\", \"https://youtube.com/@IShowSpeed\"] },\n { sql: \"INSERT INTO creators (name, avatar_emoji, color, channel_url) VALUES (?, ?, ?, ?)\", args: [\"Kai Cenat\", \"🎤\", \"#8b5cf6\", \"https://youtube.com/@KaiCenat\"] },\n { sql: \"INSERT INTO creators (name, avatar_emoji, color, channel_url) VALUES (?, ?, ?, ?)\", args: [\"Duke Dennis\", \"🏀\", \"#f97316\", \"https://youtube.com/@DukeDennis\"] },\n { sql: \"INSERT INTO creators (name, avatar_emoji, color, channel_url) VALUES (?, ?, ?, ?)\", args: [\"Adin Ross\", \"🎰\", \"#ec4899\", \"https://youtube.com/@AdinRoss\"] },\n { sql: \"INSERT INTO creators (name, avatar_emoji, color, channel_url) VALUES (?, ?, ?, ?)\", args: [\"xQc\", \"🎯\", \"#3b82f6\", \"https://youtube.com/@xQc\"] },\n { sql: \"INSERT INTO creators (name, avatar_emoji, color, channel_url) VALUES (?, ?, ?, ?)\", args: [\"Sketch\", \"😂\", \"#10b981\", \"https://youtube.com/@Sketch\"] },\n ]);\n}\n",[],[144,291],["D",1776458430544],[160,161],[144],["D",1776458419406],["D",1789512647429],{"_16":17,"_86":82},{"_16":17,"_80":-5,"_81":82,"_33":34,"_83":84,"_85":26},{"_68":69,"_20":70,"_18":71,"_72":19,"_73":-5,"_74":-5,"_75":-5,"_76":-5,"_77":-5,"_78":21,"_79":17},"ctx",{"_61":-5,"_106":339,"_340":341,"_342":343,"_344":26,"_345":26,"_346":26,"_347":38,"_348":-5,"_349":-7,"_350":-7,"_351":42,"_352":26,"_353":26,"_354":-5,"_355":26,"_356":26,"_357":26,"_358":-5},"ENV",{"_310":311,"_312":313,"_314":70,"_315":316,"_317":318,"_319":320,"_321":322,"_323":324,"_325":326,"_327":328,"_329":330,"_331":332,"_333":334,"_335":336,"_337":338},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Search