From bb967834f0671e7f75550e471fcf0fffd070dfd3 Mon Sep 17 00:00:00 2001
From: MasterAcnolo <68693319+MasterAcnolo@users.noreply.github.com>
Date: Fri, 27 Jun 2025 23:11:42 +0200
Subject: [PATCH] Loading Screen

---
 public/index.html               |  4 +-
 public/script/downloadstatus.js | 29 ++++++++++++
 server/routes/download.js       | 82 +++++++++++++++------------------
 3 files changed, 68 insertions(+), 47 deletions(-)
 create mode 100644 public/script/downloadstatus.js
diff --git a/public/index.html b/public/index.html
index 93e7b9f..492e739 100644
--- a/public/index.html
+++ b/public/index.html
@@ -8,7 +8,7 @@
 <body>
     
 
-    <form action="/download" method="POST">
+    <form action="/download" method="POST" id="downloadForm">
         <input name="url" placeholder="URL YouTube" id="UrlInput">
         <input type="checkbox" name="audioOnly" value="1"> MP3 seulement
         <select name="quality">
@@ -18,6 +18,7 @@
         <button type="submit">Télécharger</button>
     </form>
 
+    <div id="downloadStatus" style="margin-top: 1em; font-weight:bold;"></div>
 
     <!--Il faut utiliser un formulaire, parce que on doit envoyer a un serveur 
     les données à traiter. Pour cela on définit une route vers /download, ca va
@@ -27,6 +28,7 @@
 
     <div id="videoInfo" style="margin-top: 20px;"></div>
 
+    <script src="script/downloadstatus.js"></script>
     <script src="script/fetchinfo.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/public/script/downloadstatus.js b/public/script/downloadstatus.js
new file mode 100644
index 0000000..5392ce7
--- /dev/null
+++ b/public/script/downloadstatus.js
@@ -0,0 +1,29 @@
+const form = document.getElementById("downloadForm");
+const statusDiv = document.getElementById("downloadStatus");
+
+form.addEventListener("submit", async (e) => {
+  e.preventDefault(); // empêche la soumission classique (rechargement)
+
+  statusDiv.textContent = "⏳ Téléchargement en cours...";
+
+  const formData = new FormData(form);
+  const params = new URLSearchParams(formData);
+
+  try {
+    const res = await fetch("/download", {
+      method: "POST",
+      headers: { "Content-Type": "application/x-www-form-urlencoded" },
+      body: params,
+    });
+
+    if (!res.ok) {
+      statusDiv.textContent = "❌ Erreur pendant le téléchargement.";
+      return;
+    }
+
+    const text = await res.text();
+    statusDiv.textContent = text; // affiche « Téléchargement terminé » ou autre message serveur
+  } catch {
+    statusDiv.textContent = "❌ Une erreur s’est produite.";
+  }
+});
diff --git a/server/routes/download.js b/server/routes/download.js
index afac178..8259516 100644
--- a/server/routes/download.js
+++ b/server/routes/download.js
@@ -2,53 +2,43 @@ const express = require("express");
 const router = express.Router();
 const { exec } = require("child_process");
 
-
 router.post("/", (req, res) => {
-    const options = {
-      url: req.body.url,
-      audioOnly: req.body.audioOnly === "1",  // coché mp3
-      quality: req.body.quality || "best",   // par défaut best
-      subtitles: req.body.subs === "1",      // imaginons un checkbox
-      //FAUT RAJOUTER DES ARGUMENTS SOUS CETTE FORME
-    };
-  
-    if (!options.url) {
-      return res.status(400).send("❌ URL manquante !");
+  const options = {
+    url: req.body.url,
+    audioOnly: req.body.audioOnly === "1",
+    quality: req.body.quality || "best",
+    subtitles: req.body.subs === "1",
+  };
+
+  if (!options.url) {
+    return res.status(400).send("❌ URL manquante !");
+  }
+
+  let command = `yt-dlp`;
+
+  if (options.audioOnly) {
+    command += " --extract-audio --audio-format mp3";
+  }
+
+  if (options.subtitles) {
+    command += " --write-subs --sub-lang en";
+  }
+
+  command += ` -f ${options.quality}`;
+  command += ` -o "downloads/%(title)s.%(ext)s"`;
+  command += ` "${options.url}"`;
+
+  console.log("🔧 Commande finale :", command);
+
+  exec(command, (error, stdout, stderr) => {
+    if (error) {
+      console.error("Erreur yt-dlp :", stderr || error.message);
+      return res.status(500).send("❌ Erreur pendant le téléchargement.");
     }
-  
-    // construction progressive de la commmande
-  
-    // A SAVOIR QUE L'ON VA DISTINGUER DEUX TYPES D'ARGUMENTS SI j'AI BIEN COMPRIS, GENRE 
-    // LES ARGUMENTS OBLIGATOIRES ET LES ARGUMENTS FALCUTATIFS
-    // GENRE LES SOUS TITRE OU L'AUDIO ONLY QUI SONT NON ESSENTIEL
-  
-    let command = `yt-dlp`;
-  
-    if (options.audioOnly) {
-      command += " --extract-audio --audio-format mp3"; // AJOUT DE l'ONLY AUDIO SI JAMAIS ON LE CHECK, SINON CA PREND LA VALEUR PAR DEFAUT A SAVOIR VIDEO
-    }
-  
-    if (options.subtitles) {
-      command += " --write-subs --sub-lang en"; 
-    }
-  
-      command += ` -f ${options.quality}`; //QUALITE DU TELECHARGEMENT
-      command += ` -o "downloads/%(title)s.%(ext)s"`; // DOSSIER DE SORTIE 
-      command += ` "${options.url}"`; // L'URL DE BASE
-  
-      // ON COOK LA COMMANDE FINALE ICI: 
-    console.log("🔧 Commande finale :", command);
-  
-    exec(command, (error, stdout, stderr) => { // Error = Erreur Node JS || stdout = sortie de la commande du terminal || STDerr c'est les erreurs interne au terminal
-      if (error) {
-        console.error("Erreur yt-dlp :", stderr || error.message);
-        return res.status(500).send("❌ Erreur pendant le téléchargement.");
-      }
-  
-      console.log("yt-dlp terminé :", stdout);
-      res.send("✅ Téléchargement terminé !");
-    });
+
+    console.log("yt-dlp terminé :", stdout);
+    res.send("✅ Téléchargement terminé !");
+  });
 });
 
-
-module.exports = router;
\ No newline at end of file
+module.exports = router;
