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

Work on new playlist layout

Browse Source
pull/127/head
Andrew 3 years ago
parent 9bb4523c09
commit 2fac50678e
2 changed files with 69 additions and 31 deletions
Show Stats Download Patch File Download Diff File

21
html/playlist_new.html
Unescape Escape View File

@ -23,6 +23,8 @@
</head>
<body>
<!-- Popup message -->
<span id="popupText">Text copied</span>
<!-- Theme toggle -->
<div id="themeToggle" onclick="toggle()">
<div id="themeToggleInside"></div>
@ -39,6 +41,25 @@
<button class="submitBtn" id="pasteLink">Click to paste playlist link from clipboard [Ctrl + V]</button>
<div id="loadingWrapper">
<span id="processing">Loading </span>
<svg version="1.1" id="L4" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
<circle fill="rgb(84, 171, 222)" stroke="none" cx="6" cy="50" r="6">
<animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite" begin="0.1" />
</circle>
<circle fill="rgb(84, 171, 222)" stroke="none" cx="26" cy="50" r="6">
<animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite" begin="0.2" />
</circle>
<circle fill="rgb(84, 171, 222)" stroke="none" cx="46" cy="50" r="6">
<animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite" begin="0.3" />
</circle>
</svg>
</div>
<p id="incorrectMsg"></p>
<button class="advancedToggle" id="errorBtn" onclick="toggleErrorDetails()">Error Details ▼</button>
<div id="errorDetails" onclick="copyErrorToClipboard()"></div>
<div id="data">
</div>

79
src/playlist_new.js
Unescape Escape View File

@ -3,7 +3,7 @@ const { default: YTDlpWrap } = require("yt-dlp-wrap-plus");
const path = require("path");
const os = require("os");
const fs = require("fs");
const { execSync } = require("child_process");
const { execSync, exec, spawnSync } = require("child_process");
let url;
const ytDlp = localStorage.getItem("ytdlp");
const ytdlp = new YTDlpWrap(ytDlp);
@ -54,43 +54,60 @@ function getId(id) {
function pasteLink() {
const clipboardText = clipboard.readText();
const data = execSync(
getId("loadingWrapper").style.display = "flex";
getId("incorrectMsg").textContent = "";
getId("errorBtn").style.display = "none";
getId("errorDetails").style.display = "none";
getId("errorDetails").textContent = "";
exec(
`yt-dlp --yes-playlist --no-warnings -J --flat-playlist "${clipboardText}"`,
{
encoding: "utf8",
(error, stdout, stderr) => {
if (error) {
getId("loadingWrapper").style.display = "none";
getId("incorrectMsg").textContent = i18n.__(
"Some error has occurred. Check your network and use correct URL"
);
getId("errorDetails").innerHTML = `
<strong>URL: ${clipboardText}</strong>
<br><br>
${error}
`;
getId("errorDetails").title = i18n.__("Click to copy");
getId("errorBtn").style.display = "inline-block";
} else {
const parsed = JSON.parse(stdout);
console.log(parsed);
let items = "";
parsed.entries.forEach((entry) => {
const randId = Math.random().toFixed(10).toString().slice(2);
if (entry.channel) {
items += `
<div class="item" id="${randId}">
<img src="${
entry.thumbnails[3].url
}" alt="No thumbnail" class="itemIcon" crossorigin="anonymous">
<div class="itemBody">
<div class="itemTitle">${entry.title}</div>
<div>${formatTime(entry.duration)}</div>
<input type="checkbox" class="playlistCheck" id="c${randId}">
</div>
</div>
`;
}
});
getId("data").innerHTML = items;
getId("loadingWrapper").style.display = "none";
}
}
);
const parsed = JSON.parse(data);
console.log(parsed);
let items = "";
parsed.entries.forEach((entry) => {
const randId = Math.random().toFixed(10).toString().slice(2);
if (entry.channel) {
items += `
<div class="item" id="${randId}">
<img src="${
entry.thumbnails[3].url
}" alt="No thumbnail" class="itemIcon" crossorigin="anonymous">
<div class="itemBody">
<div class="itemTitle">${entry.title}</div>
<div>${formatTime(entry.duration)}</div>
<input type="checkbox" class="playlistCheck" id="c${randId}">
</div>
</div>
`;
}
});
getId("data").innerHTML = items;
}
getId("pasteLink").addEventListener("click", (e) => {
try {
pasteLink();
} catch (error) {
console.log(error);
}
pasteLink();
});
document.addEventListener("keydown", (event) => {

Write Preview
Loading…
Cancel
Save