aiden
/
ytDownloader
mirror of https://github.com/aandrew-me/ytDownloader
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Playlist improvements

Browse Source
pull/39/head
aandrew-me 3 years ago
parent e52e78cfdf
commit 202d31029b
6 changed files with 83 additions and 14 deletions
Show Stats Download Patch File Download Diff File

2
assets/css/extra.css
Unescape Escape View File

@ -26,7 +26,7 @@ input[type="text"]{
border-radius: 8px; border-radius: 8px;
border:none; border:none;
color:rgb(255, 255, 255); color:rgb(255, 255, 255);
background-color: rgb(56, 209, 56); background-color: rgb(49, 215, 49);
cursor: pointer; cursor: pointer;
} }
#save:active{ #save:active{

24
assets/css/index.css
Unescape Escape View File

@ -114,6 +114,19 @@ body {
align-items: center; align-items: center;
justify-content: space-between; 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) { @media screen and (max-width: 650px) {
.item { .item {
@ -182,7 +195,16 @@ body {
width: 80%; width: 80%;
padding: 10px 10px 20px 10px; padding: 10px 10px 20px 10px;
color: var(--text); 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 { #btnContainer {

3
assets/css/playlist.css
Unescape Escape View File

@ -1,3 +0,0 @@
#options{
display:none;
}

2
html/index.html
Unescape Escape View File

@ -48,9 +48,9 @@
<!-- Menu --> <!-- Menu -->
<div id="menu"> <div id="menu">
<a id="playlistWin" class="menuItem">Download Playlist</a>
<a id="preferenceWin" class="menuItem">Preferences</a> <a id="preferenceWin" class="menuItem">Preferences</a>
<a id="aboutWin" class="menuItem">About</a> <a id="aboutWin" class="menuItem">About</a>
<a id="playlistWin" class="menuItem">Download Playlist</a>
</div> </div>
<button id="pasteUrl" class="submitBtn">Click to paste video URL or ID [Ctrl + V]</button> <button id="pasteUrl" class="submitBtn">Click to paste video URL or ID [Ctrl + V]</button>

7
html/playlist.html
Unescape Escape View File

@ -9,9 +9,13 @@
<link rel="stylesheet" href="../assets/css/index.css"> <link rel="stylesheet" href="../assets/css/index.css">
<script src="../src/playlist.js" defer></script> <script src="../src/playlist.js" defer></script>
<script src="../src/common.js" defer></script> <script src="../src/common.js" defer></script>
<link rel="stylesheet" href="../assets/css/playlist.css">
<!-- Translating --> <!-- Translating -->
<script>window.i18n = new (require('../translations/i18n'));</script> <script>window.i18n = new (require('../translations/i18n'));</script>
<style>
#playlistName {
padding: 30px;
}
</style>
</head> </head>
<body> <body>
@ -26,6 +30,7 @@
<!-- Menu --> <!-- Menu -->
<div id="menu"> <div id="menu">
<a id="homeWin" class="menuItem">Homepage</a>
<a id="preferenceWin" class="menuItem">Preferences</a> <a id="preferenceWin" class="menuItem">Preferences</a>
<a id="aboutWin" class="menuItem">About</a> <a id="aboutWin" class="menuItem">About</a>
</div> </div>

59
src/playlist.js
Unescape Escape View File

@ -1,4 +1,4 @@
const { clipboard } = require("electron"); const { clipboard, shell, ipcRenderer } = require("electron");
const { default: YTDlpWrap } = require("yt-dlp-wrap-extended"); const { default: YTDlpWrap } = require("yt-dlp-wrap-extended");
const path = require("path"); const path = require("path");
let url; let url;
@ -15,6 +15,8 @@ function pasteLink() {
url = clipboard.readText(); url = clipboard.readText();
getId("link").textContent = " " + url; getId("link").textContent = " " + url;
getId("options").style.display = "block"; getId("options").style.display = "block";
getId("incorrectMsg").textContent = "";
} }
getId("pasteLink").addEventListener("click", () => { getId("pasteLink").addEventListener("click", () => {
@ -28,13 +30,14 @@ document.addEventListener("keydown", (event) => {
}); });
// Patterns // Patterns
const playlistName = "Downloading playlist: "; const playlistTxt = "Downloading playlist: ";
const videoIndex = "Downloading video "; const videoIndex = "Downloading video ";
// Downloading playlist: Inkscape Tutorials // Downloading playlist: Inkscape Tutorials
// Downloading video 1 of 82 // Downloading video 1 of 82
getId("download").addEventListener("click", () => { getId("download").addEventListener("click", () => {
let count = 0; let count = 0;
let playlistName;
getId("options").style.display = "none"; getId("options").style.display = "none";
getId("pasteLink").style.display = "none"; getId("pasteLink").style.display = "none";
@ -51,6 +54,7 @@ getId("download").addEventListener("click", () => {
"-o", "-o",
`"${path.join( `"${path.join(
downloadDir, downloadDir,
"%(playlist_title)s",
"%(title)s_%(playlist_index)s.%(ext)s" "%(title)s_%(playlist_index)s.%(ext)s"
)}"`, )}"`,
@ -63,8 +67,10 @@ getId("download").addEventListener("click", () => {
downloadProcess.on("ytDlpEvent", (eventType, eventData) => { downloadProcess.on("ytDlpEvent", (eventType, eventData) => {
console.log(eventData); console.log(eventData);
if (eventData.includes(playlistName)) { if (eventData.includes(playlistTxt)) {
getId("playlistName").textContent = eventData; playlistName = eventData.split(":")[1].slice(1)
getId("playlistName").textContent = i18n.__("Downloading playlist:") + " "+ playlistName;
console.log(playlistName);
} }
if (eventData.includes(videoIndex)) { if (eventData.includes(videoIndex)) {
@ -72,12 +78,12 @@ getId("download").addEventListener("click", () => {
const itemTitle = i18n.__("Video") + " " + eventData.split(" ")[3]; const itemTitle = i18n.__("Video") + " " + eventData.split(" ")[3];
if (count > 1) { 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 = `<div class="item"> const item = `<div class="playlistItem">
<p class="itemTitle">${itemTitle}</p> <p class="itemTitle">${itemTitle}</p>
<p class="itemProgress" id="p${count}">${i18n.__("Downloading...")}</p> <p class="itemProgress" onclick="openFolder('${path.join(downloadDir, playlistName)}')" id="p${count}">${i18n.__("Downloading...")}</p>
</div>`; </div>`;
getId("list").innerHTML += item; getId("list").innerHTML += item;
} }
@ -90,6 +96,9 @@ getId("download").addEventListener("click", () => {
}); });
downloadProcess.on("error", (error) => { downloadProcess.on("error", (error) => {
getId("pasteLink").style.display = "inline-block"
getId("options").style.display = "block";
getId("playlistName").textContent = ""
getId("incorrectMsg").textContent = error; 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");
})
Write Preview
Loading…
Cancel
Save