diff --git a/assets/css/index.css b/assets/css/index.css index b140396..afe7959 100644 --- a/assets/css/index.css +++ b/assets/css/index.css @@ -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; diff --git a/html/compressor.html b/html/compressor.html index 67bd95a..416d327 100644 --- a/html/compressor.html +++ b/html/compressor.html @@ -8,6 +8,9 @@ + +Text copied + menu @@ -48,7 +51,7 @@ - + @@ -135,7 +138,7 @@ - + diff --git a/main.js b/main.js index 0cc35d6..5ed2d79 100644 --- a/main.js +++ b/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); }); diff --git a/src/common.js b/src/common.js index 8cddc39..7574b8c 100644 --- a/src/common.js +++ b/src/common.js @@ -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); diff --git a/src/compressor.js b/src/compressor.js index b06aabb..652f2b3 100644 --- a/src/compressor.js +++ b/src/compressor.js @@ -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; - - setTimeout(() => { - getId("menu").style.display = "flex"; - getId("menu").style.opacity = "1"; - }, 150); - } -}); + menuIsOpen = menu.initializeMenu(menuIsOpen) +}) - -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) {
${filename}
${data}
`; - 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"); }); \ No newline at end of file diff --git a/src/index.js b/src/index.js index 5fc794d..fd4f645 100644 --- a/src/index.js +++ b/src/index.js @@ -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") diff --git a/src/playlist.js b/src/playlist.js index 65de1a5..37e3bb1 100644 --- a/src/playlist.js +++ b/src/playlist.js @@ -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"); }); diff --git a/src/renderer.js b/src/renderer.js index 67d4524..c685fec 100644 --- a/src/renderer.js +++ b/src/renderer.js @@ -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", () => { diff --git a/utils/common.js b/utils/common.js new file mode 100644 index 0000000..5aad506 --- /dev/null +++ b/utils/common.js @@ -0,0 +1,7 @@ +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 new file mode 100644 index 0000000..6cfb602 --- /dev/null +++ b/utils/ffmpeg.js @@ -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 \ No newline at end of file diff --git a/utils/menu.js b/utils/menu.js new file mode 100644 index 0000000..859cd46 --- /dev/null +++ b/utils/menu.js @@ -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, +} \ No newline at end of file diff --git a/utils/popups.js b/utils/popups.js new file mode 100644 index 0000000..a1fd798 --- /dev/null +++ b/utils/popups.js @@ -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 +} \ No newline at end of file