\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}",[],[221,228,235],{"_104":243,"_95":244,"_152":245,"_154":229,"_155":138,"_156":230,"_158":159,"_106":246,"_100":32,"_161":180,"_163":247,"_164":22,"_165":-5,"_166":248,"_98":249},"f38e05f0-37db-11f0-a181-9e149126039e","DownloadForm.tsx","f38e0690-37db-11f0-a181-9e149126039e",["D",1748007827195],"/** @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}",[],[221,228,244],[221,228],{"_104":252,"_95":253,"_152":254,"_154":222,"_155":138,"_156":223,"_158":159,"_106":255,"_100":32,"_161":256,"_163":257,"_164":22,"_165":-5,"_166":258,"_98":259},"e50a801c-37db-11f0-b9a0-9e149126039e","index.html","e50a80d0-37db-11f0-b9a0-9e149126039e",["D",1748007802845],"file","\n\n\n \n \n YouTube Video Downloader\n \n \n \n\n\n

\n \n \n\n",[],[221,253],{"_104":261,"_95":262,"_152":263,"_154":222,"_155":138,"_156":101,"_158":159,"_106":264,"_100":32,"_161":180,"_163":265,"_164":22,"_165":-5,"_166":266,"_98":267},"04f52814-37dc-11f0-b629-9e149126039e","index.tsx","04f528e6-37dc-11f0-b629-9e149126039e",["D",1748007856394],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client?deps=react@18.2.0,react-dom@18.2.0\";\nimport App from \"./components/App.tsx\";\n\n// Get the root element\nconst rootElement = document.getElementById(\"root\");\n\nif (!rootElement) {\n throw new Error(\"Root element not found\");\n}\n\n// Create and render the React app\nconst root = createRoot(rootElement);\nroot.render();",[],[221,262],[221],{"_104":270,"_95":271,"_152":272,"_154":-5,"_155":138,"_156":273,"_158":159,"_106":274,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":275,"_98":284},"c17e054c-37db-11f0-b4f8-9e149126039e","shared","5feaede7-fe17-4f1d-84a7-091cc4f37e8b",2,["D",1748007743206],[276],{"_104":277,"_95":278,"_152":279,"_154":272,"_155":138,"_156":273,"_158":159,"_106":280,"_100":32,"_161":180,"_163":281,"_164":22,"_165":-5,"_166":282,"_98":283},"c17dea94-37db-11f0-b4f8-9e149126039e","types.ts","c17deb48-37db-11f0-b4f8-9e149126039e",["D",1748007743206],"export interface DownloadRequest {\n url: string;\n type: 'video' | 'audio';\n}\n\nexport interface DownloadResponse {\n success: boolean;\n message: string;\n downloadUrl?: string;\n filename?: string;\n error?: string;\n}\n\nexport interface VideoInfo {\n title: string;\n duration: number;\n thumbnail: string;\n uploader: string;\n}\n\nexport interface DownloadProgress {\n status: 'pending' | 'downloading' | 'processing' | 'completed' | 'error';\n progress: number;\n message: string;\n}",[],[271,278],[271],{"_104":286,"_95":287,"_152":288,"_154":-5,"_155":138,"_156":289,"_158":159,"_106":290,"_100":32,"_161":256,"_163":291,"_164":22,"_165":-5,"_166":292,"_98":293},"be8bc022-37db-11f0-b6f1-9e149126039e","README.md","be8bc0c2-37db-11f0-b6f1-9e149126039e",1,["D",1748007738262],"# YouTube Video Downloader\n\nA web application for downloading YouTube videos and extracting audio using yt-dlp.\n\n## Features\n\n- Download YouTube videos in highest quality available\n- Extract audio from YouTube videos\n- Clean, responsive web interface\n- Progress tracking for downloads\n- Support for YouTube URLs and video IDs\n\n## Project Structure\n\n```\n├── backend/\n│ ├── index.ts # Main Hono server\n│ ├── routes/\n│ │ ├── download.ts # Download API endpoints\n│ │ └── static.ts # Static file serving\n│ └── services/\n│ └── youtube.ts # YouTube download service\n├── frontend/\n│ ├── index.html # Main HTML template\n│ ├── index.tsx # React frontend\n│ └── components/\n│ ├── App.tsx # Main app component\n│ └── DownloadForm.tsx # Download form component\n└── shared/\n └── types.ts # Shared TypeScript types\n```\n\n## Usage\n\n1. Enter a YouTube URL or video ID\n2. Choose download type:\n - Video: Downloads the full video in MP4 format\n - Audio: Downloads video and extracts audio in MP3 format\n3. Click download and wait for processing\n\n## Technical Notes\n\n- Uses yt-dlp for video processing\n- Downloads are processed server-side\n- Supports highest quality available (up to 720p for reasonable file sizes)\n- Audio extraction uses MP3 format for compatibility",[],[287],"files",[150,168,175,184,194,200,209,219,226,233,242,251,260,269,276,285],"counts",{"_298":32,"_299":289,"_300":289,"_301":32},"pulls","branches","forks","envVars","contents",[304,307,310],{"_104":169,"_95":170,"_152":171,"_154":153,"_155":138,"_156":172,"_158":159,"_106":305,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_98":306},["D",1748007778882],[99,170],{"_104":195,"_95":196,"_152":197,"_154":153,"_155":138,"_156":157,"_158":159,"_106":308,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_98":309},["D",1748007765664],[99,196],{"_104":210,"_95":211,"_152":212,"_154":153,"_155":138,"_156":213,"_158":22,"_106":311,"_100":32,"_161":180,"_163":215,"_164":22,"_165":-5,"_98":312},["D",1748007794973],[99,211],{"_104":151,"_95":99,"_152":153,"_154":-5,"_155":138,"_156":157,"_158":159,"_106":314,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_98":315},["D",1748007765664],[99],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_93":94,"_95":96,"_97":43,"_100":101,"_98":99,"_102":324,"_148":329,"_294":378,"_256":379,"_302":381,"_388":-5,"_389":22,"_390":-5,"_391":-5,"_392":-5,"_393":394},{"_104":105,"_95":96,"_106":325,"_108":-5,"_109":22,"_110":111,"_112":-5,"_113":-5,"_14":114,"_115":-5,"_116":22,"_117":-5,"_118":32,"_16":119,"_120":121,"_122":121,"_123":124,"_125":124,"_126":124,"_127":121,"_128":121,"_23":326,"_132":327,"_135":328,"_147":22},["D",1748007719652],{"_93":94,"_130":131},{"_93":94,"_134":131},{"_100":137,"_95":43,"_104":138,"_139":105,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":-5,"_145":96,"_146":94},[330,351,369,375],{"_104":151,"_95":99,"_152":153,"_154":-5,"_155":138,"_156":157,"_158":159,"_106":160,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":331,"_98":350},[332,341,347],{"_104":169,"_95":170,"_152":171,"_154":153,"_155":138,"_156":172,"_158":159,"_106":173,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":333,"_98":340},[334,337],{"_104":176,"_95":177,"_152":178,"_154":171,"_155":138,"_156":172,"_158":159,"_106":179,"_100":32,"_161":180,"_163":181,"_164":22,"_165":-5,"_166":335,"_98":336},[],[99,170,177],{"_104":185,"_95":186,"_152":187,"_154":171,"_155":138,"_156":188,"_158":159,"_106":189,"_100":32,"_161":180,"_163":190,"_164":22,"_165":-5,"_166":338,"_98":339},[],[99,170,186],[99,170],{"_104":195,"_95":196,"_152":197,"_154":153,"_155":138,"_156":157,"_158":159,"_106":198,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":342,"_98":346},[343],{"_104":201,"_95":202,"_152":203,"_154":197,"_155":138,"_156":157,"_158":22,"_106":204,"_100":32,"_161":180,"_163":205,"_164":22,"_165":-5,"_166":344,"_98":345},[],[99,196,202],[99,196],{"_104":210,"_95":211,"_152":212,"_154":153,"_155":138,"_156":213,"_158":22,"_106":214,"_100":32,"_161":180,"_163":215,"_164":22,"_165":-5,"_166":348,"_98":349},[],[99,211],[99],{"_104":220,"_95":221,"_152":222,"_154":-5,"_155":138,"_156":223,"_158":159,"_106":224,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":352,"_98":368},[353,362,365],{"_104":227,"_95":228,"_152":229,"_154":222,"_155":138,"_156":230,"_158":159,"_106":231,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":354,"_98":361},[355,358],{"_104":234,"_95":235,"_152":236,"_154":229,"_155":138,"_156":237,"_158":159,"_106":238,"_100":32,"_161":180,"_163":239,"_164":22,"_165":-5,"_166":356,"_98":357},[],[221,228,235],{"_104":243,"_95":244,"_152":245,"_154":229,"_155":138,"_156":230,"_158":159,"_106":246,"_100":32,"_161":180,"_163":247,"_164":22,"_165":-5,"_166":359,"_98":360},[],[221,228,244],[221,228],{"_104":252,"_95":253,"_152":254,"_154":222,"_155":138,"_156":223,"_158":159,"_106":255,"_100":32,"_161":256,"_163":257,"_164":22,"_165":-5,"_166":363,"_98":364},[],[221,253],{"_104":261,"_95":262,"_152":263,"_154":222,"_155":138,"_156":101,"_158":159,"_106":264,"_100":32,"_161":180,"_163":265,"_164":22,"_165":-5,"_166":366,"_98":367},[],[221,262],[221],{"_104":270,"_95":271,"_152":272,"_154":-5,"_155":138,"_156":273,"_158":159,"_106":274,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":370,"_98":374},[371],{"_104":277,"_95":278,"_152":279,"_154":272,"_155":138,"_156":273,"_158":159,"_106":280,"_100":32,"_161":180,"_163":281,"_164":22,"_165":-5,"_166":372,"_98":373},[],[271,278],[271],{"_104":286,"_95":287,"_152":288,"_154":-5,"_155":138,"_156":289,"_158":159,"_106":290,"_100":32,"_161":256,"_163":291,"_164":22,"_165":-5,"_166":376,"_98":377},[],[287],[330,332,334,337,341,343,347,351,353,355,358,362,365,369,371,375],{"_104":151,"_95":99,"_152":153,"_154":-5,"_155":138,"_156":157,"_158":159,"_106":314,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_98":380},[99],[382,384,386],{"_104":169,"_95":170,"_152":171,"_154":153,"_155":138,"_156":172,"_158":159,"_106":305,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_98":383},[99,170],{"_104":195,"_95":196,"_152":197,"_154":153,"_155":138,"_156":157,"_158":159,"_106":308,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_98":385},[99,196],{"_104":210,"_95":211,"_152":212,"_154":153,"_155":138,"_156":213,"_158":22,"_106":311,"_100":32,"_161":180,"_163":215,"_164":22,"_165":-5,"_98":387},[99,211],"upstream","showCompareCallout","pull","ahead","behind","templates",[],"actionData","errors"]

tiagovasc

YoutubeDownloader