# Premium Glassmorphic YouTube Video & MP3 Downloader

A sleek, modern, and high-performance desktop application built with Electron.js that downloads YouTube videos and extracts/converts them into high-quality MP3 audio tracks. Designed with state-of-the-art Glassmorphic aesthetics, fluid micro-animations, and a highly intuitive user interface.

---

## 🌟 Features

*   **Dual Mode Support:** Download either full videos (MP4) or extract audio directly to high-quality MP3.
*   **Aesthetic UI:** Premium Glassmorphic design with custom styling, custom scrollbars, vibrant gradient accent systems, and smooth transitions.
*   **Dependency Engine:** Integrated checker for `yt-dlp` and `ffmpeg` to ensure the download and conversion utilities are always ready and verified.
*   **Active Monitoring:** Live feedback on download progress, speed, file size, and estimated time remaining (ETA).
*   **Safe Execution:** Implements Electron IPC context isolation to keep application security at a premium.

---

## 📸 Screenshots & Workflow

Experience a premium, wizard-driven download flow with glassmorphic visuals:

### 1. Home / Link Analysis
The clean entry point featuring localization support. Just paste any video or playlist URL and click **Analyze**.
![Home Screen](docs/ss/home-screen.png)

### 2. Multi-Select Playlist & Format Controls
After analysis, view a rich, scrollable list of tracks. Customize formats (MP3/MP4) and quality presets (320kbps, 1080p, etc.) for each track individually or batch-apply with master controls.
![Downloader Screen](docs/ss/downloader-screen.png)

### 3. Active Download Progress
Track real-time progress, download speeds, file sizes, and estimated time of completion (ETA) with custom animated progress bars.
![Progress Download Screen](docs/ss/progress-download-screen.png)

### 4. Smart Completion Insights
Upon download completion, a beautiful interactive modal presents download statistics and gives immediate options to open the target folder or play the downloaded files.
![Download Completed Screen](docs/ss/download-completed-screen.png)

---

## 📂 Project Structure

```text
youtube-downloader/
├── .gitignore               # Configured to exclude heavy binaries & node_modules
├── README.md                # Project documentation and guide
├── main.js                  # Electron main process (lifecycle & IPC registration)
├── preload.js               # IPC bridge exposing safe downloader context to renderer
├── package.json             # App scripts and dependencies
├── docs/
│   └── implementation-plan.md # Development layout & modular plan
├── src/
│   ├── index.html           # Main user interface structured with semantic HTML5
│   ├── style.css            # Premium CSS tokens, animations, and glassmorphic designs
│   └── renderer.js          # Client-side UI controllers and IPC event listeners
└── utils/
    └── downloader.js        # Core Downloader Engine handling child processes for yt-dlp/ffmpeg
```

---

## 🛠️ Prerequisites

The application uses **yt-dlp** and **FFmpeg** as the engine backends. For convenience, these should be placed in a `bin` directory inside the project root:

1.  Create a `bin/` directory in the root if it does not exist.
2.  Download the latest [yt-dlp executable](https://github.com/yt-dlp/yt-dlp/releases) and place `yt-dlp.exe` in the `bin/` folder.
3.  Download [FFmpeg static build](https://ffmpeg.org/download.html) and place `ffmpeg.exe` in the `bin/` folder.

*(Note: The `bin/` directory is automatically ignored by Git to avoid tracking large executables).*

---

## 🚀 Getting Started

### 1. Installation

Clone the repository and install the development dependencies:

```bash
npm install
```

### 2. Development Mode

Run the following command to start the Electron desktop application:

```bash
npm start
```

---

## ⚙️ How It Works

1.  **Dependency Verification:** Upon launch, the backend checks for the presence and validity of `yt-dlp.exe` and `ffmpeg.exe` in the `bin` directory.
2.  **Metadata Fetching:** When you paste a YouTube link, the downloader retrieves video metadata (title, thumbnail, duration, etc.) and displays a rich media preview.
3.  **Process Spawning:** Depending on the chosen format (Video/MP3), the downloader spawns a customized background process tracking real-time status and pipe-feeds it to the UI via Electron IPC events.

---

## 📄 License

This project is licensed under the [MIT License](LICENSE).
