From 53d1bdb33a55e632120c2835cc8170f5c9ae02b6 Mon Sep 17 00:00:00 2001
From: marti <marti.vich@gmail.com>
Date: Tue, 15 Jul 2025 21:25:52 +0000
Subject: [PATCH] Actualizar app/templates/index.html
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Añadido mensaje de descargando en la lista de videos/mp3
---
 app/templates/index.html | 179 +++++++++++++++++++++++++++++++++++++--
 1 file changed, 170 insertions(+), 9 deletions(-)
diff --git a/app/templates/index.html b/app/templates/index.html
index 8603143..db56426 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -13,13 +13,22 @@
     .fade-out.hide {
       opacity: 0;
     }
+    /* Estilos para el spinner */
+    .spinner-container {
+      display: none; /* Oculto por defecto */
+      text-align: center;
+      margin-top: 20px;
+    }
+    .spinner-border {
+      width: 3rem;
+      height: 3rem;
+    }
   </style>
 </head>
 <body class="bg-light">
   <div class="container mt-5">
     <h1 class="mb-4 text-center">Descargador de YouTube</h1>
 
-    <!-- Tabs -->
     <ul class="nav nav-tabs" id="downloadTab" role="tablist">
       <li class="nav-item" role="presentation">
         <button class="nav-link active" id="single-tab" data-bs-toggle="tab" data-bs-target="#single" type="button" role="tab">Vídeo / MP3 individual</button>
@@ -30,9 +39,8 @@
     </ul>
 
     <div class="tab-content pt-4" id="downloadTabContent">
-      <!-- Descarga individual -->
       <div class="tab-pane fade show active" id="single" role="tabpanel">
-        <form method="POST">
+        <form method="POST" id="singleDownloadForm">
           <input type="hidden" name="type" value="single">
           <div class="mb-3">
             <label for="url1" class="form-label">URL del vídeo</label>
@@ -49,13 +57,18 @@
               <label class="form-check-label" for="audio1">MP3</label>
             </div>
           </div>
-          <button type="submit" class="btn btn-primary">Descargar</button>
+          <button type="submit" class="btn btn-primary" id="singleDownloadButton">Descargar</button>
+          <div class="spinner-container" id="singleLoadingSpinner">
+            <div class="spinner-border text-primary" role="status">
+              <span class="visually-hidden">Cargando...</span>
+            </div>
+            <p class="mt-2">Descargando archivo...</p>
+          </div>
         </form>
       </div>
 
-      <!-- Descarga de lista -->
       <div class="tab-pane fade" id="playlist" role="tabpanel">
-        <form method="POST">
+        <form method="POST" id="playlistDownloadForm">
           <input type="hidden" name="type" value="playlist">
           <div class="mb-3">
             <label for="url2" class="form-label">URL de la lista</label>
@@ -72,12 +85,17 @@
               <label class="form-check-label" for="audio2">MP3</label>
             </div>
           </div>
-          <button type="submit" class="btn btn-primary">Descargar Lista</button>
+          <button type="submit" class="btn btn-primary" id="playlistDownloadButton">Descargar Lista</button>
+          <div class="spinner-container" id="playlistLoadingSpinner">
+            <div class="spinner-border text-primary" role="status">
+              <span class="visually-hidden">Cargando...</span>
+            </div>
+            <p class="mt-2">Descargando archivos...</p>
+          </div>
         </form>
       </div>
     </div>
 
-    <!-- Modal -->
     <div class="modal fade" id="feedbackModal" tabindex="-1" aria-hidden="true">
       <div class="modal-dialog">
         <div class="modal-content bg-light">
@@ -95,6 +113,7 @@
 
   <script>
     const modal = new bootstrap.Modal(document.getElementById('feedbackModal'), {});
+
     {% if success or error %}
     window.addEventListener("load", () => {
       modal.show();
@@ -103,6 +122,148 @@
       }, 3000);
     });
     {% endif %}
+
+    const singleDownloadForm = document.getElementById('singleDownloadForm');
+    const singleDownloadButton = document.getElementById('singleDownloadButton');
+    const singleLoadingSpinner = document.getElementById('singleLoadingSpinner');
+
+    const playlistDownloadForm = document.getElementById('playlistDownloadForm');
+    const playlistDownloadButton = document.getElementById('playlistDownloadButton');
+    const playlistLoadingSpinner = document.getElementById('playlistLoadingSpinner');
+
+    function showLoadingState(button, spinner) {
+      button.disabled = true;
+      spinner.style.display = 'block';
+    }
+
+    function hideLoadingState(button, spinner) {
+      button.disabled = false;
+      spinner.style.display = 'none';
+    }
+
+    // Single video/MP3 download
+    singleDownloadForm.addEventListener('submit', function(event) {
+      // Prevent default form submission to handle it with Fetch API
+      event.preventDefault();
+      showLoadingState(singleDownloadButton, singleLoadingSpinner);
+
+      const formData = new FormData(this); // 'this' refers to the form element
+      
+      fetch('/', {
+        method: 'POST',
+        body: formData
+      })
+      .then(response => {
+        // Check if the response is a file (e.g., status 200 and content-disposition header)
+        const contentDisposition = response.headers.get('Content-Disposition');
+        if (response.ok && contentDisposition && contentDisposition.includes('attachment')) {
+          return response.blob().then(blob => {
+            const url = window.URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            const filename = contentDisposition.split('filename=')[1] ? contentDisposition.split('filename=')[1].replace(/"/g, '') : 'download';
+            a.download = filename;
+            document.body.appendChild(a);
+            a.click();
+            a.remove();
+            window.URL.revokeObjectURL(url);
+            // Hide loading state after file download starts
+            hideLoadingState(singleDownloadButton, singleLoadingSpinner);
+            // Show success message if needed, or clear form
+            showModal('Descarga iniciada correctamente.', 'success');
+            singleDownloadForm.reset(); // Clear the form
+          });
+        } else {
+          // If not a file, it's likely an error message from the server
+          return response.text().then(text => {
+            const parser = new DOMParser();
+            const doc = parser.parseFromString(text, 'text/html');
+            const errorMessage = doc.querySelector('.alert-danger')?.textContent || 'Error desconocido';
+            hideLoadingState(singleDownloadButton, singleLoadingSpinner);
+            showModal(errorMessage, 'error');
+          });
+        }
+      })
+      .catch(error => {
+        console.error('Error:', error);
+        hideLoadingState(singleDownloadButton, singleLoadingSpinner);
+        showModal('Error al conectar con el servidor.', 'error');
+      });
+    });
+
+    // Playlist download
+    playlistDownloadForm.addEventListener('submit', function(event) {
+      // Prevent default form submission to handle it with Fetch API
+      event.preventDefault();
+      showLoadingState(playlistDownloadButton, playlistLoadingSpinner);
+
+      const formData = new FormData(this); // 'this' refers to the form element
+      
+      fetch('/', {
+        method: 'POST',
+        body: formData
+      })
+      .then(response => {
+        const contentDisposition = response.headers.get('Content-Disposition');
+        if (response.ok && contentDisposition && contentDisposition.includes('attachment')) {
+          return response.blob().then(blob => {
+            const url = window.URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            const filename = contentDisposition.split('filename=')[1] ? contentDisposition.split('filename=')[1].replace(/"/g, '') : 'download.zip';
+            a.download = filename;
+            document.body.appendChild(a);
+            a.click();
+            a.remove();
+            window.URL.revokeObjectURL(url);
+            // Hide loading state after file download starts
+            hideLoadingState(playlistDownloadButton, playlistLoadingSpinner);
+            // Show success message or clear form
+            showModal('Descarga de la lista iniciada correctamente.', 'success');
+            playlistDownloadForm.reset(); // Clear the form
+          });
+        } else {
+          return response.text().then(text => {
+            const parser = new DOMParser();
+            const doc = parser.parseFromString(text, 'text/html');
+            const errorMessage = doc.querySelector('.alert-danger')?.textContent || 'Error desconocido';
+            hideLoadingState(playlistDownloadButton, playlistLoadingSpinner);
+            showModal(errorMessage, 'error');
+          });
+        }
+      })
+      .catch(error => {
+        console.error('Error:', error);
+        hideLoadingState(playlistDownloadButton, playlistLoadingSpinner);
+        showModal('Error al conectar con el servidor.', 'error');
+      });
+    });
+
+    // Function to show the modal with messages
+    function showModal(message, type) {
+      const feedbackModalBody = document.querySelector('#feedbackModal .modal-body');
+      feedbackModalBody.innerHTML = `
+        <div class="alert alert-${type} fade-out" role="alert">${message}</div>
+      `;
+      modal.show();
+      setTimeout(() => {
+        modal.hide();
+      }, 3000);
+    }
+
+    // Set initial state for tabs (important for refreshing page and keeping correct tab active)
+    document.addEventListener('DOMContentLoaded', (event) => {
+      const currentTab = localStorage.getItem('activeTab');
+      if (currentTab) {
+        new bootstrap.Tab(document.getElementById(currentTab + '-tab')).show();
+      }
+
+      document.querySelectorAll('.nav-link').forEach(tabLink => {
+        tabLink.addEventListener('shown.bs.tab', function (e) {
+          localStorage.setItem('activeTab', e.target.id.replace('-tab', ''));
+        });
+      });
+    });
   </script>
 </body>
-</html>
+</html>
\ No newline at end of file
