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

View File

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

View File

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

View File

@ -1,40 +1,4 @@
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", () => {
document.documentElement.setAttribute("theme", getId("themeToggle").value);

View File

@ -2,44 +2,17 @@ const {exec} = require("child_process");
const path = require("path");
const {ipcRenderer, shell} = require("electron");
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;
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;
menuIsOpen = menu.initializeMenu(menuIsOpen)
})
setTimeout(() => {
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"`;
}
let ffmpeg = getFfmpegPath();
const vaapi_device = "/dev/dri/renderD128"
@ -54,33 +27,44 @@ si.graphics().then((info) => {
const gpuModel = gpu.model.toLowerCase()
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"
})
} else if (gpuName.includes("advanced micro devices") || gpuModel.includes("amd")) {
if (os.platform() == "win32") {
document.querySelectorAll(".amf_opt").forEach((opt) => {
opt.style.display = "block"
document.querySelectorAll(".amf_opt").forEach(
/** @param {HTMLElement} opt */
(opt) => {
opt.style.display = "block"
})
} else {
document.querySelectorAll(".vaapi_opt").forEach((opt) => {
document.querySelectorAll(".vaapi_opt").forEach(
/** @param {HTMLElement} opt */
(opt) => {
opt.style.display = "block"
})
}
} else if (gpuName.includes("intel")) {
if (os.platform() == "win32") {
document.querySelectorAll(".qsv_opt").forEach((opt) => {
document.querySelectorAll(".qsv_opt").forEach(
/** @param {HTMLElement} opt */
(opt) => {
opt.style.display = "block"
})
} else if (os.platform() != "darwin") {
document.querySelectorAll(".vaapi_opt").forEach((opt) => {
document.querySelectorAll(".vaapi_opt").forEach(
/** @param {HTMLElement} opt */
(opt) => {
opt.style.display = "block"
})
}
} else {
if (os.platform() == "darwin") {
document.querySelectorAll(".videotoolbox_opt").forEach((opt) => {
document.querySelectorAll(".videotoolbox_opt").forEach(
/** @param {HTMLElement} opt */
(opt) => {
opt.style.display = "block"
})
}
@ -115,7 +99,9 @@ dropZone.addEventListener("dragleave", () => {
dropZone.classList.remove("dragover");
});
dropZone.addEventListener("drop", (e) => {
dropZone.addEventListener("drop",
/** @param {DragEvent} e */
(e) => {
e.preventDefault();
dropZone.classList.remove("dragover");
// @ts-ignore
@ -125,8 +111,8 @@ dropZone.addEventListener("drop", (e) => {
});
fileInput.addEventListener("change", (e) => {
// @ts-ignore
files = Array.from(e.target.files);
const target = /** @type {HTMLInputElement} */ (e.target);
files = Array.from(target.files);
updateSelectedFiles();
});
@ -284,7 +270,7 @@ async function compressVideo(file, settings, itemId, outputPath) {
/**
* @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
*/
function buildFFmpegCommand(file, settings, outputPath) {
@ -302,6 +288,7 @@ function buildFFmpegCommand(file, settings, outputPath) {
args.push(
"-c:v",
"libx264",
"-vf", "format=yuv420p",
"-preset",
settings.speed,
"-crf",
@ -312,6 +299,7 @@ function buildFFmpegCommand(file, settings, outputPath) {
args.push(
"-c:v",
"libx265",
"-vf", "format=yuv420p",
"-preset",
settings.speed,
"-crf",
@ -323,6 +311,7 @@ function buildFFmpegCommand(file, settings, outputPath) {
args.push(
"-c:v",
"h264_qsv",
"-vf", "format=yuv420p",
"-preset",
settings.speed,
"-global_quality",
@ -359,6 +348,7 @@ function buildFFmpegCommand(file, settings, outputPath) {
args.push(
"-c:v",
"h264_nvenc",
"-vf", "format=yuv420p",
"-preset",
getNvencPreset(settings.speed),
"-rc",
@ -380,6 +370,7 @@ function buildFFmpegCommand(file, settings, outputPath) {
args.push(
"-c:v",
"hevc_amf",
"-vf", "format=yuv420p",
"-quality",
amf_hevc_quality,
"-rc",
@ -402,6 +393,7 @@ function buildFFmpegCommand(file, settings, outputPath) {
args.push(
"-c:v",
"h264_amf",
"-vf", "format=yuv420p",
"-quality",
amf_quality,
"-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", "format=yuv420p");
args.push("-c:a", settings.audioFormat, `"${outputPath}"`);
return `${ffmpeg} ${args.join(" ")}`;
@ -498,7 +488,7 @@ function createProgressItem(filename, status, data, itemId) {
<div class="filename">${filename}</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;
}
// 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", () => {
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;
const target = /** @type {HTMLInputElement} */ (e.target);
const checked = target.checked;
if (!checked) {
getId("custom-folder-select").style.display = "block"
@ -562,6 +538,7 @@ getId("output-folder-input").addEventListener("change", (e) => {
const storageTheme = localStorage.getItem("theme");
if (storageTheme) {
document.documentElement.setAttribute("theme", storageTheme);
// @ts-ignore
getId("themeToggle").value = storageTheme;
}
@ -590,19 +567,23 @@ function closeMenu() {
// 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("homeWin").addEventListener("click", () => {
closeMenu();
menuIsOpen = false;
ipcRenderer.send("load-win", __dirname + "/index.html");
});

View File

@ -3,20 +3,15 @@ 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) => {
videoToggle.addEventListener("click", (_event) => {
selectVideo()
});
audioToggle.addEventListener("click", (event) => {
audioToggle.addEventListener("click", (_event) => {
selectAudio()
});
/////////////
function selectVideo(){
localStorage.setItem("defaultWindow", "video")

View File

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

View File

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