Editorial Downloader — One-paste Video Downloader

Giới thiệu dự án

Editorial Downloader là một ứng dụng Next.js (App Router) cho phép người dùng dán link video công khai và nhận về file MP4 chất lượng tốt nhất. Toàn bộ phần nặng (extract metadata, mux audio + video, bắt tay CDN) được giao cho yt-dlp chạy server-side, nên trình duyệt chỉ thấy payload metadata đã phân tích và blob file cuối cùng. Hỗ trợ 7 host: YouTube, TikTok, Instagram, Facebook, X/Twitter, Vimeo, Dailymotion. Có quality picker (1080p/720p/480p...), proxy same-origin để bypass CDN 403 của Meta/TikTok, modal loading bằng Lottie animation, và allow-list host để chống SSRF cơ bản. Trang marketing (how-it-works, pricing, support, login, signup) đã có layout sẵn nhưng chưa wire backend — dễ tuỳ biến cho dự án thật.

Tính năng nổi bật

• API route `/api/video/analyze` trả metadata (title, thumbnail, view/like, duration, formats) qua `yt-dlp --dump-single-json`
• API route `/api/video/download-ytdlp` spawn yt-dlp + ffmpeg, stream MP4 về browser kèm Content-Disposition đa ngôn ngữ (RFC 5987)
• Same-origin proxy `/api/video/proxy` và `/api/video/thumbnail` để bypass 403 của TikTok/Meta CDN
• Quality picker tự động hiện khi extractor cần server-side download (YouTube, TikTok, HLS/DASH manifest)
• Allow-list host cho SSRF guard, hỗ trợ TikTok cookie bypass qua `TIKTOK_PROXY_COOKIE` / `TIKTOK_COOKIES_FILE`

Công nghệ sử dụng

• Next.js 16
• React 19
• Tailwind CSS 4
• yt-dlp
• ffmpeg

Hướng dẫn sử dụng

1. Bước 1

   Tải và giải nén source

   Tải file nén ở nút phía trên rồi giải nén vào thư mục dự án của bạn. Mở terminal tại thư mục `download-web-nextjs-main`.

2. Bước 2

   Yêu cầu Node.js ≥ 20.x

   Next.js 16 yêu cầu Node 20 trở lên. Kiểm tra phiên bản hiện tại — nếu thấp hơn, cài qua nvm hoặc trang chủ Node.

   node --version

3. Bước 3

   Cài yt-dlp và ffmpeg

   App spawn yt-dlp ở server-side để extract metadata và download. ffmpeg dùng để mux best-video + best-audio (nếu thiếu, YouTube sẽ bị giới hạn ở file đã pre-merged ~720p). Chọn lệnh theo OS:

   # macOS
   brew install yt-dlp ffmpeg
   
   # Ubuntu / Debian
   sudo apt update && sudo apt install -y ffmpeg
   sudo curl -L https://github.com/yt-dlp/yt-dlp/releases/latest/download/yt-dlp -o /usr/local/bin/yt-dlp
   sudo chmod +x /usr/local/bin/yt-dlp
   
   # Windows (PowerShell, dùng winget)
   winget install yt-dlp.yt-dlp
   winget install Gyan.FFmpeg

4. Bước 4

   Cài dependencies npm

   Cài Next.js 16, React 19, Tailwind v4, lucide-react, @lottiefiles/dotlottie-react và youtube-dl-exec.

   npm install

5. Bước 5

   Chạy dev server

   Mở http://localhost:3000 và dán một link YouTube/TikTok/Instagram để thử. Nếu thấy lỗi `yt-dlp executable not found`, set biến `YTDLP_PATH` ở bước sau.

   npm run dev

6. Bước 6

   (Tuỳ chọn) Cấu hình .env.local

   Tạo file `.env.local` ở root nếu cần override path binary, hoặc bypass 403 của TikTok bằng cookie. Tất cả biến đều optional — app vẫn chạy nếu không có file này.

   # Override path binary (nếu auto-detect không tìm thấy)
   YTDLP_PATH=/usr/local/bin/yt-dlp
   FFMPEG_PATH=/usr/local/bin/ffmpeg
   
   # Bypass TikTok 403 — paste raw Cookie header từ tiktok.com đã đăng nhập
   TIKTOK_PROXY_COOKIE=sessionid=abc123; tt_csrf_token=...
   # hoặc dùng file Netscape-format (ưu tiên hơn cookie ở trên)
   TIKTOK_COOKIES_FILE=/absolute/path/to/cookies.txt

7. Bước 7

   Build & start production

   Khi deploy, host phải cho phép spawn binary và có yt-dlp + ffmpeg trên PATH (loại trừ Vercel Edge runtime). Render, Fly.io, Railway, hoặc Docker với base image `node:20-bookworm` đều OK.

   npm run build
   npm run start