Progress bars!!!

index.js

@@ -1,4 +1,3 @@
-const { randomInt } = require('crypto');
 const ytdl = require('ytdl-core'),
   fs = require('fs'),
   path = require('path'),
@@ -8,6 +7,13 @@ const ytdl = require('ytdl-core'),
 
 const PORT = process.env.PORT || 8080
 const app = express()
+if (fs.existsSync(path.join(__dirname, 'cached'))) {
+  fs.unlinkSync(path.join(__dirname, 'cached'))
+}
+
+fs.mkdirSync(path.join(__dirname, 'cached'))
+
+const cacheDuration = 15 || process.env.CACHEDUR
 
 process.on('uncaughtException', (err, origin) => {
   fs.writeSync(
@@ -19,50 +25,117 @@ process.on('uncaughtException', (err, origin) => {
 
 app.use(bodyParser.urlencoded({ extended: false }))
 
-app.get("/download", async (req, res) => {
+app.get("/getLink", async (req, res) => {
   const filename = req.query.filename
   const url = req.query.url
   const format = req.query.format
   const quality = req.query.quality
 
   if (!ytdl.validateURL(url)) {
-    res.send("Invalid URL!")
+    res.header("Content-Type", "text/html")
+    res.write(`<link rel="stylesheet" href="/style.css">`)
+    res.write(`<p>Invalid URL! Check the url for any errors! <br> ${url}</p>`)
     return
   }
 
-  res.header('Content-Disposition', `attachment; filename="${filename}.${format}"`);
+  res.setHeader("Content-Type", "text/html");
 
-  var ytpath = path.join(__dirname, 'cached/' + ytdl.getVideoID(url) + String(Math.floor(Math.random() * 100000)) + '.mp4')
+  res.write(`<link rel="stylesheet" href="/style.css">`)
+  // String(Math.floor(Math.random() * 100000)) +
+  var ytpath = path.join(__dirname, 'cached/' + ytdl.getVideoID(url) + '.mp4')
 
   var vidinfo = await ytdl.getBasicInfo(url)
 
-  var ytvid = ytdl(url, { 'quality': quality })
+  var lastp = 0
+  var ytvid = ytdl(url, { 'quality': quality, 'format': 'mp4' })
+
+    .on("progress", (data, ctotal, etotal) => {
+      var integer = 1
+      var percent = (Math.ceil(ctotal / etotal * 100))
+      if (percent % integer == 0 && lastp != percent) {
+        res.write(`<p id="percent${percent}">Downloading... ${percent}%</p>`)
+        res.write(`
+        <style>
+          #percent${lastp} {
+            display: none;
+          }
+        </style>
+        `)
+        lastp = percent
+      }
+    })
     .pipe(fs.createWriteStream(ytpath))
     .on("close", () => {
-    console.log("Downloaded!")
+      res.write("<p>Downloaded!</p>")
       var proc = new ffmpeg(ytpath)
+      // res.write(`<p>Converting... (May take a while, <a href="https://github.com/Violets-puragtory/NoJS-YTConverter"> doesn't support progress updates yet</a>)</p>`)
+      var endpath = ('cached/' + ytdl.getVideoID(url) + String(Math.floor(Math.random() * 100000)) + "Converted." + format)
+      res.write(`<p id="convert${0}">Converting... 0% (Potentially Innacurate, Experimental!)</p>`)
       proc.then(function (video) {
         video
           .setVideoDuration(vidinfo.videoDetails.lengthSeconds)
           .setVideoFormat(format)
-      .save('cached/' + ytdl.getVideoID(url) + String(Math.floor(Math.random() * 100000)) + "Converted." + format,function  (err, file) {
-        console.log("Converted!")
-        fs.createReadStream(file).pipe(res)
-        .on("close", () => {
-          console.log("Freed!")
-          fs.unlinkSync(file)
+          .save(endpath, (error, file)=>{
+            res.write("<p>Converted!</p>")
+            res.write(`<p><a href="/download?path=${path.basename(file)}&filename=${filename}.${format}" target="_blank">Link to video download!</a> (Link is deleted after 15 minutes!)</p>`)
+            setTimeout(()=>{
               if (fs.existsSync(ytpath)) {
                 fs.unlinkSync(ytpath)
               }
-        })
-      })
+              if (fs.existsSync(file)) {
+                fs.unlinkSync(file)
+              }
+            }, 60 * 1000)
           })
       })
 
-
-
+      var integer = 1
+      var lastc = 0
+      var percent = 0
+      async function update() {
+        if (fs.existsSync(endpath)) {
+          var ffile = await fs.readFileSync(endpath)
+          var yt = await fs.readFileSync(ytpath)
+          percent = (Math.round(ffile.length / yt.length * (100 / integer))) * integer
+          if (percent % integer == 0 && percent != lastc) {
+            res.write(`<p id="convert${percent}">Converting... ${Math.min(percent, 100)}% (Potentially Innacurate, Experimental!)</p>`)
+            res.write(`
+            <style>
+              #convert${lastc} {
+                display: none;
+              }
+            </style>
+            `)
+            lastc = percent
+          }
+        }
+        if (percent < 100) {
+          setTimeout(() => {
+            update()
+          }, 500);
+        } 
+      }
+      update()
+    })
 });
 
+app.get('/download', (req, res) => {
+  var file = req.query.path
+  var filename = req.query.filename
+  var dest = path.join(__dirname, 'cached/', file)
+
+  if (fs.existsSync(dest)) {
+    res.header('Content-Disposition', `attachment; filename="${filename}"`);
+    fs.createReadStream(dest).pipe(res)
+  } else {
+    res.header("Content-Type", "text/html")
+    res.write(`<link rel="stylesheet" href="/style.css">`)
+    res.write(`<p>Uh oh! It seems that video couldn't be found... Maybe the URL expired? Or, the link was invalid. <br>If you believe this was a mistake, please put a issue on <a href="https://github.com/Violets-puragtory/NoJS-YTConverter/">Github</a></p>`, ()=>{
+      res.end()
+    })
+  }
+})
+
 app.use(express.static(path.join(__dirname, 'static')))
 
 app.listen(PORT, function () {

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "youtubeconverter",
-  "version": "0.4.0",
+  "version": "0.2.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "youtubeconverter",
-  "version": "0.4.0",
+  "version": "2.0.0",
   "description": "A web youtube converter for converting videos to mp4, mp3, and other supported formats",
   "main": "index.js",
   "scripts": {

static/index.html

@@ -12,11 +12,11 @@
 </head>
 
 <body>
-    <h1>Youtube Downloader <p>v0.4</p>
+    <h1>Youtube Downloader <p>v2.0</p>
         <hr>
     </h1>
 
-    <form action="/download" method="get" target="_blank">
+    <form action="/getLink" method="get" target="_blank">
         <p style="margin-bottom: 1px;">Video URL:</p>
         <input required id="url" placeholder="Enter url" name="url">
         <p>Quality:</p>
@@ -43,6 +43,7 @@
         <input type="submit" placeholder="test">
     </form>
     <hr>
+    <p>Warning!: Although the tab might seem frozen, it is not! When you download a video, it first downloads, then converts, then sends it! If you would know any ways to indicated <b>without javascript</b> the progress of the conversion, or how to pipe the ffmpeg conversion automatically, please help!</p>
     <p><a href="https://ko-fi.com/bingus_violet">Please consider donating</a> or host the website yourself! Anything helps! (Check <a href="https://github.com/Violets-puragtory/NoJS-YTConverter">github</a> for more info)</p><br>
 </body>