From 8cced332ffcd40acd6a57735463d1dea919510c8 Mon Sep 17 00:00:00 2001 From: aandrew-me Date: Fri, 5 Aug 2022 12:20:19 +0600 Subject: [PATCH] Fixing the bugs --- assets/css/index.css | 50 +++++-- assets/images/close.png | Bin 0 -> 1348 bytes html/index.html | 55 ++++++- src/renderer.js | 324 ++++++++++++++++++++++++++++------------ 4 files changed, 318 insertions(+), 111 deletions(-) create mode 100644 assets/images/close.png diff --git a/assets/css/index.css b/assets/css/index.css index 258ddd3..64426de 100644 --- a/assets/css/index.css +++ b/assets/css/index.css @@ -57,7 +57,8 @@ body { .item { display: flex; - width: 80%; + position: relative; + width: 86%; height: 100px; background-color: rgb(100, 100, 100); margin: 10px auto; @@ -67,9 +68,9 @@ body { justify-content: space-between; } -@media screen and (max-width:650px) { - .item{ - width:90%; +@media screen and (max-width: 650px) { + .item { + width: 90%; } } @@ -77,19 +78,35 @@ body { max-width: 160px; max-height: 90px; border-radius: 10px; - padding:5px; + margin: 0 10px 0 0; } -.itemTitle{ +.itemTitle { font-family: sans-serif; } -.itemBody{ - height:90%; - width:100%; - display:flex; +.itemBody { + height: 90%; + width: 100%; + display: flex; flex-direction: column; justify-content: space-between; } +.itemProgress{ + font-weight:bold; + cursor: pointer; + +} + +.itemClose{ + position: absolute; + top:5px; + right:5px; + cursor: pointer; + cursor: pointer; + width:15px; + height:15px; +} + @keyframes clickAnimation { 0% { @@ -106,15 +123,20 @@ body { #hidden { display: none; /* display: inline-block; */ + position: absolute; + z-index: 1; + left: 0; + right: 0; + margin: auto; + top:20%; background-color: var(--box-main); border-radius: 10px; width: 80%; padding: 10px 10px 20px 10px; color: var(--text); } -#videoProgressBox, -#audioProgressBox { - display: none; +.hiddenVideoProgress, .hiddenAudioProgress{ + display:none; } #btnContainer { @@ -164,6 +186,7 @@ label { font-size: large; cursor: pointer; display: inline-block; + outline:none; animation-duration: 0.5s; animation-timing-function: linear; @@ -174,6 +197,7 @@ label { } #loadingWrapper { + /* Default is flex */ display: none; flex-direction: row; justify-content: center; diff --git a/assets/images/close.png b/assets/images/close.png new file mode 100644 index 0000000000000000000000000000000000000000..00f9132fad50ffb077e5a5d2ee76d3356eea3074 GIT binary patch literal 1348 zcmV-K1-tr*P)n>17=u>yZfdHnUErM2^fd^hFgO9=M5TKJ3>(l`W2B$v zC0-3D5`|XcvV#ErK7alMS^TyEyUu{FR)QM9VK5JMN!=NI_H5%&0Pk(Pokt?Kz%UD- zqZQ*O+J(W-YG>!}(8@}_Wq|k7(>Np8qLevkGxPcL=f4L6yq})#;l%zpYV)cb*DWwcXGfFCOtp@zY&e9VY zDfcyDLZIu?Wr*HhY(0Ji`SGK#zbGYk@_AT-O^ha2G6Dd|;R}q<E2lg>a70Gy$BQ&VjQ?0V1}$@O*bIXpIo?zwp| zA)1@d&HK!2|63JR07^=qUbXE`Y8N=SUxjm)p1{p!_aMf{(S38y2f>6u_suzk$H%=k zH=BjC^rR6K*MiZYl+9Xb4tcIYF%cepmwo*iEMZA{@Ut zhj28yXP(I*x400vR8lD@t-(N_@!63tzXvcF2vCJcr(g{Z!s_q$AVLEJ=!nG-j>h)P z(`n@5i~DX?r8T5dAO=B|Q|&+*DUpjW!cC>Tws5r0Je4}o9001tPXiGGS_7y;Y{nPi zrrtF4xv4kUY{47=bOpd@ZP5W^KZ&%~-ZKH%_q?tZ6QZ)=Vhw%aXbi{evZI-dF;Eo% z#+W3q)&RUztKIFXH@@WvN23iXTCb8)-ZK&H5;WFYGM}4Acw(Z)JcZ489GmgDe`8Ke z1QsixT#CK8U?2FmBf|>&R6?)3))tv`8o8h1fKq@la5HItiuU!vI(f1TRn}K89Zn>+1OVugxPK*l&5~T;J>94*fpT$O7_o%3wOcrV_@_{${2$!*Y)LoNLa5&lF74Wkc!mK z&RsBM8$%pkO6vx5LF5R>xmf+}0Sv9I|2i$5)t^0}+1XB6NQ^k!bqH_4*%KMM^OUUC*Wf0000 - + + +
+ Processing + + + + + + + + + + + +
+

+ +
+ +
+ + +
+

Title:

+ +
+ + +
+ + +
+ +
+ + +
+ + +
+ +
+ -



- +
-
+
diff --git a/src/renderer.js b/src/renderer.js index baffa76..76d9ea9 100644 --- a/src/renderer.js +++ b/src/renderer.js @@ -3,12 +3,14 @@ const ytdl = require("ytdl-core"); const cp = require("child_process"); const os = require("os"); const ffmpeg = require("ffmpeg-static"); -const path = require("path") +const path = require("path"); const { shell, ipcRenderer, clipboard } = require("electron"); +const { get } = require("http"); +const { exit } = require("process"); // Directories const homedir = os.homedir(); -const appdir = path.join(homedir,".ytDownloader"); +const appdir = path.join(homedir, ".ytDownloader"); const tempDir = path.join(appdir, "temp"); fs.mkdirSync(path.join(homedir, ".ytDownloader/temp"), { recursive: true }); let config; @@ -20,60 +22,75 @@ function getId(id) { return document.getElementById(id); } -let localPath = localStorage.getItem("downloadPath") +let localPath = localStorage.getItem("downloadPath"); -if (localPath){ - downloadDir = localPath -} -else{ - downloadDir = appdir - localStorage.setItem("downloadPath", appdir) +if (localPath) { + downloadDir = localPath; +} else { + downloadDir = appdir; + localStorage.setItem("downloadPath", appdir); } // Clearing tempDir -fs.readdirSync(tempDir).forEach((f) => fs.rmSync(`${tempDir}/${f}`)); +fs.readdirSync(tempDir).forEach((f) => fs.rmdir(`${tempDir}/${f}`, () => {})); // Collecting info from youtube async function getVideoInfo(url) { let info; - await ytdl.getInfo(url) - .then((data)=>{ - info = data - }) - .catch((error)=>{ - - }) + await ytdl + .getInfo(url) + .then((data) => { + info = data; + }) + .catch((error) => {}); return info; } -// Pasting url from clipboard -let url; -getId("pasteUrl").addEventListener("click", ()=>{ - url = clipboard.readText() - console.log(url); -}) +function defaultVideoToggle() { + videoToggle.style.backgroundColor = "var(--box-toggleOn)"; + audioToggle.style.backgroundColor = "var(--box-toggle)"; + getId("audioList").style.display = "none"; + getId("videoList").style.display = "block"; +} + +//! Pasting url from clipboard + +function pasteUrl() { + defaultVideoToggle(); + getId("hidden").style.display = "none"; + getId("loadingWrapper").style.display = "flex"; + getId("incorrectMsg").textContent = ""; + const url = clipboard.readText(); + getInfo(url); +} + +document.addEventListener("keydown", (event) => { + if (event.ctrlKey && event.key == "v") { + pasteUrl(); + } +}); + +getId("pasteUrl").addEventListener("click", () => { + pasteUrl(); +}); // Getting video info -async function getInfo() { - incorrectMsg.textContent = ""; - loadingMsg.style.display = "flex"; +async function getInfo(url) { getId("videoFormatSelect").innerHTML = ""; getId("audioFormatSelect").innerHTML = ""; - const url = getId("url").value; - let info = await getVideoInfo(url) + let info = await getVideoInfo(url); if (info) { - let title = info.videoDetails.title; - let formats = info.formats; + const title = info.videoDetails.title; + const formats = info.formats; console.log(formats); - + const urlElements = document.querySelectorAll(".url"); - + urlElements.forEach((element) => { element.value = url; }); - loadingMsg.style.display = "none"; getId("hidden").style.display = "inline-block"; getId("title").innerHTML = "Title: " + title; getId("videoList").style.display = "block"; @@ -160,34 +177,39 @@ async function getInfo() { } } } else { - loadingMsg.style.display = "none"; - incorrectMsg.textContent = + getId("loadingWrapper").style.display = "none"; + getId("incorrectMsg").textContent = "Some error has occured. Check your connection and use correct URL"; } } // Video download event getId("videoDownload").addEventListener("click", (event) => { - getId("preparingBox").style.display = "flex"; + getId("hidden").style.display = "none"; clickAnimation("videoDownload"); download("video"); }); // Audio download event getId("audioDownload").addEventListener("click", (event) => { - getId("preparingBox").style.display = "flex"; + getId("hidden").style.display = "none"; clickAnimation("audioDownload"); download("audio"); }); // Downloading with ytdl function download(type) { - getId("videoProgressBox").style.display = "none"; - getId("audioProgressBox").style.display = "none"; - - getId("savedMsg").innerHTML = ""; const url = getId("url").value; + const newFolderName = Math.random().toFixed(10).toString().slice(2); + const newFolderPath = path.join(tempDir, newFolderName); + + fs.mkdir(newFolderPath, (err) => { + if (err) { + console.log("Temp directory couldn't be created"); + } + }); + let itag; if (type === "video") { @@ -198,6 +220,38 @@ function download(type) { // Finding info of the link and downloading findInfo(url, itag).then((info) => { + const id = info.id; + const newItem = ` +
+ + thumbnail + +
+
${info.title}
+
${info.filetype}
+ + +
+
+
+ `; + getId("list").innerHTML += newItem; + getId("loadingWrapper").style.display = "none"; + let cancelled = false; + + getId(newFolderName + ".close").addEventListener("click", () => { + if (getId(newFolderName)) { + fadeItem(newFolderName); + } + cancelled = true; + }); + const format = info.format; const extension = info.extension; let filename = ""; @@ -231,6 +285,7 @@ function download(type) { // If video if (format.hasVideo) { + getId(newFolderName + "prog").textContent = "Starting..."; // Temporary audio and video files let videoName = Math.random().toString("16").slice(2) + "." + extension; @@ -239,60 +294,107 @@ function download(type) { const arr = [ new Promise((resolve, reject) => { + if (cancelled) { + reject("cancelled"); + } // Downloading only video - ytdl(url, { quality: itag }) - .on("progress", (_, downloaded, size) => { - videoProgress = (downloaded / size) * 100; + const videoDownload = ytdl(url, { quality: itag }); - if (videoProgress != 100) { - getId("videoProgressBox").style.display = - "block"; - getId("preparingBox").style.display = "none"; - getId("videoProgress").value = videoProgress; - } - if (videoProgress == 100) { - resolve("video downloaded"); + videoDownload + .on("progress", (_, downloaded, size) => { + if (cancelled) { + console.log("Cancelled video"); + videoDownload.destroy(); + reject(); + } else { + videoProgress = (downloaded / size) * 100; + getId(newFolderName + "vid").value = + videoProgress; + + if (videoProgress != 100) { + getId(newFolderName + "prog").textContent = + "Downloading"; + getId(newFolderName + "vid").style.display = + "block"; + getId(newFolderName + "aud").style.display = + "block"; + } + if (videoProgress == 100) { + resolve("video downloaded"); + } } }) - .pipe(fs.createWriteStream(path.join(tempDir, videoName))); + .pipe( + fs.createWriteStream( + path.join(newFolderPath, videoName) + ) + ); }), new Promise((resolve, reject) => { + if (cancelled) { + reject("cancelled"); + } // Downloading only audio - ytdl(url, { + const audioDownload = ytdl(url, { highWaterMark: 1 << 25, quality: audioTag, - }) - .on("progress", (_, downloaded, size) => { - audioProgress = (downloaded / size) * 100; + }); - if (audioProgress != 100) { - getId("preparingBox").style.display = "none"; - getId("audioProgress").value = audioProgress; - } else if (audioProgress == 100) { - resolve("audio downloaded"); + audioDownload + .on("progress", (_, downloaded, size) => { + if (cancelled) { + console.log("Cancelled audio"); + audioDownload.destroy(); + reject(); + } else { + audioProgress = (downloaded / size) * 100; + getId(newFolderName + "aud").value = + audioProgress || 0; + + if (audioProgress != 100) { + } else if (audioProgress == 100) { + resolve("audio downloaded"); + } } }) - .pipe(fs.createWriteStream(path.join(tempDir, audioName))); + .pipe( + fs.createWriteStream( + path.join(newFolderPath, audioName) + ) + ); }), ]; Promise.all([arr[0], arr[1]]) .then((response) => { + getId(newFolderName + "aud").style.display = "none"; + getId(newFolderName + "vid").style.display = "none"; + cp.exec( - `"${ffmpeg}" -i "${path.join(tempDir, videoName)}" -i "${ - path.join(tempDir, audioName) - }" -c copy "${path.join(downloadDir, filename)}"`, + `"${ffmpeg}" -i "${path.join( + newFolderPath, + videoName + )}" -i "${path.join( + newFolderPath, + audioName + )}" -c copy "${path.join(downloadDir, filename)}"`, (error, stdout, stderr) => { if (error) { console.log(error); } else if (stderr) { console.log("video saved"); // Clear temp dir - fs.readdirSync(tempDir).forEach((f) => - fs.rmSync(`${tempDir}/${f}`) + fs.readdirSync(newFolderPath).forEach((f) => + fs.rm(`${newFolderPath}/${f}`, () => {}) + ); + getId(newFolderName + "prog").textContent = + "Saved successfully"; + afterSave( + downloadDir, + filename, + newFolderName + "prog" ); - afterSave(downloadDir, filename); } } ); @@ -304,41 +406,70 @@ function download(type) { // If audio else { - ytdl(url, { quality: itag }) + getId(newFolderName + "prog").textContent = "Starting..."; + + const audioDownloading = ytdl(url, { quality: itag }); + + audioDownloading .on("progress", (_, downloaded, size) => { - const progress = (downloaded / size) * 100; - - if (progress != 100) { - getId("preparingBox").style.display = "none"; - getId("audioProgressBox").style.display = "block"; - getId("onlyAudioProgress").value = progress; - } else if (progress == 100) { - afterSave(downloadDir, filename); + if (cancelled) { + console.log("Cancelled"); + audioDownloading.destroy(); + fs.rm(path.join(downloadDir, filename), (err) => { + if (err) { + console.log(err); + } + }); + return; } + const progress = ((downloaded / size) * 100).toFixed(0); + + getId( + newFolderName + "prog" + ).textContent = `Progress: ${progress}%`; + + }) + .on("end", ()=>{ + afterSave( + downloadDir, + filename, + newFolderName + "prog" + ); }) .pipe(fs.createWriteStream(path.join(downloadDir, filename))); } }); } +// Removing item + +function fadeItem(id) { + let count = 0; + let opacity = 1; + const fade = setInterval(() => { + if (count >= 10) { + clearInterval(fade); + if (getId(id)) { + getId(id).remove(); + } + } else { + opacity -= 0.1; + getId(id).style.opacity = opacity; + count++; + } + }, 50); +} + // After saving video -function afterSave(location, filename) { +function afterSave(location, filename, progressId) { const notify = new Notification("ytDownloader", { body: "File saved successfully.", icon: "../assets/images/icon.png", }); - getId("videoProgressBox").style.display = "none"; - getId("audioProgressBox").style.display = "none"; - document.querySelector(".submitBtn").style.display = "inline-block"; - - getId( - "savedMsg" - ).innerHTML = `File saved. Click to open ${location}`; - - getId("savedMsg").addEventListener("click", (e) => { + getId(progressId).innerHTML = `File saved. Click to Open`; + getId(progressId).addEventListener("click", () => { shell.showItemInFolder(path.join(location, filename)); - log(path.join(location, filename)) }); } @@ -347,16 +478,21 @@ async function findInfo(url, itag) { const data = await ytdl.getInfo(url); const format = ytdl.chooseFormat(data.formats, { quality: itag }); const title = data.videoDetails.title; + const id = data.videoDetails.videoId; + let type; let extension; if (format.hasVideo) { extension = format.mimeType.split("; ")[0].split("/")[1]; + type = "Video"; } else { + type = "Audio"; if (format.audioCodec === "mp4a.40.2") { extension = "m4a"; } else { extension = format.audioCodec; } } + let filetype = type + "/" + extension; let quality; if (format.hasVideo) { @@ -372,6 +508,8 @@ async function findInfo(url, itag) { extension: extension, quality: quality, filename: filename, + id: id, + filetype: filetype, }; return info; } @@ -379,9 +517,9 @@ async function findInfo(url, itag) { // Opening windows getId("preferenceWin").addEventListener("click", () => { - ipcRenderer.send("load-page", __dirname + "/preferences.html") + ipcRenderer.send("load-page", __dirname + "/preferences.html"); }); -getId("aboutWin").addEventListener("click", ()=>{ - ipcRenderer.send("load-page", __dirname + "/about.html") -}) \ No newline at end of file +getId("aboutWin").addEventListener("click", () => { + ipcRenderer.send("load-page", __dirname + "/about.html"); +});