phishy/downlink
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

initial commit

Browse Source
This commit is contained in:
Jeff Loiselle
2025-12-21 11:43:22 -06:00
parent 1f7eb01afb
commit d28de69bcb
28 changed files with 4067 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
app/api/download/route.ts Normal file
View File

@@ -0,0 +1,39 @@
import { NextRequest, NextResponse } from 'next/server';
import { downloadVideo } from '@/lib/youtube';
import { isValidYouTubeUrl } from '@/lib/utils';
import type { DownloadRequest } from '@/lib/types';
export async function POST(request: NextRequest) {
try {
const body: DownloadRequest = await request.json();
if (!body.url || !body.format || !body.formatType) {
return NextResponse.json(
{ success: false, error: 'Missing required fields' },
{ status: 400 }
);
}
// Validate YouTube URL
if (!isValidYouTubeUrl(body.url)) {
return NextResponse.json(
{ success: false, error: 'Invalid YouTube URL' },
{ status: 400 }
);
}
const result = await downloadVideo(body);
if (!result.success) {
return NextResponse.json(result, { status: 500 });
}
return NextResponse.json(result);
} catch (error: any) {
console.error('API error:', error);
return NextResponse.json(
{ success: false, error: error.message || 'Internal server error' },
{ status: 500 }
);
}
}

42
app/api/info/route.ts Normal file
View File

@@ -0,0 +1,42 @@
import { NextRequest, NextResponse } from 'next/server';
import { getVideoInfo } from '@/lib/youtube';
import { isValidYouTubeUrl } from '@/lib/utils';
export async function POST(request: NextRequest) {
try {
const body = await request.json();
const { url } = body;
if (!url) {
return NextResponse.json(
{ success: false, error: 'URL is required' },
{ status: 400 }
);
}
// Validate YouTube URL
if (!isValidYouTubeUrl(url)) {
return NextResponse.json(
{ success: false, error: 'Invalid YouTube URL' },
{ status: 400 }
);
}
const videoInfo = await getVideoInfo(url);
if (!videoInfo) {
return NextResponse.json(
{ success: false, error: 'Failed to get video info' },
{ status: 500 }
);
}
return NextResponse.json({ success: true, videoInfo });
} catch (error: any) {
console.error('API error:', error);
return NextResponse.json(
{ success: false, error: error.message || 'Internal server error' },
{ status: 500 }
);
}
}

351
app/globals.css
View File

@@ -1,26 +1,353 @@
@import "tailwindcss";
@import "tw-animate-css";
:root {
--background: #ffffff;
--foreground: #171717;
}
@custom-variant dark (&:is(.dark *));
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--font-sans: var(--font-geist-sans);
--font-mono: var(--font-geist-mono);
--color-sidebar-ring: var(--sidebar-ring);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-accent: var(--sidebar-accent);
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
--color-sidebar-primary: var(--sidebar-primary);
--color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar: var(--sidebar);
--color-chart-5: var(--chart-5);
--color-chart-4: var(--chart-4);
--color-chart-3: var(--chart-3);
--color-chart-2: var(--chart-2);
--color-chart-1: var(--chart-1);
--color-ring: var(--ring);
--color-input: var(--input);
--color-border: var(--border);
--color-destructive: var(--destructive);
--color-accent-foreground: var(--accent-foreground);
--color-accent: var(--accent);
--color-muted-foreground: var(--muted-foreground);
--color-muted: var(--muted);
--color-secondary-foreground: var(--secondary-foreground);
--color-secondary: var(--secondary);
--color-primary-foreground: var(--primary-foreground);
--color-primary: var(--primary);
--color-popover-foreground: var(--popover-foreground);
--color-popover: var(--popover);
--color-card-foreground: var(--card-foreground);
--color-card: var(--card);
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
--radius-2xl: calc(var(--radius) + 8px);
--radius-3xl: calc(var(--radius) + 12px);
--radius-4xl: calc(var(--radius) + 16px);
}
@media (prefers-color-scheme: dark) {
:root {
--background: #0a0a0a;
--foreground: #ededed;
:root {
--radius: 0.75rem;
--background: oklch(0.98 0 0);
--foreground: oklch(0.145 0 0);
--card: oklch(1 0 0 / 0.8);
--card-foreground: oklch(0.145 0 0);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.145 0 0);
--primary: oklch(0.6 0.25 280);
--primary-foreground: oklch(0.985 0 0);
--secondary: oklch(0.97 0 0);
--secondary-foreground: oklch(0.205 0 0);
--muted: oklch(0.97 0 0);
--muted-foreground: oklch(0.556 0 0);
--accent: oklch(0.97 0 0);
--accent-foreground: oklch(0.205 0 0);
--destructive: oklch(0.577 0.245 27.325);
--border: oklch(0.922 0 0);
--input: oklch(0.922 0 0);
--ring: oklch(0.6 0.25 280);
--chart-1: oklch(0.646 0.222 41.116);
--chart-2: oklch(0.6 0.118 184.704);
--chart-3: oklch(0.398 0.07 227.392);
--chart-4: oklch(0.828 0.189 84.429);
--chart-5: oklch(0.769 0.188 70.08);
--sidebar: oklch(0.985 0 0);
--sidebar-foreground: oklch(0.145 0 0);
--sidebar-primary: oklch(0.205 0 0);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.97 0 0);
--sidebar-accent-foreground: oklch(0.205 0 0);
--sidebar-border: oklch(0.922 0 0);
--sidebar-ring: oklch(0.708 0 0);
}
.dark {
--background: oklch(0.06 0.015 280);
--foreground: oklch(0.95 0.01 280);
--card: oklch(0.12 0.02 280 / 0.6);
--card-foreground: oklch(0.95 0.01 280);
--popover: oklch(0.12 0.02 280 / 0.95);
--popover-foreground: oklch(0.95 0.01 280);
--primary: oklch(0.72 0.22 280);
--primary-foreground: oklch(0.98 0 0);
--secondary: oklch(0.16 0.03 280);
--secondary-foreground: oklch(0.95 0.01 280);
--muted: oklch(0.14 0.02 280);
--muted-foreground: oklch(0.60 0.03 280);
--accent: oklch(0.18 0.04 300);
--accent-foreground: oklch(0.95 0.01 280);
--destructive: oklch(0.60 0.22 25);
--border: oklch(0.25 0.04 280 / 0.4);
--input: oklch(0.14 0.02 280);
--ring: oklch(0.72 0.22 280);
--chart-1: oklch(0.72 0.22 280);
--chart-2: oklch(0.68 0.18 320);
--chart-3: oklch(0.62 0.20 200);
--chart-4: oklch(0.65 0.16 350);
--chart-5: oklch(0.70 0.18 40);
--sidebar: oklch(0.10 0.015 280);
--sidebar-foreground: oklch(0.95 0.01 280);
--sidebar-primary: oklch(0.72 0.22 280);
--sidebar-primary-foreground: oklch(0.98 0 0);
--sidebar-accent: oklch(0.14 0.02 280);
--sidebar-accent-foreground: oklch(0.95 0.01 280);
--sidebar-border: oklch(0.20 0.03 280 / 0.3);
--sidebar-ring: oklch(0.72 0.22 280);
}
/* Keyframe Animations */
@keyframes gradient-shift {
0%, 100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
body {
background: var(--background);
color: var(--foreground);
font-family: Arial, Helvetica, sans-serif;
@keyframes float {
0%, 100% {
transform: translateY(0) rotate(0deg);
}
50% {
transform: translateY(-20px) rotate(2deg);
}
}
@keyframes pulse-glow {
0%, 100% {
opacity: 0.4;
transform: scale(1);
}
50% {
opacity: 0.7;
transform: scale(1.05);
}
}
@keyframes slide-up {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes shimmer {
0% {
background-position: -200% 0;
}
100% {
background-position: 200% 0;
}
}
@layer base {
* {
@apply border-border outline-ring/50;
}
body {
@apply bg-background text-foreground;
min-height: 100vh;
overflow-x: hidden;
}
}
@layer components {
/* Animated gradient background */
.animated-bg {
position: fixed;
inset: 0;
z-index: -1;
background:
radial-gradient(ellipse 80% 50% at 20% 40%, oklch(0.25 0.15 280 / 0.3) 0%, transparent 50%),
radial-gradient(ellipse 60% 40% at 80% 60%, oklch(0.20 0.12 320 / 0.25) 0%, transparent 50%),
radial-gradient(ellipse 50% 30% at 50% 90%, oklch(0.18 0.10 260 / 0.2) 0%, transparent 50%);
animation: pulse-glow 8s ease-in-out infinite;
}
/* Floating orbs */
.floating-orb {
position: absolute;
border-radius: 50%;
filter: blur(60px);
animation: float 12s ease-in-out infinite;
pointer-events: none;
}
.floating-orb-1 {
width: 400px;
height: 400px;
background: oklch(0.50 0.20 280 / 0.15);
top: -100px;
left: -100px;
animation-delay: 0s;
}
.floating-orb-2 {
width: 350px;
height: 350px;
background: oklch(0.45 0.18 320 / 0.12);
bottom: -50px;
right: -50px;
animation-delay: -4s;
}
.floating-orb-3 {
width: 250px;
height: 250px;
background: oklch(0.55 0.15 260 / 0.1);
top: 40%;
right: 20%;
animation-delay: -8s;
}
/* Glass card effect */
.glass-card {
background: oklch(0.12 0.02 280 / 0.4);
backdrop-filter: blur(20px) saturate(1.5);
-webkit-backdrop-filter: blur(20px) saturate(1.5);
border: 1px solid oklch(0.40 0.08 280 / 0.15);
box-shadow:
0 8px 32px oklch(0 0 0 / 0.3),
inset 0 1px 0 oklch(1 0 0 / 0.05);
}
.glass-card:hover {
border-color: oklch(0.55 0.15 280 / 0.3);
box-shadow:
0 12px 40px oklch(0.50 0.20 280 / 0.15),
inset 0 1px 0 oklch(1 0 0 / 0.08);
}
/* Gradient text */
.gradient-text {
background: linear-gradient(135deg,
oklch(0.85 0.18 280) 0%,
oklch(0.75 0.22 300) 50%,
oklch(0.70 0.20 260) 100%
);
background-size: 200% 200%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: gradient-shift 6s ease infinite;
}
/* Shimmer effect for loading */
.shimmer {
background: linear-gradient(
90deg,
oklch(0.20 0.03 280 / 0) 0%,
oklch(0.30 0.05 280 / 0.3) 50%,
oklch(0.20 0.03 280 / 0) 100%
);
background-size: 200% 100%;
animation: shimmer 2s ease-in-out infinite;
}
/* Glow button */
.glow-button {
position: relative;
background: linear-gradient(135deg, oklch(0.65 0.22 280), oklch(0.55 0.20 300));
box-shadow:
0 4px 20px oklch(0.50 0.20 280 / 0.4),
inset 0 1px 0 oklch(1 0 0 / 0.15);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.glow-button:hover {
transform: translateY(-2px);
box-shadow:
0 8px 30px oklch(0.55 0.22 280 / 0.5),
inset 0 1px 0 oklch(1 0 0 / 0.2);
}
.glow-button:active {
transform: translateY(0);
}
/* Slide up animation for cards */
.slide-up {
animation: slide-up 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.slide-up-delay-1 { animation-delay: 0.1s; opacity: 0; }
.slide-up-delay-2 { animation-delay: 0.2s; opacity: 0; }
.slide-up-delay-3 { animation-delay: 0.3s; opacity: 0; }
/* Input glow */
.input-glow {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.input-glow:focus {
box-shadow:
0 0 0 3px oklch(0.60 0.20 280 / 0.2),
0 4px 20px oklch(0.50 0.18 280 / 0.15);
}
/* Thumbnail hover effect */
.thumbnail-container {
position: relative;
overflow: hidden;
}
.thumbnail-container::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
to top,
oklch(0 0 0 / 0.6) 0%,
oklch(0 0 0 / 0) 50%
);
opacity: 0;
transition: opacity 0.3s ease;
}
.thumbnail-container:hover::after {
opacity: 1;
}
.thumbnail-container img {
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.thumbnail-container:hover img {
transform: scale(1.05);
}
/* Success card glow */
.success-glow {
background: oklch(0.15 0.08 150 / 0.3);
border-color: oklch(0.60 0.20 150 / 0.4);
box-shadow:
0 8px 32px oklch(0.50 0.18 150 / 0.15),
inset 0 1px 0 oklch(0.70 0.15 150 / 0.1);
}
}

6
app/layout.tsx
View File

@@ -13,8 +13,8 @@ const geistMono = Geist_Mono({
});
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
title: "Downlink - YouTube Downloader",
description: "Download YouTube videos and audio in your preferred format",
};
export default function RootLayout({
@@ -23,7 +23,7 @@ export default function RootLayout({
children: React.ReactNode;
}>) {
return (
<html lang="en">
<html lang="en" className="dark">
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>

380
app/page.tsx
View File

@@ -1,65 +1,335 @@
import Image from "next/image";
'use client';
import { useState } from 'react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Label } from '@/components/ui/label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Download, Loader2, Play, Music, Sparkles, Zap, Check } from 'lucide-react';
import { isValidYouTubeUrl } from '@/lib/utils';
import type { VideoInfo, DownloadResponse, VideoFormat, AudioFormat } from '@/lib/types';
export default function Home() {
const [url, setUrl] = useState('');
const [loading, setLoading] = useState(false);
const [videoInfo, setVideoInfo] = useState<VideoInfo | null>(null);
const [videoFormat, setVideoFormat] = useState<VideoFormat>('mp4');
const [audioFormat, setAudioFormat] = useState<AudioFormat>('mp3');
const [formatType, setFormatType] = useState<'video' | 'audio'>('video');
const [downloadResult, setDownloadResult] = useState<DownloadResponse | null>(null);
const [error, setError] = useState<string | null>(null);
const handleGetInfo = async () => {
if (!url.trim()) {
setError('Please enter a YouTube URL');
return;
}
if (!isValidYouTubeUrl(url)) {
setError('Please enter a valid YouTube URL');
return;
}
setLoading(true);
setError(null);
setVideoInfo(null);
setDownloadResult(null);
try {
const response = await fetch('/api/info', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ url }),
});
const data = await response.json();
if (data.success && data.videoInfo) {
setVideoInfo(data.videoInfo);
} else {
setError(data.error || 'Failed to get video information');
}
} catch (err: any) {
setError(err.message || 'Failed to fetch video info');
} finally {
setLoading(false);
}
};
const handleDownload = async () => {
if (!url.trim()) {
setError('Please enter a YouTube URL');
return;
}
if (!isValidYouTubeUrl(url)) {
setError('Please enter a valid YouTube URL');
return;
}
setLoading(true);
setError(null);
setDownloadResult(null);
try {
const response = await fetch('/api/download', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
url,
format: formatType === 'video' ? videoFormat : audioFormat,
formatType,
}),
});
const data: DownloadResponse = await response.json();
if (data.success) {
setDownloadResult(data);
if (data.videoInfo) {
setVideoInfo(data.videoInfo);
}
} else {
setError(data.error || 'Failed to download video');
}
} catch (err: any) {
setError(err.message || 'Failed to download video');
} finally {
setLoading(false);
}
};
const formatDuration = (seconds: number) => {
const mins = Math.floor(seconds / 60);
const secs = Math.floor(seconds % 60);
return `${mins}:${secs.toString().padStart(2, '0')}`;
};
return (
<div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
<main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
<Image
className="dark:invert"
src="/next.svg"
alt="Next.js logo"
width={100}
height={20}
priority
/>
<div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
<h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
To get started, edit the page.tsx file.
<div className="min-h-screen relative">
{/* Animated background */}
<div className="animated-bg" />
<div className="floating-orb floating-orb-1" />
<div className="floating-orb floating-orb-2" />
<div className="floating-orb floating-orb-3" />
<div className="container mx-auto px-4 py-12 md:py-20 max-w-2xl relative z-10">
{/* Header */}
<div className="text-center mb-10 md:mb-14 slide-up">
<div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-primary/10 border border-primary/20 text-primary text-sm font-medium mb-6">
<Sparkles className="w-4 h-4" />
Fast & Free Downloads
</div>
<h1 className="text-4xl md:text-6xl font-bold mb-4 gradient-text tracking-tight">
Downlink
</h1>
<p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
Looking for a starting point or more instructions? Head over to{" "}
<a
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
className="font-medium text-zinc-950 dark:text-zinc-50"
>
Templates
</a>{" "}
or the{" "}
<a
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
className="font-medium text-zinc-950 dark:text-zinc-50"
>
Learning
</a>{" "}
center.
<p className="text-muted-foreground text-base md:text-lg max-w-md mx-auto">
Download YouTube videos and audio in any format. No limits, no ads, just downloads.
</p>
</div>
<div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
<a
className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
className="dark:invert"
src="/vercel.svg"
alt="Vercel logomark"
width={16}
height={16}
/>
Deploy Now
</a>
<a
className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
Documentation
</a>
{/* URL Input Card */}
<Card className="mb-6 glass-card slide-up slide-up-delay-1 border-0">
<CardContent className="pt-6 pb-6">
<div className="flex flex-col sm:flex-row gap-3">
<div className="flex-1 relative">
<Input
type="url"
placeholder="Paste YouTube URL here..."
value={url}
onChange={(e) => setUrl(e.target.value)}
onKeyDown={(e) => {
if (e.key === 'Enter' && !loading) {
handleGetInfo();
}
}}
className="h-12 px-4 text-base bg-background/50 border-white/10 input-glow rounded-xl placeholder:text-muted-foreground/50"
/>
</div>
<Button
onClick={handleGetInfo}
disabled={loading}
className="h-12 px-6 glow-button text-white border-0 rounded-xl font-medium"
>
{loading ? (
<Loader2 className="h-5 w-5 animate-spin" />
) : (
<>
<Zap className="h-4 w-4 mr-2" />
Fetch
</>
)}
</Button>
</div>
</CardContent>
</Card>
{/* Error Display */}
{error && (
<Card className="mb-6 slide-up border-destructive/30 bg-destructive/10 backdrop-blur-xl">
<CardContent className="py-4">
<p className="text-destructive text-sm font-medium text-center">{error}</p>
</CardContent>
</Card>
)}
{/* Video Info Card */}
{videoInfo && (
<Card className="mb-6 glass-card slide-up slide-up-delay-2 border-0 overflow-hidden">
<CardContent className="p-0">
{videoInfo.thumbnail && (
<div className="thumbnail-container aspect-video w-full bg-muted">
<img
src={videoInfo.thumbnail}
alt={videoInfo.title}
className="w-full h-full object-cover"
/>
</div>
)}
<div className="p-5">
<h3 className="font-semibold text-base md:text-lg mb-2 line-clamp-2 leading-snug">
{videoInfo.title}
</h3>
<div className="flex items-center gap-3 text-sm text-muted-foreground">
<span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-primary/10 text-primary text-xs font-medium">
<Play className="w-3 h-3" />
{formatDuration(videoInfo.duration)}
</span>
</div>
</div>
</CardContent>
</Card>
)}
{/* Download Options Card */}
{videoInfo && (
<Card className="mb-6 glass-card slide-up slide-up-delay-3 border-0">
<CardHeader className="pb-4">
<CardTitle className="text-lg font-semibold">Download Options</CardTitle>
<CardDescription>
Choose your format and quality
</CardDescription>
</CardHeader>
<CardContent className="space-y-5">
{/* Format Type Toggle */}
<div className="grid grid-cols-2 gap-2 p-1 bg-background/30 rounded-xl">
<button
onClick={() => setFormatType('video')}
className={`flex items-center justify-center gap-2 py-2.5 px-4 rounded-lg text-sm font-medium transition-all ${
formatType === 'video'
? 'bg-primary text-white shadow-lg shadow-primary/25'
: 'text-muted-foreground hover:text-foreground hover:bg-white/5'
}`}
>
<Play className="h-4 w-4" />
Video
</button>
<button
onClick={() => setFormatType('audio')}
className={`flex items-center justify-center gap-2 py-2.5 px-4 rounded-lg text-sm font-medium transition-all ${
formatType === 'audio'
? 'bg-primary text-white shadow-lg shadow-primary/25'
: 'text-muted-foreground hover:text-foreground hover:bg-white/5'
}`}
>
<Music className="h-4 w-4" />
Audio
</button>
</div>
{/* Format Selection */}
<div className="space-y-2">
<Label className="text-sm text-muted-foreground">
{formatType === 'video' ? 'Video Format' : 'Audio Format'}
</Label>
{formatType === 'video' ? (
<Select
value={videoFormat}
onValueChange={(value: VideoFormat) => setVideoFormat(value)}
>
<SelectTrigger className="h-11 bg-background/50 border-white/10 rounded-xl">
<SelectValue />
</SelectTrigger>
<SelectContent className="glass-card border-white/10">
<SelectItem value="mp4">MP4 (Recommended)</SelectItem>
<SelectItem value="webm">WebM</SelectItem>
<SelectItem value="mkv">MKV</SelectItem>
<SelectItem value="avi">AVI</SelectItem>
</SelectContent>
</Select>
) : (
<Select
value={audioFormat}
onValueChange={(value: AudioFormat) => setAudioFormat(value)}
>
<SelectTrigger className="h-11 bg-background/50 border-white/10 rounded-xl">
<SelectValue />
</SelectTrigger>
<SelectContent className="glass-card border-white/10">
<SelectItem value="mp3">MP3 (Recommended)</SelectItem>
<SelectItem value="m4a">M4A</SelectItem>
<SelectItem value="wav">WAV</SelectItem>
<SelectItem value="opus">Opus</SelectItem>
</SelectContent>
</Select>
)}
</div>
{/* Download Button */}
<Button
onClick={handleDownload}
disabled={loading}
className="w-full h-12 glow-button text-white border-0 rounded-xl font-medium text-base"
>
{loading ? (
<>
<Loader2 className="mr-2 h-5 w-5 animate-spin" />
Processing...
</>
) : (
<>
<Download className="mr-2 h-5 w-5" />
Download {formatType === 'video' ? videoFormat.toUpperCase() : audioFormat.toUpperCase()}
</>
)}
</Button>
</CardContent>
</Card>
)}
{/* Success Card */}
{downloadResult?.success && downloadResult.downloadUrl && (
<Card className="slide-up success-glow backdrop-blur-xl border-0">
<CardContent className="py-6">
<div className="flex items-center gap-3 mb-4">
<div className="w-10 h-10 rounded-full bg-green-500/20 flex items-center justify-center">
<Check className="w-5 h-5 text-green-400" />
</div>
<div>
<h3 className="font-semibold text-green-400">Ready to Download</h3>
<p className="text-sm text-muted-foreground">Your file has been prepared</p>
</div>
</div>
<a
href={downloadResult.downloadUrl}
download={downloadResult.filename}
className="block"
>
<Button className="w-full h-12 bg-green-600 hover:bg-green-500 text-white border-0 rounded-xl font-medium text-base shadow-lg shadow-green-600/25 transition-all hover:shadow-green-500/30 hover:-translate-y-0.5">
<Download className="mr-2 h-5 w-5" />
Save File
</Button>
</a>
</CardContent>
</Card>
)}
{/* Footer */}
<div className="text-center mt-12 text-sm text-muted-foreground/60">
<p>Free and open source. No tracking, no ads.</p>
</div>
</main>
</div>
</div>
);
}