Refactoring
This commit is contained in:
parent
99b61f8976
commit
b3606ebdf6
@ -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;
|
||||
|
@ -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>
|
||||
|
||||
|
2
main.js
2
main.js
@ -46,6 +46,8 @@ function createWindow() {
|
||||
return false;
|
||||
});
|
||||
|
||||
// TODO: Remember maximize state
|
||||
|
||||
win.on("resize", (event) => {
|
||||
setItem("bounds", JSON.stringify(win.getBounds()), configFile);
|
||||
});
|
||||
|
@ -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);
|
||||
|
@ -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");
|
||||
});
|
@ -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")
|
||||
|
@ -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");
|
||||
});
|
||||
|
||||
|
@ -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
7
utils/common.js
Normal file
@ -0,0 +1,7 @@
|
||||
function getId(id) {
|
||||
return document.getElementById(id);
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
getId
|
||||
}
|
24
utils/ffmpeg.js
Normal file
24
utils/ffmpeg.js
Normal 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
32
utils/menu.js
Normal 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
13
utils/popups.js
Normal 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
|
||||
}
|
Loading…
x
Reference in New Issue
Block a user