YouTube Video Downloader App

I'll create a Next.js application that allows users to download YouTube videos in multiple qualities by simply entering a YouTube URL. This app will use the yt-dlp library as the backend for video downloading.

How It Works

This YouTube video downloader app uses yt-dlp as the backend to fetch video information and download videos in various formats. Here's how it works:

1. User Interface: The app provides a clean interface where users can:

   • Enter a YouTube URL
   • View video information (title, thumbnail, channel, duration)
   • Select from available quality options
   • Download the video in their chosen format

2. Backend Processing:

   • The app uses Next.js Server Actions to communicate with yt-dlp
   • When a URL is submitted, it first fetches video metadata using yt-dlp
   • When a download is requested, it downloads the video in the selected format
   • Files are temporarily stored on the server and served via an API route

3. Features:

   • Support for multiple video qualities and formats
   • Audio-only download options
   • Clean, responsive UI
   • Error handling for invalid URLs or download issues

Setup Instructions

To run this application, you'll need:

1. Install yt-dlp: Make sure yt-dlp is installed on your server and available in the PATH.

   # On Linux/macOS pip install yt-dlp # On Windows pip install yt-dlp

2. Clone and install the Next.js app:

   npm install npm run dev

3. Create a tmp directory: The app needs a directory to store temporary files:

   mkdir tmp

Important Notes

1. This implementation assumes yt-dlp is installed and accessible from the command line.
2. The app creates temporary files that should be cleaned up periodically.
3. For production use, you might want to add authentication and rate limiting.
4. Be aware of YouTube's terms of service regarding video downloads.

YouTube Video Downloader - Revised Solution

I need to revise the approach since we can't use Node.js's child_process module directly in the browser environment. Let's create a browser-compatible version that simulates the yt-dlp functionality through API routes.

How This Revised Solution Works

I've completely revised the approach to make it compatible with the browser environment. Here's what changed:

Key Changes:

1. Removed child_process dependency: The original code used Node.js's child_process module to spawn yt-dlp processes, which isn't available in the browser.

2. Client-Server Architecture:

   • Created client-side API functions in lib/api.ts that communicate with server endpoints
   • Added API routes that would handle the actual yt-dlp operations on a real server

3. Mock Implementation:

   • Since we can't actually run yt-dlp in this environment, I've created mock API endpoints that simulate the behavior
   • The /api/video-info route returns mock video data
   • The /api/download-video route simulates a download process
   • The /api/mock-download route returns a text file explaining this is a demo

How to Use:

1. Enter a YouTube URL in the input field
2. Click "Get Video" to fetch video information
3. Select a quality/format from the dropdown
4. Click "Download" to download the video (in this demo, you'll get a text file)

Real Implementation Notes:

In a real production environment, you would:

1. Install yt-dlp on your server
2. Create actual server-side API endpoints that can execute yt-dlp commands
3. Stream the downloaded files back to the client

The mock implementation demonstrates the UI flow and architecture, but the actual video downloading functionality would require a proper server environment where yt-dlp can be executed.