\n \n \n\n",[],[160,218],"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}",[],[160,232,225],"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}",[],[160,232,234],"c70c1cc6-444a-11f0-8331-76b3cceeab13",["D",1749374840547],[188,189],[160,232],["D",1749374840547],[187,190,191],[160],"c70c039e-444a-11f0-8331-76b3cceeab13","index.ts",["D",1749374840547],"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;",[],[165,248],"c70bf6ba-444a-11f0-8331-76b3cceeab13","youtube.ts","6eaf7a30-345a-4584-a7df-26deec5fb408","d1384c49-84bc-4ff4-90ce-a3d77f6a6c3a",["D",1749374840547],"import type { DownloadRequest, DownloadResponse, VideoInfo } from \"../../shared/types.ts\";\n\nexport class YouTubeService {\n private static readonly DOWNLOAD_DIR = \"/tmp/youtube_downloads/\";\n \n /**\n * Downloads a YouTube video or extracts audio\n */\n static async download(request: DownloadRequest): Promise {\n try {\n const { url, type } = request;\n \n // Validate YouTube URL\n if (!this.isValidYouTubeUrl(url)) {\n return {\n success: false,\n message: \"Invalid YouTube URL\",\n error: \"Please provide a valid YouTube URL or video ID\"\n };\n }\n\n // Since Val Town doesn't support yt-dlp directly, we'll use a workaround\n // In a real implementation, you would either:\n // 1. Use a separate service that has yt-dlp installed\n // 2. Use YouTube API + other tools for downloading\n // 3. Use a third-party service\n \n // For this demo, we'll simulate the download process\n const videoInfo = await this.getVideoInfo(url);\n \n if (type === 'video') {\n return await this.downloadVideo(url, videoInfo);\n } else {\n return await this.downloadAudio(url, videoInfo);\n }\n \n } catch (error) {\n return {\n success: false,\n message: \"Download failed\",\n error: error instanceof Error ? error.message : \"Unknown error\"\n };\n }\n }\n\n /**\n * Validates if the provided URL is a valid YouTube URL\n */\n private static isValidYouTubeUrl(url: string): boolean {\n // Check if it's just a video ID (11 characters, alphanumeric, underscore, hyphen)\n if (/^[a-zA-Z0-9_-]{11}$/.test(url)) {\n return true;\n }\n \n // Check if it's a valid YouTube URL\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})/;\n return youtubeRegex.test(url);\n }\n\n /**\n * Extracts video ID from YouTube URL\n */\n private static extractVideoId(url: string): string {\n // If it's already just a video ID\n if (/^[a-zA-Z0-9_-]{11}$/.test(url)) {\n return url;\n }\n \n const match = url.match(/(?:youtube\\.com\\/watch\\?v=|youtu\\.be\\/|youtube\\.com\\/embed\\/|youtube\\.com\\/v\\/|m\\.youtube\\.com\\/watch\\?v=)([a-zA-Z0-9_-]{11})/);\n return match ? match[1] : '';\n }\n\n /**\n * Gets video information (simulated - in real implementation would use YouTube API)\n */\n private static async getVideoInfo(url: string): Promise {\n const videoId = this.extractVideoId(url);\n \n // In a real implementation, you would use YouTube Data API v3\n // For demo purposes, we'll return mock data\n return {\n title: `Video ${videoId}`,\n duration: 180, // 3 minutes\n thumbnail: `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`,\n uploader: \"Demo Channel\"\n };\n }\n\n /**\n * Downloads video in MP4 format\n */\n private static async downloadVideo(url: string, videoInfo: VideoInfo): Promise {\n // Simulate download process\n await this.delay(2000);\n \n // In a real implementation, this would:\n // 1. Use yt-dlp to download the video\n // 2. Store it temporarily\n // 3. Return a download URL\n \n return {\n success: true,\n message: \"Video downloaded successfully\",\n filename: `${videoInfo.title}.mp4`,\n downloadUrl: `/api/download/video/${this.extractVideoId(url)}`\n };\n }\n\n /**\n * Downloads video and extracts audio in MP3 format\n */\n private static async downloadAudio(url: string, videoInfo: VideoInfo): Promise {\n // Simulate download and conversion process\n await this.delay(3000);\n \n // In a real implementation, this would:\n // 1. Use yt-dlp to download the video\n // 2. Extract audio using ffmpeg\n // 3. Convert to MP3\n // 4. Store it temporarily\n // 5. Return a download URL\n \n return {\n success: true,\n message: \"Audio extracted successfully\",\n filename: `${videoInfo.title}.mp3`,\n downloadUrl: `/api/download/audio/${this.extractVideoId(url)}`\n };\n }\n\n /**\n * Utility function to simulate async operations\n */\n private static delay(ms: number): Promise {\n return new Promise(resolve => setTimeout(resolve, ms));\n }\n}\n\n// Note: For a production implementation, you would need:\n// 1. A server with yt-dlp installed (Python environment)\n// 2. File storage system (local filesystem, cloud storage, etc.)\n// 3. YouTube Data API key for video metadata\n// 4. Proper error handling and rate limiting\n// 5. Cleanup of temporary files\n\n// Example yt-dlp command equivalents:\n// Video: yt-dlp -f \"bestvideo[ext=mp4][height<=720]+bestaudio[ext=m4a]/best[ext=mp4][height<=720]/best\" --merge-output-format mp4 [URL]\n// Audio: yt-dlp -f \"bestaudio[ext=m4a]/best\" --extract-audio --audio-format mp3 [URL]",[],[165,261,254],"services","c70c013c-444a-11f0-8331-76b3cceeab13",["D",1749374840547],[184],[165,261],"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;",[],[165,274,267],"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;",[],[165,274,276],"c70bf412-444a-11f0-8331-76b3cceeab13",["D",1749374840547],[181,182],[165,274],["D",1749374840547],[180,183,185],[165],["D",1749374840547],{"_99":98,"_106":102},{"_99":98,"_100":-5,"_101":102,"_18":54,"_103":104,"_105":48},{"_13":84,"_32":85,"_42":41,"_86":43,"_87":88,"_89":90,"_91":50,"_92":93,"_94":95,"_96":44,"_97":98},"ctx",{"_77":-5,"_128":326,"_327":328,"_329":330,"_331":48,"_332":48,"_333":48,"_334":25,"_335":-5,"_336":-7,"_337":-7,"_338":61,"_339":48,"_340":48,"_341":-5,"_342":48,"_343":48,"_344":48,"_345":-5},"ENV",{"_297":298,"_299":300,"_301":85,"_302":303,"_304":305,"_306":307,"_308":309,"_310":311,"_312":313,"_314":315,"_316":317,"_318":319,"_320":321,"_322":323,"_324":325},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","811aa22498c9b0b5a47e8d778de579cdb990f332","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"]

Diff · v5