marti/YTDownloader
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Actualizar app/templates/index.html

Browse Source 
Añadido mensaje de descargando en la lista de videos/mp3
This commit is contained in:
marti
2025-07-15 21:25:52 +00:00
parent f7df28b7f1
commit 53d1bdb33a
1 changed files with 170 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

177
app/templates/index.html
View File

@@ -13,13 +13,22 @@
.fade-out.hide { .fade-out.hide {
opacity: 0; 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> </style>
</head> </head>
<body class="bg-light"> <body class="bg-light">
<div class="container mt-5"> <div class="container mt-5">
<h1 class="mb-4 text-center">Descargador de YouTube</h1> <h1 class="mb-4 text-center">Descargador de YouTube</h1>
<!-- Tabs -->
<ul class="nav nav-tabs" id="downloadTab" role="tablist"> <ul class="nav nav-tabs" id="downloadTab" role="tablist">
<li class="nav-item" role="presentation"> <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> <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> </ul>
<div class="tab-content pt-4" id="downloadTabContent"> <div class="tab-content pt-4" id="downloadTabContent">
<!-- Descarga individual -->
<div class="tab-pane fade show active" id="single" role="tabpanel"> <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"> <input type="hidden" name="type" value="single">
<div class="mb-3"> <div class="mb-3">
<label for="url1" class="form-label">URL del vídeo</label> <label for="url1" class="form-label">URL del vídeo</label>
@@ -49,13 +57,18 @@
<label class="form-check-label" for="audio1">MP3</label> <label class="form-check-label" for="audio1">MP3</label>
</div> </div>
</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> </form>
</div> </div>
<!-- Descarga de lista -->
<div class="tab-pane fade" id="playlist" role="tabpanel"> <div class="tab-pane fade" id="playlist" role="tabpanel">
<form method="POST"> <form method="POST" id="playlistDownloadForm">
<input type="hidden" name="type" value="playlist"> <input type="hidden" name="type" value="playlist">
<div class="mb-3"> <div class="mb-3">
<label for="url2" class="form-label">URL de la lista</label> <label for="url2" class="form-label">URL de la lista</label>
@@ -72,12 +85,17 @@
<label class="form-check-label" for="audio2">MP3</label> <label class="form-check-label" for="audio2">MP3</label>
</div> </div>
</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> </form>
</div> </div>
</div> </div>
<!-- Modal -->
<div class="modal fade" id="feedbackModal" tabindex="-1" aria-hidden="true"> <div class="modal fade" id="feedbackModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content bg-light"> <div class="modal-content bg-light">
@@ -95,6 +113,7 @@
<script> <script>
const modal = new bootstrap.Modal(document.getElementById('feedbackModal'), {}); const modal = new bootstrap.Modal(document.getElementById('feedbackModal'), {});
{% if success or error %} {% if success or error %}
window.addEventListener("load", () => { window.addEventListener("load", () => {
modal.show(); modal.show();
@@ -103,6 +122,148 @@
}, 3000); }, 3000);
}); });
{% endif %} {% 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> </script>
</body> </body>
</html> </html>