Refactoring

This commit is contained in:
aandrew-me 2025-02-08 21:53:58 +03:00
parent 99b61f8976
commit b3606ebdf6
12 changed files with 163 additions and 124 deletions

View File

@ -733,7 +733,7 @@ body::-webkit-scrollbar-thumb {
.container { .container {
max-width: 800px; max-width: 800px;
margin: 0 auto 10px auto; margin: 30px auto 10px auto;
background: var(--box-main); background: var(--box-main);
padding: 30px; padding: 30px;
border-radius: 8px; border-radius: 8px;
@ -778,7 +778,7 @@ body::-webkit-scrollbar-thumb {
} }
#output-folder-box { #output-folder-box {
background-color: var(--item-bg); background-color: var(--box-toggle);
margin-bottom: 12px; margin-bottom: 12px;
padding: 15px; padding: 15px;
border-radius: 8px; border-radius: 8px;

View File

@ -8,6 +8,9 @@
<link rel="stylesheet" href="../assets/css/index.css"> <link rel="stylesheet" href="../assets/css/index.css">
</head> </head>
<!-- Popup message -->
<span id="popupText">Text copied</span>
<body id="compressor_body"> <body id="compressor_body">
<!-- Menu icon --> <!-- Menu icon -->
<img src="../assets/images/menu.png" alt="menu" id="menuIcon"> <img src="../assets/images/menu.png" alt="menu" id="menuIcon">
@ -48,7 +51,7 @@
<option value="unchanged">Unchanged</option> <option value="unchanged">Unchanged</option>
<option value="mp4">mp4</option> <option value="mp4">mp4</option>
<option value="mkv">mkv</option> <option value="mkv">mkv</option>
<option value="webm">webm</option> <!-- <option value="webm">webm</option> -->
</select> </select>
</div> </div>
@ -135,7 +138,7 @@
<option value="copy">Unchanged</option> <option value="copy">Unchanged</option>
<option value="aac">aac</option> <option value="aac">aac</option>
<option value="mp3">mp3</option> <option value="mp3">mp3</option>
<option value="opus">opus</option> <option value="libopus">opus</option>
</select> </select>
</div> </div>

View File

@ -46,6 +46,8 @@ function createWindow() {
return false; return false;
}); });
// TODO: Remember maximize state
win.on("resize", (event) => { win.on("resize", (event) => {
setItem("bounds", JSON.stringify(win.getBounds()), configFile); setItem("bounds", JSON.stringify(win.getBounds()), configFile);
}); });

View File

@ -1,40 +1,4 @@
const electron = require("electron"); const electron = require("electron");
/**
*
* @param {string} id
* @returns {any}
*/
function getId(id) {
return document.getElementById(id);
}
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 {
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);
}
});
getId("themeToggle").addEventListener("change", () => { getId("themeToggle").addEventListener("change", () => {
document.documentElement.setAttribute("theme", getId("themeToggle").value); document.documentElement.setAttribute("theme", getId("themeToggle").value);

View File

@ -2,44 +2,17 @@ const {exec} = require("child_process");
const path = require("path"); const path = require("path");
const {ipcRenderer, shell} = require("electron"); const {ipcRenderer, shell} = require("electron");
const os = require("os"); const os = require("os");
const si = require("systeminformation") const si = require("systeminformation");
const menu = require("../utils/menu");
const getFfmpegPath = require("../utils/ffmpeg");
let menuIsOpen = false; let menuIsOpen = false;
getId("menuIcon").addEventListener("click", () => { getId("menuIcon").addEventListener("click", () => {
if (menuIsOpen) { menuIsOpen = menu.initializeMenu(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(() => { let ffmpeg = getFfmpegPath();
getId("menu").style.display = "flex";
getId("menu").style.opacity = "1";
}, 150);
}
});
let ffmpeg;
if (os.platform() === "win32") {
ffmpeg = `"${__dirname}\\..\\ffmpeg.exe"`;
} else {
ffmpeg = `"${__dirname}/../ffmpeg"`;
}
const vaapi_device = "/dev/dri/renderD128" const vaapi_device = "/dev/dri/renderD128"
@ -54,33 +27,44 @@ si.graphics().then((info) => {
const gpuModel = gpu.model.toLowerCase() const gpuModel = gpu.model.toLowerCase()
if (gpuName.includes("nvidia") || gpuModel.includes("nvidia")) { if (gpuName.includes("nvidia") || gpuModel.includes("nvidia")) {
document.querySelectorAll(".nvidia_opt").forEach((opt) => { document.querySelectorAll(".nvidia_opt").forEach(
/** @param {HTMLElement} opt */
(opt) => {
opt.style.display = "block" opt.style.display = "block"
}) })
} else if (gpuName.includes("advanced micro devices") || gpuModel.includes("amd")) { } else if (gpuName.includes("advanced micro devices") || gpuModel.includes("amd")) {
if (os.platform() == "win32") { if (os.platform() == "win32") {
document.querySelectorAll(".amf_opt").forEach((opt) => { document.querySelectorAll(".amf_opt").forEach(
opt.style.display = "block" /** @param {HTMLElement} opt */
(opt) => {
opt.style.display = "block"
}) })
} else { } else {
document.querySelectorAll(".vaapi_opt").forEach((opt) => { document.querySelectorAll(".vaapi_opt").forEach(
/** @param {HTMLElement} opt */
(opt) => {
opt.style.display = "block" opt.style.display = "block"
}) })
} }
} else if (gpuName.includes("intel")) { } else if (gpuName.includes("intel")) {
if (os.platform() == "win32") { if (os.platform() == "win32") {
document.querySelectorAll(".qsv_opt").forEach((opt) => { document.querySelectorAll(".qsv_opt").forEach(
/** @param {HTMLElement} opt */
(opt) => {
opt.style.display = "block" opt.style.display = "block"
}) })
} else if (os.platform() != "darwin") { } else if (os.platform() != "darwin") {
document.querySelectorAll(".vaapi_opt").forEach((opt) => { document.querySelectorAll(".vaapi_opt").forEach(
/** @param {HTMLElement} opt */
(opt) => {
opt.style.display = "block" opt.style.display = "block"
}) })
} }
} else { } else {
if (os.platform() == "darwin") { if (os.platform() == "darwin") {
document.querySelectorAll(".videotoolbox_opt").forEach((opt) => { document.querySelectorAll(".videotoolbox_opt").forEach(
/** @param {HTMLElement} opt */
(opt) => {
opt.style.display = "block" opt.style.display = "block"
}) })
} }
@ -115,7 +99,9 @@ dropZone.addEventListener("dragleave", () => {
dropZone.classList.remove("dragover"); dropZone.classList.remove("dragover");
}); });
dropZone.addEventListener("drop", (e) => { dropZone.addEventListener("drop",
/** @param {DragEvent} e */
(e) => {
e.preventDefault(); e.preventDefault();
dropZone.classList.remove("dragover"); dropZone.classList.remove("dragover");
// @ts-ignore // @ts-ignore
@ -125,8 +111,8 @@ dropZone.addEventListener("drop", (e) => {
}); });
fileInput.addEventListener("change", (e) => { fileInput.addEventListener("change", (e) => {
// @ts-ignore const target = /** @type {HTMLInputElement} */ (e.target);
files = Array.from(e.target.files); files = Array.from(target.files);
updateSelectedFiles(); updateSelectedFiles();
}); });
@ -284,7 +270,7 @@ async function compressVideo(file, settings, itemId, outputPath) {
/** /**
* @param {File} file * @param {File} file
* @param {{ encoder: string; speed: string; videoQuality: string; audioQuality: string; audioFormat: string }} settings * @param {{ encoder: string; speed: string; videoQuality: string; audioQuality?: string; audioFormat: string }} settings
* @param {string} outputPath * @param {string} outputPath
*/ */
function buildFFmpegCommand(file, settings, outputPath) { function buildFFmpegCommand(file, settings, outputPath) {
@ -302,6 +288,7 @@ function buildFFmpegCommand(file, settings, outputPath) {
args.push( args.push(
"-c:v", "-c:v",
"libx264", "libx264",
"-vf", "format=yuv420p",
"-preset", "-preset",
settings.speed, settings.speed,
"-crf", "-crf",
@ -312,6 +299,7 @@ function buildFFmpegCommand(file, settings, outputPath) {
args.push( args.push(
"-c:v", "-c:v",
"libx265", "libx265",
"-vf", "format=yuv420p",
"-preset", "-preset",
settings.speed, settings.speed,
"-crf", "-crf",
@ -323,6 +311,7 @@ function buildFFmpegCommand(file, settings, outputPath) {
args.push( args.push(
"-c:v", "-c:v",
"h264_qsv", "h264_qsv",
"-vf", "format=yuv420p",
"-preset", "-preset",
settings.speed, settings.speed,
"-global_quality", "-global_quality",
@ -359,6 +348,7 @@ function buildFFmpegCommand(file, settings, outputPath) {
args.push( args.push(
"-c:v", "-c:v",
"h264_nvenc", "h264_nvenc",
"-vf", "format=yuv420p",
"-preset", "-preset",
getNvencPreset(settings.speed), getNvencPreset(settings.speed),
"-rc", "-rc",
@ -380,6 +370,7 @@ function buildFFmpegCommand(file, settings, outputPath) {
args.push( args.push(
"-c:v", "-c:v",
"hevc_amf", "hevc_amf",
"-vf", "format=yuv420p",
"-quality", "-quality",
amf_hevc_quality, amf_hevc_quality,
"-rc", "-rc",
@ -402,6 +393,7 @@ function buildFFmpegCommand(file, settings, outputPath) {
args.push( args.push(
"-c:v", "-c:v",
"h264_amf", "h264_amf",
"-vf", "format=yuv420p",
"-quality", "-quality",
amf_quality, amf_quality,
"-rc", "-rc",
@ -426,8 +418,6 @@ function buildFFmpegCommand(file, settings, outputPath) {
// args.push("-vf", "scale=trunc(iw*1/2)*2:trunc(ih*1/2)*2,format=yuv420p"); // args.push("-vf", "scale=trunc(iw*1/2)*2:trunc(ih*1/2)*2,format=yuv420p");
args.push("-vf", "format=yuv420p");
args.push("-c:a", settings.audioFormat, `"${outputPath}"`); args.push("-c:a", settings.audioFormat, `"${outputPath}"`);
return `${ffmpeg} ${args.join(" ")}`; return `${ffmpeg} ${args.join(" ")}`;
@ -498,7 +488,7 @@ function createProgressItem(filename, status, data, itemId) {
<div class="filename">${filename}</div> <div class="filename">${filename}</div>
<div id="${itemId + "_prog"}" class="itemProgress">${data}</div> <div id="${itemId + "_prog"}" class="itemProgress">${data}</div>
`; `;
statusElement.prepend(newStatus); statusElement.append(newStatus);
} }
/** /**
@ -527,28 +517,14 @@ function timeToSeconds(timeStr) {
return hh * 3600 + mm * 60 + ss; return hh * 3600 + mm * 60 + ss;
} }
// Menu
getId("preferenceWin").addEventListener("click", () => {
closeMenu();
ipcRenderer.send("load-page", __dirname + "/preferences.html");
});
getId("aboutWin").addEventListener("click", () => {
closeMenu();
ipcRenderer.send("load-page", __dirname + "/about.html");
});
getId("homeWin").addEventListener("click", () => {
closeMenu();
ipcRenderer.send("load-win", __dirname + "/index.html");
});
getId("themeToggle").addEventListener("change", () => { getId("themeToggle").addEventListener("change", () => {
document.documentElement.setAttribute("theme", getId("themeToggle").value); document.documentElement.setAttribute("theme", getId("themeToggle").value);
localStorage.setItem("theme", getId("themeToggle").value); localStorage.setItem("theme", getId("themeToggle").value);
}); });
getId("output-folder-input").addEventListener("change", (e) => { getId("output-folder-input").addEventListener("change", (e) => {
const checked = e.target.checked; const target = /** @type {HTMLInputElement} */ (e.target);
const checked = target.checked;
if (!checked) { if (!checked) {
getId("custom-folder-select").style.display = "block" getId("custom-folder-select").style.display = "block"
@ -562,6 +538,7 @@ getId("output-folder-input").addEventListener("change", (e) => {
const storageTheme = localStorage.getItem("theme"); const storageTheme = localStorage.getItem("theme");
if (storageTheme) { if (storageTheme) {
document.documentElement.setAttribute("theme", storageTheme); document.documentElement.setAttribute("theme", storageTheme);
// @ts-ignore
getId("themeToggle").value = storageTheme; getId("themeToggle").value = storageTheme;
} }
@ -590,19 +567,23 @@ function closeMenu() {
// Menu // Menu
getId("preferenceWin").addEventListener("click", () => { getId("preferenceWin").addEventListener("click", () => {
closeMenu(); closeMenu();
menuIsOpen = false;
ipcRenderer.send("load-page", __dirname + "/preferences.html"); ipcRenderer.send("load-page", __dirname + "/preferences.html");
}); });
getId("playlistWin").addEventListener("click", () => { getId("playlistWin").addEventListener("click", () => {
closeMenu(); closeMenu();
menuIsOpen = false;
ipcRenderer.send("load-win", __dirname + "/playlist.html"); ipcRenderer.send("load-win", __dirname + "/playlist.html");
}); });
getId("aboutWin").addEventListener("click", () => { getId("aboutWin").addEventListener("click", () => {
closeMenu(); closeMenu();
menuIsOpen = false;
ipcRenderer.send("load-page", __dirname + "/about.html"); ipcRenderer.send("load-page", __dirname + "/about.html");
}); });
getId("homeWin").addEventListener("click", () => { getId("homeWin").addEventListener("click", () => {
closeMenu(); closeMenu();
menuIsOpen = false;
ipcRenderer.send("load-win", __dirname + "/index.html"); ipcRenderer.send("load-win", __dirname + "/index.html");
}); });

View File

@ -3,20 +3,15 @@ const audioToggle = getId("audioToggle");
const incorrectMsg = getId("incorrectMsg"); const incorrectMsg = getId("incorrectMsg");
const loadingMsg = getId("loadingWrapper"); const loadingMsg = getId("loadingWrapper");
function getId(id) {
return document.getElementById(id);
}
// Video and audio toggle // Video and audio toggle
videoToggle.addEventListener("click", (event) => { videoToggle.addEventListener("click", (_event) => {
selectVideo() selectVideo()
}); });
audioToggle.addEventListener("click", (event) => { audioToggle.addEventListener("click", (_event) => {
selectAudio() selectAudio()
}); });
///////////// /////////////
function selectVideo(){ function selectVideo(){
localStorage.setItem("defaultWindow", "video") localStorage.setItem("defaultWindow", "video")

View File

@ -5,6 +5,7 @@ const os = require("os");
const fs = require("fs"); const fs = require("fs");
const {execSync} = require("child_process"); const {execSync} = require("child_process");
const { constants } = require("fs/promises"); const { constants } = require("fs/promises");
const { initializeMenu } = require("../utils/menu");
let url; let url;
const ytDlp = localStorage.getItem("ytdlp"); const ytDlp = localStorage.getItem("ytdlp");
const ytdlp = new YTDlpWrap(`"${ytDlp}"`); const ytdlp = new YTDlpWrap(`"${ytDlp}"`);
@ -305,13 +306,14 @@ function download(type) {
} }
} }
// TODO
getId("finishBtn").addEventListener("click", () => { // getId("finishBtn").addEventListener("click", () => {
controller.abort("user_finished") // controller.abort("user_finished")
try { // try {
process.kill(downloadProcess.ytDlpProcess.pid, 'SIGINT') // process.kill(downloadProcess.ytDlpProcess.pid, 'SIGINT')
} catch (_error) {} // } catch (_error) {}
}) // })
downloadProcess.on("ytDlpEvent", (_eventType, eventData) => { downloadProcess.on("ytDlpEvent", (_eventType, eventData) => {
// console.log(eventData); // console.log(eventData);
@ -697,6 +699,12 @@ getId("advancedToggle").addEventListener("click", () => {
} }
}); });
let menuIsOpen = false;
getId("menuIcon").addEventListener("click", () => {
menuIsOpen = initializeMenu(menuIsOpen)
})
// Menu // Menu
getId("openDownloads").addEventListener("click", () => { getId("openDownloads").addEventListener("click", () => {
openFolder(downloadDir); openFolder(downloadDir);
@ -704,20 +712,24 @@ getId("openDownloads").addEventListener("click", () => {
getId("preferenceWin").addEventListener("click", () => { getId("preferenceWin").addEventListener("click", () => {
closeMenu(); closeMenu();
menuIsOpen = false;
ipcRenderer.send("load-page", __dirname + "/preferences.html"); ipcRenderer.send("load-page", __dirname + "/preferences.html");
}); });
getId("aboutWin").addEventListener("click", () => { getId("aboutWin").addEventListener("click", () => {
closeMenu(); closeMenu();
menuIsOpen = false;
ipcRenderer.send("load-page", __dirname + "/about.html"); ipcRenderer.send("load-page", __dirname + "/about.html");
}); });
getId("homeWin").addEventListener("click", () => { getId("homeWin").addEventListener("click", () => {
closeMenu(); closeMenu();
menuIsOpen = false;
ipcRenderer.send("load-win", __dirname + "/index.html"); ipcRenderer.send("load-win", __dirname + "/index.html");
}); });
getId("compressorWin").addEventListener("click", () => { getId("compressorWin").addEventListener("click", () => {
closeMenu(); closeMenu();
menuIsOpen = false;
ipcRenderer.send("load-win", __dirname + "/compressor.html"); ipcRenderer.send("load-win", __dirname + "/compressor.html");
}); });

View File

@ -24,6 +24,8 @@ const path = require("path");
const {shell, ipcRenderer, clipboard} = require("electron"); const {shell, ipcRenderer, clipboard} = require("electron");
const {default: YTDlpWrap} = require("yt-dlp-wrap-plus"); const {default: YTDlpWrap} = require("yt-dlp-wrap-plus");
const {constants} = require("fs/promises"); const {constants} = require("fs/promises");
const { getId } = require("../utils/common");
const { initializeMenu } = require("../utils/menu");
// Directories // Directories
const homedir = os.homedir(); const homedir = os.homedir();
@ -107,13 +109,6 @@ let controllers = new Object();
let preferredVideoQuality = 720; let preferredVideoQuality = 720;
let preferredAudioQuality = ""; let preferredAudioQuality = "";
let preferredVideoCodec = "avc1"; let preferredVideoCodec = "avc1";
/**
*
* @param {string} id
*/
function getId(id) {
return document.getElementById(id);
}
function downloadPathSelection() { function downloadPathSelection() {
let localPath = localStorage.getItem("downloadPath"); let localPath = localStorage.getItem("downloadPath");
@ -1417,23 +1412,34 @@ function getLocalStorageItem(item) {
} }
// Menu // Menu
let menuIsOpen = false;
getId("menuIcon").addEventListener("click", () => {
menuIsOpen = initializeMenu(menuIsOpen)
})
getId("preferenceWin").addEventListener("click", () => { getId("preferenceWin").addEventListener("click", () => {
closeMenu(); closeMenu();
menuIsOpen = false;
ipcRenderer.send("load-page", __dirname + "/preferences.html"); ipcRenderer.send("load-page", __dirname + "/preferences.html");
}); });
getId("aboutWin").addEventListener("click", () => { getId("aboutWin").addEventListener("click", () => {
closeMenu(); closeMenu();
menuIsOpen = false;
ipcRenderer.send("load-page", __dirname + "/about.html"); ipcRenderer.send("load-page", __dirname + "/about.html");
}); });
getId("playlistWin").addEventListener("click", () => { getId("playlistWin").addEventListener("click", () => {
closeMenu(); closeMenu();
menuIsOpen = false;
ipcRenderer.send("load-win", __dirname + "/playlist.html"); ipcRenderer.send("load-win", __dirname + "/playlist.html");
}); });
getId("compressorWin").addEventListener("click", () => { getId("compressorWin").addEventListener("click", () => {
closeMenu(); closeMenu();
menuIsOpen = false;
ipcRenderer.send("load-win", __dirname + "/compressor.html"); ipcRenderer.send("load-win", __dirname + "/compressor.html");
}); });
// getId("newPlaylistWin").addEventListener("click", () => { // getId("newPlaylistWin").addEventListener("click", () => {

7
utils/common.js Normal file
View File

@ -0,0 +1,7 @@
function getId(id) {
return document.getElementById(id);
}
module.exports = {
getId
}

24
utils/ffmpeg.js Normal file
View File

@ -0,0 +1,24 @@
const os = require("os")
const cp = require("child_process")
const popups = require("./popups")
function getFfmpegPath() {
let ffmpeg = ""
if (os.platform() === "win32") {
ffmpeg = `"${__dirname}\\..\\ffmpeg.exe"`;
} else if (os.platform() === "freebsd") {
try {
ffmpeg = cp.execSync("which ffmpeg").toString("utf8").split("\n")[0].trim();
} catch (error) {
console.log(error)
popups.showPopup("No ffmpeg found in PATH.");
}
}
else {
ffmpeg = `"${__dirname}/../ffmpeg"`;
}
return ffmpeg;
}
module.exports = getFfmpegPath

32
utils/menu.js Normal file
View File

@ -0,0 +1,32 @@
function initializeMenu(menuIsOpen) {
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);
}
return menuIsOpen;
}
module.exports = {
initializeMenu,
}

13
utils/popups.js Normal file
View File

@ -0,0 +1,13 @@
// Popup message
function showPopup(text) {
console.log("Triggered showpopup");
getId("popupText").textContent = text;
getId("popupText").style.display = "inline-block";
setTimeout(() => {
getId("popupText").style.display = "none";
}, 2200);
}
module.exports = {
showPopup
}