\n \n\n\n",[],[251,253],"1d3c0780-3aa6-11f1-a795-42b51c65c3df","App.tsx","1d3c085c-3aa6-11f1-a795-42b51c65c3df",7,["D",1776462055454],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport ClipForm from \"./components/ClipForm.tsx\";\nimport JobList from \"./components/JobList.tsx\";\nimport Header from \"./components/Header.tsx\";\n\nexport default function App() {\n const [jobs, setJobs] = useState([]);\n const [loading, setLoading] = useState(true);\n const [activeJob, setActiveJob] = useState(null);\n\n const fetchJobs = async () => {\n try {\n const res = await fetch(\"/api/jobs\");\n const data = await res.json();\n setJobs(data);\n } catch (e) {\n console.error(e);\n } finally {\n setLoading(false);\n }\n };\n\n const fetchJobDetail = async (id: string) => {\n const res = await fetch(`/api/jobs/${id}`);\n const data = await res.json();\n setActiveJob(data);\n };\n\n useEffect(() => {\n fetchJobs();\n }, []);\n\n return (\n

\n {\n setJobs((prev) => [job.job, ...prev]);\n setActiveJob(job);\n }}\n />\n\n {activeJob && (\n

\n \n {activeJob.job.title || \"Untitled Video\"}\n

\n setActiveJob(null)}\n class=\"text-gray-400 hover:text-white transition\"\n >\n \n \n

\n\n

\n {activeJob.job.platform}\n

\n {formatDuration(activeJob.job.duration)}\n

\n {activeJob.clips.length} clips\n

\n {new Date(activeJob.job.created_at).toLocaleDateString()}\n

\n\n {activeJob.job.thumbnail && (\n \n )}\n\n

\n {activeJob.clips.map((clip: any) => (\n \n

\n {clip.part_number}\n

{clip.title}

\n {formatDuration(clip.start_time)} → {formatDuration(clip.end_time)}\n \n ({formatDuration(clip.end_time - clip.start_time)})\n \n

\n {activeJob.job.platform === \"youtube\" && activeJob.job.video_id && (\n \n Watch\n \n )}\n copyTimestamp(clip)}\n class=\"bg-purple-600 hover:bg-purple-500 text-white px-3 py-2 rounded-lg text-sm font-medium transition flex items-center gap-1\"\n >\n Copy\n \n

\n ))}\n

\n\n

\n How to download clips:\n

Use the timestamps above with a tool like clipr.xyz or ytcutter.com
Or use yt-dlp locally: yt-dlp --download-sections \"*start-end\" URL
Copy timestamps with the Copy button and paste into your preferred tool

\n )}\n\n fetchJobDetail(id)}\n onDelete={async (id: string) => {\n await fetch(`/api/jobs/${id}`, { method: \"DELETE\" });\n setJobs((prev) => prev.filter((j) => j.id !== id));\n if (activeJob?.job?.id === id) setActiveJob(null);\n }}\n />\n\n \n \n );\n}\n\nfunction formatDuration(seconds: number): string {\n const h = Math.floor(seconds / 3600);\n const m = Math.floor((seconds % 3600) / 60);\n const s = Math.floor(seconds % 60);\n if (h > 0) return `${h}:${m.toString().padStart(2, \"0\")}:${s.toString().padStart(2, \"0\")}`;\n return `${m}:${s.toString().padStart(2, \"0\")}`;\n}\n\nfunction copyTimestamp(clip: any) {\n const text = `Part ${clip.part_number}: ${formatDuration(clip.start_time)} - ${formatDuration(clip.end_time)}`;\n navigator.clipboard.writeText(text);\n}\n",[],[251,261],"3470a708-3aa6-11f1-9005-42b51c65c3df","JobList.tsx","3470a7b2-3aa6-11f1-9005-42b51c65c3df","c33a6c88-7b3e-47ae-92a8-cc689978606e",10,["D",1776462094386],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\n\ninterface Props {\n jobs: any[];\n loading: boolean;\n onSelect: (id: string) => void;\n onDelete: (id: string) => void;\n}\n\nexport default function JobList({ jobs, loading, onSelect, onDelete }: Props) {\n if (loading) {\n return (\n

\n \n

Loading history...

\n );\n }\n\n if (jobs.length === 0) {\n return (\n

🎬

No clips yet

Paste a video URL above to get started!

\n );\n }\n\n return (\n

\n Recent Clips\n

\n {jobs.map((job: any) => (\n onSelect(job.id)}\n >\n

\n {job.thumbnail ? (\n \n ) : (\n

\n \n

\n )}\n

\n {job.title || \"Untitled\"}\n

\n {job.num_clips} clips • {formatDuration(job.duration)} •{\" \"}\n {new Date(job.created_at).toLocaleDateString()}\n

\n \n {job.status}\n \n {\n e.stopPropagation();\n onDelete(job.id);\n }}\n class=\"text-gray-600 hover:text-red-400 transition p-1\"\n >\n \n \n

\n ))}\n

\n \n );\n}\n\nfunction formatDuration(seconds: number): string {\n const h = Math.floor(seconds / 3600);\n const m = Math.floor((seconds % 3600) / 60);\n const s = Math.floor(seconds % 60);\n if (h > 0) return `${h}:${m.toString().padStart(2, \"0\")}:${s.toString().padStart(2, \"0\")}`;\n return `${m}:${s.toString().padStart(2, \"0\")}`;\n}\n",[],[251,277,269],"components","218fc3b2-3aa6-11f1-b353-42b51c65c3df","Header.tsx","218fc470-3aa6-11f1-b353-42b51c65c3df",8,["D",1776462062708],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\n\nexport default function Header() {\n return (\n

🎬

\n Clip Factory\n

\n Paste a YouTube or Twitch video link, choose how many clips you want,\n and get instant timestamps to split and download for your faceless content.\n

\n \n YouTube\n \n \n Twitch\n \n \n Auto-Split\n \n

\n );\n}\n",[],[251,277,279],"2c6a386c-3aa6-11f1-b353-42b51c65c3df","ClipForm.tsx","2c6a3948-3aa6-11f1-b353-42b51c65c3df",9,["D",1776462080921],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\n\ninterface Props {\n onCreated: (job: any) => void;\n}\n\nexport default function ClipForm({ onCreated }: Props) {\n const [url, setUrl] = useState(\"\");\n const [numClips, setNumClips] = useState(4);\n const [duration, setDuration] = useState(\"\");\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(\"\");\n const [mode, setMode] = useState<\"auto\" | \"manual\">(\"auto\");\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n if (!url.trim()) return;\n setLoading(true);\n setError(\"\");\n\n try {\n const body: any = { url: url.trim(), numClips };\n if (mode === \"manual\" && duration) {\n body.manualDuration = parseDuration(duration);\n }\n const res = await fetch(\"/api/clip\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify(body),\n });\n const data = await res.json();\n if (!res.ok) throw new Error(data.error || \"Failed to create clips\");\n onCreated(data);\n setUrl(\"\");\n setDuration(\"\");\n } catch (e: any) {\n setError(e.message);\n } finally {\n setLoading(false);\n }\n };\n\n return (\n

\n setMode(\"auto\")}\n class={`px-4 py-2 rounded-lg text-sm font-medium transition ${\n mode === \"auto\"\n ? \"bg-purple-600 text-white\"\n : \"bg-gray-800 text-gray-400 hover:text-white\"\n }`}\n >\n Auto Detect\n \n setMode(\"manual\")}\n class={`px-4 py-2 rounded-lg text-sm font-medium transition ${\n mode === \"manual\"\n ? \"bg-purple-600 text-white\"\n : \"bg-gray-800 text-gray-400 hover:text-white\"\n }`}\n >\n Manual Duration\n \n

\n\n

\n setUrl((e.target as HTMLInputElement).value)}\n placeholder=\"Paste YouTube or Twitch video URL...\"\n class=\"flex-1 bg-gray-800 border border-gray-700 rounded-xl px-4 py-3 text-white placeholder-gray-500 focus:outline-none focus:border-purple-500 transition\"\n required\n />\n {mode === \"manual\" && (\n setDuration((e.target as HTMLInputElement).value)}\n placeholder=\"Duration (e.g. 1:30:00)\"\n class=\"w-40 bg-gray-800 border border-gray-700 rounded-xl px-4 py-3 text-white placeholder-gray-500 focus:outline-none focus:border-purple-500 transition\"\n />\n )}\n

\n Clips:\n setNumClips(Number((e.target as HTMLSelectElement).value))}\n class=\"bg-transparent text-white font-bold text-lg focus:outline-none\"\n >\n {[2, 3, 4, 5, 6, 8, 10].map((n) => (\n \n ))}\n \n

\n \n {loading ? (\n <>\n Processing...\n \n ) : (\n <>\n Split Video\n \n )}\n \n

\n\n {error && (\n

\n {error}\n

\n )}\n\n

\n \n Auto Detect fetches video duration from YouTube. For Twitch or if auto-detect fails, use Manual Duration.\n

\n );\n}\n\nfunction parseDuration(str: string): number {\n const parts = str.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 Number(str) || 0;\n}\n",[],[251,277,287],"21900034-3aa6-11f1-b353-42b51c65c3df",["D",1776462062708],[193,194,195],[251,277],"0c5fedb4-3aa6-11f1-9ec3-42b51c65c3df",["D",1776462027162],[192,196,197,198],[251],["D",1776462021866],[],[18,81],["D",1776462014416],[],[18,66],["D",1776462014416],[189,190],[18],"39eef4a0-3aa6-11f1-bdea-42b51c65c3df","youtube.ts","39eef658-3aa6-11f1-bdea-42b51c65c3df","e473acb4-41d3-44d2-a8c4-6bd12d3dab8f",11,["D",1776462103600],"// Fetch YouTube video info using the oembed API and page scraping\nexport async function getYouTubeInfo(videoId: string): Promise<{\n title: string;\n duration: number;\n thumbnail: string;\n}> {\n // Get title from oembed\n const oembedUrl = `https://www.youtube.com/oembed?url=https://www.youtube.com/watch?v=${videoId}&format=json`;\n let title = \"YouTube Video\";\n try {\n const res = await fetch(oembedUrl);\n if (res.ok) {\n const data = await res.json();\n title = data.title || title;\n }\n } catch (_) {}\n\n const thumbnail = `https://img.youtube.com/vi/${videoId}/hqdefault.jpg`;\n\n // Try to get duration by fetching the page and looking for duration in meta\n let duration = 0;\n try {\n const pageRes = await fetch(`https://www.youtube.com/watch?v=${videoId}`, {\n headers: {\n \"User-Agent\":\n \"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36\",\n },\n });\n const html = await pageRes.text();\n\n // Look for \"lengthSeconds\":\"123\" pattern\n const match = html.match(/\"lengthSeconds\"\\s*:\\s*\"(\\d+)\"/);\n if (match) {\n duration = parseInt(match[1], 10);\n }\n\n // Also try approxDurationMs\n if (!duration) {\n const msMatch = html.match(/\"approxDurationMs\"\\s*:\\s*\"(\\d+)\"/);\n if (msMatch) {\n duration = Math.floor(parseInt(msMatch[1], 10) / 1000);\n }\n }\n } catch (_) {}\n\n return { title, duration, thumbnail };\n}\n",[],[320,312],"backend","39ef21c8-3aa6-11f1-bdea-42b51c65c3df",["D",1776462103600],[187],[320],["D",1776461992838],["D",1789513858534],{"_11":12,"_136":72},{"_11":12,"_132":-5,"_71":72,"_31":70,"_133":134,"_135":30},{"_40":123,"_13":16,"_34":37,"_124":85,"_125":-5,"_126":-5,"_127":-5,"_128":-5,"_129":-5,"_130":14,"_131":12},"ctx",{"_54":-5,"_155":363,"_364":365,"_366":367,"_368":30,"_369":30,"_370":30,"_371":24,"_372":-5,"_373":-7,"_374":-7,"_375":26,"_376":30,"_377":30,"_378":-5,"_379":30,"_380":30,"_381":30,"_382":-5},"ENV",{"_334":335,"_336":337,"_338":16,"_339":340,"_341":342,"_343":344,"_345":346,"_347":348,"_349":350,"_351":352,"_353":354,"_355":356,"_357":358,"_359":360,"_361":362},"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"]

History · database