VDO 4 DAD - Offline Video App

แอปพลิเคชันสำหรับดูวิดีโอแบบออฟไลน์ พร้อมระบบดาวโหลดวิดีโอจาก YouTube และเว็บไซต์อื่นๆ ด้วย yt-dlp

ฟีเจอร์

• 🎥 ดูวิดีโอแบบออฟไลน์
• 📥 ดาวโหลดวิดีโอจาก YouTube และเว็บไซต์อื่นๆ
• 📊 แสดงสถานะการดาวโหลดแบบเรียลไทม์
• 📱 Responsive Design รองรับทุกขนาดหน้าจอ
• 🔄 อัปเดตรายการวิดีโออัตโนมัติหลังดาวโหลดเสร็จ

การติดตั้ง

1. ติดตั้ง dependencies:

npm install

2. ติดตั้ง yt-dlp (จำเป็นสำหรับการดาวโหลด):

# macOS (ใช้ Homebrew)
brew install yt-dlp

# หรือดาวโหลดจาก https://github.com/yt-dlp/yt-dlp/releases

การใช้งาน

วิธีที่ 1: รันแอปแบบเต็ม (Frontend + Backend)

npm run dev-full

วิธีที่ 2: รันแยกส่วน

# Terminal 1: รัน Backend
npm run backend

# Terminal 2: รัน Frontend
npm run dev

การดาวโหลดวิดีโอ

1. เปิดแอปในเบราว์เซอร์ (http://localhost:8080)
2. ใส่ URL ของวิดีโอที่ต้องการดาวโหลดในช่องข้อความ
3. สามารถใส่หลาย URL โดยคั่นด้วยคอมม่า (,) หรือขึ้นบรรทัดใหม่
4. กดปุ่ม "ดาวน์โหลดวิดีโอ"
5. ดูสถานะการดาวโหลดแบบเรียลไทม์

รองรับเว็บไซต์

ระบบรองรับการดาวโหลดจากเว็บไซต์ที่ yt-dlp รองรับ เช่น:

• YouTube
• Vimeo
• Facebook
• Twitter
• และอีกมากมาย

โครงสร้างไฟล์

VDO4Dad/
├── src/
│   ├── index.html          # หน้าเว็บหลัก
│   ├── app.js              # JavaScript หลัก
│   ├── styles/
│   │   └── main.css        # CSS styles
│   ├── data/
│   │   └── videos.json     # ข้อมูลวิดีโอ
│   └── videos/             # ไฟล์วิดีโอที่ดาวโหลด
├── server.js               # Express.js backend
├── package.json
└── README.md

API Endpoints

• GET /download?url=<video_url> - ดาวโหลดวิดีโอ (Server-Sent Events)
• GET /downloads/status - ดูสถานะการดาวโหลด
• POST /downloads/:id/cancel - ยกเลิกการดาวโหลด
• GET /health - ตรวจสอบสถานะเซิร์ฟเวอร์

การแก้ไขปัญหา

yt-dlp ไม่ทำงาน

• ตรวจสอบว่า yt-dlp ติดตั้งแล้วและอยู่ใน PATH
• อัปเดต yt-dlp: yt-dlp -U

ไม่สามารถเชื่อมต่อกับ Backend

• ตรวจสอบว่า Backend กำลังรันอยู่ที่ port 3000
• ตรวจสอบ CORS settings

วิดีโอไม่แสดงในรายการ

• ตรวจสอบว่าไฟล์วิดีโออยู่ในโฟลเดอร์ src/videos/
• ตรวจสอบไฟล์ src/data/videos.json

License

MIT License