From 202d31029bb5ed6ba806566e18faab93a8bbcd37 Mon Sep 17 00:00:00 2001 From: aandrew-me Date: Fri, 16 Sep 2022 21:10:54 +0600 Subject: [PATCH] Playlist improvements --- assets/css/extra.css | 2 +- assets/css/index.css | 24 ++++++++++++++++- assets/css/playlist.css | 3 --- html/index.html | 2 +- html/playlist.html | 7 ++++- src/playlist.js | 59 ++++++++++++++++++++++++++++++++++++----- 6 files changed, 83 insertions(+), 14 deletions(-) delete mode 100644 assets/css/playlist.css diff --git a/assets/css/extra.css b/assets/css/extra.css index 09c33d0..80c41a3 100644 --- a/assets/css/extra.css +++ b/assets/css/extra.css @@ -26,7 +26,7 @@ input[type="text"]{ border-radius: 8px; border:none; color:rgb(255, 255, 255); - background-color: rgb(56, 209, 56); + background-color: rgb(49, 215, 49); cursor: pointer; } #save:active{ diff --git a/assets/css/index.css b/assets/css/index.css index e0ffe92..5c10489 100644 --- a/assets/css/index.css +++ b/assets/css/index.css @@ -114,6 +114,19 @@ body { align-items: center; justify-content: space-between; } +.playlistItem{ + display: flex; + position: relative; + width: 86%; + background-color: var(--item-bg); + color: var(--text); + padding:10px 25px; + border-radius: 25px; + align-items: center; + justify-content: space-between; + margin: 10px auto; + +} @media screen and (max-width: 650px) { .item { @@ -182,7 +195,16 @@ body { width: 80%; padding: 10px 10px 20px 10px; color: var(--text); - box-shadow: var(--box-shadow); +} + +#options{ + display:none; + position:relative; + top:20px; + background-color: var(--box-main); + border-radius: 10px; + padding: 10px; + color: var(--text); } #btnContainer { diff --git a/assets/css/playlist.css b/assets/css/playlist.css deleted file mode 100644 index 719eb0b..0000000 --- a/assets/css/playlist.css +++ /dev/null @@ -1,3 +0,0 @@ -#options{ - display:none; -} \ No newline at end of file diff --git a/html/index.html b/html/index.html index f3a09ba..5ea6019 100644 --- a/html/index.html +++ b/html/index.html @@ -48,9 +48,9 @@ diff --git a/html/playlist.html b/html/playlist.html index 7fd6924..f14f048 100644 --- a/html/playlist.html +++ b/html/playlist.html @@ -9,9 +9,13 @@ - + @@ -26,6 +30,7 @@ diff --git a/src/playlist.js b/src/playlist.js index d2087ff..0bc3cb5 100644 --- a/src/playlist.js +++ b/src/playlist.js @@ -1,4 +1,4 @@ -const { clipboard } = require("electron"); +const { clipboard, shell, ipcRenderer } = require("electron"); const { default: YTDlpWrap } = require("yt-dlp-wrap-extended"); const path = require("path"); let url; @@ -15,6 +15,8 @@ function pasteLink() { url = clipboard.readText(); getId("link").textContent = " " + url; getId("options").style.display = "block"; + getId("incorrectMsg").textContent = ""; + } getId("pasteLink").addEventListener("click", () => { @@ -28,13 +30,14 @@ document.addEventListener("keydown", (event) => { }); // Patterns -const playlistName = "Downloading playlist: "; +const playlistTxt = "Downloading playlist: "; const videoIndex = "Downloading video "; // Downloading playlist: Inkscape Tutorials // Downloading video 1 of 82 getId("download").addEventListener("click", () => { let count = 0; + let playlistName; getId("options").style.display = "none"; getId("pasteLink").style.display = "none"; @@ -51,6 +54,7 @@ getId("download").addEventListener("click", () => { "-o", `"${path.join( downloadDir, + "%(playlist_title)s", "%(title)s_%(playlist_index)s.%(ext)s" )}"`, @@ -63,8 +67,10 @@ getId("download").addEventListener("click", () => { downloadProcess.on("ytDlpEvent", (eventType, eventData) => { console.log(eventData); - if (eventData.includes(playlistName)) { - getId("playlistName").textContent = eventData; + if (eventData.includes(playlistTxt)) { + playlistName = eventData.split(":")[1].slice(1) + getId("playlistName").textContent = i18n.__("Downloading playlist:") + " "+ playlistName; + console.log(playlistName); } if (eventData.includes(videoIndex)) { @@ -72,12 +78,12 @@ getId("download").addEventListener("click", () => { const itemTitle = i18n.__("Video") + " " + eventData.split(" ")[3]; if (count > 1) { - getId(`p${count - 1}`).textContent = i18n.__("File saved successfully") + getId(`p${count - 1}`).textContent = i18n.__("File saved. Click to Open") } - const item = `
+ const item = `

${itemTitle}

-

${i18n.__("Downloading...")}

+

${i18n.__("Downloading...")}

`; getId("list").innerHTML += item; } @@ -90,6 +96,9 @@ getId("download").addEventListener("click", () => { }); downloadProcess.on("error", (error) => { + getId("pasteLink").style.display = "inline-block" + getId("options").style.display = "block"; + getId("playlistName").textContent = "" getId("incorrectMsg").textContent = error; }); @@ -98,3 +107,39 @@ getId("download").addEventListener("click", () => { }) }); + + +function openFolder(location){ + shell.openPath(location) +} + + +function closeMenu() { + getId("menuIcon").style.transform = "rotate(0deg)"; + menuIsOpen = false; + let count = 0; + let opacity = 1; + const fade = setInterval(() => { + if (count >= 10) { + clearInterval(fade); + } else { + opacity -= 0.1; + getId("menu").style.opacity = opacity; + count++; + } + }, 50); +} + +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"); +}) \ No newline at end of file