From 4a57bf971e9db610b712300d6693f1456e71d16b Mon Sep 17 00:00:00 2001 From: aandrew-me Date: Fri, 16 Sep 2022 12:35:48 +0600 Subject: [PATCH] Playlist download support --- assets/css/playlist.css | 3 ++ html/index.html | 2 + html/playlist.html | 55 +++++++++++++++++++++ main.js | 3 ++ package.json | 2 +- src/common.js | 103 ++++++++++++++++++++++++++++++++++++++++ src/index.js | 100 -------------------------------------- src/playlist.js | 62 ++++++++++++++++++++++++ src/renderer.js | 10 +++- 9 files changed, 238 insertions(+), 102 deletions(-) create mode 100644 assets/css/playlist.css create mode 100644 html/playlist.html create mode 100644 src/common.js create mode 100644 src/playlist.js diff --git a/assets/css/playlist.css b/assets/css/playlist.css new file mode 100644 index 0000000..719eb0b --- /dev/null +++ b/assets/css/playlist.css @@ -0,0 +1,3 @@ +#options{ + display:none; +} \ No newline at end of file diff --git a/html/index.html b/html/index.html index ebbad2e..f3a09ba 100644 --- a/html/index.html +++ b/html/index.html @@ -10,6 +10,7 @@ + @@ -49,6 +50,7 @@ diff --git a/html/playlist.html b/html/playlist.html new file mode 100644 index 0000000..cfc294d --- /dev/null +++ b/html/playlist.html @@ -0,0 +1,55 @@ + + + + + + + Playlist download + + + + + + + + + + +
+
+
+ + + menu + + + + + + +
+
+ Link: +

+ + + + + + +

+
+ + \ No newline at end of file diff --git a/main.js b/main.js index bf540d6..2f28ec6 100644 --- a/main.js +++ b/main.js @@ -56,6 +56,9 @@ ipcMain.on("get-version", () => { secondaryWindow.webContents.send("version", version); }); +ipcMain.on("load-win", (event, file)=>{ + win.loadFile(file) +}) ipcMain.on("load-page", (event, file) => { secondaryWindow = new BrowserWindow({ webPreferences: { diff --git a/package.json b/package.json index eff4d1e..a7c1398 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "yt-dlp-wrap-extended": "^2.3.12" }, "name": "ytdownloader", - "version": "3.4.1", + "version": "3.5.0", "main": "main.js", "scripts": { "start": "electron .", diff --git a/src/common.js b/src/common.js new file mode 100644 index 0000000..f83c9f0 --- /dev/null +++ b/src/common.js @@ -0,0 +1,103 @@ +function getId(id) { + return document.getElementById(id); +} + +let menuIsOpen = false; + +getId("menuIcon").addEventListener("click", (event) => { + 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; + count++; + } + }, 50); + } else { + getId("menuIcon").style.transform = "rotate(90deg)"; + menuIsOpen = true; + + setTimeout(() => { + getId("menu").style.display = "flex"; + getId("menu").style.opacity = 1; + }, 150); + } +}); + +// Toggle theme +let circle = getId("themeToggleInside"); +let darkTheme = true; +circle.style.left = "25px"; + +const root = document.querySelector(":root"); + +let enabledTransparent = localStorage.getItem("enabledTransparent"); +let bgColor = ""; +if (enabledTransparent == "true") { + bgColor = "rgba(40,40,40, .9)"; +} else { + bgColor = "rgb(40,40,40)"; +} + +function toggle() { + if (darkTheme == false) { + circle.style.left = "25px"; + + root.style.setProperty("--background", bgColor); + root.style.setProperty("--text", "white"); + root.style.setProperty("--box-main", "rgb(80,80,80)"); + root.style.setProperty("--box-toggle", "rgb(70,70,70)"); + root.style.setProperty("--theme-toggle", "rgb(80, 193, 238)"); + root.style.setProperty("--item-bg", "rgb(75, 75, 75)"); + root.style.setProperty("--box-shadow", "none"); + + darkTheme = true; + localStorage.setItem("theme", "dark"); + } else { + circle.style.left = "0px"; + + root.style.setProperty("--background", "whitesmoke"); + root.style.setProperty("--text", "rgb(45, 45, 45)"); + root.style.setProperty("--box-main", "rgb(174 249 224)"); + root.style.setProperty("--box-toggle", "rgb(108, 231, 190)"); + root.style.setProperty("--theme-toggle", "rgb(147, 174, 185)"); + root.style.setProperty("--item-bg", "#ececec"); + root.style.setProperty("--box-shadow", "3px 3px 10px gray"); + root.style.setProperty( + "--box-shadow", + "2px 2px 5px rgb(92, 92, 92), -2px -2px 5px rgb(219, 219, 219)" + ); + + darkTheme = false; + localStorage.setItem("theme", "light"); + } +} + +const storageTheme = localStorage.getItem("theme"); + +if (storageTheme == "dark") { + darkTheme = false; + toggle(); +} else if (storageTheme == "light") { + darkTheme = true; + toggle(); +} +//// +let advancedHidden = true; + +function advancedToggle() { + if (advancedHidden) { + getId("advanced").style.display = "block"; + advancedHidden = false; + } else { + getId("advanced").style.display = "none"; + advancedHidden = true; + } +} \ No newline at end of file diff --git a/src/index.js b/src/index.js index 8456ab1..1307aef 100644 --- a/src/index.js +++ b/src/index.js @@ -7,35 +7,6 @@ function getId(id) { return document.getElementById(id); } -let menuIsOpen = false; - -getId("menuIcon").addEventListener("click", (event) => { - 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; - count++; - } - }, 50); - } else { - getId("menuIcon").style.transform = "rotate(90deg)"; - menuIsOpen = true; - - setTimeout(() => { - getId("menu").style.display = "flex"; - getId("menu").style.opacity = 1; - }, 150); - } -}); - // Video and audio toggle videoToggle.addEventListener("click", (event) => { @@ -53,74 +24,3 @@ audioToggle.addEventListener("click", (event) => { }); ///////////// - -// Toggle theme -let circle = getId("themeToggleInside"); -let darkTheme = true; -circle.style.left = "25px"; - -const root = document.querySelector(":root"); - -let enabledTransparent = localStorage.getItem("enabledTransparent"); -let bgColor = ""; -if (enabledTransparent == "true") { - bgColor = "rgba(40,40,40, .9)"; -} else { - bgColor = "rgb(40,40,40)"; -} - -function toggle() { - if (darkTheme == false) { - circle.style.left = "25px"; - - root.style.setProperty("--background", bgColor); - root.style.setProperty("--text", "white"); - root.style.setProperty("--box-main", "rgb(80,80,80)"); - root.style.setProperty("--box-toggle", "rgb(70,70,70)"); - root.style.setProperty("--theme-toggle", "rgb(80, 193, 238)"); - root.style.setProperty("--item-bg", "rgb(75, 75, 75)"); - root.style.setProperty("--box-shadow", "none"); - - darkTheme = true; - localStorage.setItem("theme", "dark"); - } else { - circle.style.left = "0px"; - - root.style.setProperty("--background", "whitesmoke"); - root.style.setProperty("--text", "rgb(45, 45, 45)"); - root.style.setProperty("--box-main", "rgb(174 249 224)"); - root.style.setProperty("--box-toggle", "rgb(108, 231, 190)"); - root.style.setProperty("--theme-toggle", "rgb(147, 174, 185)"); - root.style.setProperty("--item-bg", "#ececec"); - root.style.setProperty("--box-shadow", "3px 3px 10px gray"); - root.style.setProperty( - "--box-shadow", - "2px 2px 5px rgb(92, 92, 92), -2px -2px 5px rgb(219, 219, 219)" - ); - - darkTheme = false; - localStorage.setItem("theme", "light"); - } -} - -const storageTheme = localStorage.getItem("theme"); - -if (storageTheme == "dark") { - darkTheme = false; - toggle(); -} else if (storageTheme == "light") { - darkTheme = true; - toggle(); -} -//// -let advancedHidden = true; - -function advancedToggle() { - if (advancedHidden) { - getId("advanced").style.display = "block"; - advancedHidden = false; - } else { - getId("advanced").style.display = "none"; - advancedHidden = true; - } -} diff --git a/src/playlist.js b/src/playlist.js new file mode 100644 index 0000000..15efc6b --- /dev/null +++ b/src/playlist.js @@ -0,0 +1,62 @@ +const { clipboard } = require("electron"); +const { default: YTDlpWrap } = require("yt-dlp-wrap-extended"); +const path = require("path"); +let url; +const ytDlp = localStorage.getItem("ytdlp"); +const ytdlp = new YTDlpWrap(ytDlp); +const downloadDir = localStorage.getItem("downloadPath"); + +function getId(id) { + return document.getElementById(id); +} + +function pasteLink() { + url = clipboard.readText(); + getId("link").textContent = " " + url; + getId("options").style.display = "block"; +} + +getId("pasteLink").addEventListener("click", () => { + pasteLink(); +}); + +document.addEventListener("keydown", (event) => { + if (event.ctrlKey && event.key == "v") { + pasteLink(); + } +}); + +// Patterns +// Downloading playlist: Inkscape Tutorials +// Downloading video 1 of 82 + +getId("download").addEventListener("click", () => { + const quality = getId("select").value; + const format = `"mp4[height<=${quality}]+m4a/mp4[height<=${quality}]/bv[height<=${quality}]+ba/best[height<=${quality}]/best"`; + const controller = new AbortController(); + + const downloadProcess = ytdlp.exec( + [ + "-f", + format, + "--yes-playlist", + "-o", + `"${path.join( + downloadDir, + "%(title)s_%(playlist_index)s.%(ext)s" + )}"`, + + `"${url}"`, + ], + { shell: true, detached: false }, + controller.signal + ); + + downloadProcess.on("ytDlpEvent", (eventType, eventData) => { + console.log(eventData); + }); + + downloadProcess.on("error", (error) => { + getId("incorrectMsg").textContent = error; + }); +}); diff --git a/src/renderer.js b/src/renderer.js index a3099e5..6ddb1a9 100644 --- a/src/renderer.js +++ b/src/renderer.js @@ -105,6 +105,7 @@ async function downloadYtdlp() { getId("popupBox").style.display = "none"; ytDlp = ytdlpPath; ytdlp = new YTDlpWrap(ytDlp); + localStorage.setItem("ytdlp", ytDlp) getId("pasteUrl").style.display = "inline-block"; console.log("yt-dlp bin Path: " + ytDlp); } @@ -137,6 +138,7 @@ cp.exec("yt-dlp --version", (error, stdout, stderr) => { console.log("yt-dlp binary is present in PATH"); ytDlp = ytdlpPath; ytdlp = new YTDlpWrap(ytDlp); + localStorage.setItem("ytdlp", ytDlp) cp.spawn(`${ytDlp}`, ["-U"]).stdout.on("data", (data) => console.log(data.toString("utf8")) ); @@ -148,6 +150,7 @@ cp.exec("yt-dlp --version", (error, stdout, stderr) => { console.log("yt-dlp binary is present in PATH"); ytDlp = "yt-dlp"; ytdlp = new YTDlpWrap(ytDlp); + localStorage.setItem("ytdlp", ytDlp) getId("pasteUrl").style.display = "inline-block"; console.log("yt-dlp bin Path: " + ytDlp); } @@ -569,7 +572,7 @@ function download(type) { audioFormat = "ba"; } - let controller = new AbortController(); + const controller = new AbortController(); console.log(rangeOption + " " + rangeCmd); if (type === "video" && onlyvideo) { @@ -790,3 +793,8 @@ getId("aboutWin").addEventListener("click", () => { closeMenu(); ipcRenderer.send("load-page", __dirname + "/about.html"); }); + +getId("playlistWin").addEventListener("click", ()=>{ + closeMenu(); + ipcRenderer.send("load-win", __dirname + "/playlist.html"); +}) \ No newline at end of file