Свой родной GUI для yt-dlp на Electron и React

Честно, я устал каждый месяц искать новый способ для скачивания различного контента с youtube. Что сегодня работает — завтра уже не подает признаков жизни. После очередной смерти одного из загрузчиков — я понял, что проще уже сделать свой, чем вот так тратить время на постоянные поиски.

Зачем, если уже есть готовые решения?

Тут все просто. Просмотрев некоторые варианты, я понял, что выбирать не приходиться. Интерфейсы есть, но они довольно ограничены в функционале и больше подходят для тех, кто хочет просто скачать пару видео в дорогу. Мне же нужен был полноценный инструмент, который закроет все мои нужды, как монтажера.

Что именно я хотел получить:

• Загрузка видео в разных форматах + форматирование

• Возможность скачать аудио отдельно

• Скачивание отдельной части видео или аудио

• Работа со всеми видами ссылок (в том числе плейлисты, джемы, live и shorts)

• Отслеживание кодека и битрейта перед скачиванием

Ну и конечно, чтобы это визуально не выглядело — как взлом терминала из fallout.

Почему именно electron?

Давно хотел попробовать что-нибудь кроме python, и раз уж тут подвернулась такая возможность — то почему мы бы и нет.

Хватит лишней болтовни — переходим к главному.

И да, интерфейс пока работает только на WINDOWS.

Интерфейс

Встречают по одежке, как говорится.

Поначалу не хотел тратить много времени и остановиться на чем-нибудь однотонном. Но в процессе увлекся и меня немного занесло. Сделал две темы (светлая и тёмная).

В центр разместил забавную гифку, чтобы было не так грустно. Так же дополнительно сделал меню настроек. Туда вывел выбор папки для скачивания, выбор языка, темы, настройку -geopass (выключена по умолчанию) и уведомления.

Сам коддля «настроек» вывел в отдельные файлы (settings.js и settings.html) чтобы не путаться.

Далее идет основной интерфейс для выбора настроек скачивания. Я не буду показывать каждую кнопку, чтобы не растягивать статью.

Основной код

Приложение построил на Electron для десктопа и React для фронтенда. Electron обрабатывает IPC, процессы и внешние вызовы, React — UI с состояниями.

Функционал

• Проверка URL видео

  Функция проверки URL реализована в main.js через IPC-событие check-url. Она использует yt-dlp для получения метаданных видео.

ipcMain.handle('check-url', async (event, url) => {   try {     const ytDlpPath = getYtDlpPath();     await fs.access(ytDlpPath); // Проверка наличия yt-dlp.exe     const args = ['--dump-single-json', url];     const process = spawn(ytDlpPath, args, { shell: true });          let output = '';     process.stdout.on('data', (data) => {       output += data.toString();     });      return new Promise((resolve, reject) => {       process.on('close', (code) => {         if (code === 0) {           try {             const json = JSON.parse(output);             resolve(json); // Возвращает метаданные: миниатюра, форматы, длительность           } catch (err) {             reject(new Error('Ошибка парсинга JSON'));           }         } else {           reject(new Error(`yt-dlp завершился с кодом ${code}`));         }       });     });   } catch (err) {     console.error('Ошибка проверки URL:', err);     throw err;   } });

Вызывается yt-dlp с параметром --dump-single-json, который возвращает JSON с информацией о видео (название, форматы, длительность). В App.jsx результат отображается в интерфейсе (миниатюра, список форматов).

• Скачивание

Скачивание реализовано в main.js через IPC start-download. Формируются аргументы для yt-dlp и запускается процесс.

ipcMain.handle('start-download', async (event, options) => {   const { url, format, quality, startTime, endTime, downloadMode } = options;   const ytDlpPath = getYtDlpPath();   const ffmpegPath = getFfmpegPath();   let args = [url, '-o', '%(title)s.%(ext)s'];    if (format === 'mp3' || format === 'm4a') {     args.push('-x', `--audio-format=${format}`, `--audio-quality=${quality || 0}`);   } else {     args.push(`-f bestvideo[height<=${quality}]+bestaudio/best[height<=${quality}]`);   }    if (startTime && endTime) {     args.push(`--download-sections=*${startTime}-${endTime}`);   }    const process = spawn(ytDlpPath, args, { shell: true, env: { ...process.env, PATH: `${process.env.PATH};${path.dirname(ffmpegPath)}` } });   currentDownloadProcess = process;    process.stdout.on('data', (data) => {     const output = data.toString();     const match = output.match(/(\d+\.\d)%/); // Парсинг прогресса     if (match) {       mainWindow.webContents.send('download-progress', { percent: parseFloat(match[1]) });     }   });    return new Promise((resolve, reject) => {     process.on('close', (code) => {       if (code === 0) {         mainWindow.webContents.send('download-finished');         resolve();       } else if (!isCancelled) {         mainWindow.webContents.send('download-error', { message: `Ошибка скачивания, код ${code}` });         reject(new Error(`Ошибка скачивания, код ${code}`));       }     });   }); });

Формируются аргументы для yt-dlp в зависимости от формата и качества. Прогресс парсится из stdout через regex. События download-progress и download-finished отправляются в React для обновления UI.

И на сладкое — скачивание аудио или видео частями.

Буду честен — я до конца не верил, что смогу такое реализовать. Штука крайне удобная, но не без минусов. Она хорошо себя показывает в длинных роликах (от 30–40 минут), но в коротких проще скачать видео полностью и отрезать лишнее (короткий ролик загрузиться быстрее, чем его часть. Окак 🙂

Принцип работы

Интерфейс (фронтенд):

• Пользователь включает опцию «Скачать часть» кнопкой, активируя слайдер (react-range).

• Слайдер задаёт startTime и endTime (в секундах) в пределах длительности видео (videoInfo.duration).

• Временные метки отображаются в формате HH:MM:SS.

const [rangeValues, setRangeValues] = useState([0, 0]); const [showRange, setShowRange] = useState(false);  <Range   values={rangeValues}   step={1}   min={0}   max={videoInfo?.duration || 100}   onChange={(values) => setRangeValues(values)} />

При нажатии «Скачать» данные передаются в бэкенд через IPC:

const handleDownload = async () => {   const options = {     url, format, quality,     startTime: showRange ? Math.floor(rangeValues[0]) : null,     endTime: showRange ? Math.floor(rangeValues[1]) : null   };   await window.electronAPI.startDownload(options); };

Бэкенд (main.js):

• Получает startTime и endTime через IPC start-download.

• Добавляет аргумент --download-sections=*${startTime}-${endTime} для yt-dlp.

• Запускает yt-dlp с ffmpeg для обрезки.

Зачем ffmpeg?

ffmpeg (бинарник в bin/) используется yt-dlp для обрезки медиа и конвертации (например, видео в MP3). Он обеспечивает точную обрезку, но границы могут слегка варьироваться из-за ключевых кадров

Cookies

Чтобы получать корректные данные о видео приходится цеплять cookies файл через встроенный electron браузер (вход в аккаунт google). Я пытался обойти это сменой способа извлечения данных о видео с tv_embedded на mweb. Два дня адских мучений спустя (связанных с интеграцией плагина для извлечения PO Token сначала на VPS, а потом и в само приложение) я решил отказаться от этой затеи.

Итоги

Это были веселые пару недель в мои жизни, будем честны. Все функции, которые хотел увидеть — я смог реализовать. Да, есть некоторые некритичные баги, которые нужно в скором времени починить. Если кому-то будет интересно протестировать GUI — буду только рад.
Из того, что хотел бы ещё добавить в будущем — это поддержка linux/mac и возможность полноценной работы с плейлистами (пока можно скачивать только конкретное видео из плейлиста)
Проект планируется платным, но для желающих потыкаться — PROMO_0Y1NE52T

P.S — Для использования приложения на территории РФ необходимо включать методы для обхода замедления (галочка в настройках не спасает)

Полезные ссылки:

• yt-dlp

• ffmpeg

• boosty проекта

• telegram проекта