Ümit Tunç
70 lines
4.7 KiB
Markdown
70 lines
4.7 KiB
Markdown
# YouTube Video & MP3 Downloader - Electron.js Planı
|
||
|
||
Bu proje, modern ve göz alıcı bir **Glassmorphic** (cam morfolojisi) tasarım diline sahip, YouTube videolarını yüksek çözünürlükte indiren ve bunları yüksek kaliteli MP3 formatlarına dönüştürebilen bir masaüstü Electron.js uygulamasıdır.
|
||
|
||
## Proje Mimarisi ve Teknoloji Seçimleri
|
||
|
||
1. **Arayüz (Renderer)**:
|
||
- **Glassmorphic Tasarım**: `backdrop-filter: blur()`, yarı saydam sınırlar (semi-transparent borders), derin gölgeler, canlı degrade arka planlar (mesh gradients) ve akıcı mikro animasyonlar.
|
||
- **HTML5 & Vanilla CSS**: Harici ağır CSS kütüphaneleri olmadan, maksimum esneklik ve performans için saf CSS.
|
||
- **Font**: Google Fonts üzerinden modern ve premium bir görünüm sunan **Outfit** veya **Inter** fontu.
|
||
- **Lucide Icons**: Modern ve minimalist ikonlar için SVG tabanlı kullanım.
|
||
|
||
2. **Ana Süreç (Electron Main & Preload)**:
|
||
- **Güvenlik**: `nodeIntegration: false` ve `contextIsolation: true` kullanılarak güvenli IPC köprüsü oluşturulacaktır (`preload.js`).
|
||
- **İndirme Motoru (`yt-dlp`)**: YouTube'un sürekli değişen altyapısına uyum sağlamak için en kararlı çözüm olan `yt-dlp` aracı bir Node.js `child_process` veya sarmalayıcı (wrapper) üzerinden yönetilecektir.
|
||
- **Ses Dönüştürme (`ffmpeg`)**: İndirilen videoları veya doğrudan ses akışlarını yüksek kaliteli MP3'e (320kbps) dönüştürmek için `ffmpeg` entegrasyonu kurulacaktır.
|
||
|
||
---
|
||
|
||
## Kullanıcı İncelemesi Gereken Konular
|
||
|
||
> [!IMPORTANT]
|
||
> **İndirme Motoru Tercihi (`yt-dlp` vs `ytdl-core`)**
|
||
> Standart `ytdl-core` gibi saf JS kütüphaneleri YouTube'un sık güncellemeleri nedeniyle çok çabuk bozulmaktadır. Bu nedenle projemizde arka planda bağımsız çalışan ve kendini güncelleyebilen **`yt-dlp`** binary motorunu kullanmayı öneriyoruz. Sisteminizde python kurulu olmasa bile çalışabilen standalone binary'ler indirilecek veya paketlenecektir.
|
||
|
||
> [!TIP]
|
||
> **FFmpeg Bağımlılığı**
|
||
> MP3 dönüştürme ve yüksek çözünürlüklü (1080p+) video/ses birleştirme işlemleri için `ffmpeg` gereklidir. Uygulama ilk açılışta veya arka planda ffmpeg binary'lerinin varlığını kontrol edip gerekirse otomatik olarak temin edecek bir mekanizmaya sahip olacaktır.
|
||
|
||
---
|
||
|
||
## Önerilen Değişiklikler ve Dosya Yapısı
|
||
|
||
Yeni oluşturulacak proje yapısı şu şekilde olacaktır:
|
||
|
||
### [Core App Directory](file:///d:/Works/2026/youtube-downloader)
|
||
|
||
#### [NEW] [package.json](file:///d:/Works/2026/youtube-downloader/package.json)
|
||
Uygulama bağımlılıklarını (`electron`, `fluent-ffmpeg`, vb.) ve başlatma scriptlerini içerecektir.
|
||
|
||
#### [NEW] [main.js](file:///d:/Works/2026/youtube-downloader/main.js)
|
||
Electron ana süreci. Pencere yönetimi, `yt-dlp` ve `ffmpeg` işlemlerini yürütecek IPC dinleyicilerini barındırır.
|
||
|
||
#### [NEW] [preload.js](file:///d:/Works/2026/youtube-downloader/preload.js)
|
||
Güvenli IPC köprüsü. Arayüzün işletim sistemi komutlarına ve indirme durumlarına güvenli bir şekilde erişmesini sağlar.
|
||
|
||
#### [NEW] [index.html](file:///d:/Works/2026/youtube-downloader/src/index.html)
|
||
Ana arayüz şablonu. Glassmorphic paneller, URL giriş alanı, indirme formatı seçimleri (MP4/MP3), kalite seçenekleri, indirme kuyruğu ve ilerleme barlarını barındırır.
|
||
|
||
#### [NEW] [style.css](file:///d:/Works/2026/youtube-downloader/src/style.css)
|
||
Premium Glassmorphic CSS tasarımı. Renk paleti (Canlı morlar, neon pembeler ve derin cam mavileri), blur efektleri, glow animasyonları ve şık kart tasarımları bu dosyada tanımlanacaktır.
|
||
|
||
#### [NEW] [renderer.js](file:///d:/Works/2026/youtube-downloader/src/renderer.js)
|
||
Arayüz mantığı. Kullanıcı etkileşimlerini yakalar, IPC aracılığıyla `main.js`'e indirme emirleri gönderir ve canlı ilerleme durumunu (`progress`) arayüzde günceller.
|
||
|
||
#### [NEW] [downloader.js](file:///d:/Works/2026/youtube-downloader/utils/downloader.js)
|
||
`yt-dlp` ve `ffmpeg` süreçlerini yöneten yardımcı sınıf (helper). İndirme yüzdesini parse edip IPC kanalı üzerinden arayüze aktarır.
|
||
|
||
---
|
||
|
||
## Doğrulama ve Test Planı
|
||
|
||
### Otomatik & Manuel Testler
|
||
- **IPC Güvenlik Testi**: Geliştirici konsolundan doğrudan Node.js fonksiyonlarına erişimin engellendiğinin doğrulanması.
|
||
- **İndirme Testleri**:
|
||
- Farklı uzunluktaki YouTube video linklerinin analizi (video bilgisi çekme: başlık, küçük resim, süre).
|
||
- MP4 (Video + Ses birleştirilmiş) formatında başarıyla indirme testi.
|
||
- Sadece MP3 (En yüksek kalitede ses çıkarma ve ffmpeg ile dönüştürme) formatında indirme testi.
|
||
- **Görsel/UI Testleri**: Farklı pencere boyutlarında Glassmorphism efektlerinin, arka plan degrade geçişlerinin ve responsive düzenin doğrulanması.
|