Translation updates and UX enhancements for playlist page

pull/352/head
aandrew-me 2 weeks ago committed by Andrew
parent d1ddbb0648
commit 5a1530f5a4

@ -153,8 +153,8 @@
<div id="advancedMenu"> <div id="advancedMenu">
<div class="advancedItem"> <div class="advancedItem">
<span id="rangeTxt" data-translate="playlistRange">Playlist range</span> <span id="rangeTxt" data-translate="playlistRange">Playlist range</span>
<input type="number" id="playlistIndex" class="input" placeholder="Start">: <input type="number" id="playlistIndex" class="input" data-translate-placeholder="start" placeholder="Start">:
<input type="number" id="playlistEnd" class="input" placeholder="End"> <input type="number" id="playlistEnd" data-translate-placeholder="end" class="input" placeholder="End">
<br><br> <br><br>
</div> </div>

@ -91,6 +91,7 @@ let filenameFormat = "%(playlist_index)s.%(title)s.%(ext)s";
let playlistIndex = 1; let playlistIndex = 1;
let playlistEnd = ""; let playlistEnd = "";
let proxy = ""; let proxy = "";
let playlistName = "";
/** /**
* *
@ -155,7 +156,6 @@ function download(type) {
} }
let count = 0; let count = 0;
let subs, subLangs; let subs, subLangs;
let playlistName;
// If subtitles are checked // If subtitles are checked
if (getId("subChecked").checked) { if (getId("subChecked").checked) {
@ -167,6 +167,8 @@ function download(type) {
subLangs = ""; subLangs = "";
} }
playlistName = "";
hideOptions(); hideOptions();
let quality, format, downloadProcess, videoType, audioQuality; let quality, format, downloadProcess, videoType, audioQuality;
@ -208,9 +210,7 @@ function download(type) {
`"${playlistIndex}:${playlistEnd}"`, `"${playlistIndex}:${playlistEnd}"`,
"--ffmpeg-location", "--ffmpeg-location",
ffmpeg, ffmpeg,
denoPath denoPath ? `--no-js-runtimes --js-runtime ${denoPath}` : "",
? `--no-js-runtimes --js-runtime ${denoPath}`
: "",
cookieArg, cookieArg,
browser, browser,
configArg, configArg,
@ -256,9 +256,7 @@ function download(type) {
`"${playlistIndex}:${playlistEnd}"`, `"${playlistIndex}:${playlistEnd}"`,
"--ffmpeg-location", "--ffmpeg-location",
ffmpeg, ffmpeg,
denoPath denoPath ? `--no-js-runtimes --js-runtime ${denoPath}` : "",
? `--no-js-runtimes --js-runtime ${denoPath}`
: "",
cookieArg, cookieArg,
browser, browser,
configArg, configArg,
@ -297,9 +295,7 @@ function download(type) {
`"${playlistIndex}:${playlistEnd}"`, `"${playlistIndex}:${playlistEnd}"`,
"--ffmpeg-location", "--ffmpeg-location",
ffmpeg, ffmpeg,
denoPath denoPath ? `--no-js-runtimes --js-runtime ${denoPath}` : "",
? `--no-js-runtimes --js-runtime ${denoPath}`
: "",
cookieArg, cookieArg,
browser, browser,
configArg, configArg,
@ -343,7 +339,7 @@ function download(type) {
if (eventData.includes(playlistTxt)) { if (eventData.includes(playlistTxt)) {
playlistName = eventData.split("playlist:")[1].slice(1); playlistName = eventData.split("playlist:")[1].slice(1);
getId("playlistName").textContent = getId("playlistName").textContent =
i18n.__("Downloading playlist:") + " " + playlistName; i18n.__("downloadingPlaylist") + " " + playlistName;
console.log(playlistName); console.log(playlistName);
} }
@ -356,18 +352,18 @@ function download(type) {
originalCount += 1; originalCount += 1;
let itemTitle; let itemTitle;
if (type === "video") { if (type === "video") {
itemTitle = i18n.__("Video") + " " + originalCount; itemTitle = i18n.__("video") + " " + originalCount;
} else { } else {
itemTitle = i18n.__("Audio") + " " + originalCount; itemTitle = i18n.__("audio") + " " + originalCount;
} }
if (count > 1) { if (count > 1) {
getId(`p${count - 1}`).textContent = i18n.__("File saved."); getId(`p${count - 1}`).textContent = i18n.__("fileSaved");
} }
const item = `<div class="playlistItem"> 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" id="p${count}">${i18n.__("downloading")}</p>
</div>`; </div>`;
getId("list").innerHTML += item; getId("list").innerHTML += item;
@ -378,13 +374,13 @@ function download(type) {
downloadProcess.on("progress", (progress) => { downloadProcess.on("progress", (progress) => {
if (progress.percent == 100) { if (progress.percent == 100) {
if (getId(`p${count}`)) { if (getId(`p${count}`)) {
getId(`p${count}`).textContent = i18n.__("Processing") + "..."; getId(`p${count}`).textContent = i18n.__("processing") + "...";
} }
} else { } else {
if (getId(`p${count}`)) { if (getId(`p${count}`)) {
getId(`p${count}`).textContent = `${i18n.__("Progress")} ${ getId(`p${count}`).textContent = `${i18n.__("progress")} ${
progress.percent progress.percent
}% | ${i18n.__("Speed")} ${progress.currentSpeed || 0}`; }% | ${i18n.__("speed")} ${progress.currentSpeed || 0}`;
} }
} }
}); });
@ -413,16 +409,20 @@ function managePlaylistRange() {
} }
function afterClose(count) { function afterClose(count) {
getId(`p${count}`).textContent = i18n.__("File saved."); getId(`p${count}`).textContent = i18n.__("fileSaved");
getId("pasteLink").style.display = "inline-block"; getId("pasteLink").style.display = "inline-block";
const notify = new Notification("ytDownloader", { const notify = new Notification("ytDownloader", {
body: i18n.__("Playlist downloaded"), body: i18n.__("playlistDownloaded"),
icon: "../assets/images/icon.png", icon: "../assets/images/icon.png",
}); });
notify.onclick = () => { notify.onclick = () => {
openFolder(downloadDir); if (playlistName != "") {
openFolder(path.join(downloadDir, playlistName));
} else {
openFolder(downloadDir);
}
}; };
} }
// Error handling // Error handling
@ -432,9 +432,7 @@ function showErrorTxt(error) {
getId("openDownloads").style.display = "none"; getId("openDownloads").style.display = "none";
getId("options").style.display = "block"; getId("options").style.display = "block";
getId("playlistName").textContent = ""; getId("playlistName").textContent = "";
getId("incorrectMsgPlaylist").textContent = i18n.__( getId("incorrectMsgPlaylist").textContent = i18n.__("errorNetworkOrUrl");
"Some error has occurred. Check your network and use correct URL"
);
getId("incorrectMsgPlaylist").style.display = "block"; getId("incorrectMsgPlaylist").style.display = "block";
getId("incorrectMsgPlaylist").title = error; getId("incorrectMsgPlaylist").title = error;
getId("errorBtn").style.display = "inline-block"; getId("errorBtn").style.display = "inline-block";
@ -465,7 +463,7 @@ function hideOptions(justHide = false) {
getId("errorDetails").textContent = ""; getId("errorDetails").textContent = "";
getId("incorrectMsgPlaylist").style.display = "none"; getId("incorrectMsgPlaylist").style.display = "none";
if (!justHide) { if (!justHide) {
getId("playlistName").textContent = i18n.__("Processing") + "..."; getId("playlistName").textContent = i18n.__("processing") + "...";
getId("pasteLink").style.display = "none"; getId("pasteLink").style.display = "none";
getId("openDownloads").style.display = "inline-block"; getId("openDownloads").style.display = "inline-block";
} }
@ -473,7 +471,6 @@ function hideOptions(justHide = false) {
function downloadThumbnails() { function downloadThumbnails() {
let count = 0; let count = 0;
let playlistName;
hideOptions(); hideOptions();
nameFormatting(); nameFormatting();
managePlaylistRange(); managePlaylistRange();
@ -492,9 +489,7 @@ function downloadThumbnails() {
`"${playlistIndex}:${playlistEnd}"`, `"${playlistIndex}:${playlistEnd}"`,
"--ffmpeg-location", "--ffmpeg-location",
ffmpeg, ffmpeg,
denoPath denoPath ? `--no-js-runtimes --js-runtime ${denoPath}` : "",
? `--no-js-runtimes --js-runtime ${denoPath}`
: "",
proxy ? "--no-check-certificate" : "", proxy ? "--no-check-certificate" : "",
proxy ? "--proxy" : "", proxy ? "--proxy" : "",
proxy, proxy,
@ -513,7 +508,7 @@ function downloadThumbnails() {
if (eventData.includes(playlistTxt)) { if (eventData.includes(playlistTxt)) {
playlistName = eventData.split("playlist:")[1].slice(1); playlistName = eventData.split("playlist:")[1].slice(1);
getId("playlistName").textContent = getId("playlistName").textContent =
i18n.__("Downloading playlist:") + " " + playlistName; i18n.__("downloadingPlaylist") + " " + playlistName;
console.log(playlistName); console.log(playlistName);
} }
@ -526,7 +521,7 @@ function downloadThumbnails() {
originalCount++; originalCount++;
let itemTitle; let itemTitle;
itemTitle = i18n.__("Thumbnail") + " " + originalCount; itemTitle = i18n.__("thumbnail") + " " + originalCount;
if (count > 1) { if (count > 1) {
getId(`p${count - 1}`).textContent = i18n.__("File saved."); getId(`p${count - 1}`).textContent = i18n.__("File saved.");
@ -553,7 +548,6 @@ function downloadThumbnails() {
// Download video links // Download video links
function saveLinks() { function saveLinks() {
let count = 0; let count = 0;
let playlistName;
hideOptions(); hideOptions();
nameFormatting(); nameFormatting();
managePlaylistRange(); managePlaylistRange();
@ -586,7 +580,7 @@ function saveLinks() {
if (eventData.includes(playlistTxt)) { if (eventData.includes(playlistTxt)) {
playlistName = eventData.split("playlist:")[1].slice(1); playlistName = eventData.split("playlist:")[1].slice(1);
getId("playlistName").textContent = getId("playlistName").textContent =
i18n.__("Downloading playlist:") + " " + playlistName; i18n.__("downloadingPlaylist") + " " + playlistName;
console.log(playlistName); console.log(playlistName);
} }
@ -600,12 +594,12 @@ function saveLinks() {
itemTitle = i18n.__("Link") + " " + count; itemTitle = i18n.__("Link") + " " + count;
if (count > 1) { if (count > 1) {
getId(`p${count - 1}`).textContent = i18n.__("Link added"); getId(`p${count - 1}`).textContent = i18n.__("linkAdded");
} }
const item = `<div class="playlistItem"> 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" id="p${count}">${i18n.__("downloading")}</p>
</div>`; </div>`;
getId("list").innerHTML += item; getId("list").innerHTML += item;
@ -685,17 +679,10 @@ function openFolder(location) {
function closeMenu() { function closeMenu() {
getId("menuIcon").style.transform = "rotate(0deg)"; getId("menuIcon").style.transform = "rotate(0deg)";
let count = 0; getId("menu").style.opacity = "0";
let opacity = 1; setTimeout(() => {
const fade = setInterval(() => { getId("menu").style.display = "none";
if (count >= 10) { }, 500);
clearInterval(fade);
} else {
opacity -= 0.1;
getId("menu").style.opacity = String(opacity);
count++;
}
}, 50);
} }
// Video and audio toggle // Video and audio toggle
@ -746,7 +733,11 @@ getId("advancedToggle").addEventListener("click", () => {
// Menu // Menu
getId("openDownloads").addEventListener("click", () => { getId("openDownloads").addEventListener("click", () => {
openFolder(downloadDir); if (playlistName != "") {
openFolder(path.join(downloadDir, playlistName));
} else {
openFolder(downloadDir);
}
}); });
getId("preferenceWin").addEventListener("click", () => { getId("preferenceWin").addEventListener("click", () => {

Loading…
Cancel
Save