/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React, { useState } from "https://esm.sh/react@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; function YouTubeDownloader() { const [videoUrl, setVideoUrl] = useState(''); const [downloadLink, setDownloadLink] = useState(''); const [error, setError] = useState(''); const [isLoading, setIsLoading] = useState(false); const [videoDetails, setVideoDetails] = useState(null); const handleDownload = async () => { setError(''); setDownloadLink(''); setVideoDetails(null); setIsLoading(true); try { const response = await fetch('/download', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ url: videoUrl }) }); if (!response.ok) { const errorText = await response.text(); throw new Error(errorText || 'Download failed'); } const result = await response.json(); setDownloadLink(result.downloadUrl); setVideoDetails(result.details); } catch (err) { setError(err.message || 'Unable to download video. Please check the URL.'); } finally { setIsLoading(false); } }; return (

🎥 YouTube Video Downloader

setVideoUrl(e.target.value)} />

{error &&

{error}

} {videoDetails && (

{videoDetails.title}

Channel: {videoDetails.uploader}

Duration: {videoDetails.duration} seconds

)} {downloadLink && (

📥 Download Video

)}

🔍 How to use:

Copy the full YouTube video URL
Paste the URL in the input field
Click "Download"

View Source

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { if (request.method === 'POST' && new URL(request.url).pathname === '/download') { try { const { url } = await request.json(); // Basic URL validation if (!url || !url.includes('youtube.com/watch')) { return new Response('Invalid YouTube URL', { status: 400 }); } // Fetch video details and download link via yt-dlp proxy const ytResponse = await fetch('https://yt-dlp-proxy.deno.dev/extract', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ url, format: 'best[ext=mp4]', extractInfo: true }) }); if (!ytResponse.ok) { return new Response('Failed to extract video', { status: 500 }); } const result = await ytResponse.json(); return new Response(JSON.stringify({ downloadUrl: result.url, details: { title: result.title, uploader: result.uploader, duration: result.duration, thumbnail: result.thumbnail } }), { headers: { 'Content-Type': 'application/json' } }); } catch (error) { return new Response('Download failed: ' + error.message, { status: 500 }); } } return new Response(` YouTube Video Downloader

`, { headers: { "content-type": "text/html", }, }); } const css = ` body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; background-color: #f9f9f9; padding: 20px; } .youtube-downloader { background-color: white; padding: 30px; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); width: 100%; max-width: 500px; text-align: center; } .input-container { display: flex; gap: 10px; margin-bottom: 20px; } input { flex-grow: 1; padding: 10px; border: 1px solid #ddd; border-radius: 4px; } button { background-color: #FF0000; color: white; border: none; padding: 10px 15px; border-radius: 4px; cursor: pointer; transition: background-color 0.3s; } button:disabled { background-color: #aaa; cursor: not-allowed; } button:hover:not(:disabled) { background-color: #CC0000; } .error { color: red; margin-bottom: 15px; } .video-details { display: flex; align-items: center; margin-bottom: 20px; background-color: #f1f1f1; padding: 15px; border-radius: 8px; } .thumbnail { width: 150px; height: 84px; object-fit: cover; margin-right: 15px; border-radius: 4px; } .details { text-align: left; } .details h2 { margin: 0 0 10px 0; font-size: 1.1em; } .details p { margin: 5px 0; color: #666; } .download-section { margin-top: 20px; } .download-link { display: inline-block; background-color: #FF0000; color: white; padding: 10px 15px; text-decoration: none; border-radius: 4px; } .instructions { background-color: #f8f9fa; padding: 15px; border-radius: 4px; margin-top: 20px; text-align: left; } .instructions ol { padding-left: 20px; } .source-link { display: block; margin-top: 15px; color: #6c757d; text-decoration: none; font-size: 0.8em; } `;

understandingLavenderTiger

Versions

v0