import React, { useState, useEffect, useRef } from ‘react’;
import {
Download,
Link as LinkIcon,
Play,
Check,
AlertCircle,
FileVideo,
Music,
Clock,
Settings,
History,
X,
Loader2,
ChevronDown,
Github
} from ‘lucide-react’;
const App = () => {
const [activeTab, setActiveTab] = useState(‘downloader’);
return (
{activeTab === ‘downloader’ ?
);
};
const Navbar = ({ activeTab, setActiveTab }) => (
);
const Downloader = () => {
const [url, setUrl] = useState(”);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(”);
const [videoData, setVideoData] = useState(null);
const [downloading, setDownloading] = useState(false);
const [progress, setProgress] = useState(0);
// Parse YouTube ID from various URL formats
const getYoutubeId = (url) => {
const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/;
const match = url.match(regExp);
return (match && match[2].length === 11) ? match[2] : null;
};
const handleFetch = async (e) => {
e.preventDefault();
setError(”);
setVideoData(null);
if (!url.trim()) {
setError(‘Please enter a valid URL’);
return;
}
const videoId = getYoutubeId(url);
if (!videoId) {
setError(‘Invalid YouTube URL format. Please try again.’);
return;
}
setLoading(true);
// Simulate API delay
setTimeout(() => {
setVideoData({
id: videoId,
title: “Simulation: Amazing Nature Documentation – 4K HDR”,
author: “Nature Planet”,
duration: “12:45”,
thumbnail: `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`,
qualities: [
{ label: ‘1080p (MP4)’, size: ‘145.2 MB’, type: ‘video’ },
{ label: ‘720p (MP4)’, size: ‘89.5 MB’, type: ‘video’ },
{ label: ‘480p (MP4)’, size: ‘45.1 MB’, type: ‘video’ },
{ label: ‘320kbps (MP3)’, size: ‘12.8 MB’, type: ‘audio’ },
]
});
setLoading(false);
}, 1500);
};
const startDownload = (quality) => {
setDownloading(true);
setProgress(0);
// Simulate download progress
const interval = setInterval(() => {
setProgress((prev) => {
if (prev >= 100) {
clearInterval(interval);
setDownloading(false);
saveToHistory(videoData, quality);
return 100;
}
return prev + Math.random() * 10;
});
}, 300);
};
const saveToHistory = (video, quality) => {
const historyItem = {
id: Date.now(),
title: video.title,
thumbnail: video.thumbnail,
quality: quality.label,
date: new Date().toLocaleDateString(),
size: quality.size
};
const existing = JSON.parse(localStorage.getItem(‘downloadHistory’) || ‘[]’);
localStorage.setItem(‘downloadHistory’, JSON.stringify([historyItem, …existing]));
};
return (
);
const DownloadHistory = () => {
const [history, setHistory] = useState([]);
useEffect(() => {
const stored = localStorage.getItem(‘downloadHistory’);
if (stored) {
setHistory(JSON.parse(stored));
}
}, []);
const clearHistory = () => {
localStorage.removeItem(‘downloadHistory’);
setHistory([]);
};
if (history.length === 0) {
return (
{/* Hero Section */}
{/* Input Section */}
{/* Error Message */}
{error && (
);
};
const FeatureCard = ({ icon, title, desc }) => (
Download Videos Instantly
Paste a video link below to extract high-quality MP4 or MP3 files. Fast, free, and secure.
{error}
{/* Thumbnail */}
{/* Disclaimer for demo */}
{videoData.duration}
{videoData.title}
A {videoData.author}
Downloading…
{Math.round(progress)}%
Connecting to server… Processing stream…
{videoData.qualities.map((quality, idx) => (
))}
)}
Demo Mode: This is a frontend interface demonstration. Actual downloading requires a backend server to bypass CORS policies and handle stream processing. Clicking download simulates the process.
{icon}
{title}
{desc}
No downloads yet
Recent Downloads
{history.map((item) => (
))}
{item.title}
{item.quality}
{item.size}
•
{item.date}