\n \n\n\n",[],[140,138],"1d3c0780-3aa6-11f1-a795-42b51c65c3df",["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",[],[140,158],"3470a708-3aa6-11f1-9005-42b51c65c3df",["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",[],[140,174,192],"218fc3b2-3aa6-11f1-b353-42b51c65c3df",["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",[],[140,174,172],"2c6a386c-3aa6-11f1-b353-42b51c65c3df",["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",[],[140,174,183],"21900034-3aa6-11f1-b353-42b51c65c3df",["D",1776462062708],[369,370,371],[140,174],["D",1776462027162],[368,372,373,374],[140],"093715cc-3aa6-11f1-9ec3-42b51c65c3df",["D",1776462021866],"import { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\n\nexport async function createJob(\n id: string,\n url: string,\n platform: string,\n title: string,\n duration: number,\n numClips: number,\n thumbnail: string,\n videoId: string,\n) {\n await sqlite.execute({\n sql: `INSERT INTO clip_jobs (id, url, platform, title, duration, num_clips, status, thumbnail, video_id)\n VALUES (?, ?, ?, ?, ?, ?, 'done', ?, ?)`,\n args: [id, url, platform, title, duration, numClips, thumbnail, videoId],\n });\n}\n\nexport async function createClip(\n id: string,\n jobId: string,\n partNumber: number,\n startTime: number,\n endTime: number,\n title: string,\n) {\n await sqlite.execute({\n sql: `INSERT INTO clips (id, job_id, part_number, start_time, end_time, title)\n VALUES (?, ?, ?, ?, ?, ?)`,\n args: [id, jobId, partNumber, startTime, endTime, title],\n });\n}\n\nexport async function getJobs(limit = 20) {\n const result = await sqlite.execute({\n sql: `SELECT * FROM clip_jobs ORDER BY created_at DESC LIMIT ?`,\n args: [limit],\n });\n return result.rows;\n}\n\nexport async function getJobWithClips(jobId: string) {\n const jobResult = await sqlite.execute({\n sql: `SELECT * FROM clip_jobs WHERE id = ?`,\n args: [jobId],\n });\n if (jobResult.rows.length === 0) return null;\n\n const clipsResult = await sqlite.execute({\n sql: `SELECT * FROM clips WHERE job_id = ? ORDER BY part_number ASC`,\n args: [jobId],\n });\n\n return { job: jobResult.rows[0], clips: clipsResult.rows };\n}\n\nexport async function deleteJob(jobId: string) {\n await sqlite.batch([\n { sql: `DELETE FROM clips WHERE job_id = ?`, args: [jobId] },\n { sql: `DELETE FROM clip_jobs WHERE id = ?`, args: [jobId] },\n ]);\n}\n",[],[115,124],"04c67442-3aa6-11f1-8c4b-42b51c65c3df",["D",1776462014416],"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 clip_jobs (\n id TEXT PRIMARY KEY,\n url TEXT NOT NULL,\n platform TEXT NOT NULL,\n title TEXT NOT NULL DEFAULT '',\n duration INTEGER NOT NULL DEFAULT 0,\n num_clips INTEGER NOT NULL DEFAULT 4,\n status TEXT NOT NULL DEFAULT 'pending',\n error TEXT,\n thumbnail TEXT DEFAULT '',\n video_id TEXT DEFAULT '',\n created_at TEXT NOT NULL DEFAULT (datetime('now'))\n )`,\n },\n {\n sql: `CREATE TABLE IF NOT EXISTS clips (\n id TEXT PRIMARY KEY,\n job_id TEXT NOT NULL,\n part_number INTEGER NOT NULL,\n start_time INTEGER NOT NULL,\n end_time INTEGER NOT NULL,\n title TEXT NOT NULL DEFAULT '',\n FOREIGN KEY (job_id) REFERENCES clip_jobs(id)\n )`,\n },\n ]);\n}\n",[],[115,113],["D",1776462014416],[365,366],[115],"39eef4a0-3aa6-11f1-bdea-42b51c65c3df",["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",[],[208,206],["D",1776462103600],[363],[208],["D",1776461992838],["D",1789513858534],{"_11":12,"_301":85},{"_11":12,"_297":-5,"_84":85,"_25":83,"_298":299,"_300":24},{"_48":246,"_13":16,"_42":45,"_289":251,"_290":-5,"_291":-5,"_292":-5,"_293":-5,"_294":-5,"_295":14,"_296":12},"ctx",{"_61":-5,"_320":496,"_497":498,"_499":500,"_501":24,"_502":24,"_503":24,"_504":263,"_505":-5,"_506":-7,"_507":-7,"_508":20,"_509":24,"_510":24,"_511":-5,"_512":24,"_513":24,"_514":24,"_515":-5},"ENV",{"_467":468,"_469":470,"_471":16,"_472":473,"_474":475,"_476":477,"_478":479,"_480":481,"_482":483,"_484":485,"_486":487,"_488":489,"_490":491,"_492":493,"_494":495},"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