Deno Integré + Progress Bar Fix + Small Clean

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
@@ -66,10 +61,10 @@
 
 
     <div id="downloadProgressWrapper">
-        <div id="downloadProgress"></div>
-        <div id="downloadProgressText">0%</div>
+        <div id="downloadProgress"></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">
-            <!-- <option value="dark">Sombre</option>
-            <option value="light">Clair</option>
-            <option value="Chirac">Chirac</option>
-            <option value="Fanatic">Fanatic</option> -->
-            </select>
+            <select id="themeSelect" aria-label="Choisir le thème"></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() {
-  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. 
+// Connexion SSE
 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;
-  width: 100%;
-  top: -20px;
+  content: "";
+
 }
 
 /* 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");