Deno Integré + Progress Bar Fix + Small Clean

.gitignore

@@ -5,6 +5,7 @@
 
 /ressources/ffmpeg.exe
 /ressources/ffprobe.exe
+/ressources/deno.exe
 
 logs/*.json
 logs/*.log

package.json

@@ -66,6 +66,10 @@
         "from": "ressources/ffprobe.exe",
         "to": "ffprobe.exe"
       },
+      {
+        "from": "ressources/deno.exe",
+        "to": "deno.exe"
+      },
       {
         "from": "server",
         "to": "server"

public/index.html

@@ -11,7 +11,6 @@
     ">
     <title></title>
 
-    <!--CSS-->
     <link rel="stylesheet" href="styles/styles.css">
     
 </head>
@@ -33,10 +32,8 @@
                     <input type="checkbox" name="audioOnly" value="1">
                     <div class="checkmark"></div>
                 </label>
-                <!-- <input type="checkbox" name="audioOnly" value="1"> -->
                 Audio seulement (MP3)
             </label>
-            <!-- <input type="checkbox" name="audioOnly" value="1"> Audio seulement (MP3) -->
             <select name="quality">
                 <option value="best">Meilleure qualité</option>
                 <option value="medium">Qualité moyenne</option>
@@ -49,8 +46,6 @@
             <button type="submit" onclick="startProgress()">Télécharger</button>
         </form>
 
-
-
         <!--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
         être l'espèce de "canal" attribué a ça. Ca va faire que si jamais on veut ensuite recup
@@ -67,9 +62,9 @@
 
     <div id="downloadProgressWrapper">
         <div id="downloadProgress"></div>   
-        <div id="downloadProgressText">0%</div>
     </div>
 
+    <div id="downloadProgressText"></div>
 
     <div id="downloadStatus"></div>
 
@@ -79,12 +74,7 @@
     
     <footer class="theme-switcher">
             <label for="themeSelect">Thème :</label>
-            <select id="themeSelect" aria-label="Choisir le thème">
+            <select id="themeSelect" aria-label="Choisir le thème"></select>
-            <!-- <option value="dark">Sombre</option>
-            <option value="light">Clair</option>
-            <option value="Chirac">Chirac</option>
-            <option value="Fanatic">Fanatic</option> -->
-            </select>
     </footer>
 
     <script src="script/custompath.js"></script>

public/script/progressBar.js

@@ -1,27 +1,27 @@
 const progressWrapper = document.getElementById("downloadProgressWrapper");
 const progressBar = document.getElementById("downloadProgress");
+const progressBarText = document.getElementById("downloadProgressText")
 
 function startProgress() {
   progressWrapper.style.display = "block";
   progressBar.style.width = "0%";
+  progressBarText.style.display = "block";
+  progressBarText.innerHTML = "0%";
 }
 
 function updateProgress(percent) {
   progressBar.style.width = `${percent}%`;
+  progressBarText.innerHTML = `${percent}%`;
 }
 
-// Réinitialise et cache
 function resetProgress() {
   progressBar.style.width = "0%";
+  progressBarText.innerHTML = "";
+  progressBarText.style.display = "none";
   progressWrapper.style.display = "none";
 }
 
-function resetProgressFile() {
+// Connexion SSE
-  progressBar.style.width = "0%";
-  // progressWrapper reste visible
-}
-
-// Connexion SSE, c'est Server-sent events est une technologie grâce à laquelle un navigateur reçoit des mises à jour automatiques à partir d'un serveur via une connexion HTTP. 
 const evtSource = new EventSource("/download/progress");
 evtSource.onmessage = e => {
   if (e.data === "reset") {
@@ -37,6 +37,6 @@ evtSource.onmessage = e => {
   const percent = parseFloat(e.data);
   if (!isNaN(percent)) {
     updateProgress(percent);
-    if (percent >= 100) setTimeout(resetProgressFile, 500);
+    if (percent >= 100) setTimeout(resetProgress, 500);
   }
 };

public/styles/components/progressBar.css

@@ -24,9 +24,8 @@
   text-align: center;
   font-size: 0.8rem;
   color: #fff;
-  position: absolute;
+  content: "";
-  width: 100%;
+
-  top: -20px;
 }
 
 /* Responsive pour mobile */

public/styles/theme/themeimport.css

@@ -3,9 +3,6 @@
 @import url("default-theme.css");
 @import url("fanatic-theme.css");
 @import url("light-theme.css");
-@import url("cyberpunk-theme.css");
-@import url("spicy-theme.css");
-@import url("vilbrequin-theme.css");
 @import url("nf-theme.css");
 @import url("drift-theme.css");
 @import url("neon-theme.css");

server/helpers/buildArgs.js

@@ -13,7 +13,8 @@ function buildYtDlpArgs({ url, audioOnly, quality, outputFolder }) {
     "--retries", "10",
     "--fragment-retries", "10",
     "--ffmpeg-location", path.join(process.resourcesPath, "ffmpeg.exe"),
-    "--extractor-args","youtube:player_client=default"
+    "--extractor-args","youtube:player_client=default",
+    "--js-runtimes", `deno:${path.join(process.resourcesPath, "deno.exe")}`
   ];
 
   if (audioOnly) args.push("-f", "bestaudio", "--extract-audio", "--audio-format", "mp3");

server/routes/download.js

@@ -5,7 +5,6 @@ const path = require("path");
 const fs = require("fs");
 
 const { logger } = require("../logger");
-const config = require("../../config");
 const { isValidUrl, isSafePath } = require("../helpers/validation");
 const { buildYtDlpArgs } = require("../helpers/buildArgs");
 const { notifyDownloadFinished } = require("../helpers/notify");