Playlist download support
aandrew-me
3 years ago
parent
4605178063
commit
4a57bf971e
@ -0,0 +1,3 @@
|
||||
#options{
|
||||
display:none;
|
||||
}
|
||||
@ -0,0 +1,55 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Playlist download</title>
|
||||
<link rel="stylesheet" href="../assets/css/index.css">
|
||||
<script src="../src/playlist.js" defer></script>
|
||||
<script src="../src/common.js" defer></script>
|
||||
<link rel="stylesheet" href="../assets/css/playlist.css">
|
||||
<!-- Translating -->
|
||||
<script>window.i18n = new (require('../translations/i18n'));</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Theme toggle -->
|
||||
<div id="themeToggle" onclick="toggle()">
|
||||
<div id="themeToggleInside"></div>
|
||||
</div>
|
||||
|
||||
<!-- Menu icon -->
|
||||
<img src="../assets/images/menu.png" alt="menu" id="menuIcon">
|
||||
|
||||
<!-- Menu -->
|
||||
<div id="menu">
|
||||
<a id="preferenceWin" class="menuItem">Preferences</a>
|
||||
<a id="aboutWin" class="menuItem">About</a>
|
||||
</div>
|
||||
|
||||
<button class="submitBtn" id="pasteLink">Click to paste playlist link from clipboard [Ctrl + V]</button>
|
||||
|
||||
<div id="options">
|
||||
<br>
|
||||
<strong>Link:</strong><span id="link"></span>
|
||||
<br><br>
|
||||
|
||||
<label>Select Format</label>
|
||||
<select id="select">
|
||||
<option value="144">144p</option>
|
||||
<option value="240">240p</option>
|
||||
<option value="360">360p</option>
|
||||
<option value="480">480p</option>
|
||||
<option value="720">720p (HD)</option>
|
||||
<option value="1080">1080p (FHD)</option>
|
||||
<option value="1440">1440p</option>
|
||||
<option value="2160">2160p (4k)</option>
|
||||
</select>
|
||||
|
||||
<button class="submitBtn" id="download">Download</button>
|
||||
|
||||
<p id="incorrectMsg"></p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
});
|
||||
});
|
||||
Loading…
Reference in New Issue