Feat: Implement playlist download count tracking during downloads with UI updates

public/index.html

@@ -265,6 +265,7 @@
                 <div style="display: flex; gap: 20px; align-items: center;">
                     <div id="downloadProgressText"></div> 
                     <div id="downloadSpeedText"></div>
+                    <div id="playlistInfoText" style="display: none; font-size: 0.9rem;"></div>
                     <button type="button" id="stopBtn" onclick="stopDownload()" class="stop-btn" style="display:none;" title="Stop download">■</button>
                 </div>
             </div>

public/script/downloadstatus.js

@@ -118,4 +118,7 @@ function resetProgressBar() {
 
   const speedElement = document.getElementById("downloadSpeedText");
   if (speedElement) speedElement.style.display = "none";
+
+  const playlistInfoElement = document.getElementById("playlistInfoText");
+  if (playlistInfoElement) playlistInfoElement.style.display = "none";
 }

public/script/progressBar.js

@@ -4,8 +4,10 @@ const progressBarText = document.getElementById("downloadProgressText")
 
 const speedElement = document.getElementById("downloadSpeedText");
 const stageElement = document.getElementById("downloadStage");
+const playlistInfoElement = document.getElementById("playlistInfoText");
 const speedEvt = new EventSource("/download/speed");
 const stageEvt = new EventSource("/download/stage");
+const playlistInfoEvt = new EventSource("/download/playlist-info");
 
 function startProgress() {
   progressBar.style.width = "0%";
@@ -45,6 +47,9 @@ function resetProgress() {
   stageElement.textContent = "";
   stageElement.style.display = "none";
 
+  playlistInfoElement.textContent = "";
+  playlistInfoElement.style.display = "none";
+
   // Hide stop button
   const stopBtn = document.getElementById("stopBtn");
   if (stopBtn) stopBtn.style.display = "none";
@@ -86,3 +91,8 @@ stageEvt.onmessage = e => {
   stageElement.style.display = "block";
   stageElement.textContent = e.data; // ex: "📥 Downloading..."
 };
+
+playlistInfoEvt.onmessage = e => {
+  playlistInfoElement.style.display = "block";
+  playlistInfoElement.textContent = e.data; // ex: "Item 1 of 15"
+};

server/controller/download.controller.js

@@ -6,6 +6,7 @@ const { notifyDownloadFinished } = require("../helpers/notify.helpers");
 const listeners = [];
 const speedListeners = [];
 const stageListeners = [];
+const playlistInfoListeners = [];
 
 async function downloadController(req, res) {
   try {
@@ -24,7 +25,7 @@ async function downloadController(req, res) {
     }
 
     // Get output folder when the download is finished
-    const outputFolder = await fetchDownload(options, listeners, speedListeners, stageListeners);
+    const outputFolder = await fetchDownload(options, listeners, speedListeners, stageListeners, playlistInfoListeners);
     notifyDownloadFinished(outputFolder);
     res.send("Download Done !");
     
@@ -93,4 +94,20 @@ function cancelDownloadController(req, res) {
   }
 }
 
-module.exports = { downloadController, progressController, speedController, stageController, cancelDownloadController};
+function playlistInfoController(req, res) {
+  res.set({
+    'Content-Type': 'text/event-stream',
+    'Cache-Control': 'no-cache',
+    'Connection': 'keep-alive',
+  });
+
+  const sendPlaylistInfo = info => res.write(`data: ${info}\n\n`);
+  playlistInfoListeners.push(sendPlaylistInfo);
+
+  req.on('close', () => {
+    playlistInfoListeners.splice(playlistInfoListeners.indexOf(sendPlaylistInfo), 1);
+    res.end();
+  });
+}
+
+module.exports = { downloadController, progressController, speedController, stageController, cancelDownloadController, playlistInfoController};

server/routes/download.route.js

@@ -1,6 +1,6 @@
 const express = require("express");
 const router = express.Router();
-const { downloadController, progressController, speedController, stageController, cancelDownloadController } = require("../controller/download.controller");
+const { downloadController, progressController, speedController, stageController, cancelDownloadController, playlistInfoController } = require("../controller/download.controller");
 
 router.post("/", downloadController);
 router.post("/cancel", cancelDownloadController);
@@ -9,5 +9,6 @@ router.post("/cancel", cancelDownloadController);
 router.get("/progress", progressController);
 router.get("/speed", speedController);
 router.get("/stage", stageController);
+router.get("/playlist-info", playlistInfoController);
 
 module.exports = router;

server/services/download.services.js

@@ -74,7 +74,7 @@ function createPlaylistFolder(basePath, playlistTitle) {
   }
 }
 
-function fetchDownload(options, listeners, speedListeners, stageListeners) {
+function fetchDownload(options, listeners, speedListeners, stageListeners, playlistInfoListeners) {
 
   return new Promise((resolve, reject) => {
     logger.info(`CONFIG createPlaylistFolders: ${configFeatures.createPlaylistFolders}`);
@@ -152,6 +152,13 @@ function fetchDownload(options, listeners, speedListeners, stageListeners) {
             }
         }
 
+        // Playlist item tracking
+        const itemMatch = line.match(/Downloading\s+(?:item|video)?\s*(\d+)\s+of\s+(\d+)/i);
+        if (itemMatch) {
+          const itemInfo = `Item ${itemMatch[1]} of ${itemMatch[2]}`;
+          playlistInfoListeners.forEach(fn => fn(itemInfo));
+        }
+
         // Stage messages
         if (line.includes("[Merger]")) {
           stageListeners.forEach(fn => fn("Merging formats..."));