\n \n \n\n",[],[228,230],"c70c0fc4-444a-11f0-8331-76b3cceeab13","DownloadForm.tsx","c5a0fdb1-fcb1-4974-99e7-5452fd65c79b","1679cccf-1fb9-4bb3-97dd-5395e6c78d2a",["D",1749374840547],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport type { DownloadRequest, DownloadResponse } from \"../../shared/types.ts\";\n\ninterface DownloadFormProps {\n onDownloadStart: (response: DownloadResponse) => void;\n}\n\nexport default function DownloadForm({ onDownloadStart }: DownloadFormProps) {\n const [url, setUrl] = useState(\"\");\n const [downloadType, setDownloadType] = useState<\"video\" | \"audio\">(\"video\");\n const [isLoading, setIsLoading] = useState(false);\n const [error, setError] = useState(\"\");\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n setError(\"\");\n setIsLoading(true);\n\n try {\n if (!url.trim()) {\n throw new Error(\"Please enter a YouTube URL\");\n }\n\n const request: DownloadRequest = {\n url: url.trim(),\n type: downloadType\n };\n\n const response = await fetch(\"/api/download\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify(request),\n });\n\n const result: DownloadResponse = await response.json();\n\n if (!result.success) {\n throw new Error(result.error || result.message);\n }\n\n onDownloadStart(result);\n setUrl(\"\"); // Clear the form on success\n \n } catch (err) {\n setError(err instanceof Error ? err.message : \"An error occurred\");\n } finally {\n setIsLoading(false);\n }\n };\n\n const isValidUrl = (url: string) => {\n const youtubeRegex = /^(https?:\\/\\/)?(www\\.)?(youtube\\.com\\/watch\\?v=|youtu\\.be\\/|youtube\\.com\\/embed\\/|youtube\\.com\\/v\\/|m\\.youtube\\.com\\/watch\\?v=)([a-zA-Z0-9_-]{11})|^[a-zA-Z0-9_-]{11}$/;\n return youtubeRegex.test(url.trim());\n };\n\n return (\n

📥

YouTube Downloader

\n Download videos or extract audio from YouTube\n

\n\n

\n \n YouTube URL or Video ID\n \n setUrl(e.target.value)}\n placeholder=\"https://www.youtube.com/watch?v=... or video ID\"\n className={`w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${\n url && !isValidUrl(url) ? \"border-red-300\" : \"border-gray-300\"\n }`}\n disabled={isLoading}\n />\n {url && !isValidUrl(url) && (\n

Please enter a valid YouTube URL or video ID

\n )}\n

\n\n

\n \n Download Type\n \n

\n \n setDownloadType(e.target.value as \"video\")}\n className=\"mr-2\"\n disabled={isLoading}\n />\n 🎥 Video (MP4) - Highest quality available\n \n \n setDownloadType(e.target.value as \"audio\")}\n className=\"mr-2\"\n disabled={isLoading}\n />\n 🎵 Audio Only (MP3) - Extract audio track\n \n

\n\n {error && (\n

❌ {error}

\n )}\n\n \n {isLoading ? (\n \n

\n Processing...\n \n ) : (\n `Download ${downloadType === \"video\" ? \"Video\" : \"Audio\"}`\n )}\n \n \n\n

Supports YouTube URLs and video IDs

Downloads are processed in highest quality available

\n );\n}",[],[228,244,237],"components","c70c0862-444a-11f0-8331-76b3cceeab13","App.tsx","59b401bd-4501-4875-bafb-098e175e289e",["D",1749374840547],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport DownloadForm from \"./DownloadForm.tsx\";\nimport type { DownloadResponse } from \"../../shared/types.ts\";\n\nexport default function App() {\n const [downloads, setDownloads] = useState([]);\n\n const handleDownloadStart = (response: DownloadResponse) => {\n setDownloads(prev => [response, ...prev]);\n };\n\n const handleDownloadFile = (downloadUrl: string, filename: string) => {\n // In a real implementation, this would trigger the actual file download\n // For now, we'll just show an alert\n alert(`Download would start for: ${filename}\\nURL: ${downloadUrl}`);\n };\n\n return (\n

\n {/* Download Form */}\n

\n \n

\n\n {/* Download History */}\n

\n 📋 Download History\n

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

📂

No downloads yet

Start by entering a YouTube URL

\n ) : (\n

\n {downloads.map((download, index) => (\n \n

\n \n {download.success ? \"✅\" : \"❌\"}\n \n \n {download.filename || \"Unknown file\"}\n \n

\n \n

\n {download.message}\n

\n \n {download.error && (\n

\n Error: {download.error}\n

\n )}\n

\n \n {download.success && download.downloadUrl && (\n handleDownloadFile(download.downloadUrl!, download.filename!)}\n className=\"ml-4 px-3 py-1 bg-blue-600 text-white text-sm rounded hover:bg-blue-700 transition-colors\"\n >\n 📥 Download\n \n )}\n

\n ))}\n

\n )}\n

\n\n {/* Instructions */}\n

\n 📖 How to Use\n

\n 1️⃣\n Enter a YouTube URL or video ID in the form\n

\n 2️⃣\n Choose between video download or audio extraction\n

\n 3️⃣\n Click download and wait for processing\n

\n 4️⃣\n Download the processed file when ready\n

\n \n

\n Note: This is a demo implementation. In a production environment, \n you would need a server with yt-dlp installed and proper file storage.\n

\n \n );\n}",[],[228,244,246],"c70c1cc6-444a-11f0-8331-76b3cceeab13",["D",1749374840547],[192,193],[228,244],"c70c2414-444a-11f0-8331-76b3cceeab13",["D",1749374840547],[191,194,195],[228],"c70c039e-444a-11f0-8331-76b3cceeab13","index.ts",["D",1749374840547],"http","import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport downloadRoutes from \"./routes/download.ts\";\nimport staticRoutes from \"./routes/static.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\n// API routes\napp.route(\"/api/download\", downloadRoutes);\n\n// Static file serving and main routes\napp.route(\"/\", staticRoutes);\n\n// Health check endpoint\napp.get(\"/health\", (c) => {\n return c.json({\n status: \"healthy\",\n timestamp: new Date().toISOString(),\n service: \"YouTube Downloader API\"\n });\n});\n\n// 404 handler\napp.notFound((c) => {\n return c.json({\n error: \"Not Found\",\n message: \"The requested resource was not found\",\n path: c.req.path\n }, 404);\n});\n\n// This is the entry point for HTTP vals\nexport default app.fetch;",[],[167,261],["D",1749374840547],[],[167,76,68],["D",1749374840547],[188],[167,76],"c70bef62-444a-11f0-8331-76b3cceeab13","static.ts","a911620d-3ed6-49bd-845c-782b54d2c7fd","363dc998-24fd-4528-8e5d-5222ded8fb97",["D",1749374840547],"import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n\nconst staticRoutes = new Hono();\n\n// Serve frontend files\nstaticRoutes.get(\"/frontend/*\", (c) => serveFile(c.req.path, import.meta.url));\n\n// Serve shared files\nstaticRoutes.get(\"/shared/*\", (c) => serveFile(c.req.path, import.meta.url));\n\n// Serve the main index.html with initial data injection\nstaticRoutes.get(\"/\", async (c) => {\n try {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n \n // Inject initial data if needed\n const initialData = {\n appName: \"YouTube Downloader\",\n version: \"1.0.0\"\n };\n \n const dataScript = ``;\n \n html = html.replace(\"\", `${dataScript}`);\n \n return c.html(html);\n } catch (error) {\n console.error(\"Error serving index.html:\", error);\n return c.text(\"Error loading application\", 500);\n }\n});\n\nexport default staticRoutes;",[],[167,281,274],"routes","c70be026-444a-11f0-8331-76b3cceeab13","download.ts","f5e1bf3f-8f0c-464c-a27b-e5803fb1734f",["D",1749374840547],"import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { YouTubeService } from \"../services/youtube.ts\";\nimport type { DownloadRequest } from \"../../shared/types.ts\";\n\nconst download = new Hono();\n\n// POST /api/download - Start a download\ndownload.post(\"/\", async (c) => {\n try {\n const body = await c.req.json() as DownloadRequest;\n \n if (!body.url || !body.type) {\n return c.json({\n success: false,\n message: \"Missing required fields\",\n error: \"URL and type are required\"\n }, 400);\n }\n\n if (body.type !== 'video' && body.type !== 'audio') {\n return c.json({\n success: false,\n message: \"Invalid download type\",\n error: \"Type must be 'video' or 'audio'\"\n }, 400);\n }\n\n const result = await YouTubeService.download(body);\n \n if (!result.success) {\n return c.json(result, 400);\n }\n\n return c.json(result);\n \n } catch (error) {\n console.error(\"Download error:\", error);\n return c.json({\n success: false,\n message: \"Internal server error\",\n error: error instanceof Error ? error.message : \"Unknown error\"\n }, 500);\n }\n});\n\n// GET /api/download/video/:videoId - Download video file\ndownload.get(\"/video/:videoId\", async (c) => {\n const videoId = c.req.param(\"videoId\");\n \n // In a real implementation, this would:\n // 1. Check if the file exists\n // 2. Stream the file to the client\n // 3. Set appropriate headers for download\n \n // For demo purposes, we'll return a placeholder response\n return c.json({\n message: \"Video download endpoint\",\n videoId,\n note: \"In a real implementation, this would stream the video file\"\n });\n});\n\n// GET /api/download/audio/:videoId - Download audio file\ndownload.get(\"/audio/:videoId\", async (c) => {\n const videoId = c.req.param(\"videoId\");\n \n // In a real implementation, this would:\n // 1. Check if the file exists\n // 2. Stream the file to the client\n // 3. Set appropriate headers for download\n \n // For demo purposes, we'll return a placeholder response\n return c.json({\n message: \"Audio download endpoint\",\n videoId,\n note: \"In a real implementation, this would stream the audio file\"\n });\n});\n\n// GET /api/download/status/:videoId - Check download status\ndownload.get(\"/status/:videoId\", async (c) => {\n const videoId = c.req.param(\"videoId\");\n \n // In a real implementation, this would check the status of an ongoing download\n return c.json({\n status: \"completed\",\n progress: 100,\n message: \"Download completed\",\n videoId\n });\n});\n\nexport default download;",[],[167,281,283],"c70bf412-444a-11f0-8331-76b3cceeab13",["D",1749374840547],[185,186],[167,281],"c70c05ec-444a-11f0-8331-76b3cceeab13",["D",1749374840547],[184,187,189],[167],["D",1749374840547],{"_11":12,"_127":74},{"_11":12,"_123":-5,"_73":74,"_31":72,"_124":125,"_126":30},{"_39":112,"_13":16,"_33":36,"_113":79,"_114":63,"_115":64,"_116":83,"_117":118,"_119":120,"_121":14,"_122":12},"ctx",{"_52":-5,"_148":334,"_335":336,"_337":338,"_339":30,"_340":30,"_341":30,"_342":24,"_343":-5,"_344":-7,"_345":-7,"_346":26,"_347":30,"_348":30,"_349":-5,"_350":30,"_351":30,"_352":30,"_353":-5},"ENV",{"_305":306,"_307":308,"_309":16,"_310":311,"_312":313,"_314":315,"_316":317,"_318":319,"_320":321,"_322":323,"_324":325,"_326":327,"_328":329,"_330":331,"_332":333},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","518c05f2c13b243481ef29134a5672756425e459","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 · services