diff --git a/assets/css/index.css b/assets/css/index.css index a69441d..f5d16e4 100644 --- a/assets/css/index.css +++ b/assets/css/index.css @@ -733,7 +733,7 @@ body::-webkit-scrollbar-thumb { .container { max-width: 800px; - margin: 30px auto 10px auto; + margin: 0 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(--box-toggle); + background-color: var(--item-bg); margin-bottom: 12px; padding: 15px; border-radius: 8px; diff --git a/html/compressor.html b/html/compressor.html index 9cc0017..5966e61 100644 --- a/html/compressor.html +++ b/html/compressor.html @@ -8,9 +8,6 @@ - -Text copied - menu @@ -51,7 +48,7 @@ - + @@ -138,7 +135,7 @@ - + diff --git a/main.js b/main.js index 5ed2d79..0cc35d6 100644 --- a/main.js +++ b/main.js @@ -46,8 +46,6 @@ function createWindow() { return false; }); - // TODO: Remember maximize state - win.on("resize", (event) => { setItem("bounds", JSON.stringify(win.getBounds()), configFile); }); diff --git a/src/common.js b/src/common.js index 7574b8c..8cddc39 100644 --- a/src/common.js +++ b/src/common.js @@ -1,4 +1,40 @@ 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); diff --git a/src/compressor.js b/src/compressor.js index a80e7c8..c70af61 100644 --- a/src/compressor.js +++ b/src/compressor.js @@ -2,17 +2,44 @@ const {exec} = require("child_process"); const path = require("path"); const {ipcRenderer, shell} = require("electron"); const os = require("os"); -const si = require("systeminformation"); -const menu = require("../utils/menu"); -const getFfmpegPath = require("../utils/ffmpeg"); +const si = require("systeminformation") let menuIsOpen = false; getId("menuIcon").addEventListener("click", () => { - menuIsOpen = menu.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; -let ffmpeg = getFfmpegPath(); + 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"`; +} const vaapi_device = "/dev/dri/renderD128" @@ -27,44 +54,33 @@ si.graphics().then((info) => { const gpuModel = gpu.model.toLowerCase() if (gpuName.includes("nvidia") || gpuModel.includes("nvidia")) { - document.querySelectorAll(".nvidia_opt").forEach( - /** @param {HTMLElement} opt */ - (opt) => { + 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( - /** @param {HTMLElement} opt */ - (opt) => { - opt.style.display = "block" + document.querySelectorAll(".amf_opt").forEach((opt) => { + opt.style.display = "block" + }) } else { - document.querySelectorAll(".vaapi_opt").forEach( - /** @param {HTMLElement} opt */ - (opt) => { + document.querySelectorAll(".vaapi_opt").forEach((opt) => { opt.style.display = "block" }) } } else if (gpuName.includes("intel")) { if (os.platform() == "win32") { - document.querySelectorAll(".qsv_opt").forEach( - /** @param {HTMLElement} opt */ - (opt) => { + document.querySelectorAll(".qsv_opt").forEach((opt) => { opt.style.display = "block" }) } else if (os.platform() != "darwin") { - document.querySelectorAll(".vaapi_opt").forEach( - /** @param {HTMLElement} opt */ - (opt) => { + document.querySelectorAll(".vaapi_opt").forEach((opt) => { opt.style.display = "block" }) } } else { if (os.platform() == "darwin") { - document.querySelectorAll(".videotoolbox_opt").forEach( - /** @param {HTMLElement} opt */ - (opt) => { + document.querySelectorAll(".videotoolbox_opt").forEach((opt) => { opt.style.display = "block" }) } @@ -99,9 +115,7 @@ dropZone.addEventListener("dragleave", () => { dropZone.classList.remove("dragover"); }); -dropZone.addEventListener("drop", - /** @param {DragEvent} e */ - (e) => { +dropZone.addEventListener("drop", (e) => { e.preventDefault(); dropZone.classList.remove("dragover"); // @ts-ignore @@ -111,8 +125,8 @@ dropZone.addEventListener("drop", }); fileInput.addEventListener("change", (e) => { - const target = /** @type {HTMLInputElement} */ (e.target); - files = Array.from(target.files); + // @ts-ignore + files = Array.from(e.target.files); updateSelectedFiles(); }); @@ -270,7 +284,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) { @@ -288,7 +302,6 @@ function buildFFmpegCommand(file, settings, outputPath) { args.push( "-c:v", "libx264", - "-vf", "format=yuv420p", "-preset", settings.speed, "-crf", @@ -299,7 +312,6 @@ function buildFFmpegCommand(file, settings, outputPath) { args.push( "-c:v", "libx265", - "-vf", "format=yuv420p", "-preset", settings.speed, "-crf", @@ -311,7 +323,6 @@ function buildFFmpegCommand(file, settings, outputPath) { args.push( "-c:v", "h264_qsv", - "-vf", "format=yuv420p", "-preset", settings.speed, "-global_quality", @@ -348,7 +359,6 @@ function buildFFmpegCommand(file, settings, outputPath) { args.push( "-c:v", "h264_nvenc", - "-vf", "format=yuv420p", "-preset", getNvencPreset(settings.speed), "-rc", @@ -370,7 +380,6 @@ function buildFFmpegCommand(file, settings, outputPath) { args.push( "-c:v", "hevc_amf", - "-vf", "format=yuv420p", "-quality", amf_hevc_quality, "-rc", @@ -393,7 +402,6 @@ function buildFFmpegCommand(file, settings, outputPath) { args.push( "-c:v", "h264_amf", - "-vf", "format=yuv420p", "-quality", amf_quality, "-rc", @@ -418,6 +426,8 @@ 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(" ")}`; @@ -489,7 +499,7 @@ function createProgressItem(filename, status, data, itemId) {
${visibleFilename}
${data}
`; - statusElement.append(newStatus); + statusElement.prepend(newStatus); } /** @@ -518,14 +528,28 @@ 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 target = /** @type {HTMLInputElement} */ (e.target); - const checked = target.checked; + const checked = e.target.checked; if (!checked) { getId("custom-folder-select").style.display = "block" @@ -539,7 +563,6 @@ 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; } @@ -568,23 +591,19 @@ 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"); }); \ No newline at end of file diff --git a/src/index.js b/src/index.js index fd4f645..5fc794d 100644 --- a/src/index.js +++ b/src/index.js @@ -3,15 +3,20 @@ 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") diff --git a/src/playlist.js b/src/playlist.js index 37e3bb1..65de1a5 100644 --- a/src/playlist.js +++ b/src/playlist.js @@ -5,7 +5,6 @@ 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}"`); @@ -306,14 +305,13 @@ 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); @@ -699,12 +697,6 @@ getId("advancedToggle").addEventListener("click", () => { } }); -let menuIsOpen = false; - -getId("menuIcon").addEventListener("click", () => { - menuIsOpen = initializeMenu(menuIsOpen) -}) - // Menu getId("openDownloads").addEventListener("click", () => { openFolder(downloadDir); @@ -712,24 +704,20 @@ 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"); }); diff --git a/src/renderer.js b/src/renderer.js index c685fec..67d4524 100644 --- a/src/renderer.js +++ b/src/renderer.js @@ -24,8 +24,6 @@ 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(); @@ -109,6 +107,13 @@ 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"); @@ -1412,34 +1417,23 @@ 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", () => { diff --git a/utils/common.js b/utils/common.js deleted file mode 100644 index 5aad506..0000000 --- a/utils/common.js +++ /dev/null @@ -1,7 +0,0 @@ -function getId(id) { - return document.getElementById(id); -} - -module.exports = { - getId -} \ No newline at end of file diff --git a/utils/ffmpeg.js b/utils/ffmpeg.js deleted file mode 100644 index 6cfb602..0000000 --- a/utils/ffmpeg.js +++ /dev/null @@ -1,24 +0,0 @@ -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 \ No newline at end of file diff --git a/utils/menu.js b/utils/menu.js deleted file mode 100644 index 859cd46..0000000 --- a/utils/menu.js +++ /dev/null @@ -1,32 +0,0 @@ -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, -} \ No newline at end of file diff --git a/utils/popups.js b/utils/popups.js deleted file mode 100644 index a1fd798..0000000 --- a/utils/popups.js +++ /dev/null @@ -1,13 +0,0 @@ -// 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 -} \ No newline at end of file