Ümit Tunç
107 lines
4.6 KiB
Markdown
107 lines
4.6 KiB
Markdown
<p align="center">
|
|
<img src="docs/logos/vibedownloader_logo_no_bg.png" alt="VibeDownloader Logo" width="180" />
|
|
</p>
|
|
|
|
# VibeDownloader - Premium Glassmorphic Social Media & 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**.
|
|
|
|
|
|
### 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.
|
|
|
|
|
|
### 3. Active Download Progress
|
|
Track real-time progress, download speeds, file sizes, and estimated time of completion (ETA) with custom animated progress bars.
|
|
|
|
|
|
### 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.
|
|
|
|
|
|
---
|
|
|
|
## 📂 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).
|