.
================================================
FILE: README.md
================================================
io.github.aandrew_me.ytdn
ytDownloader
io.github.aandrew_me.ytdn.desktop
Andrew
https://github.com/aandrew-me/ytDownloader/issues
https://github.com/aandrew-me/ytDownloader?tab=readme-ov-file#internationalization-localization-
Download videos and audios from hundreds of sites
ytDownloader (Formerly know as Youtube Downloader Plus) lets you download videos and audios
of different qualities from hundreds of
sites including the popular ones but not limited to Youtube, Facebook, Instagram, Tiktok,
Twitter, Twitch and so on.
✔️ Supports high quality video resolutions
✔️ Video Compressor with Hardware Acceleration
✔️ Supports audio extraction in multiple formats
✔️ Supports playlist downloads
✔️ Supports downloading particular ranges
✔️ Supports downloading subtitles
✔️ Supports multiple themes
✔️ Completely free and open source
✔️ Fast download speeds
GPL-3.0
CC0-1.0
https://github.com/user-attachments/assets/12410bca-31c3-48a0-bbd3-1d74bcc752b6
ytDownloader homepage
https://github.com/user-attachments/assets/060557bc-d209-4bd0-bda4-debe42ca83a0
ytDownloader Settings
https://github.com/user-attachments/assets/52da7e50-46bb-4749-8152-5e79324a6cc3
ytDownloader video compressor
https://github.com/aandrew-me/ytDownloader
Bring back cookie related info
Added download history
Added JS runtime support as per new yt-dlp requirements. The app will now ship with a
nodejs binary. Youtube downloads should be more stable.
Added slider for range selection.
Added progress for yt-dlp download and update
Translation updates, added new languages.
Added custom built ffmpeg, ffprobe for Windows and Linux builds.
Added support to add custom yt-dlp arguments
Fixed incorrect resolution downloads for playlists.
Added showing approximate file sizes when possible.
Improved user interface.
Minor bug fixes.
Major code refactoring.
Improved app performance
UI improvements
Fixed minor bugs
Added support for chapters
UI improvements
Added Video Compressor with Hardware Acceleration (Beta)
Bug fixes
Bug fixes
Bug fixes
Fixes and enhancements
Design enhancements
Added removal of old windows updates
Ignore unavailable videos for playlists
Fixed issues with config file on resize
Added proxy support
Added button to clear downloads
Fixed download errors
Added compatibility for X(Twitter)
Minor enhancements
Added Chinese language
Fixed video trim info to filename
Fixed formats not being shown
Added Arabic language
Fixed conflicts with same filenames
Fixed formats not being selected properly
Fixed config file not being used when getting info
Changelog
Added option to choose audio for video
Webm options will be hidden by default
Enhancements
================================================
FILE: html/about.html
================================================
About
ytDownloader ytDownloader lets you download videos and audios from hundreds of sites
like Youtube, Facebook,
Instagram, Tiktok, Twitter and so on
It's a Free and Open Source app built on top of Node.js and
Electron. yt-dlp has been used for
downloading
Source Code is available here
================================================
FILE: html/compressor.html
================================================
Video Compressor
Video format
Unchanged
mp4
mkv
Video Encoder
x264
x265
x264 (Intel QSV Hardware Acceleration)
x265 (Intel QSV Hardware Acceleration)
x264 (AMD Hardware Acceleration)
x265 (AMD Hardware Acceleration)
x264 (NVIDIA Hardware Acceleration)
x265 (NVIDIA Hardware Acceleration)
x264 (VA-API Hardware Acceleration)
x265 (VA-API Hardware Acceleration)
x264 (VideoToolbox Hardware Acceleration)
x265 (VideoToolbox Hardware Acceleration)
Copy video
Compression
Speed
Fast
Medium
Slow
Video Quality
18 (Best quality)
19
20
21
22
23 (Medium size, good quality)
24
25
26
27
28 (Smaller file size, decent quality)
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51 (Worst quality)
Audio Format
Unchanged
aac
mp3
Start Compression
Cancel
================================================
FILE: html/history.html
================================================
Download History - YtDownloader
All Formats
MP4
MP3
M4A
WEBM
Opus
WAV
FLAC
Export as
JSON
Export as CSV
Clear All History
================================================
FILE: html/index.html
================================================
YtDownloader
Click to paste video link from clipboard
Ctrl V
Error
Details ▼
Video
Audio
Title
Select Format
Select Audio Format
Download
More options
Select Format
Download
More options
Clear Downloads
================================================
FILE: html/playlist.html
================================================
Playlist download
Click to paste playlist link from
clipboard
Ctrl V
Video
Audio
Link:
Select Video Quality
Best
Worst
Use config file
144p
240p
360p
480p
720p (HD)
1080p (FHD)
1440p
2160p (4k)
Select video quality
Auto
Mp4
WebM
Download
Select Audio format
Mp3
M4a
Opus
Wav
Alac
Flac
Select
Quality
Auto
Normal
Best
Good
Bad
Worst
Download
More options
Error
Details ▼
Open download folder
================================================
FILE: html/playlist_new.html
================================================
Playlist download
Click to paste playlist link from clipboard [Ctrl + V]
Error Details ▼
================================================
FILE: html/preferences.html
================================================
Preferences
Preferences
Download location
Current download location -
Select Download
Location
Select Language (Requires reload)
English
Deutsch
Español
فارسی
Ελληνικά
Français
Italiano
Japanese
Magyar
Polski
Português
Русский
Finnish
Українська
Türkçe
Vietnamese
اَلْعَرَبِيَّةُ
简体中文
繁體中文
বাংলা
हिन्दी
नेपाली
Preferred video quality
144p
240p
360p
480p
720p (HD)
1080p (FHD)
1440p
2160p (4k)
Preferred video codec
AVC1
AV1
VP9
MP4V
Preferred audio format
Mp3
Aac
M4a
Opus
Wav
Alac
Flac
Select browser to use cookies from
ⓘ
None
Chrome
Firefox
Brave
Opera Mini
Edge
Chromium
Safari
Vivaldi
Proxy
Show more format options
Filename format for playlists
Reset to default
Folder name format for playlists
Reset to default
Maximum number of active downloads
Close to system tray
Disable auto updates
================================================
FILE: linux.sh
================================================
#!/bin/bash
# >> Check if curl is installed or nor
if ! command -V curl > /dev/null 2>&1; then
echo "curl not installed, please install it and try again"
exit
fi
wget "https://github.com/aandrew-me/ffmpeg-builds/releases/download/v8/ffmpeg_linux_amd64.tar.xz"
wget "https://github.com/aandrew-me/ffmpeg-builds/releases/download/v8/node_linux_amd64" -O node
chmod +x node
tar -xf ffmpeg_linux_amd64.tar.xz
mv ffmpeg_linux_amd64 ffmpeg
chmod +x ffmpeg/bin/ffmpeg
chmod +x ffmpeg/bin/ffprobe
chmod +x ffmpeg/bin/ffplay
================================================
FILE: mac.sh
================================================
#!/bin/bash
# >> Check if curl is installed or nor
if ! command -v curl > /dev/null 2>&1; then
echo "curl not installed, please install it and try again"
exit 1
fi
ARCH=$(uname -m)
mkdir -p ffmpeg/bin
if [ "$ARCH" = "arm64" ]; then
FF_URL="https://github.com/aandrew-me/ffmpeg-builds/releases/download/v8/ffmpeg_macos_arm64"
FP_URL="https://github.com/aandrew-me/ffmpeg-builds/releases/download/v8/ffprobe_macos_arm64"
elif [ "$ARCH" = "x86_64" ]; then
FF_URL="https://github.com/aandrew-me/ffmpeg-builds/releases/download/v8/ffmpeg_macos_amd64"
FP_URL="https://github.com/aandrew-me/ffmpeg-builds/releases/download/v8/ffprobe_macos_amd64"
else
echo "Unsupported architecture: $ARCH"
exit 1
fi
curl -L "$FF_URL" -o ffmpeg/bin/ffmpeg
curl -L "$FP_URL" -o ffmpeg/bin/ffprobe
chmod +x ffmpeg/bin/ffmpeg
chmod +x ffmpeg/bin/ffprobe
================================================
FILE: main.js
================================================
const {
app,
BrowserWindow,
dialog,
ipcMain,
shell,
Tray,
Menu,
clipboard,
} = require("electron");
const {autoUpdater} = require("electron-updater");
const fs = require("fs").promises;
const {existsSync, readFileSync} = require("fs");
const path = require("path");
const DownloadHistory = require("./src/history");
process.env.ELECTRON_DISABLE_SECURITY_WARNINGS = "true";
autoUpdater.autoDownload = false;
const USER_DATA_PATH = app.getPath("userData");
const CONFIG_FILE_PATH = path.join(USER_DATA_PATH, "ytdownloader.json");
const appState = {
/** @type {BrowserWindow | null} */
mainWindow: null,
/** @type {BrowserWindow | null} */
secondaryWindow: null,
/** @type {Tray | null} */
tray: null,
isQuitting: false,
indexPageIsOpen: true,
trayEnabled: false,
loadedLanguage: {},
config: {},
downloadHistory: new DownloadHistory(),
autoUpdateEnabled: false,
};
const gotTheLock = app.requestSingleInstanceLock();
if (!gotTheLock) {
app.quit();
} else {
app.on("second-instance", () => {
if (appState.mainWindow) {
if (appState.mainWindow.isMinimized())
appState.mainWindow.restore();
appState.mainWindow.show();
appState.mainWindow.focus();
}
});
}
app.whenReady().then(async () => {
await initialize();
app.on("activate", () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
});
app.on("before-quit", async () => {
appState.isQuitting = true;
try {
// Save the final config state before exiting.
await saveConfiguration();
} catch (error) {
console.error("Failed to save configuration during quit:", error);
}
});
app.on("window-all-closed", () => {
if (process.platform !== "darwin") {
app.quit();
}
});
/**
* Initializes the application by loading config, translations,
* and setting up handlers.
*/
async function initialize() {
await loadConfiguration();
await loadTranslations();
registerIpcHandlers();
registerAutoUpdaterEvents();
createWindow();
if (process.platform === "win32") {
app.setAppUserModelId(app.name);
}
}
function createWindow() {
const bounds = appState.config.bounds || {};
appState.mainWindow = new BrowserWindow({
...bounds,
minWidth: 800,
minHeight: 600,
autoHideMenuBar: true,
show: false,
icon: path.join(__dirname, "/assets/images/icon.png"),
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
spellcheck: false,
},
});
appState.mainWindow.loadFile("html/index.html");
appState.mainWindow.once("ready-to-show", () => {
if (appState.config.isMaximized) {
appState.mainWindow.maximize();
}
appState.mainWindow.show();
});
const saveBounds = () => {
if (appState.mainWindow && !appState.mainWindow.isMaximized()) {
appState.config.bounds = appState.mainWindow.getBounds();
}
};
appState.mainWindow.on("resize", saveBounds);
appState.mainWindow.on("move", saveBounds);
appState.mainWindow.on("maximize", () => {
appState.config.isMaximized = true;
});
appState.mainWindow.on("unmaximize", () => {
appState.config.isMaximized = false;
});
appState.mainWindow.on("close", (event) => {
if (!appState.isQuitting && appState.trayEnabled) {
event.preventDefault();
appState.mainWindow.hide();
if (app.dock) app.dock.hide();
}
});
}
/**
* @param {string} file The HTML file to load.
*/
function createSecondaryWindow(file) {
if (appState.secondaryWindow) {
appState.secondaryWindow.focus();
return;
}
appState.secondaryWindow = new BrowserWindow({
parent: appState.mainWindow,
modal: true,
show: false,
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
},
width: 1000,
height: 800,
});
// appState.secondaryWindow.webContents.openDevTools();
appState.secondaryWindow.loadFile(file);
appState.secondaryWindow.setMenu(null);
appState.secondaryWindow.once("ready-to-show", () => {
appState.secondaryWindow.show();
});
appState.secondaryWindow.on("closed", () => {
appState.secondaryWindow = null;
});
}
/**
* Creates the system tray icon
*/
function createTray() {
if (appState.tray) return;
let iconPath;
if (process.platform === "win32") {
iconPath = path.join(__dirname, "resources/icon.ico");
} else if (process.platform === "darwin") {
iconPath = path.join(__dirname, "resources/icons/16x16.png");
} else {
iconPath = path.join(__dirname, "resources/icons/256x256.png");
}
appState.tray = new Tray(iconPath);
const contextMenu = Menu.buildFromTemplate([
{
label: i18n("openApp"),
click: () => {
appState.mainWindow?.show();
if (app.dock) app.dock.show();
},
},
{
label: i18n("pasteVideoLink"),
click: async () => {
const text = clipboard.readText();
appState.mainWindow?.show();
if (app.dock) app.dock.show();
if (appState.indexPageIsOpen) {
appState.mainWindow.webContents.send("link", text);
} else {
await appState.mainWindow.loadFile("html/index.html");
appState.indexPageIsOpen = true;
appState.mainWindow.webContents.once(
"did-finish-load",
() => {
appState.mainWindow.webContents.send("link", text);
}
);
}
},
},
{
label: i18n("downloadPlaylistButton"),
click: () => {
appState.indexPageIsOpen = false;
appState.mainWindow?.loadFile("html/playlist.html");
appState.mainWindow?.show();
if (app.dock) app.dock.show();
},
},
{
label: i18n("quit"),
click: () => {
app.quit();
},
},
]);
appState.tray.setToolTip("ytDownloader");
appState.tray.setContextMenu(contextMenu);
appState.tray.on("click", () => {
appState.mainWindow?.show();
if (app.dock) app.dock.show();
});
}
function registerIpcHandlers() {
ipcMain.on("autoUpdate", (_event, status) => {
appState.autoUpdateEnabled = status;
if (status) {
autoUpdater.checkForUpdates();
}
});
ipcMain.on("reload", () => {
appState.mainWindow?.reload();
appState.secondaryWindow?.reload();
});
ipcMain.on("get-version", (event) => {
event.sender.send("version", app.getVersion());
});
ipcMain.on("show-file", async (_event, fullPath) => {
try {
await fs.stat(fullPath);
shell.showItemInFolder(fullPath);
} catch (error) {}
});
ipcMain.handle("show-file", async (_event, fullPath) => {
try {
await fs.stat(fullPath);
shell.showItemInFolder(fullPath);
return {success: true};
} catch (error) {
return {success: false, error: error.message};
}
});
ipcMain.handle("open-folder", async (_event, folderPath) => {
try {
await fs.stat(folderPath);
const result = await shell.openPath(folderPath);
if (result) {
return {success: false, error: result};
} else {
return {success: true};
}
} catch (error) {
return {success: false, error: error.message};
}
});
ipcMain.on("load-win", (_event, file) => {
appState.indexPageIsOpen = file.includes("index.html");
appState.mainWindow?.loadFile(file);
});
ipcMain.on("load-page", (_event, file) => {
createSecondaryWindow(file);
});
ipcMain.on("close-secondary", () => {
appState.secondaryWindow?.close();
});
ipcMain.on("quit", () => {
app.quit();
});
ipcMain.on("select-location-main", async () => {
if (!appState.mainWindow) return;
const {canceled, filePaths} = await dialog.showOpenDialog(
appState.mainWindow,
{properties: ["openDirectory"]}
);
if (!canceled && filePaths.length > 0) {
appState.mainWindow.webContents.send("downloadPath", filePaths);
}
});
ipcMain.on("select-location-secondary", async () => {
if (!appState.secondaryWindow) return;
const {canceled, filePaths} = await dialog.showOpenDialog(
appState.secondaryWindow,
{properties: ["openDirectory"]}
);
if (!canceled && filePaths.length > 0) {
appState.secondaryWindow.webContents.send(
"downloadPath",
filePaths
);
}
});
ipcMain.on("get-directory", async () => {
if (!appState.mainWindow) return;
const {canceled, filePaths} = await dialog.showOpenDialog(
appState.mainWindow,
{properties: ["openDirectory"]}
);
if (!canceled && filePaths.length > 0) {
appState.mainWindow.webContents.send("directory-path", filePaths);
}
});
ipcMain.on("select-config", async () => {
if (!appState.secondaryWindow) return;
const {canceled, filePaths} = await dialog.showOpenDialog(
appState.secondaryWindow,
{properties: ["openFile"]}
);
if (!canceled && filePaths.length > 0) {
appState.secondaryWindow.webContents.send("configPath", filePaths);
}
});
ipcMain.on("useTray", (_event, enabled) => {
appState.trayEnabled = enabled;
if (enabled) createTray();
else {
appState.tray?.destroy();
appState.tray = null;
}
});
ipcMain.on("progress", (_event, percentage) => {
if (appState.mainWindow) appState.mainWindow.setProgressBar(percentage);
});
ipcMain.on("error_dialog", async (_event, message) => {
const {response} = await dialog.showMessageBox(appState.mainWindow, {
type: "error",
title: "Error",
message: message,
buttons: ["Ok", i18n("clickToCopy")],
});
if (response === 1) clipboard.writeText(message);
});
ipcMain.handle("get-system-locale", async (_event) => {
return app.getSystemLocale();
});
ipcMain.handle("get-translation", (_event, locale) => {
const fallbackFile = path.join(__dirname, "translations", "en.json");
const localeFile = path.join(
__dirname,
"translations",
`${locale}.json`
);
const fallbackData = JSON.parse(readFileSync(fallbackFile, "utf8"));
let localeData = {};
if (locale !== "en" && existsSync(localeFile)) {
try {
localeData = JSON.parse(readFileSync(localeFile, "utf8"));
} catch (e) {
console.error(`Could not parse ${localeFile}`, e);
}
}
const mergedTranslations = {...fallbackData, ...localeData};
return mergedTranslations;
});
ipcMain.handle("get-download-history", () =>
appState.downloadHistory.getHistory()
);
ipcMain.handle("add-to-history", (_, info) =>
appState.downloadHistory.addDownload(info)
);
ipcMain.handle("get-download-stats", () =>
appState.downloadHistory.getStats()
);
ipcMain.handle("delete-history-item", (_, id) =>
appState.downloadHistory.removeHistoryItem(id)
);
ipcMain.handle("clear-all-history", async () => {
await appState.downloadHistory.clearHistory();
return true;
});
ipcMain.handle("export-history-json", () =>
appState.downloadHistory.exportAsJSON()
);
ipcMain.handle("export-history-csv", () =>
appState.downloadHistory.exportAsCSV()
);
}
function registerAutoUpdaterEvents() {
autoUpdater.on("update-available", async (info) => {
const dialogOpts = {
type: "info",
buttons: [i18n("update"), i18n("no")],
title: "Update Available",
message: i18n("updateAvailablePrompt"),
detail:
info.releaseNotes?.toString().replace(/<[^>]*>?/gm, "") ||
"No details available.",
};
const {response} = await dialog.showMessageBox(
appState.mainWindow,
dialogOpts
);
if (response === 0) {
autoUpdater.downloadUpdate();
}
});
autoUpdater.on("update-downloaded", async () => {
appState.mainWindow.webContents.send("update-downloaded", "");
const dialogOpts = {
type: "info",
buttons: [i18n("restart"), i18n("later")],
title: "Update Ready",
message: i18n("installAndRestartPrompt"),
};
const {response} = await dialog.showMessageBox(
appState.mainWindow,
dialogOpts
);
if (response === 0) {
autoUpdater.quitAndInstall();
}
});
autoUpdater.on("download-progress", async (info) => {
appState.mainWindow.webContents.send("download-progress", info.percent);
});
autoUpdater.on("error", (error) => {
console.error("Auto-update error:", error);
dialog.showErrorBox("Update Error", i18n("updateError"));
});
}
/**
* @param {string} phrase The key to translate.
* @returns {string} The translated string or the key itself.
*/
function i18n(phrase) {
return appState.loadedLanguage[phrase] || phrase;
}
/**
* Loads the configuration from the config file.
*/
async function loadConfiguration() {
try {
const fileContent = await fs.readFile(CONFIG_FILE_PATH, "utf8");
appState.config = JSON.parse(fileContent);
} catch (error) {
console.log(
"Could not load config file, using defaults.",
error.message
);
appState.config = {
bounds: {width: 1024, height: 768},
isMaximized: false,
};
}
}
async function saveConfiguration() {
try {
await fs.writeFile(CONFIG_FILE_PATH, JSON.stringify(appState.config));
} catch (error) {
console.error("Failed to save configuration:", error);
}
}
async function loadTranslations() {
const locale = app.getSystemLocale();
console.log({locale});
const defaultLangPath = path.join(__dirname, "translations", "en.json");
let langPath = path.join(__dirname, "translations", `${locale}.json`);
try {
await fs.access(langPath);
} catch {
langPath = defaultLangPath;
}
try {
const fileContent = await fs.readFile(langPath, "utf8");
appState.loadedLanguage = JSON.parse(fileContent);
} catch (error) {
console.error("Failed to load translation file:", error);
appState.loadedLanguage = {};
}
}
================================================
FILE: package.json
================================================
{
"dependencies": {
"electron-updater": "^6.6.2",
"systeminformation": "^5.25.11",
"yt-dlp-wrap-plus": "^2.4.3"
},
"name": "ytdownloader",
"version": "3.20.2",
"main": "main.js",
"scripts": {
"start": "electron .",
"dist": "electron-builder",
"debug": "electron --inspect=5858 .",
"windows": "electron-builder -w",
"linux": "electron-builder -l",
"mac": "electron-builder -m",
"gh-windows": "electron-builder -w --publish=always",
"gh-linux": "electron-builder -l --publish=always",
"gh-mac": "electron-builder -m --publish=always"
},
"author": {
"name": "Andrew",
"email": "aandrew.me@pm.me"
},
"publish": {
"provider": "github",
"owner": "aandrew-me",
"repo": "ytDownloader",
"private": false
},
"license": "GPL-3.0",
"description": "Download videos and audios from YouTube and many other sites",
"devDependencies": {
"electron": "^30.0.0",
"electron-builder": "^26.0.12",
"typescript": "^5.3.3"
},
"build": {
"productName": "YTDownloader",
"appId": "io.github.aandrew_me.ytdn",
"artifactName": "${productName}.${ext}",
"files": [
"./resources/**/*",
"main.js",
"./html/**/*",
"./resources/**/*",
"./public/**/*",
"package.json",
"./assets/**/*",
"./src/*.js",
"./ffmpeg/**/*",
"!ffmpeg.patch",
"translations",
"node*"
],
"electronLanguages": [
"en-US"
],
"mac": {
"category": "Utility",
"target": [
"zip",
"dmg"
],
"artifactName": "${productName}_Mac_${arch}.${ext}"
},
"dmg": {
"contents": [
{
"x": 130,
"y": 220
},
{
"x": 410,
"y": 220,
"type": "link",
"path": "/Applications"
}
],
"sign": false
},
"asar": false,
"directories": {
"buildResources": "resources",
"output": "release"
},
"linux": {
"target": [
"Appimage",
"snap",
"rpm",
"zip",
"deb"
],
"category": "Utility",
"artifactName": "${productName}_Linux.${ext}"
},
"snap": {
"grade": "stable",
"base": "core22"
},
"win": {
"target": [
"nsis",
"msi",
"zip"
],
"artifactName": "${productName}_Win.${ext}"
},
"nsis": {
"allowToChangeInstallationDirectory": true,
"oneClick": false,
"deleteAppDataOnUninstall": true
},
"msi": {
"oneClick": true,
"createDesktopShortcut": true,
"createStartMenuShortcut": true,
"shortcutName": "YTDownloader"
}
}
}
================================================
FILE: src/common.js
================================================
const electron = require("electron");
/**
*
* @param {string} id
* @returns {any}
*/
function getId(id) {
return document.getElementById(id);
}
getId("menuIcon").addEventListener("click", () => {
const menuDisplay = getId("menu").style.display;
if (menuDisplay != "none" && menuDisplay != "") {
getId("menuIcon").style.transform = "rotate(0deg)";
let count = 0;
let opacity = 1;
const fade = setInterval(() => {
if (count >= 10) {
getId("menu").style.display = "none";
clearInterval(fade);
} else {
opacity -= 0.1;
getId("menu").style.opacity = opacity.toFixed(3).toString();
count++;
}
}, 50);
} else {
getId("menuIcon").style.transform = "rotate(90deg)";
setTimeout(() => {
getId("menu").style.display = "flex";
getId("menu").style.opacity = "1";
}, 150);
}
});
getId("themeToggle").addEventListener("change", () => {
localStorage.setItem("theme", getId("themeToggle").value);
const x = window.innerWidth;
const y = 0;
const maxRadius = Math.hypot(window.innerWidth, window.innerHeight);
const transition = document.startViewTransition(() => {
document.documentElement.setAttribute("theme", getId("themeToggle").value);
});
transition.ready.then(() => {
document.documentElement.animate(
{
clipPath: [
`circle(0px at ${x}px ${y}px)`,
`circle(${maxRadius}px at ${x}px ${y}px)`
]
},
{
duration: 1100,
easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
pseudoElement: '::view-transition-new(root)'
}
);
});
});
const storageTheme = localStorage.getItem("theme");
if (storageTheme) {
document.documentElement.setAttribute("theme", storageTheme);
getId("themeToggle").value = storageTheme;
} else {
getId("themeToggle").value = "frappe";
document.documentElement.setAttribute("theme", "frappe");
}
////
let advancedHidden = true;
function advancedToggle() {
if (advancedHidden) {
getId("advanced").style.display = "block";
advancedHidden = false;
} else {
getId("advanced").style.display = "none";
advancedHidden = true;
}
}
// Check scroll go to top
window.onscroll = function () {
scrollFunction();
};
function scrollFunction() {
if (
document.body.scrollTop > 50 ||
document.documentElement.scrollTop > 50
) {
getId("goToTop").style.display = "block";
} else {
getId("goToTop").style.display = "none";
}
}
// Function to scroll go to top
getId("goToTop").addEventListener("click", () => {
window.scrollTo({top: 0, behavior: "smooth"});
});
// Showing and hiding error details
function toggleErrorDetails() {
const status = getId("errorDetails").style.display;
if (status === "none") {
getId("errorDetails").style.display = "block";
// @ts-ignore
getId("errorBtn").textContent = i18n.__("errorDetails") + " ▲";
} else {
getId("errorDetails").style.display = "none";
// @ts-ignore
getId("errorBtn").textContent = i18n.__("errorDetails") + " ▼";
}
}
================================================
FILE: src/compressor.js
================================================
const {exec, execSync} = require("child_process");
const path = require("path");
const {ipcRenderer, shell} = require("electron");
const os = require("os");
const si = require("systeminformation");
const {existsSync} = require("fs");
document.addEventListener("translations-loaded", () => {
window.i18n.translatePage();
});
let menuIsOpen = false;
getId("menuIcon").addEventListener("click", () => {
if (menuIsOpen) {
getId("menuIcon").style.transform = "rotate(0deg)";
menuIsOpen = false;
let count = 0;
let opacity = 1;
const fade = setInterval(() => {
if (count >= 10) {
getId("menu").style.display = "none";
clearInterval(fade);
} else {
opacity -= 0.1;
getId("menu").style.opacity = opacity.toFixed(3).toString();
count++;
}
}, 50);
} else {
getId("menuIcon").style.transform = "rotate(90deg)";
menuIsOpen = true;
setTimeout(() => {
getId("menu").style.display = "flex";
getId("menu").style.opacity = "1";
}, 150);
}
});
const ffmpeg = `"${getFfmpegPath()}"`;
console.log(ffmpeg);
const vaapi_device = "/dev/dri/renderD128";
// Checking GPU
si.graphics().then((info) => {
console.log({gpuInfo: info});
const gpuDevices = info.controllers;
gpuDevices.forEach((gpu) => {
// NVIDIA
const gpuName = gpu.vendor.toLowerCase();
const gpuModel = gpu.model.toLowerCase();
if (gpuName.includes("nvidia") || gpuModel.includes("nvidia")) {
document.querySelectorAll(".nvidia_opt").forEach((opt) => {
opt.style.display = "block";
});
} else if (
gpuName.includes("advanced micro devices") ||
gpuModel.includes("amd")
) {
if (os.platform() == "win32") {
document.querySelectorAll(".amf_opt").forEach((opt) => {
opt.style.display = "block";
});
} else {
document.querySelectorAll(".vaapi_opt").forEach((opt) => {
opt.style.display = "block";
});
}
} else if (gpuName.includes("intel")) {
if (os.platform() == "win32") {
document.querySelectorAll(".qsv_opt").forEach((opt) => {
opt.style.display = "block";
});
} else if (os.platform() != "darwin") {
document.querySelectorAll(".vaapi_opt").forEach((opt) => {
opt.style.display = "block";
});
}
} else {
if (os.platform() == "darwin") {
document
.querySelectorAll(".videotoolbox_opt")
.forEach((opt) => {
opt.style.display = "block";
});
}
}
});
});
/** @type {File[]} */
let files = [];
let activeProcesses = new Set();
let currentItemId = "";
let isCancelled = false;
/**
* @param {string} id
*/
function getId(id) {
return document.getElementById(id);
}
// File Handling
const dropZone = document.querySelector(".drop-zone");
const fileInput = getId("fileInput");
const selectedFilesDiv = getId("selected-files");
dropZone.addEventListener("dragover", (e) => {
e.preventDefault();
dropZone.classList.add("dragover");
});
dropZone.addEventListener("dragleave", () => {
dropZone.classList.remove("dragover");
});
dropZone.addEventListener("drop", (e) => {
e.preventDefault();
dropZone.classList.remove("dragover");
// @ts-ignore
console.log(e.dataTransfer);
files = Array.from(e.dataTransfer.files);
updateSelectedFiles();
});
fileInput.addEventListener("change", (e) => {
// @ts-ignore
files = Array.from(e.target.files);
updateSelectedFiles();
});
getId("custom-folder-select").addEventListener("click", (e) => {
ipcRenderer.send("get-directory", "");
});
function updateSelectedFiles() {
const fileList = files
.map((f) => `${f.name} (${formatBytes(f.size)})`;
}
});
});
}
/**
* @param {File} file
* @param {{ encoder: string; speed: string; videoQuality: string; audioQuality: string; audioFormat: string }} settings
* @param {string} outputPath
*/
function buildFFmpegCommand(file, settings, outputPath) {
const inputPath = file.path;
console.log("Output path: " + outputPath);
const args = ["-hide_banner", "-y", "-stats", "-i", `"${inputPath}"`];
switch (settings.encoder) {
case "copy":
args.push("-c:v", "copy");
break;
case "x264":
args.push(
"-c:v",
"libx264",
"-preset",
settings.speed,
"-vf",
"format=yuv420p",
"-crf",
parseInt(settings.videoQuality).toString()
);
break;
case "x265":
args.push(
"-c:v",
"libx265",
"-vf",
"format=yuv420p",
"-preset",
settings.speed,
"-crf",
parseInt(settings.videoQuality).toString()
);
break;
// Intel windows
case "qsv":
args.push(
"-c:v",
"h264_qsv",
"-vf",
"format=yuv420p",
"-preset",
settings.speed,
"-global_quality",
parseInt(settings.videoQuality).toString()
);
break;
// Linux amd and intel
case "vaapi":
args.push(
"-vaapi_device",
vaapi_device,
"-vf",
"format=nv12,hwupload",
"-c:v",
"h264_vaapi",
"-qp",
parseInt(settings.videoQuality).toString()
);
break;
case "hevc_vaapi":
args.push(
"-vaapi_device",
vaapi_device,
"-vf",
"format=nv12,hwupload",
"-c:v",
"hevc_vaapi",
"-qp",
parseInt(settings.videoQuality).toString()
);
break;
// Nvidia windows and linux
case "nvenc":
args.push(
"-c:v",
"h264_nvenc",
"-vf",
"format=yuv420p",
"-preset",
getNvencPreset(settings.speed),
"-rc",
"vbr",
"-cq",
parseInt(settings.videoQuality).toString()
);
break;
// Amd windows
case "hevc_amf":
let amf_hevc_quality = "balanced";
if (settings.speed == "slow") {
amf_hevc_quality = "quality";
} else if (settings.speed == "fast") {
amf_hevc_quality = "speed";
}
args.push(
"-c:v",
"hevc_amf",
"-vf",
"format=yuv420p",
"-quality",
amf_hevc_quality,
"-rc",
"cqp",
"-qp_i",
parseInt(settings.videoQuality).toString(),
"-qp_p",
parseInt(settings.videoQuality).toString()
);
break;
case "amf":
let amf_quality = "balanced";
if (settings.speed == "slow") {
amf_quality = "quality";
} else if (settings.speed == "fast") {
amf_quality = "speed";
}
args.push(
"-c:v",
"h264_amf",
"-vf",
"format=yuv420p",
"-quality",
amf_quality,
"-rc",
"cqp",
"-qp_i",
parseInt(settings.videoQuality).toString(),
"-qp_p",
parseInt(settings.videoQuality).toString(),
"-qp_b",
parseInt(settings.videoQuality).toString()
);
break;
case "videotoolbox":
args.push(
"-c:v",
"-vf",
"format=yuv420p",
"h264_videotoolbox",
"-q:v",
parseInt(settings.videoQuality).toString()
);
break;
}
// args.push("-vf", "scale=trunc(iw*1/2)*2:trunc(ih*1/2)*2,format=yuv420p");
args.push("-c:a", settings.audioFormat, `"${outputPath}"`);
return `${ffmpeg} ${args.join(" ")}`;
}
/**
*
* @returns {{ encoder: string; speed: string; videoQuality: string; audioQuality?: string; audioFormat: string, extension: string, outputPath:string }} settings
*/
function getEncoderSettings() {
return {
// @ts-ignore
encoder: getId("encoder").value,
// @ts-ignore
speed: getId("compression-speed").value,
// @ts-ignore
videoQuality: getId("video-quality").value,
// @ts-ignore
audioFormat: getId("audio-format").value,
// @ts-ignore
extension: getId("file_extension").value,
outputPath: getId("custom-folder-path").textContent,
// @ts-ignore
outputSuffix: getId("output-suffix").value,
};
}
/**
* @param {string | number} speed
*/
function getNvencPreset(speed) {
const presets = {fast: "p3", medium: "p4", slow: "p5"};
return presets[speed] || "p4";
}
/**
* @param {string} status
* @param {string} data
* @param {string} itemId
*/
function updateProgress(status, data, itemId) {
if (status == "success" || status == "error") {
const item = getId("itemId");
if (item) {
getId(itemId).classList.remove("progress");
getId(itemId).classList.add(status);
}
}
if (itemId) {
getId(itemId + "_prog").textContent = data;
}
}
/**
* @param {string} filename
* @param {string} status
* @param {string} data
* @param {string} itemId
*/
function createProgressItem(filename, status, data, itemId) {
const statusElement = getId("compression-status");
const newStatus = document.createElement("div");
newStatus.id = itemId;
newStatus.className = `status-item ${status}`;
const visibleFilename = filename.substring(0, 45);
newStatus.innerHTML = `
${visibleFilename}
${data}
`;
statusElement.append(newStatus);
}
/**
* @param {any} bytes
*/
function formatBytes(bytes) {
const units = ["B", "KB", "MB", "GB"];
let size = bytes;
let unitIndex = 0;
while (size >= 1024 && unitIndex < units.length - 1) {
size /= 1024;
unitIndex++;
}
return `${size.toFixed(2)} ${units[unitIndex]}`;
}
/**
* @param {string} timeStr
*/
function timeToSeconds(timeStr) {
if (!timeStr) {
return 0;
}
const [hh, mm, ss] = timeStr.split(":").map(parseFloat);
return hh * 3600 + mm * 60 + ss;
}
function getFfmpegPath() {
if (
process.env.YTDOWNLOADER_FFMPEG_PATH &&
existsSync(process.env.YTDOWNLOADER_FFMPEG_PATH)
) {
console.log("Using FFMPEG from YTDOWNLOADER_FFMPEG_PATH");
return process.env.YTDOWNLOADER_FFMPEG_PATH;
}
switch (os.platform()) {
case "win32":
return path.join(__dirname, "..", "ffmpeg", "bin", "ffmpeg.exe");
case "freebsd":
try {
return execSync("which ffmpeg").toString("utf8").trim();
} catch (error) {
console.error("ffmpeg not found on FreeBSD:", error);
return "";
}
default:
return path.join(__dirname, "..", "ffmpeg", "bin", "ffmpeg");
}
}
getId("themeToggle").addEventListener("change", () => {
document.documentElement.setAttribute("theme", getId("themeToggle").value);
localStorage.setItem("theme", getId("themeToggle").value);
});
getId("output-folder-input").addEventListener("change", (e) => {
const checked = e.target.checked;
if (!checked) {
getId("custom-folder-select").style.display = "block";
} else {
getId("custom-folder-select").style.display = "none";
getId("custom-folder-path").textContent = "";
getId("custom-folder-path").style.display = "none";
}
});
const storageTheme = localStorage.getItem("theme");
if (storageTheme) {
document.documentElement.setAttribute("theme", storageTheme);
getId("themeToggle").value = storageTheme;
} else {
document.documentElement.setAttribute("theme", "frappe");
getId("themeToggle").value = "frappe";
}
ipcRenderer.on("directory-path", (_event, msg) => {
let customFolderPathItem = getId("custom-folder-path");
customFolderPathItem.textContent = msg;
customFolderPathItem.style.display = "inline";
});
function closeMenu() {
getId("menuIcon").style.transform = "rotate(0deg)";
let count = 0;
let opacity = 1;
const fade = setInterval(() => {
if (count >= 10) {
clearInterval(fade);
} else {
opacity -= 0.1;
getId("menu").style.opacity = String(opacity);
count++;
}
}, 50);
}
// Menu
getId("preferenceWin").addEventListener("click", () => {
closeMenu();
menuIsOpen = false;
ipcRenderer.send("load-page", __dirname + "/preferences.html");
});
getId("playlistWin").addEventListener("click", () => {
closeMenu();
menuIsOpen = false;
ipcRenderer.send("load-win", __dirname + "/playlist.html");
});
getId("aboutWin").addEventListener("click", () => {
closeMenu();
menuIsOpen = false;
ipcRenderer.send("load-page", __dirname + "/about.html");
});
getId("historyWin").addEventListener("click", () => {
closeMenu();
menuIsOpen = false;
ipcRenderer.send("load-page", __dirname + "/history.html");
});
getId("homeWin").addEventListener("click", () => {
closeMenu();
menuIsOpen = false;
ipcRenderer.send("load-win", __dirname + "/index.html");
});
================================================
FILE: src/history.js
================================================
/**
* Download History Manager
*/
const fs = require("fs");
const path = require("path");
const crypto = require("crypto");
const {app} = require("electron");
class DownloadHistory {
constructor() {
this.historyFile = path.join(
app.getPath("userData"),
"download_history.json"
);
this.maxHistoryItems = 800;
this.history = [];
this.initialized = this._loadHistory().then((history) => {
this.history = history;
});
}
_generateUniqueId() {
return crypto.randomUUID();
}
async _loadHistory() {
try {
if (fs.existsSync(this.historyFile)) {
const data = await fs.promises.readFile(
this.historyFile,
"utf8"
);
return JSON.parse(data) || [];
}
} catch (error) {
console.error("Error loading history:", error);
}
return [];
}
async _saveHistory() {
try {
await fs.promises.writeFile(
this.historyFile,
JSON.stringify(this.history, null, 2)
);
} catch (error) {
console.error("Error saving history:", error);
}
}
async addDownload(downloadInfo) {
await this.initialized;
const historyItem = {
id: this._generateUniqueId(),
title: downloadInfo.title || "Unknown",
url: downloadInfo.url || "",
filename: downloadInfo.filename || "",
filePath: downloadInfo.filePath || "",
fileSize: downloadInfo.fileSize || 0,
format: downloadInfo.format || "unknown",
thumbnail: downloadInfo.thumbnail || "",
duration: downloadInfo.duration || 0,
downloadDate: new Date().toISOString(),
timestamp: Date.now(),
};
// Add to beginning for most recent first
this.history.unshift(historyItem);
// Keep only recent items
if (this.history.length > this.maxHistoryItems) {
this.history = this.history.slice(0, this.maxHistoryItems);
}
await this._saveHistory();
return historyItem;
}
async getHistory() {
await this.initialized;
return this.history;
}
async getFilteredHistory(options = {}) {
await this.initialized;
let filtered = [...this.history];
if (options.format) {
filtered = filtered.filter(
(item) =>
item.format.toLowerCase() === options.format.toLowerCase()
);
}
if (options.searchTerm) {
const term = options.searchTerm.toLowerCase();
filtered = filtered.filter(
(item) =>
item.title.toLowerCase().includes(term) ||
item.url.toLowerCase().includes(term)
);
}
if (options.limit) {
filtered = filtered.slice(0, options.limit);
}
return filtered;
}
async getHistoryItem(id) {
await this.initialized;
return this.history.find((item) => item.id === id) || null;
}
async removeHistoryItem(id) {
await this.initialized;
const index = this.history.findIndex((item) => item.id === id);
if (index !== -1) {
this.history.splice(index, 1);
await this._saveHistory();
return true;
}
return false;
}
async clearHistory() {
await this.initialized;
this.history = [];
await this._saveHistory();
}
async getStats() {
await this.initialized;
const stats = {
totalDownloads: this.history.length,
totalSize: 0,
byFormat: {},
oldestDownload: null,
newestDownload: null,
};
this.history.forEach((item) => {
stats.totalSize += item.fileSize || 0;
const fmt = item.format.toLowerCase();
stats.byFormat[fmt] = (stats.byFormat[fmt] || 0) + 1;
});
if (this.history.length > 0) {
stats.newestDownload = this.history[0];
stats.oldestDownload = this.history[this.history.length - 1];
}
return stats;
}
async exportAsJSON() {
await this.initialized;
return JSON.stringify(this.history, null, 2);
}
_sanitizeCSVField(value) {
if (value == null) {
value = "";
}
const stringValue = String(value);
let sanitized = stringValue.replace(/"/g, '""');
const dangerousChars = ["=", "+", "-", "@"];
if (sanitized.length > 0 && dangerousChars.includes(sanitized[0])) {
sanitized = "'" + sanitized;
}
return `"${sanitized}"`;
}
async exportAsCSV() {
await this.initialized;
if (this.history.length === 0) return "No history to export\n";
const headers = [
"Title",
"URL",
"Filename",
"Format",
"File Size (bytes)",
"Download Date",
];
const rows = this.history.map((item) => [
this._sanitizeCSVField(item.title),
this._sanitizeCSVField(item.url),
this._sanitizeCSVField(item.filename),
this._sanitizeCSVField(item.format),
this._sanitizeCSVField(item.fileSize),
this._sanitizeCSVField(item.downloadDate),
]);
return (
headers.join(",") +
"\n" +
rows.map((row) => row.join(",")).join("\n")
);
}
}
module.exports = DownloadHistory;
================================================
FILE: src/index.js
================================================
const videoToggle = getId("videoToggle");
const audioToggle = getId("audioToggle");
const incorrectMsg = getId("incorrectMsg");
const loadingMsg = getId("loadingWrapper");
function getId(id) {
return document.getElementById(id);
}
// Video and audio toggle
videoToggle.addEventListener("click", (event) => {
selectVideo()
});
audioToggle.addEventListener("click", (event) => {
selectAudio()
});
/////////////
function selectVideo(){
localStorage.setItem("defaultWindow", "video")
videoToggle.style.backgroundColor = "var(--box-toggleOn)";
audioToggle.style.backgroundColor = "var(--box-toggle)";
getId("audioList").style.display = "none";
getId("audioExtract").style.display = "none";
getId("videoList").style.display = "block";
}
function selectAudio(){
localStorage.setItem("defaultWindow", "audio")
audioToggle.style.backgroundColor = "var(--box-toggleOn)";
videoToggle.style.backgroundColor = "var(--box-toggle)";
getId("videoList").style.display = "none";
getId("audioList").style.display = "block";
getId("audioExtract").style.display = "block";
}
================================================
FILE: src/playlist.js
================================================
const {clipboard, ipcRenderer} = require("electron");
const {default: YTDlpWrap} = require("yt-dlp-wrap-plus");
const path = require("path");
const os = require("os");
const fs = require("fs");
const {execSync} = require("child_process");
const {constants} = require("fs/promises");
const playlistDownloader = {
// State and config
state: {
url: null,
downloadDir: null,
ytDlpPath: null,
ytDlpWrap: null,
ffmpegPath: null,
jsRuntimePath: null,
playlistName: "",
originalCount: 0,
currentDownloadProcess: null,
},
config: {
foldernameFormat: "%(playlist_title)s",
filenameFormat: "%(playlist_index)s.%(title)s.%(ext)s",
proxy: "",
cookie: {
browser: "",
arg: "",
},
configFile: {
arg: "",
path: "",
},
playlistRange: {
start: 1,
end: "",
},
},
// DOM elements
ui: {
pasteLinkBtn: document.getElementById("pasteLink"),
linkDisplay: document.getElementById("link"),
optionsContainer: document.getElementById("options"),
downloadList: document.getElementById("list"),
downloadVideoBtn: document.getElementById("download"),
downloadAudioBtn: document.getElementById("audioDownload"),
downloadThumbnailsBtn: document.getElementById("downloadThumbnails"),
saveLinksBtn: document.getElementById("saveLinks"),
selectLocationBtn: document.getElementById("selectLocation"),
pathDisplay: document.getElementById("path"),
openDownloadsBtn: document.getElementById("openDownloads"),
videoToggle: document.getElementById("videoToggle"),
audioToggle: document.getElementById("audioToggle"),
advancedToggle: document.getElementById("advancedToggle"),
videoBox: document.getElementById("videoBox"),
audioBox: document.getElementById("audioBox"),
videoQualitySelect: document.getElementById("select"),
videoTypeSelect: document.getElementById("videoTypeSelect"),
typeSelectBox: document.getElementById("typeSelectBox"),
audioTypeSelect: document.getElementById("audioSelect"),
audioQualitySelect: document.getElementById("audioQualitySelect"),
advancedMenu: document.getElementById("advancedMenu"),
playlistIndexInput: document.getElementById("playlistIndex"),
playlistEndInput: document.getElementById("playlistEnd"),
subtitlesCheckbox: document.getElementById("subChecked"),
closeHiddenBtn: document.getElementById("closeHidden"),
playlistNameDisplay: document.getElementById("playlistName"),
errorMsgDisplay: document.getElementById("incorrectMsgPlaylist"),
errorBtn: document.getElementById("errorBtn"),
errorDetails: document.getElementById("errorDetails"),
menuIcon: document.getElementById("menuIcon"),
menu: document.getElementById("menu"),
preferenceWinBtn: document.getElementById("preferenceWin"),
aboutWinBtn: document.getElementById("aboutWin"),
historyWinBtn: document.getElementById("historyWin"),
homeWinBtn: document.getElementById("homeWin"),
compressorWinBtn: document.getElementById("compressorWin"),
},
init() {
this.loadInitialConfig();
this.initEventListeners();
// Set initial UI state
this.ui.pathDisplay.textContent = this.state.downloadDir;
this.ui.videoToggle.style.backgroundColor = "var(--box-toggleOn)";
this.updateVideoTypeVisibility();
// Load translations when ready
document.addEventListener("translations-loaded", () => {
window.i18n.translatePage();
});
console.log(`yt-dlp path: ${this.state.ytDlpPath}`);
console.log(`ffmpeg path: ${this.state.ffmpegPath}`);
},
loadInitialConfig() {
// yt-dlp path
this.state.ytDlpPath = localStorage.getItem("ytdlp");
this.state.ytDlpWrap = new YTDlpWrap(`"${this.state.ytDlpPath}"`);
const defaultDownloadsDir = path.join(os.homedir(), "Downloads");
let preferredDir =
localStorage.getItem("downloadPath") || defaultDownloadsDir;
try {
fs.accessSync(preferredDir, constants.W_OK);
this.state.downloadDir = preferredDir;
} catch (err) {
console.error(
"Unable to write to preferred download directory. Reverting to default.",
err
);
this.state.downloadDir = defaultDownloadsDir;
localStorage.setItem("downloadPath", defaultDownloadsDir);
}
// ffmpeg and js runtime path setup
this.state.ffmpegPath = this.getFfmpegPath();
this.state.jsRuntimePath = this.getJsRuntimePath();
if (localStorage.getItem("preferredVideoQuality")) {
this.ui.videoQualitySelect.value = localStorage.getItem(
"preferredVideoQuality"
);
}
if (localStorage.getItem("preferredAudioQuality")) {
this.ui.audioQualitySelect.value = localStorage.getItem(
"preferredAudioQuality"
);
}
},
initEventListeners() {
this.ui.pasteLinkBtn.addEventListener("click", () => this.pasteLink());
document.addEventListener("keydown", (event) => {
if (
(event.ctrlKey && event.key === "v") ||
(event.metaKey &&
event.key === "v" &&
os.platform() === "darwin" &&
document.activeElement.tagName !== "INPUT" &&
document.activeElement.tagName !== "TEXTAREA")
) {
this.pasteLink();
}
});
this.ui.downloadVideoBtn.addEventListener("click", () =>
this.startDownload("video")
);
this.ui.downloadAudioBtn.addEventListener("click", () =>
this.startDownload("audio")
);
this.ui.downloadThumbnailsBtn.addEventListener("click", () =>
this.startDownload("thumbnails")
);
this.ui.saveLinksBtn.addEventListener("click", () =>
this.startDownload("links")
);
this.ui.videoToggle.addEventListener("click", () =>
this.toggleDownloadType("video")
);
this.ui.audioToggle.addEventListener("click", () =>
this.toggleDownloadType("audio")
);
this.ui.advancedToggle.addEventListener("click", () =>
this.toggleAdvancedMenu()
);
this.ui.videoQualitySelect.addEventListener("change", () =>
this.updateVideoTypeVisibility()
);
this.ui.selectLocationBtn.addEventListener("click", () =>
ipcRenderer.send("select-location-main", "")
);
this.ui.openDownloadsBtn.addEventListener("click", () =>
this.openDownloadsFolder()
);
this.ui.closeHiddenBtn.addEventListener("click", () =>
this.hideOptions(true)
);
this.ui.preferenceWinBtn.addEventListener("click", () =>
this.navigate("page", "/preferences.html")
);
this.ui.aboutWinBtn.addEventListener("click", () =>
this.navigate("page", "/about.html")
);
this.ui.historyWinBtn.addEventListener("click", () =>
this.navigate("page", "/history.html")
);
this.ui.homeWinBtn.addEventListener("click", () =>
this.navigate("win", "/index.html")
);
this.ui.compressorWinBtn.addEventListener("click", () =>
this.navigate("win", "/compressor.html")
);
ipcRenderer.on("downloadPath", (_event, downloadPath) => {
if (downloadPath && downloadPath[0]) {
this.ui.pathDisplay.textContent = downloadPath[0];
this.state.downloadDir = downloadPath[0];
}
});
},
startDownload(type) {
if (!this.state.url) {
this.showError("URL is missing. Please paste a link first.");
return;
}
this.updateDynamicConfig();
this.hideOptions();
const controller = new AbortController();
const baseArgs = this.buildBaseArgs();
let specificArgs = [];
switch (type) {
case "video":
specificArgs = this.getVideoArgs();
break;
case "audio":
specificArgs = this.getAudioArgs();
break;
case "thumbnails":
specificArgs = this.getThumbnailArgs();
break;
case "links":
specificArgs = this.getLinkArgs();
break;
}
const allArgs = [
...baseArgs,
...specificArgs,
`"${this.state.url}"`,
].filter(Boolean);
console.log(`Command: ${this.state.ytDlpPath}`, allArgs.join(" "));
this.state.currentDownloadProcess = this.state.ytDlpWrap.exec(
allArgs,
{shell: true, detached: false},
controller.signal
);
this.handleDownloadEvents(this.state.currentDownloadProcess, type);
},
buildBaseArgs() {
const {start, end} = this.config.playlistRange;
const outputPath = `"${path.join(
this.state.downloadDir,
this.config.foldernameFormat,
this.config.filenameFormat
)}"`;
return [
"--yes-playlist",
"-o",
outputPath,
"-I",
`"${start}:${end}"`,
"--ffmpeg-location",
`"${this.state.ffmpegPath}"`,
...(this.state.jsRuntimePath
? ["--no-js-runtimes", "--js-runtime", this.state.jsRuntimePath]
: []),
this.config.cookie.arg,
this.config.cookie.browser,
this.config.configFile.arg,
this.config.configFile.path,
...(this.config.proxy
? ["--no-check-certificate", "--proxy", this.config.proxy]
: []),
"--compat-options",
"no-youtube-unavailable-videos",
].filter(Boolean);
},
getVideoArgs() {
const quality = this.ui.videoQualitySelect.value;
const videoType = this.ui.videoTypeSelect.value;
let formatArgs = [];
if (quality === "best") {
formatArgs = ["-f", "bv*+ba/best"];
} else if (quality === "worst") {
formatArgs = ["-f", "wv+wa/worst"];
} else if (quality === "useConfig") {
formatArgs = [];
} else {
if (videoType === "mp4") {
formatArgs = [
"-f",
`"bestvideo[height<=${quality}]+bestaudio[ext=m4a]/best[height<=${quality}]/best"`,
"--merge-output-format",
"mp4",
"--recode-video",
"mp4",
];
} else if (videoType === "webm") {
formatArgs = [
"-f",
`"bestvideo[height<=${quality}]+bestaudio[ext=webm]/best[height<=${quality}]/best"`,
"--merge-output-format",
"webm",
"--recode-video",
"webm",
];
} else {
formatArgs = [
"-f",
`"bv*[height=${quality}]+ba/best[height=${quality}]/best[height<=${quality}]"`,
];
}
}
const isYouTube =
this.state.url.includes("youtube.com/") ||
this.state.url.includes("youtu.be/");
const canEmbedThumb = os.platform() !== "darwin";
return [
...formatArgs,
"--embed-metadata",
this.ui.subtitlesCheckbox.checked ? "--write-subs" : "",
this.ui.subtitlesCheckbox.checked ? "--sub-langs" : "",
this.ui.subtitlesCheckbox.checked ? "all" : "",
videoType === "mp4" && isYouTube && canEmbedThumb
? "--embed-thumbnail"
: "",
].filter(Boolean);
},
getAudioArgs() {
const format = this.ui.audioTypeSelect.value;
const quality = this.ui.audioQualitySelect.value;
const isYouTube =
this.state.url.includes("youtube.com/") ||
this.state.url.includes("youtu.be/");
const canEmbedThumb = os.platform() !== "darwin";
if (isYouTube && format === "m4a" && quality === "auto") {
return [
"-f",
`ba[ext=${format}]/ba`,
"--embed-metadata",
canEmbedThumb ? "--embed-thumbnail" : "",
];
}
return [
"-x",
"--audio-format",
format,
"--audio-quality",
quality,
"--embed-metadata",
(format === "mp3" || (format === "m4a" && isYouTube)) &&
canEmbedThumb
? "--embed-thumbnail"
: "",
];
},
getThumbnailArgs() {
return [
"--write-thumbnail",
"--convert-thumbnails",
"png",
"--skip-download",
];
},
getLinkArgs() {
const linksFilePath = `"${path.join(
this.state.downloadDir,
this.config.foldernameFormat,
"links.txt"
)}"`;
return [
"--skip-download",
"--print-to-file",
"webpage_url",
linksFilePath,
];
},
// yt-dlp event handling
handleDownloadEvents(process, type) {
let count = 0;
process.on("ytDlpEvent", (_eventType, eventData) => {
const playlistTxt = "Downloading playlist: ";
if (eventData.includes(playlistTxt)) {
this.state.playlistName = eventData
.split(playlistTxt)[1]
.trim();
this.state.playlistName = this.state.playlistName
.replaceAll("|", "｜")
.replaceAll(`"`, `＂`)
.replaceAll("*", "＊")
.replaceAll("/", "⧸")
.replaceAll("\\", "⧹")
.replaceAll(":", "：")
.replaceAll("?", "？");
if (
os.platform() === "win32" &&
this.state.playlistName.endsWith(".")
) {
this.state.playlistName =
this.state.playlistName.slice(0, -1) + "#";
}
this.ui.playlistNameDisplay.textContent = `${window.i18n.__(
"downloadingPlaylist"
)} ${this.state.playlistName}`;
}
const videoIndexTxt = "Downloading item ";
const oldVideoIndexTxt = "Downloading video ";
if (
(eventData.includes(videoIndexTxt) ||
eventData.includes(oldVideoIndexTxt)) &&
!eventData.includes("thumbnail")
) {
count++;
this.state.originalCount++;
this.updatePlaylistUI(count, type);
}
});
process.on("progress", (progress) => {
const progressElement = document.getElementById(`p${count}`);
if (!progressElement) return;
if (progress.percent === 100) {
progressElement.textContent = `${window.i18n.__(
"processing"
)}...`;
} else {
progressElement.textContent = `${window.i18n.__("progress")} ${
progress.percent
}% | ${window.i18n.__("speed")} ${
progress.currentSpeed || "N/A"
}`;
}
});
process.on("error", (error) => this.showError(error));
process.on("close", () => this.finishDownload(count));
},
pasteLink() {
this.state.url = clipboard.readText();
this.ui.linkDisplay.textContent = ` ${this.state.url}`;
this.ui.optionsContainer.style.display = "block";
this.ui.errorMsgDisplay.textContent = "";
this.ui.errorBtn.style.display = "none";
},
updatePlaylistUI(count, type) {
let itemTitle = "";
switch (type) {
case "thumbnails":
itemTitle = `${window.i18n.__("thumbnail")} ${
this.state.originalCount
}`;
break;
case "links":
itemTitle = `${window.i18n.__("link")} ${
this.state.originalCount
}`;
break;
default:
itemTitle = `${window.i18n.__(type)} ${
this.state.originalCount
}`;
}
if (count > 1) {
const prevProgress = document.getElementById(`p${count - 1}`);
if (prevProgress)
prevProgress.textContent = window.i18n.__("fileSaved");
}
const itemHTML = `
${itemTitle}
${window.i18n.__(
"downloading"
)}
`;
this.ui.downloadList.innerHTML += itemHTML;
window.scrollTo(0, document.body.scrollHeight);
},
updateDynamicConfig() {
// Naming formats from localStorage
this.config.foldernameFormat =
localStorage.getItem("foldernameFormat") || "%(playlist_title)s";
this.config.filenameFormat =
localStorage.getItem("filenameFormat") ||
"%(playlist_index)s.%(title)s.%(ext)s";
// Proxy, cookies, config file
this.config.proxy = localStorage.getItem("proxy") || "";
this.config.cookie.browser = localStorage.getItem("browser") || "";
this.config.cookie.arg = this.config.cookie.browser
? "--cookies-from-browser"
: "";
const configPath = localStorage.getItem("configPath");
this.config.configFile.path = configPath ? `"${configPath}"` : "";
this.config.configFile.arg = configPath ? "--config-location" : "";
// Playlist range from UI inputs
this.config.playlistRange.start =
Number(this.ui.playlistIndexInput.value) || 1;
this.config.playlistRange.end = this.ui.playlistEndInput.value || "";
this.state.originalCount =
this.config.playlistRange.start > 1
? this.config.playlistRange.start - 1
: 0;
// Reset playlist name for new download
this.state.playlistName = "";
},
hideOptions(justHide = false) {
this.ui.optionsContainer.style.display = "none";
this.ui.downloadList.innerHTML = "";
this.ui.errorBtn.style.display = "none";
this.ui.errorDetails.style.display = "none";
this.ui.errorDetails.textContent = "";
this.ui.errorMsgDisplay.style.display = "none";
if (!justHide) {
this.ui.playlistNameDisplay.textContent = `${window.i18n.__(
"processing"
)}...`;
this.ui.pasteLinkBtn.style.display = "none";
this.ui.openDownloadsBtn.style.display = "inline-block";
}
},
finishDownload(count) {
const lastProgress = document.getElementById(`p${count}`);
if (lastProgress)
lastProgress.textContent = window.i18n.__("fileSaved");
this.ui.pasteLinkBtn.style.display = "inline-block";
this.ui.openDownloadsBtn.style.display = "inline-block";
const notify = new Notification("ytDownloader", {
body: window.i18n.__("playlistDownloaded"),
icon: "../assets/images/icon.png",
});
notify.onclick = () => this.openDownloadsFolder();
},
showError(error) {
console.error("Download Error:", error.toString());
this.ui.pasteLinkBtn.style.display = "inline-block";
this.ui.openDownloadsBtn.style.display = "none";
this.ui.optionsContainer.style.display = "block";
this.ui.playlistNameDisplay.textContent = "";
this.ui.errorMsgDisplay.textContent =
window.i18n.__("errorNetworkOrUrl");
this.ui.errorMsgDisplay.style.display = "block";
this.ui.errorMsgDisplay.title = error.toString();
this.ui.errorBtn.style.display = "inline-block";
this.ui.errorDetails.innerHTML = `URL: ${
this.state.url
} URL: ${clipboardText}
URL: ${clipboardText}
} A promise that resolves with the path to yt-dlp.
*/
async _findOrDownloadYtDlp() {
const hiddenDir = join(homedir(), ".ytDownloader");
const defaultYtDlpName = platform() === "win32" ? "ytdlp.exe" : "ytdlp";
const defaultYtDlpPath = join(hiddenDir, defaultYtDlpName);
const isMacOS = platform() === "darwin";
const isFreeBSD = platform() === "freebsd";
let executablePath = null;
// PRIORITY 1: Environment Variable
if (process.env.YTDOWNLOADER_YTDLP_PATH) {
if (existsSync(process.env.YTDOWNLOADER_YTDLP_PATH)) {
executablePath = process.env.YTDOWNLOADER_YTDLP_PATH;
} else {
throw new Error(
"YTDOWNLOADER_YTDLP_PATH is set, but no file exists there."
);
}
}
// PRIORITY 2: macOS homebrew
else if (isMacOS) {
const possiblePaths = [
"/opt/homebrew/bin/yt-dlp", // Apple Silicon
"/usr/local/bin/yt-dlp", // Intel
];
executablePath = possiblePaths.find((p) => existsSync(p));
// If Homebrew check fails, show popup and abort
if (!executablePath) {
$(CONSTANTS.DOM_IDS.POPUP_BOX_MAC).style.display = "block";
console.warn("Homebrew yt-dlp not found. Prompting user.");
return "";
}
}
// PRIORITY 3: FreeBSD
else if (isFreeBSD) {
try {
executablePath = execSync("which yt-dlp").toString().trim();
} catch {
throw new Error(
"No yt-dlp found in PATH on FreeBSD. Please install it."
);
}
}
// PRIORITY 4: LocalStorage or Download (Windows/Linux)
else {
const storedPath = localStorage.getItem(
CONSTANTS.LOCAL_STORAGE_KEYS.YT_DLP_PATH
);
if (storedPath && existsSync(storedPath)) {
executablePath = storedPath;
}
// Download if missing
else {
executablePath = await this.ensureYtDlpBinary(defaultYtDlpPath);
}
}
localStorage.setItem(
CONSTANTS.LOCAL_STORAGE_KEYS.YT_DLP_PATH,
executablePath
);
// Auto update
this._runBackgroundUpdate(executablePath, isMacOS);
return executablePath;
}
/**
* yt-dlp background update
*/
_runBackgroundUpdate(executablePath, isMacOS) {
try {
if (isMacOS) {
const brewPaths = [
"/opt/homebrew/bin/brew",
"/usr/local/bin/brew",
];
const brewExec = brewPaths.find((p) => existsSync(p)) || "brew";
const brewUpdate = spawn(brewExec, ["upgrade", "yt-dlp"]);
brewUpdate.on("error", (err) =>
console.error("Failed to run 'brew upgrade yt-dlp':", err)
);
brewUpdate.stdout.on("data", (data) =>
console.log("yt-dlp brew update:", data.toString())
);
} else {
const updateProc = spawn(executablePath, ["-U"]);
updateProc.on("error", (err) =>
console.error(
"Failed to run background yt-dlp update:",
err
)
);
updateProc.stdout.on("data", (data) => {
const output = data.toString();
console.log("yt-dlp update check:", output);
if (output.toLowerCase().includes("updating to")) {
this._showPopup(i18n.__("updatingYtdlp"));
} else if (
output.toLowerCase().includes("updated yt-dlp to")
) {
this._showPopup(i18n.__("updatedYtdlp"));
}
});
}
} catch (err) {
console.warn("Error initiating background update:", err);
}
}
/**
* Checks for the presence of the yt-dlp binary at the default path.
* If not found, it attempts to download it from GitHub.
*
* @param {string} defaultYtDlpPath The expected path to the yt-dlp binary.
* @returns {Promise} A promise that resolves with the path to the yt-dlp binary.
* @throws {Error} Throws an error if the download fails.
*/
async ensureYtDlpBinary(defaultYtDlpPath) {
try {
await promises.access(defaultYtDlpPath);
return defaultYtDlpPath;
} catch {
console.log("yt-dlp not found, downloading...");
$(CONSTANTS.DOM_IDS.POPUP_BOX).style.display = "block";
$(CONSTANTS.DOM_IDS.POPUP_SVG).style.display = "inline";
document.querySelector("#popupBox p").textContent = i18n.__(
"downloadingNecessaryFilesWait"
);
try {
await YTDlpWrap.downloadFromGithub(
defaultYtDlpPath,
undefined,
undefined,
(progress, _d, _t) => {
$(
CONSTANTS.DOM_IDS.YTDLP_DOWNLOAD_PROGRESS
).textContent =
i18n.__("progress") +
`: ${(progress * 100).toFixed(2)}%`;
}
);
$(CONSTANTS.DOM_IDS.POPUP_BOX).style.display = "none";
localStorage.setItem(
CONSTANTS.LOCAL_STORAGE_KEYS.YT_DLP_PATH,
defaultYtDlpPath
);
return defaultYtDlpPath;
} catch (downloadError) {
$(CONSTANTS.DOM_IDS.YTDLP_DOWNLOAD_PROGRESS).textContent = "";
console.error("Failed to download yt-dlp:", downloadError);
document.querySelector("#popupBox p").textContent = i18n.__(
"errorFailedFileDownload"
);
$(CONSTANTS.DOM_IDS.POPUP_SVG).style.display = "none";
const tryAgainBtn = document.createElement("button");
tryAgainBtn.id = "tryBtn";
tryAgainBtn.textContent = i18n.__("tryAgain");
tryAgainBtn.addEventListener("click", () => {
// TODO: Improve it
ipcRenderer.send("reload");
});
document.getElementById("popup").appendChild(tryAgainBtn);
throw new Error("Failed to download yt-dlp.");
}
}
}
/**
* Locates the ffmpeg executable path.
* @returns {Promise} A promise that resolves with the path to ffmpeg.
*/
async _findFfmpeg() {
// Priority 1: Environment Variable
if (process.env.YTDOWNLOADER_FFMPEG_PATH) {
if (existsSync(process.env.YTDOWNLOADER_FFMPEG_PATH)) {
return process.env.YTDOWNLOADER_FFMPEG_PATH;
}
throw new Error(
"YTDOWNLOADER_FFMPEG_PATH is set, but no file exists there."
);
}
// Priority 2: System-installed (FreeBSD)
if (platform() === "freebsd") {
try {
return execSync("which ffmpeg").toString().trim();
} catch {
throw new Error(
"No ffmpeg found in PATH on FreeBSD. App may not work correctly."
);
}
}
// Priority 3: Bundled ffmpeg
return join(__dirname, "..", "ffmpeg", "bin");
}
/**
* Determines the JavaScript runtime path for yt-dlp.
* @returns {Promise} A promise that resolves with the JS runtime path.
*/
async _getJsRuntimePath() {
const exeName = "node";
if (process.env.YTDOWNLOADER_NODE_PATH) {
if (existsSync(process.env.YTDOWNLOADER_NODE_PATH)) {
return `$node:"${process.env.YTDOWNLOADER_NODE_PATH}"`;
}
return "";
}
if (process.env.YTDOWNLOADER_DENO_PATH) {
if (existsSync(process.env.YTDOWNLOADER_DENO_PATH)) {
return `$deno:"${process.env.YTDOWNLOADER_DENO_PATH}"`;
}
return "";
}
if (platform() === "darwin") {
const possiblePaths = [
"/opt/homebrew/bin/deno",
"/usr/local/bin/deno",
];
for (const p of possiblePaths) {
if (existsSync(p)) {
return `deno:"${p}"`;
}
}
console.log("No Deno installation found");
return "";
}
let jsRuntimePath = join(__dirname, "..", exeName);
if (platform() === "win32") {
jsRuntimePath = join(__dirname, "..", `${exeName}.exe`);
}
if (existsSync(jsRuntimePath)) {
return `${exeName}:"${jsRuntimePath}"`;
} else {
return "";
}
}
/**
* Loads various settings from localStorage into the application state.
*/
_loadSettings() {
const prefs = this.state.preferences;
prefs.videoQuality =
Number(
localStorage.getItem(
CONSTANTS.LOCAL_STORAGE_KEYS.PREFERRED_VIDEO_QUALITY
)
) || 1080;
prefs.audioQuality =
localStorage.getItem(
CONSTANTS.LOCAL_STORAGE_KEYS.PREFERRED_AUDIO_QUALITY
) || "";
prefs.videoCodec =
localStorage.getItem(
CONSTANTS.LOCAL_STORAGE_KEYS.PREFERRED_VIDEO_CODEC
) || "avc1";
prefs.showMoreFormats =
localStorage.getItem(
CONSTANTS.LOCAL_STORAGE_KEYS.SHOW_MORE_FORMATS
) === "true";
prefs.proxy =
localStorage.getItem(CONSTANTS.LOCAL_STORAGE_KEYS.PROXY) || "";
prefs.browserForCookies =
localStorage.getItem(
CONSTANTS.LOCAL_STORAGE_KEYS.BROWSER_COOKIES
) || "";
prefs.customYtDlpArgs =
localStorage.getItem(
CONSTANTS.LOCAL_STORAGE_KEYS.YT_DLP_CUSTOM_ARGS
) || "";
prefs.configPath = localStorage.getItem(CONSTANTS.LOCAL_STORAGE_KEYS.CONFIG_PATH) || "";
const maxDownloads = Number(
localStorage.getItem(CONSTANTS.LOCAL_STORAGE_KEYS.MAX_DOWNLOADS)
);
this.state.maxActiveDownloads = maxDownloads >= 1 ? maxDownloads : 5;
// Update UI with loaded settings
$(CONSTANTS.DOM_IDS.CUSTOM_ARGS_INPUT).value = prefs.customYtDlpArgs;
const downloadDir = localStorage.getItem(
CONSTANTS.LOCAL_STORAGE_KEYS.DOWNLOAD_PATH
);
if (downloadDir) {
this.state.downloadDir = downloadDir;
$(CONSTANTS.DOM_IDS.PATH_DISPLAY).textContent = downloadDir;
}
}
/**
* Attaches all necessary event listeners for the UI.
*/
_addEventListeners() {
$(CONSTANTS.DOM_IDS.PASTE_URL_BTN).addEventListener("click", () =>
this.pasteAndGetInfo()
);
document.addEventListener("keydown", (event) => {
if (
((event.ctrlKey && event.key === "v") ||
(event.metaKey &&
event.key === "v" &&
platform() === "darwin")) &&
document.activeElement.tagName !== "INPUT" &&
document.activeElement.tagName !== "TEXTAREA"
) {
$(CONSTANTS.DOM_IDS.PASTE_URL_BTN).classList.add("active");
setTimeout(() => {
$(CONSTANTS.DOM_IDS.PASTE_URL_BTN).classList.remove(
"active"
);
}, 150);
this.pasteAndGetInfo();
}
});
// Download buttons
$(CONSTANTS.DOM_IDS.VIDEO_DOWNLOAD_BTN).addEventListener("click", () =>
this.handleDownloadRequest("video")
);
$(CONSTANTS.DOM_IDS.AUDIO_DOWNLOAD_BTN).addEventListener("click", () =>
this.handleDownloadRequest("audio")
);
$(CONSTANTS.DOM_IDS.EXTRACT_BTN).addEventListener("click", () =>
this.handleDownloadRequest("extract")
);
// UI controls
$(CONSTANTS.DOM_IDS.CLOSE_HIDDEN_BTN).addEventListener("click", () =>
this._hideInfoPanel()
);
$(CONSTANTS.DOM_IDS.SELECT_LOCATION_BTN).addEventListener("click", () =>
ipcRenderer.send("select-location-main", "")
);
$(CONSTANTS.DOM_IDS.CLEAR_BTN).addEventListener("click", () =>
this._clearAllDownloaded()
);
// Error details
$(CONSTANTS.DOM_IDS.ERROR_DETAILS).addEventListener("click", (e) => {
// @ts-ignore
clipboard.writeText(e.target.innerText);
this._showPopup(i18n.__("copiedText"), false);
});
$(CONSTANTS.DOM_IDS.QUIT_APP_BTN).addEventListener("click", () => {
ipcRenderer.send("quit", "quit");
});
// IPC listeners
ipcRenderer.on("link", (event, text) => this.getInfo(text));
ipcRenderer.on("downloadPath", (event, downloadPath) => {
try {
accessSync(downloadPath[0], constants.W_OK);
const newPath = downloadPath[0];
$(CONSTANTS.DOM_IDS.PATH_DISPLAY).textContent = newPath;
this.state.downloadDir = newPath;
} catch (error) {
console.log(error);
this._showPopup(i18n.__("unableToAccessDir"), true);
}
});
ipcRenderer.on("download-progress", (_event, percent) => {
if (percent) {
const popup = $(CONSTANTS.DOM_IDS.UPDATE_POPUP);
const textEl = $(CONSTANTS.DOM_IDS.UPDATE_POPUP_PROGRESS);
const barEl = $(CONSTANTS.DOM_IDS.UPDATE_POPUP_BAR);
popup.style.display = "flex";
textEl.textContent = `${percent.toFixed(1)}%`;
barEl.style.width = `${percent}%`;
}
});
ipcRenderer.on("update-downloaded", (_event, _) => {
$(CONSTANTS.DOM_IDS.UPDATE_POPUP).style.display = "none";
});
// Menu Listeners
const menuMapping = {
[CONSTANTS.DOM_IDS.PREFERENCE_WIN]: "/preferences.html",
[CONSTANTS.DOM_IDS.ABOUT_WIN]: "/about.html",
[CONSTANTS.DOM_IDS.HISTORY_WIN]: "/history.html",
};
const windowMapping = {
[CONSTANTS.DOM_IDS.PLAYLIST_WIN]: "/playlist.html",
[CONSTANTS.DOM_IDS.COMPRESSOR_WIN]: "/compressor.html",
};
Object.entries(menuMapping).forEach(([id, page]) => {
$(id)?.addEventListener("click", () => {
this._closeMenu();
ipcRenderer.send("load-page", join(__dirname, page));
});
});
Object.entries(windowMapping).forEach(([id, page]) => {
$(id)?.addEventListener("click", () => {
this._closeMenu();
ipcRenderer.send("load-win", join(__dirname, page));
});
});
const minSlider = $(CONSTANTS.DOM_IDS.MIN_SLIDER);
const maxSlider = $(CONSTANTS.DOM_IDS.MAX_SLIDER);
minSlider.addEventListener("input", () =>
this._updateSliderUI(minSlider)
);
maxSlider.addEventListener("input", () =>
this._updateSliderUI(maxSlider)
);
$(CONSTANTS.DOM_IDS.START_TIME).addEventListener(
"change",
this._handleTimeInputChange
);
$(CONSTANTS.DOM_IDS.END_TIME).addEventListener(
"change",
this._handleTimeInputChange
);
this._updateSliderUI(null);
}
// --- Public Methods ---
/**
* Pastes URL from clipboard and initiates fetching video info.
*/
pasteAndGetInfo() {
this.getInfo(clipboard.readText());
}
/**
* Fetches video metadata from a given URL.
* @param {string} url The video URL.
*/
async getInfo(url) {
this._loadSettings();
this._defaultVideoToggle();
this._resetUIForNewLink();
this.state.videoInfo.url = url;
try {
const metadata = await this._fetchVideoMetadata(url);
console.log(metadata);
const durationInt =
metadata.duration == null ? null : Math.ceil(metadata.duration);
this.state.videoInfo = {
...this.state.videoInfo,
id: metadata.id,
title: metadata.title,
thumbnail: metadata.thumbnail,
duration: durationInt,
extractor_key: metadata.extractor_key,
};
this.setVideoLength(durationInt);
this._populateFormatSelectors(metadata.formats || []);
this._displayInfoPanel();
} catch (error) {
if (
error.message.includes("js-runtimes") &&
error.message.includes("no such option")
) {
this._showError(i18n.__("ytDlpUpdateRequired"), url);
} else {
this._showError(error.message, url);
}
} finally {
$(CONSTANTS.DOM_IDS.LOADING_WRAPPER).style.display = "none";
}
}
/**
* Handles a download request, either starting it immediately or queuing it.
* @param {'video' | 'audio' | 'extract'} type The type of download.
*/
handleDownloadRequest(type) {
this._updateDownloadOptionsFromUI();
const downloadJob = {
type,
url: this.state.videoInfo.url,
title: this.state.videoInfo.title,
thumbnail: this.state.videoInfo.thumbnail,
options: {...this.state.downloadOptions},
// Capture UI values at the moment of click
uiSnapshot: {
videoFormat: $(CONSTANTS.DOM_IDS.VIDEO_FORMAT_SELECT).value,
audioForVideoFormat: $(
CONSTANTS.DOM_IDS.AUDIO_FOR_VIDEO_FORMAT_SELECT
).value,
audioFormat: $(CONSTANTS.DOM_IDS.AUDIO_FORMAT_SELECT).value,
extractFormat: $(CONSTANTS.DOM_IDS.EXTRACT_SELECTION).value,
extractQuality: $(CONSTANTS.DOM_IDS.EXTRACT_QUALITY_SELECT)
.value,
},
};
if (this.state.currentDownloads < this.state.maxActiveDownloads) {
this._startDownload(downloadJob);
} else {
this._queueDownload(downloadJob);
}
this._hideInfoPanel();
}
/**
* Executes yt-dlp to get video metadata in JSON format.
* @param {string} url The video URL.
* @returns {Promise} A promise that resolves with the parsed JSON metadata.
*/
_fetchVideoMetadata(url) {
return new Promise((resolve, reject) => {
const {proxy, browserForCookies, configPath} =
this.state.preferences;
const args = [
"-j",
"--no-playlist",
"--no-warnings",
proxy ? "--proxy" : "",
proxy,
browserForCookies ? "--cookies-from-browser" : "",
browserForCookies,
this.state.jsRuntimePath
? `--no-js-runtimes --js-runtime ${this.state.jsRuntimePath}`
: "",
configPath ? "--config-location" : "",
configPath ? `"${configPath}"` : "",
`"${url}"`,
].filter(Boolean);
const process = this.state.ytDlp.exec(args, {shell: true});
console.log(
"Spawned yt-dlp with args:",
process.ytDlpProcess.spawnargs.join(" ")
);
let stdout = "";
let stderr = "";
process.ytDlpProcess.stdout.on("data", (data) => {
stdout += data;
});
process.ytDlpProcess.stderr.on("data", (data) => (stderr += data));
process.on("close", () => {
if (stdout) {
try {
resolve(JSON.parse(stdout));
} catch (e) {
reject(
new Error(
"Failed to parse yt-dlp JSON output: " +
(stderr || e.message)
)
);
}
} else {
reject(
new Error(
stderr || `yt-dlp exited with a non-zero code.`
)
);
}
});
process.on("error", (err) => reject(err));
});
}
/**
* Starts the download process for a given job.
* @param {object} job The download job object.
*/
_startDownload(job) {
this.state.currentDownloads++;
const randomId = "item_" + Math.random().toString(36).substring(2, 12);
const {downloadArgs, finalFilename, finalExt} =
this._prepareDownloadArgs(job);
this._createDownloadUI(randomId, job);
const controller = new AbortController();
this.state.downloadControllers.set(randomId, controller);
const downloadProcess = this.state.ytDlp.exec(downloadArgs, {
shell: true,
detached: false,
signal: controller.signal,
});
console.log(
"Spawned yt-dlp with args:",
downloadProcess.ytDlpProcess.spawnargs.join(" ")
);
// Attach event listeners
downloadProcess
.on("progress", (progress) => {
this._updateProgressUI(randomId, progress);
})
.once("ytDlpEvent", () => {
const el = $(`${randomId}_prog`);
if (el) el.textContent = i18n.__("downloading");
})
// .on("ytDlpEvent", (eventType, eventData) => {
// console.log(eventData)
// })
.once("close", (code) => {
this._handleDownloadCompletion(
code,
randomId,
finalFilename,
finalExt,
job.thumbnail
);
})
.once("error", (error) => {
this.state.downloadedItems.add(randomId);
this._updateClearAllButton();
this._handleDownloadError(error, randomId);
});
}
/**
* Queues a download job if the maximum number of active downloads is reached.
* @param {object} job The download job object.
*/
_queueDownload(job) {
const randomId = "queue_" + Math.random().toString(36).substring(2, 12);
this.state.downloadQueue.push({...job, queueId: randomId});
const itemHTML = `
${i18n.__(
job.type === "video" ? "video" : "audio"
)}
${job.title}
${i18n.__("preparing")}
`;
$(CONSTANTS.DOM_IDS.DOWNLOAD_LIST).insertAdjacentHTML(
"beforeend",
itemHTML
);
}
/**
* Checks the queue and starts the next download if a slot is available.
*/
_processQueue() {
if (
this.state.downloadQueue.length > 0 &&
this.state.currentDownloads < this.state.maxActiveDownloads
) {
const nextJob = this.state.downloadQueue.shift();
// Remove the pending UI element
$(nextJob.queueId)?.remove();
this._startDownload(nextJob);
}
}
/**
* Prepares the command-line arguments for yt-dlp based on the download job.
* @param {object} job The download job object.
* @returns {{downloadArgs: string[], finalFilename: string, finalExt: string}}
*/
_prepareDownloadArgs(job) {
const {type, url, title, options, uiSnapshot} = job;
const {rangeOption, rangeCmd, subs, subLangs} = options;
const {proxy, browserForCookies, configPath} = this.state.preferences;
let format_id, ext, audioForVideoFormat_id, audioFormat;
if (type === "video") {
const [videoFid, videoExt, _, videoCodec] =
uiSnapshot.videoFormat.split("|");
const [audioFid, audioExt] =
uiSnapshot.audioForVideoFormat.split("|");
format_id = videoFid;
audioForVideoFormat_id = audioFid;
const finalAudioExt = audioExt === "webm" ? "opus" : audioExt;
ext = videoExt;
if (videoExt === "mp4" && finalAudioExt === "opus") {
if (videoCodec.includes("avc")) ext = "mkv";
else if (videoCodec.includes("av01")) ext = "webm";
} else if (
videoExt === "webm" &&
["m4a", "mp4"].includes(finalAudioExt)
) {
ext = "mkv";
}
audioFormat =
audioForVideoFormat_id === "none"
? ""
: `+${audioForVideoFormat_id}`;
} else if (type === "audio") {
[format_id, ext] = uiSnapshot.audioFormat.split("|");
ext = ext === "webm" ? "opus" : ext;
} else {
// type === 'extract'
ext =
{alac: "m4a"}[uiSnapshot.extractFormat] ||
uiSnapshot.extractFormat;
}
const invalidChars =
platform() === "win32" ? /[<>:"/\\|?*[\]`#]/g : /["/`#]/g;
let finalFilename = title
.replace(invalidChars, "")
.trim()
.slice(0, 100);
if (finalFilename.startsWith(".")) {
finalFilename = finalFilename.substring(1);
}
if (rangeCmd) {
let rangeTxt = rangeCmd.replace("*", "");
if (platform() === "win32") rangeTxt = rangeTxt.replace(/:/g, "_");
finalFilename += ` [${rangeTxt}]`;
}
const outputPath = `"${join(
this.state.downloadDir,
`${finalFilename}.${ext}`
)}"`;
const baseArgs = [
"--no-playlist",
"--no-mtime",
browserForCookies ? "--cookies-from-browser" : "",
browserForCookies,
proxy ? "--proxy" : "",
proxy,
configPath ? "--config-location" : "",
configPath ? `"${configPath}"` : "",
"--ffmpeg-location",
`"${this.state.ffmpegPath}"`,
this.state.jsRuntimePath
? `--no-js-runtimes --js-runtime ${this.state.jsRuntimePath}`
: "",
].filter(Boolean);
if (type === "audio") {
if (ext === "m4a" || ext === "mp3" || ext === "mp4") {
baseArgs.unshift("--embed-thumbnail");
}
} else if (type === "extract") {
if (ext === "mp3" || ext === "m4a") {
baseArgs.unshift("--embed-thumbnail");
}
}
let downloadArgs;
if (type === "extract") {
downloadArgs = [
"-x",
"--audio-format",
uiSnapshot.extractFormat,
"--audio-quality",
uiSnapshot.extractQuality,
"-o",
outputPath,
...baseArgs,
];
} else {
const formatString =
type === "video" ? `${format_id}${audioFormat}` : format_id;
downloadArgs = ["-f", formatString, "-o", outputPath, ...baseArgs];
}
if (subs) downloadArgs.push(subs);
if (subLangs) downloadArgs.push(subLangs);
if (rangeOption) downloadArgs.push(rangeOption, rangeCmd);
const customArgsString = $(
CONSTANTS.DOM_IDS.CUSTOM_ARGS_INPUT
).value.trim();
if (customArgsString) {
const customArgs = customArgsString.split(/\s+/);
downloadArgs.push(...customArgs);
}
downloadArgs.push(`"${url}"`);
return {downloadArgs, finalFilename, finalExt: ext};
}
/**
* Handles the completion of a download process.
*/
_handleDownloadCompletion(code, randomId, filename, ext, thumbnail) {
this.state.currentDownloads--;
this.state.downloadControllers.delete(randomId);
if (code === 0) {
this._showDownloadSuccessUI(randomId, filename, ext, thumbnail);
this.state.downloadedItems.add(randomId);
this._updateClearAllButton();
} else if (code !== null) {
// code is null if aborted, so only show error if it's a real exit code
this._handleDownloadError(
new Error(`Download process exited with code ${code}.`),
randomId
);
}
this._processQueue();
if ($(CONSTANTS.DOM_IDS.QUIT_CHECKED).checked) {
ipcRenderer.send("quit", "quit");
}
}
/**
* Handles an error during the download process.
*/
_handleDownloadError(error, randomId) {
if (
error.name === "AbortError" ||
error.message.includes("AbortError")
) {
console.log(`Download ${randomId} was aborted.`);
this.state.currentDownloads = Math.max(
0,
this.state.currentDownloads - 1
);
this.state.downloadControllers.delete(randomId);
this._processQueue();
return; // Don't treat user cancellation as an error
}
this.state.currentDownloads--;
this.state.downloadControllers.delete(randomId);
console.error("Download Error:", error);
const progressEl = $(`${randomId}_prog`);
if (progressEl) {
progressEl.textContent = i18n.__("errorHoverForDetails");
progressEl.title = error.message;
}
this._processQueue();
}
/**
* Updates the download options state from the UI elements.
*/
_updateDownloadOptionsFromUI() {
const startTime = $(CONSTANTS.DOM_IDS.START_TIME).value;
const endTime = $(CONSTANTS.DOM_IDS.END_TIME).value;
const duration = this.state.videoInfo.duration;
const startSeconds = this.parseTime(startTime);
const endSeconds = this.parseTime(endTime);
if (
startSeconds === 0 &&
(endSeconds === duration || endSeconds === 0)
) {
this.state.downloadOptions.rangeCmd = "";
this.state.downloadOptions.rangeOption = "";
} else {
const start = startTime || "0";
const end = endTime || "inf";
this.state.downloadOptions.rangeCmd = `*${start}-${end}`;
this.state.downloadOptions.rangeOption = "--download-sections";
}
if ($(CONSTANTS.DOM_IDS.SUB_CHECKED).checked) {
this.state.downloadOptions.subs = "--write-subs";
this.state.downloadOptions.subLangs = "--sub-langs all";
} else {
this.state.downloadOptions.subs = "";
this.state.downloadOptions.subLangs = "";
}
}
/**
* Resets the UI state for a new link.
*/
_resetUIForNewLink() {
this._hideInfoPanel();
$(CONSTANTS.DOM_IDS.LOADING_WRAPPER).style.display = "flex";
$(CONSTANTS.DOM_IDS.INCORRECT_MSG).textContent = "";
$(CONSTANTS.DOM_IDS.ERROR_BTN).style.display = "none";
$(CONSTANTS.DOM_IDS.ERROR_DETAILS).style.display = "none";
$(CONSTANTS.DOM_IDS.VIDEO_FORMAT_SELECT).innerHTML = "";
$(CONSTANTS.DOM_IDS.AUDIO_FORMAT_SELECT).innerHTML = "";
const noAudioTxt = i18n.__("noAudio");
$(
CONSTANTS.DOM_IDS.AUDIO_FOR_VIDEO_FORMAT_SELECT
).innerHTML = `${noAudioTxt} `;
}
/**
* Populates the video and audio format elements.
* @param {Array} formats The formats array from yt-dlp metadata.
*/
_populateFormatSelectors(formats) {
const videoSelect = $(CONSTANTS.DOM_IDS.VIDEO_FORMAT_SELECT);
const audioSelect = $(CONSTANTS.DOM_IDS.AUDIO_FORMAT_SELECT);
const audioForVideoSelect = $(
CONSTANTS.DOM_IDS.AUDIO_FOR_VIDEO_FORMAT_SELECT
);
const NBSP = " ";
let maxVideoQualityLen = 0;
let maxAudioQualityLen = 0;
formats.forEach((format) => {
if (format.video_ext !== "none" && format.vcodec !== "none") {
const quality = `${format.height || "???"}p${
format.fps === 60 ? "60" : ""
}`;
if (quality.length > maxVideoQualityLen) {
maxVideoQualityLen = quality.length;
}
} else if (
format.acodec !== "none" &&
format.video_ext === "none"
) {
const formatNote =
i18n.__(format.format_note) || i18n.__("unknownQuality");
if (formatNote.length > maxAudioQualityLen) {
maxAudioQualityLen = formatNote.length;
}
}
});
const videoQualityPadding = maxVideoQualityLen;
const audioQualityPadding = maxAudioQualityLen;
const extPadding = 5; // "mp4", "webm"
const vcodecPadding = 5; // "avc1", "vp9"
const filesizePadding = 10; // "12.48 MB"
const {videoQuality, videoCodec, showMoreFormats} =
this.state.preferences;
let bestMatchHeight = 0;
formats.forEach((f) => {
if (
f.height &&
f.height <= videoQuality &&
f.height > bestMatchHeight &&
f.video_ext !== "none"
) {
bestMatchHeight = f.height;
}
});
if (bestMatchHeight === 0 && formats.length > 0) {
bestMatchHeight = Math.max(
...formats.filter((f) => f.height).map((f) => f.height)
);
}
const availableCodecs = new Set(
formats
.filter((f) => f.height === bestMatchHeight && f.vcodec)
.map((f) => f.vcodec.split(".")[0])
);
const finalCodec = availableCodecs.has(videoCodec)
? videoCodec
: [...availableCodecs].pop();
let isAVideoSelected = false;
formats.forEach((format) => {
let sizeInMB = null;
let isApprox = false;
if (format.filesize) {
sizeInMB = format.filesize / 1000000;
} else if (format.filesize_approx) {
sizeInMB = format.filesize_approx / 1000000;
isApprox = true;
} else if (this.state.videoInfo.duration && format.tbr) {
sizeInMB = (this.state.videoInfo.duration * format.tbr) / 8192;
isApprox = true;
}
const displaySize = sizeInMB
? `${isApprox ? "~" : ""}${sizeInMB.toFixed(2)} MB`
: i18n.__("unknownSize");
if (format.video_ext !== "none" && format.vcodec !== "none") {
if (
!showMoreFormats &&
(format.ext === "webm" || format.vcodec?.startsWith("vp"))
) {
return;
}
let isSelected = false;
if (
!isAVideoSelected &&
format.height === bestMatchHeight &&
format.vcodec?.startsWith(finalCodec)
) {
isSelected = true;
isAVideoSelected = true;
}
const quality = `${format.height || "???"}p${
format.fps === 60 ? "60" : ""
}`;
const hasAudio = format.acodec !== "none" ? " 🔊" : "";
const col1 = quality.padEnd(videoQualityPadding + 1, NBSP);
const col2 = format.ext.padEnd(extPadding, NBSP);
const col4 = displaySize.padEnd(filesizePadding, NBSP);
let optionText;
if (showMoreFormats) {
const vcodec = format.vcodec?.split(".")[0] || "";
const col3 = vcodec.padEnd(vcodecPadding, NBSP);
optionText = `${col1} | ${col2} | ${col3} | ${col4}${hasAudio}`;
} else {
optionText = `${col1} | ${col2} | ${col4}${hasAudio}`;
}
const option = `${optionText} `;
videoSelect.innerHTML += option;
} else if (
format.acodec !== "none" &&
format.video_ext === "none"
) {
if (!showMoreFormats && format.ext === "webm") return;
const audioExt = format.ext === "webm" ? "opus" : format.ext;
const formatNote =
i18n.__(format.format_note) || i18n.__("unknownQuality");
const audioExtPadded = audioExt.padEnd(extPadding, NBSP);
const audioQualityPadded = formatNote.padEnd(
audioQualityPadding,
NBSP
);
const audioSizePadded = displaySize.padEnd(
filesizePadding,
NBSP
);
const option_audio = `${audioQualityPadded} | ${audioExtPadded} | ${audioSizePadded} `;
audioSelect.innerHTML += option_audio;
audioForVideoSelect.innerHTML += option_audio;
}
});
if (
formats.every((f) => f.acodec === "none" || f.acodec === undefined)
) {
$(CONSTANTS.DOM_IDS.AUDIO_PRESENT_SECTION).style.display = "none";
} else {
$(CONSTANTS.DOM_IDS.AUDIO_PRESENT_SECTION).style.display = "block";
}
}
/**
* Shows the hidden panel with video information.
*/
_displayInfoPanel() {
const info = this.state.videoInfo;
const titleContainer = $(CONSTANTS.DOM_IDS.TITLE_CONTAINER);
titleContainer.innerHTML = ""; // Clear previous content
titleContainer.append(
Object.assign(document.createElement("b"), {
textContent: i18n.__("title") + ": ",
}),
Object.assign(document.createElement("input"), {
className: "title",
id: CONSTANTS.DOM_IDS.TITLE_INPUT,
type: "text",
value: `${info.title} [${info.id}]`,
onchange: (e) => (this.state.videoInfo.title = e.target.value),
})
);
document
.querySelectorAll(CONSTANTS.DOM_IDS.URL_INPUTS)
.forEach((el) => {
el.value = info.url;
});
const hiddenPanel = $(CONSTANTS.DOM_IDS.HIDDEN_PANEL);
hiddenPanel.style.display = "inline-block";
hiddenPanel.classList.add("scaleUp");
}
/**
* Creates the initial UI element for a new download.
*/
_createDownloadUI(randomId, job) {
const itemHTML = `
${i18n.__(
job.type === "video" ? "video" : "audio"
)}
${job.title}
${i18n.__(
"preparing"
)}
`;
$(CONSTANTS.DOM_IDS.DOWNLOAD_LIST).insertAdjacentHTML(
"beforeend",
itemHTML
);
$(`${randomId}_close`).addEventListener("click", () =>
this._cancelDownload(randomId)
);
}
/**
* Updates the progress bar and speed for a download item.
*/
_updateProgressUI(randomId, progress) {
const speedEl = $(`${randomId}_speed`);
const progEl = $(`${randomId}_prog`);
if (!speedEl || !progEl) return;
let fillEl = progEl.querySelector(".custom-progress-fill");
if (!fillEl) {
progEl.innerHTML = "";
const bar = document.createElement("div");
bar.className = "custom-progress";
fillEl = document.createElement("div");
fillEl.className = "custom-progress-fill";
bar.appendChild(fillEl);
progEl.appendChild(bar);
}
if (progress.percent === 100) {
fillEl.style.width = progress.percent + "%";
speedEl.textContent = "";
progEl.textContent = i18n.__("processing");
ipcRenderer.send("progress", 0);
return;
}
speedEl.textContent = `${i18n.__("speed")}: ${
progress.currentSpeed || "0 B/s"
}`;
fillEl.style.width = progress.percent + "%";
ipcRenderer.send("progress", progress.percent / 100);
}
/**
* Updates a download item's UI to show it has completed successfully.
*/
_showDownloadSuccessUI(randomId, filename, ext, thumbnail) {
const progressEl = $(`${randomId}_prog`);
if (!progressEl) return;
const fullFilename = `${filename}.${ext}`;
const fullPath = join(this.state.downloadDir, fullFilename);
progressEl.innerHTML = ""; // Clear progress bar
const link = document.createElement("b");
link.textContent = i18n.__("fileSavedClickToOpen");
link.style.cursor = "pointer";
link.onclick = () => {
ipcRenderer.send("show-file", fullPath);
};
progressEl.appendChild(link);
$(`${randomId}_speed`).textContent = "";
// Send desktop notification
new Notification("ytDownloader", {
body: fullFilename,
icon: thumbnail,
}).onclick = () => {
shell.showItemInFolder(fullPath);
};
// Add to download history
promises
.stat(fullPath)
.then((stat) => {
const fileSize = stat.size || 0;
ipcRenderer
.invoke("add-to-history", {
title: this.state.videoInfo.title,
url: this.state.videoInfo.url,
filename: filename,
filePath: fullPath,
fileSize: fileSize,
format: ext,
thumbnail: thumbnail,
duration: this.state.videoInfo.duration,
})
.catch((err) =>
console.error("Error adding to history:", err)
);
})
.catch((error) => console.error("Error saving to history:", error));
}
/**
* Shows an error message in the main UI.
*/
_showError(errorMessage, url) {
$(CONSTANTS.DOM_IDS.INCORRECT_MSG).textContent =
i18n.__("errorNetworkOrUrl");
$(CONSTANTS.DOM_IDS.ERROR_BTN).style.display = "inline-block";
const errorDetails = $(CONSTANTS.DOM_IDS.ERROR_DETAILS);
errorDetails.innerHTML = `URL: ${url} 
# ytDownloader
[](https://flathub.org/apps/details/me.aandrew.ytdownloader)
[](https://github.com/aandrew-me/ytDownloader/releases)
[](https://github.com/aandrew-me/ytDownloader/releases/latest)
[](https://flathub.org/apps/io.github.aandrew_me.ytdn)
[](https://snapcraft.io/ytdownloader)
A modern GUI video and audio downloader supporting [hundreds of sites](https://github.com/yt-dlp/yt-dlp/blob/master/supportedsites.md)
[](https://snapcraft.io/ytdownloader)
[](https://github.com/aandrew-me/ytDownloader/releases/latest/download/YTDownloader_Linux.AppImage)
## Features 🚀
✅ Supports hundreds of sites including Youtube, Facebook, Instagram, Tiktok, Twitter and so on.
✅ Multiple themes
✅ Video Compressor with Hardware Acceleration
✅ Advanced options like Range Selection, Subtitles
✅ Download playlists
✅ Available on Linux, Windows & macOS
✅ Fast download speeds
✅ And of-course no trackers or ads
## Screenshots
# Installation
## Windows 🪟
- **Traditional way**
Download and install the exe or msi file. Exe file lets you choose custom download location, msi file doesn't ask for location. Windows defender may show a popup saying **Windows Protected Your PC**. Just click on **More info** and click on **Run Anyway**
- **Chocolatey**
App can be installed from [Chocolatey](https://community.chocolatey.org/packages/ytdownloader) using the following command
```
choco install ytdownloader
```
- **Scoop**
App can be installed with [Scoop](https://scoop.sh) using the following command
```
scoop install https://raw.githubusercontent.com/aandrew-me/ytDownloader/main/ytdownloader.json
```
- **Winget**
App can be installed with [Winget](https://github.com/microsoft/winget-cli) using the following command
```
winget install aandrew-me.ytDownloader
```
## Linux 🐧
Linux has several options available - Flatpak, AppImage and Snap.
Flatpak is recommended. For arm processors, download from flathub.
- ### AppImage
**AppImage** format is supported on most Linux distros and has Auto-Update support.
It just needs to be executed after downloading. See more about [AppImages here](https://appimage.org/).
[AppImageLauncher](https://github.com/TheAssassin/AppImageLauncher) is recommended for integrating AppImages.
- ### Flatpak
```
flatpak install flathub io.github.aandrew_me.ytdn
```
- ### Snapcraft
```
sudo snap install ytdownloader
```
## macOS 🍎
Since the app is not signed, when you will try to open the app, macOS will not allow you to open it.
You need to open terminal and execute:
```
sudo xattr -r -d com.apple.quarantine /Applications/YTDownloader.app
```
You will also need to install `yt-dlp` with [homebrew](https://brew.sh/)
```
brew install yt-dlp
```
## Internationalization (Localization) 🌍
Translations into other languages would be highly appreciated. If you want to help translating the app to other languages, you can join from [here](https://crwd.in/ytdownloader). Open a new issue and that language will be added to Crowdin. Please don't make pull requests with json files, instead use Crowdin.
[](https://crowdin.com/project/ytdownloader)
### ✅ Available languages
| Name | Status |
| ------------------- | ------ |
| Arabic | ✔️ |
| Bengali | ✔️ |
| English | ✔️ |
| Chinese Simplified | ✔️ |
| Chinese Traditional | ✔️ |
| Finnish | ✔️ |
| Hindi | ✔️ |
| French | ✔️ |
| Finnish | ✔️ |
| German | ✔️ |
| Greek | ✔️ |
| Hungarian | ✔️ |
| Italian | ✔️ |
| Japanese | ✔️ |
| Persian | ✔️ |
| Polish | ✔️ |
| Portuguese (Brazil) | ✔️ |
| Russian | ✔️ |
| Spanish | ✔️ |
| Turkish | ✔️ |
| Ukrainian | ✔️ |
| Vietnamese | ✔️ |
Thanks to [nxjosephofficial](https://github.com/nxjosephofficial), [LINUX-SAUNA](https://t.me/linuxsauna), [Proxycon](https://github.com/proxycon), [albanobattistella](https://github.com/albanobattistella), [TheBlueQuasar](https://github.com/TheBlueQuasar), [MrQuerter](https://github.com/MrQuerter), [KotoWhiskas](https://github.com/KotoWhiskas), [André](https://github.com/andre1828), [haggen88](https://github.com/haggen88), [XfedeX](https://github.com/XfedeX), [Jok3r](https://github.com/th3knv), [TitouanReal](https://github.com/TitouanReal), [soredake](https://github.com/soredake), [yoi](https://github.com/thiennguyenqn), [HowlingWerewolf](https://github.com/HowlingWerewolf), [Kum](https://github.com/kum4423), [Mohammed Bakry](https://crowdin.com/profile/m7md_b4kry), [Huang Bingfeng](https://github.com/jackiotyu), [Abhinav](https://github.com/abhixdd), [CodWiz](https://github.com/C0dwiz) and others for helping.
## Used technologies
- [yt-dlp](https://github.com/yt-dlp/yt-dlp)
- [Electron](https://www.electronjs.org/)
- [ffmpeg](https://ffmpeg.org/)
- [nodeJS](https://nodejs.org/en/)
- [flaticon](https://www.flaticon.com/)
## For building or running from source code
[Nodejs](https://nodejs.org/) (along with npm) needs to be installed.
Required commands to get started.
```
git clone https://github.com/aandrew-me/ytDownloader.git
cd ytDownloader
npm i
```
To run with [Electron](https://www.electronjs.org/) :
```
npm start
```
You need to download ffmpeg and put it in the root directory of the project. If you don't need to build for arm processor, you can download ffmpeg by executing any of the files - linux.sh / mac.sh / windows.sh depending on the platform. Otherwise you need to download ffmpeg from [here](https://github.com/yt-dlp/FFmpeg-Builds/releases) for windows/linux and from [here](http://www.osxexperts.net/) for mac (not tested)
To build for Linux (It will create packages as specified in package.json). The builds are stored in **release** folder.
```
npm run linux
```
To build for Windows
```
npm run windows
```
To build for macOS
```
npm run mac
```
If you only want to build for one format, you can do
```
npx electron-builder -l appimage
```
It will just create a linux appimage build.
================================================
FILE: assets/css/extra.css
================================================
@font-face {
font-family: "JetBrains";
src: url("../fonts/JetBrainsMono-Regular.ttf") format("truetype");
}
:root[theme="light"] {
--background: #f9fafb;
--text: #1f2937;
--box-main: #f3f4f6;
--box-toggle: rgb(215 238 233);
--box-separation: #e5e7eb;
--box-toggleOn: rgb(127, 250, 172);
--item-bg: #dddddd;
--box-shadow: none;
--select: #a7f3d0;
--greenBtn: #22c55e;
--greenBtn-bottom: #16a34a;
--redBtn: #d64d4f;
--redBtn-bottom: #854243;
--blueBtn: #3b82f6;
--blueBtn-bottom: rgb(44, 78, 180);
}
:root[theme="dark"] {
--background: #121212;
--text: rgb(229, 229, 229);
--box-main: #1d1d1d;
--box-toggle: #191919;
--box-separation: #2e2e2e;
--box-toggleOn: #2e2e2e;
--item-bg: #2c2e31;
--box-shadow: none;
--select: #252426;
--greenBtn: #05aa76;
--greenBtn-bottom: #047652;
--redBtn: #c82b2d;
--redBtn-bottom: #803334;
--blueBtn: rgb(80, 140, 230);
--blueBtn-bottom: rgb(44, 78, 180);
--border: none;
}
:root[theme="frappe"] {
--background: #232634;
--text: #e2e8ff;
--box-main: #303446;
--box-toggle: #414559;
--box-separation: #414559;
--box-toggleOn: #607dc1;
--item-bg: #414559;
--select: #3b3e4a;
--greenBtn: #78c346;
--greenBtn-bottom: #597844;
--redBtn: #d64d4f;
--redBtn-bottom: #854243;
--blueBtn: rgb(80, 128, 230);
--blueBtn-bottom: rgb(44, 78, 180);
}
:root[theme="onedark"] {
--background: #282c34;
--text: #d2d6df;
--box-main: #3a3d46;
--box-toggle: #2f333d;
--box-separation: #2f333d;
--box-toggleOn: #13a3b7;
--item-bg: #4d515d;
--select: #262c33;
--greenBtn: #85cf50;
--greenBtn-bottom: #406923;
--redBtn: #be2d39;
--redBtn-bottom: #791a22;
--blueBtn: rgb(80, 128, 230);
--blueBtn-bottom: rgb(44, 78, 180);
}
:root[theme="matrix"] {
--background: #0d0208;
--text: #00ff41;
--box-main: #0c2216;
--box-toggle: #214338;
--box-separation: #214338;
--box-toggleOn: #24782e;
--item-bg: #214338;
--select: #08180f;
--greenBtn: #19b42b;
--greenBtn-bottom: #10701c;
--redBtn: #19b42b;
--redBtn-bottom: #10701c;
--blueBtn: #19b42b;
--blueBtn-bottom: #10701c;
}
:root[theme="github"] {
--background: #f6f8fa;
--text: #292d31;
--box-main: #ffffff;
--box-toggle: #f3f3f3;
--box-separation: #f3f3f3;
--box-toggleOn: #cce5ff;
--item-bg: #3a66d150;
--select: #cce5ff;
--greenBtn: #0a9431;
--greenBtn-bottom: #0c6826;
--redBtn: #d73a49;
--redBtn-bottom: #9b2733;
--blueBtn: #005cc5;
--blueBtn-bottom: #00428e;
}
:root[theme="latte"] {
--background: #dce0e8;
--text: #4c4f69;
--box-main: #eff1f5;
--box-toggle: #e6e9ef;
--box-separation: #e6e9ef;
--box-toggleOn: #cce5ff;
--item-bg: #bcc0cc;
--select: #cce5ff;
--greenBtn: #40a02b;
--greenBtn-bottom: #2e711f;
--redBtn: #d20f39;
--redBtn-bottom: #9c0c2b;
--blueBtn: #1e66f5;
--blueBtn-bottom: rgb(3, 49, 101);
}
:root[theme="solarized-dark"] {
--background: #002b36;
--text: #a4b1b3;
--box-main: #003745;
--box-toggle: #2e4c52;
--box-separation: #2e4c52;
--box-toggleOn: #005a6f;
--item-bg: #003745;
--select: rgb(9, 57, 53);
--greenBtn: #859900;
--greenBtn-bottom: rgb(73, 84, 1);
--redBtn: #dc322f;
--redBtn-bottom: #af2523;
--blueBtn: #268bd2;
--blueBtn-bottom: #2074b1;
}
:root[theme = "gruvbox"]{
--background: #242424;
--text: #fffefd;
--box-main: #32302f;
--box-toggle: #282828;
--box-separation: #504945;
--box-toggleOn: #458588;
--item-bg: #4d515d;
--select: #98971a;
--greenBtn:#8ec07c;
--greenBtn-bottom:#689D6A;
--redBtn: #fb4934;
--redBtn-bottom: #cc241d;
--blueBtn: #7fa2ac;
--blueBtn-bottom: #458588;
}
body {
background-color: var(--background);
color: var(--text);
padding: 20px;
font-size: x-large;
text-align: left;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
sans-serif;
}
h1 {
margin-top: 0;
display: inline-block;
}
#version {
margin: 5px;
}
input[type="text"],
.input {
border-radius: 5px;
padding: 5px;
outline: none;
border: none;
width: 50%;
height: 35px;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
sans-serif;
}
.input {
width: 70px;
font-size: larger;
padding: 5px;
}
.prefBox,
#pathConfig {
display: flex;
justify-content: space-between;
align-items: center;
margin: 15px 15px;
padding: 20px 15px;
border-radius: 15px;
background-color: var(--box-main);
}
#ytDlpArgBox {
margin: 15px 15px;
padding: 20px 15px;
border-radius: 15px;
background-color: var(--box-main);
}
#path {
font-family: "JetBrains";
font-size: medium;
}
#flatpakTxt {
margin: 0 15px;
padding: 20px 15px;
cursor: pointer;
text-decoration: underline;
color: var(--blueBtn);
display: none;
}
.prefBox {
flex-direction: row;
}
#pathConfig {
flex-direction: column;
}
.configBox {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
}
#configBtn {
display: inline-block;
}
#configOpts {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#save {
padding: 10px;
border-radius: 8px;
border: none;
color: rgb(255, 255, 255);
background-color: rgb(49, 215, 49);
cursor: pointer;
}
#save:active {
background-color: rgb(41, 155, 41);
}
#top {
position: absolute;
top: 10px;
right: 10px;
display: flex;
}
#back,
#restart {
text-decoration: none;
padding: 8px;
border-radius: 10px;
margin: 3px;
font-size: large;
cursor: pointer;
}
#back {
background-color: var(--blueBtn);
color: white;
}
#restart {
background-color: var(--redBtn);
color: white;
}
.redBtn {
background-color: var(--redBtn);
color: white;
text-decoration: none;
border: none;
margin: 5px;
border-radius: 10px;
cursor: pointer;
font-size: medium;
padding: 5px;
}
a {
color: rgb(29, 140, 209);
cursor: pointer;
}
input[type="checkbox"] {
width: 25px;
height: 25px;
}
.greenBtn {
padding: 10px;
margin: 0 20px;
border: none;
border-radius: 10px;
font-size: large;
color: white;
background-color: var(--greenBtn);
cursor: pointer;
position: relative;
outline: none;
}
#selectLocation:active {
border-bottom: none;
top: 4px;
margin-bottom: 4px;
}
select {
padding: 15px;
background-color: var(--select);
color: var(--text);
border: none;
border-radius: 8px;
cursor: pointer;
font-size: large;
outline: none;
position: relative;
width: 160px;
}
#browserInfo {
cursor: pointer;
}
#configOpts {
display: none;
}
body::-webkit-scrollbar {
width: 10px;
}
body::-webkit-scrollbar-thumb {
background: linear-gradient(rgb(110, 110, 110), rgb(77, 77, 77));
border-radius: 8px;
}
#proxyTxt:valid {
border: 2px solid var(--greenBtn);
}
#proxyTxt:invalid {
border: 2px solid var(--redBtn);
}
#customArgsInput {
padding: 8px;
width: 94%;
margin: auto;
outline: none;
font-family: "JetBrains";
border-radius: 8px;
resize: none;
overflow: hidden;
}
.popup-container {
position: fixed;
bottom: 30px;
left: 30px;
z-index: 9999;
display: flex;
flex-direction: column;
gap: 12px;
}
.popup-item {
display: inline-block;
color: #fff;
padding: 12px 24px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
font-weight: 600;
font-size: 15px;
opacity: 1;
transition: opacity 0.4s;
}
================================================
FILE: assets/css/index.css
================================================
@font-face {
font-family: "JetBrains";
src: url("../fonts/JetBrainsMono-Regular.ttf") format("truetype");
}
@font-face {
font-family: "Ubuntu";
src: url("../fonts/Ubuntu-Regular.ttf") format("truetype");
}
@font-face {
font-family: "Inter";
src: url("../fonts/Inter.ttf") format("truetype");
}
:root[theme="light"] {
--background: #f9fafb;
--text: #1f2937;
--box-main: #f3f4f6;
--box-toggle: rgb(215 238 233);
--box-separation: #e5e7eb;
--box-toggleOn: rgb(127, 250, 172);
--item-bg: #dddddd;
--box-shadow: none;
--select: #a7f3d0;
--greenBtn: #22c55e;
--greenBtn-bottom: #16a34a;
--redBtn: #d64d4f;
--redBtn-bottom: #854243;
--blueBtn: #3b82f6;
--blueBtn-bottom: rgb(44, 78, 180);
}
:root[theme="dark"] {
--background: #121212;
--text: rgb(229, 229, 229);
--box-main: #1d1d1d;
--box-toggle: #191919;
--box-separation: #2e2e2e;
--box-toggleOn: #2e2e2e;
--item-bg: #2c2e31;
--box-shadow: none;
--select: #252426;
--greenBtn: #05aa76;
--greenBtn-bottom: #047652;
--redBtn: #c82b2d;
--redBtn-bottom: #803334;
--blueBtn: rgb(80, 140, 230);
--blueBtn-bottom: rgb(44, 78, 180);
--border: none;
}
:root[theme="frappe"] {
--background: #232634;
--text: #e2e8ff;
--box-main: #303446;
--box-toggle: #414559;
--box-separation: #414559;
--box-toggleOn: #607dc1;
--item-bg: #414559;
--select: #3b3e4a;
--greenBtn: #78c346;
--greenBtn-bottom: #597844;
--redBtn: #d64d4f;
--redBtn-bottom: #854243;
--blueBtn: rgb(80, 128, 230);
--blueBtn-bottom: rgb(44, 78, 180);
}
:root[theme="onedark"] {
--background: #282c34;
--text: #d2d6df;
--box-main: #3a3d46;
--box-toggle: #2f333d;
--box-separation: #2f333d;
--box-toggleOn: #13a3b7;
--item-bg: #4d515d;
--select: #262c33;
--greenBtn: #85cf50;
--greenBtn-bottom: #406923;
--redBtn: #be2d39;
--redBtn-bottom: #791a22;
--blueBtn: rgb(80, 128, 230);
--blueBtn-bottom: rgb(44, 78, 180);
}
:root[theme="matrix"] {
--background: #0d0208;
--text: #00ff41;
--box-main: #0c2216;
--box-toggle: #214338;
--box-separation: #214338;
--box-toggleOn: #24782e;
--item-bg: #214338;
--select: #08180f;
--greenBtn: #19b42b;
--greenBtn-bottom: #10701c;
--redBtn: #19b42b;
--redBtn-bottom: #10701c;
--blueBtn: #19b42b;
--blueBtn-bottom: #10701c;
}
:root[theme="github"] {
--background: #f6f8fa;
--text: #292d31;
--box-main: #ffffff;
--box-toggle: #f3f3f3;
--box-separation: #f3f3f3;
--box-toggleOn: #cce5ff;
--item-bg: #3a66d150;
--select: #cce5ff;
--greenBtn: #0a9431;
--greenBtn-bottom: #0c6826;
--redBtn: #d73a49;
--redBtn-bottom: #9b2733;
--blueBtn: #005cc5;
--blueBtn-bottom: #00428e;
}
:root[theme="latte"] {
--background: #dce0e8;
--text: #4c4f69;
--box-main: #eff1f5;
--box-toggle: #e6e9ef;
--box-separation: #e6e9ef;
--box-toggleOn: #cce5ff;
--item-bg: #bcc0cc;
--select: #cce5ff;
--greenBtn: #40a02b;
--greenBtn-bottom: #2e711f;
--redBtn: #d20f39;
--redBtn-bottom: #9c0c2b;
--blueBtn: #1e66f5;
--blueBtn-bottom: rgb(3, 49, 101);
}
:root[theme="solarized-dark"] {
--background: #002b36;
--text: #a4b1b3;
--box-main: #003745;
--box-toggle: #2e4c52;
--box-separation: #2e4c52;
--box-toggleOn: #005a6f;
--item-bg: #003745;
--select: rgb(9, 57, 53);
--greenBtn: #859900;
--greenBtn-bottom: rgb(73, 84, 1);
--redBtn: #dc322f;
--redBtn-bottom: #af2523;
--blueBtn: #268bd2;
--blueBtn-bottom: #2074b1;
}
:root[theme = "gruvbox"]{
--background: #242424;
--text: #fffefd;
--box-main: #32302f;
--box-toggle: #282828;
--box-separation: #504945;
--box-toggleOn: #458588;
--item-bg: #eebd35;
--select: #98971a;
--greenBtn:#8ec07c;
--greenBtn-bottom:#689D6A;
--redBtn: #fb4934;
--redBtn-bottom: #cc241d;
--blueBtn: #7fa2ac;
--blueBtn-bottom: #458588;
}
body {
font-family: "Ubuntu";
text-align: center;
padding: 10px;
background-color: var(--background);
color: var(--text);
transition: 0.4s;
font-size: large;
user-select: none;
}
img {
-webkit-user-drag: none;
}
#popupBox,
#popupBoxMac {
width: 100vw;
height: 100vh;
margin: 0;
background-color: rgba(17, 25, 40, 0.75);
position: absolute;
top: 0;
left: 0;
z-index: 2;
display: none;
}
#popup,
#popupMac {
position: absolute;
padding: 20px;
top: 50%;
left: 50%;
width: 300px;
border-radius: 10px;
transform: translate(-50%, -50%);
background-color: rgb(91, 91, 91);
color: white;
}
#tryBtn {
background-color: rgb(137, 226, 255);
color: rgb(35, 35, 35);
border: none;
padding: 10px;
border-radius: 10px;
cursor: pointer;
position: relative;
}
#tryBtn:active {
border: none;
}
#menuIcon {
position: absolute;
top: 10px;
right: 10px;
width: 40px;
height: 40px;
cursor: pointer;
transition: 0.3s;
}
#menu {
display: none;
flex-direction: column;
backdrop-filter: blur(18px) saturate(180%);
-webkit-backdrop-filter: blur(18px) saturate(180%);
background: rgba(15, 23, 42, 0.85);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 16px;
position: absolute;
top: 45px;
right: 50px;
padding: 12px;
width: 220px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
text-align: left;
font-family: "Inter", sans-serif;
font-size: medium;
color: #e2e8f0;
z-index: 2;
animation: fadeIn 0.25s ease-out;
}
.menuItem {
cursor: pointer;
padding: 10px 12px;
border-radius: 8px;
margin-bottom: 6px;
text-decoration: none;
color: #d6dadf;
transition: all 0.15s ease-in-out;
border-bottom: none;
background: rgba(25, 37, 66, 0.223);
}
.menuItem:hover {
background: rgba(255, 255, 255, 0.08);
color: #38bdf8;
transform: translateX(2px);
}
.menuDivider {
height: 1px;
background: rgba(255, 255, 255, 0.08);
margin: 4px 0;
}
.menuLabel {
margin-top: 5px;
font-size: 0.9rem;
color: #94a3b8;
padding: 4px 0;
}
.themeSelect {
margin-top: 4px;
background: rgba(30, 41, 59, 0.9);
color: #f8fafc;
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 8px;
padding: 8px;
font-family: "Inter", sans-serif;
transition: border 0.2s, background 0.2s;
width: 100%;
cursor: pointer;
}
.themeSelect:hover,
.themeSelect:focus {
border-color: #38bdf8;
background: rgba(51, 65, 85, 0.9);
outline: none;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.item {
display: flex;
position: relative;
width: 86%;
background-color: var(--item-bg);
color: var(--text);
margin: 10px auto;
border-radius: 10px;
padding: 10px;
align-items: center;
justify-content: space-between;
}
.playlistItem {
display: flex;
position: relative;
width: 94%;
height: 25px;
background-color: var(--item-bg);
color: var(--text);
padding: 16px 25px;
border-radius: 15px;
align-items: center;
justify-content: space-between;
margin: 10px auto;
}
.itemIconBox {
display: flex;
flex-direction: column;
}
.itemIcon {
max-width: 160px;
max-height: 90px;
border-radius: 10px;
margin: 0 10px 0 0;
}
.title {
padding: 12px 10px;
border-radius: 8px;
margin-left: 4px;
border: none;
outline: none;
width: 50%;
text-align: center;
background-color: var(--box-separation);
color: var(--text);
font-size: large;
font-family: "Ubuntu";
}
.itemTitle {
padding: 5px;
}
.itemBody {
height: 90%;
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.itemProgress {
font-weight: bold;
cursor: pointer;
padding: 10px 0;
}
.custom-progress {
width: 90%;
height: 8px;
background: #e0e0e0;
border-radius: 6px;
overflow: hidden;
display:inline-block;
}
.custom-progress-fill {
width: 0%;
height: 100%;
background: var(--blueBtn);
transition: width 0.3s ease;
border-radius: 6px 0 0 6px;
}
.itemSpeed {
padding: 10px 5px 5px 5px;
}
.itemClose {
position: absolute;
top: 8px;
right: 8px;
cursor: pointer;
cursor: pointer;
width: 20px;
height: 20px;
}
.itemType {
font-style: italic;
margin-top: 5px;
margin: top 8px;
}
#closeHidden {
bottom: 7px;
position: absolute;
right: 10px;
cursor: pointer;
cursor: pointer;
width: 20px;
height: 20px;
}
#hidden {
display: none;
position: absolute;
z-index: 1;
left: 0;
right: 0;
margin: auto;
top: 20%;
background-color: var(--box-main);
border-radius: 15px;
width: 80%;
padding: 10px 10px 25px 10px;
color: var(--text);
border: var(--border);
}
#videoBox,
#audioBox {
background-color: var(--box-toggle);
padding: 10px;
border-radius: 10px;
}
#audioExtract,
.separationBox {
margin: 10px;
padding: 10px;
background-color: var(--box-separation);
border-radius: 10px;
}
#options {
display: none;
position: absolute;
overflow: hidden;
z-index: 1;
left: 0;
right: 0;
margin: auto;
top: 15%;
background-color: var(--box-main);
width: 80%;
border-radius: 10px;
padding: 10px;
color: var(--text);
}
#btnContainer {
display: flex;
flex-direction: row;
justify-content: center;
padding-top: 10px;
}
.toggleBtn {
width: 50%;
font-size: x-large;
border: var(--border);
background-color: var(--box-toggle);
border-radius: 10px;
cursor: pointer;
padding: 8px;
color: var(--text);
}
#videoToggle {
background-color: var(--box-toggleOn);
}
.select {
padding: 12px 15px;
background-color: var(--select);
color: var(--text);
border: none;
border-radius: 12px;
cursor: pointer;
font-size: large;
margin-bottom: 8px;
margin-left: 8px;
outline: none;
max-width: min(400px, 100%);
font-family: "JetBrains";
}
.audioSelect {
width: 180px;
}
#videoTypeSelect {
width: 160px;
}
#audioQualitySelect {
width: 145px;
}
#link {
padding: 10px;
}
#videoFormatSelect,
#audioFormatSelect,
#audioForVideoFormatSelect {
font-family: JetBrains, monospace;
font-size: medium;
width: 400px;
}
.formatSelect {
margin-right: 4px;
}
label {
position: relative;
top: 3px;
}
#videoList,
#audioList {
display: none;
}
.cb {
width: 20px;
height: 20px;
position: relative;
left: 5px;
top: 4px;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
appearance: none;
}
.submitBtn {
padding: 15px;
border-radius: 10px;
background-color: var(--greenBtn);
color: white;
border: none;
font-size: large;
cursor: pointer;
display: inline-block;
outline: none;
position: relative;
}
.submitBtn:active {
background-color: var(--greenBtn-bottom);
border: none;
}
#pasteUrl,
#pasteLink {
--greenTop: #34d399;
--greenBottom: #059669;
--greenHover: #10b981;
--greenActive: #047857;
background: linear-gradient(
to bottom right,
var(--greenTop),
var(--greenBottom)
);
color: #fff;
font-size: 1.1rem;
padding: 16px 28px;
border: none;
border-radius: 16px;
cursor: pointer;
outline: none;
position: relative;
transition: all 0.25s ease;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
margin-top: 15px;
font-weight: bold;
}
#pasteUrl:hover,
#pasteLink:hover {
background: linear-gradient(
to bottom right,
var(--greenHover),
var(--greenBottom)
);
transform: translateY(-2px);
}
#pasteUrl:active,
#pasteUrl.active,
#pasteLink:active {
background: linear-gradient(
to bottom right,
var(--greenActive),
var(--greenBottom)
);
transform: translateY(0);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) inset;
}
.paste-keys {
margin-left: 4px;
}
.paste-keys .key {
background: rgba(255, 255, 255, 0.128);
border-radius: 8px;
padding: 6px 10px;
font-size: 15px;
font-family: "Inter", sans-serif;
color: #e5e5e5;
margin: 0 3px;
border-bottom: 3px solid rgba(2, 107, 72, 0.6);
}
.resumeBtn {
padding: 10px;
border-radius: 8px;
background-color: rgb(64, 227, 64);
color: white;
border: none;
cursor: pointer;
display: inline-block;
outline: none;
position: absolute;
right: 10px;
bottom: 10px;
width: 100px;
}
.input {
padding: 8px;
border: none;
outline: none;
border-radius: 5px;
width: 70px;
font-size: large;
margin: 5px;
}
#incorrectMsg,
#incorrectMsgPlaylist {
color: var(--redBtn);
}
#incorrectMsgPlaylist {
display: none;
}
#errorBtn {
display: none;
}
#errorDetails {
cursor: pointer;
font-family: monospace;
padding: 15px;
margin: 10px 0;
border: 2px solid rgb(189, 0, 0);
border-radius: 8px;
display: none;
transition: 0.5s all;
}
#loadingWrapper {
/* Default is flex */
display: none;
flex-direction: row;
justify-content: center;
align-items: center;
}
#preparingBox {
display: none;
flex-direction: row;
justify-content: center;
align-items: center;
}
svg {
width: 100px;
height: 100px;
display: inline-block;
margin-left: 20px;
}
.savedMsg {
color: rgb(52, 170, 234);
cursor: pointer;
}
#savedMsg {
cursor: pointer;
}
button {
font-family: "Ubuntu";
font-weight: bold;
outline: none;
}
#extractBtn,
.blueBtn {
color: white;
background-color: var(--blueBtn);
border: none;
position: relative;
padding: 15px;
border-radius: 10px;
cursor: pointer;
margin: 8px;
font-size: large;
text-decoration: none;
}
#extractBtn {
width: 150px;
}
#download,
#audioDownload {
width: 140px;
}
#clearBtn {
display: none;
}
#extractBtn:active,
.blueBtn:active {
background-color: var(--blueBtn-bottom);
border: none;
}
.advancedToggle {
color: white;
background-color: var(--redBtn);
border: none;
position: relative;
padding: 15px;
border-radius: 10px;
cursor: pointer;
margin: 8px;
font-size: large;
}
.advancedToggle:active {
background-color: var(--blueBtn-bottom);
border: none;
}
#advanced {
display: none;
}
.advancedItem {
border-radius: 15px;
padding: 20px;
margin: 10px;
background-color: var(--item-bg);
}
#path {
font-family: "JetBrains";
font-size: medium;
}
#subHeader {
font-weight: bold;
margin-top: 0;
}
h2 {
margin: 12px;
font-size: 24px;
}
/* Scrollbar */
body::-webkit-scrollbar {
width: 5px;
}
body::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
body::-webkit-scrollbar-thumb {
background-color: rgb(79, 78, 78);
border-radius: 5px;
}
#goToTop {
display: none;
position: fixed;
bottom: 10px;
right: 10px;
z-index: 2;
border: none;
outline: none;
background-image: url(../images/up-arrow.png);
background-size: contain;
width: 40px;
height: 40px;
cursor: pointer;
color: white;
cursor: pointer;
}
.popup-container {
position: fixed;
bottom: 30px;
left: 30px;
z-index: 9999;
display: flex;
flex-direction: column;
gap: 12px;
}
.popup-item {
display: inline-block;
color: #fff;
padding: 12px 24px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
font-weight: 600;
font-size: 15px;
opacity: 1;
transition: opacity 0.4s;
}
.scale {
animation-name: scale;
animation-duration: 0.4s;
animation-fill-mode: forwards;
}
.scaleUp {
animation-name: scaleUp;
animation-duration: 0.4s;
animation-fill-mode: forwards;
}
body::-webkit-scrollbar {
width: 10px;
}
body::-webkit-scrollbar-thumb {
background: linear-gradient(rgb(110, 110, 110), rgb(77, 77, 77));
border-radius: 8px;
}
@keyframes scale {
0% {
scale: 1;
}
100% {
scale: 0;
}
}
@keyframes scaleUp {
0% {
scale: 0;
}
100% {
scale: 1;
}
}
@media screen and (max-width: 650px) {
.item {
width: 90%;
}
.title {
width: 80%;
}
}
/* Compressor styles */
#compressor-header {
text-align: center;
margin-top: 0;
}
.container {
max-width: 800px;
margin: 30px auto 10px auto;
background: var(--box-main);
padding: 30px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.drop-zone {
border: 2px dashed #ccc;
border-radius: 8px;
padding: 2rem;
text-align: center;
margin-bottom: 2rem;
transition: border-color 0.3s ease;
background: var(--box-toggle);
}
.drop-zone:hover {
border-color: #2196f3;
cursor: pointer;
}
.compress-select {
font-family: "Ubuntu";
padding: 10px;
}
.drop-zone.dragover {
border-color: #2196f3;
background-color: var(--box-toggleOn);
}
#settings-group-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.output-folder-conf {
display: flex;
justify-content: space-between;
align-items: center;
}
#output-folder-box {
background-color: var(--box-toggle);
margin-bottom: 12px;
padding: 15px;
border-radius: 8px;
text-align: left;
}
#output-folder-input {
width: 20px;
height: 20px;
margin-left: 10px;
}
.folder-input-checkbox {
display: flex;
align-items: center;
}
#output-suffix {
cursor: text;
}
.settings-group {
margin-bottom: 10px;
display: flex;
flex-direction: column;
width: 46%;
}
.compress-label {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
display: block;
margin-bottom: 10px;
font-weight: 500;
text-align: left;
}
#compression-status {
max-width: 800px;
margin: 20px auto 0 auto;
border-top: 1px solid var(--item-bg);
padding-top: 20px;
}
.status-item {
padding: 16px;
margin: 6px auto;
border-radius: 4px;
display: flex;
justify-content: space-between;
flex-direction: row;
background-color: var(--item-bg);
max-width: 800px;
}
.status-item.success {
color: var(--greenBtn);
}
.status-item.error {
color: var(--redBtn);
}
.status {
min-width: 80px;
text-transform: uppercase;
font-size: 0.9em;
font-weight: bold;
}
.fileinput-btn {
background: var(--blueBtn);
color: white;
padding: 10px;
display: block;
border-radius: 5px;
margin: 5px 0 10px 0;
cursor: pointer;
border: none;
}
.progressBarCompress {
width: 200px;
}
.nvidia_opt,
.amf_opt,
.qsv_opt,
.vaapi_opt,
.videotoolbox_opt {
display: none;
}
#custom-folder-select {
padding: 10px;
margin-left: 0;
display: none;
}
#custom-folder-path {
font-family: "JetBrains";
background-color: var(--box-main);
padding: 8px;
border-radius: 4px;
display: none;
}
#selected-files {
padding-top: 10px;
opacity: 0.8;
}
::view-transition-old(root),
::view-transition-new(root) {
animation: none;
mix-blend-mode: normal;
}
@media (min-width: 640px) {
.container {
padding: 2rem;
}
}
.slider-wrapper {
display: flex;
align-items: center;
gap: 1rem;
}
.time-display {
flex-shrink: 0;
width: 5.5rem;
height: 3rem;
background-color: var(--box-main);
color: var(--text);
border-radius: 0.5rem;
font-weight: 500;
border: none;
outline: none;
text-align: center;
font-family: "Inter", sans-serif;
font-size: 1rem;
padding: 0;
}
.slider-container {
position: relative;
width: 100%;
height: 2rem;
display: flex;
align-items: center;
}
.track-background {
position: absolute;
width: 100%;
height: 0.25rem;
background-color: #4b5563;
border-radius: 9999px;
}
#range-highlight {
position: absolute;
height: 0.25rem;
background-color: var(--blueBtn);
border-radius: 9999px;
z-index: 1;
}
input[type="range"] {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 4px;
background: transparent;
outline: none;
position: absolute;
margin: 0;
padding: 0;
pointer-events: none;
}
#min-slider {
z-index: 2;
}
#max-slider {
z-index: 3;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 12px;
height: 32px;
background-color: var(--blueBtn);
border-radius: 9999px;
cursor: pointer;
pointer-events: auto;
margin-top: -14px;
transition: transform 0.1s ease-in-out;
position: relative;
}
input[type="range"]::-webkit-slider-thumb:hover {
transform: scale(1.1);
}
#customArgsInput {
padding: 8px;
width: 94%;
margin: auto;
outline: none;
font-family: "JetBrains";
border-radius: 8px;
resize: vertical;
}
#updatePopup {
position: fixed;
bottom: 30px;
right: 30px;
z-index: 9999;
background-color: var(--box-separation);
padding: 15px 20px;
border-radius: 10px;
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}
.progress-track {
width: 200px;
height: 8px;
background-color: rgba(209, 209, 209, 0.446);
border-radius: 4px;
overflow: hidden;
margin: 10px 2px;
}
#progressBarFill {
height: 100%;
width: 0%;
background-color: var(--greenBtn);
transition: width 0.2s ease;
}
.update-label,
#updateProgress {
font-size: 14px;
}
================================================
FILE: crowdin.yml
================================================
files:
- source: /translations/en.json
translation: /translations/%locale%.json
================================================
FILE: flatpak/io.github.aandrew_me.ytdn.desktop
================================================
[Desktop Entry]
Name=ytDownloader
Comment=Download videos and audios from YouTube and other sites
Exec=run.sh
Type=Application
Icon=io.github.aandrew_me.ytdn
Categories=Utility;
================================================
FILE: flatpak/io.github.aandrew_me.ytdn.metainfo.xml
================================================
