106 lines
5.0 KiB
HTML
106 lines
5.0 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="fr">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Téléchargement en temps réel</title>
|
||
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
|
||
|
|
<style>
|
||
|
|
body { background-color: #f8f9fa; }
|
||
|
|
.container { margin-top: 50px; }
|
||
|
|
.card { border-radius: 10px; }
|
||
|
|
.output-container {
|
||
|
|
background-color: #f1f1f1;
|
||
|
|
padding: 20px;
|
||
|
|
border-radius: 10px;
|
||
|
|
white-space: pre-wrap;
|
||
|
|
font-family: monospace;
|
||
|
|
height: 400px;
|
||
|
|
overflow-y: scroll;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="container">
|
||
|
|
<div class="row justify-content-center">
|
||
|
|
<div class="col-md-8">
|
||
|
|
<div class="card shadow-lg p-3 mb-5 bg-white rounded">
|
||
|
|
<div class="card-body">
|
||
|
|
<h2 class="text-center mb-4">Télécharger Musique Spotify</h2>
|
||
|
|
<form id="download-form">
|
||
|
|
<div class="mb-3">
|
||
|
|
<label for="url" class="form-label">Saisir l'URL Spotify :</label>
|
||
|
|
<input type="text" class="form-control" id="url" name="url" required>
|
||
|
|
</div>
|
||
|
|
<div class="mb-3">
|
||
|
|
<label for="format" class="form-label">Choisissez le format :</label>
|
||
|
|
<select class="form-select" id="format" name="format" required>
|
||
|
|
<option value="flac">FLAC</option>
|
||
|
|
<option value="mp3">MP3</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div class="mb-3">
|
||
|
|
<label for="delete_choice" class="form-label">Supprimer les anciens répertoires :</label>
|
||
|
|
<select class="form-select" id="delete_choice" name="delete_choice" required>
|
||
|
|
<option value="1">Oui</option>
|
||
|
|
<option value="2">Non</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div class="mb-3">
|
||
|
|
<label for="copy_choice" class="form-label">Copier vers /mnt/data/Musique/ :</label>
|
||
|
|
<select class="form-select" id="copy_choice" name="copy_choice" required>
|
||
|
|
<option value="1">Oui</option>
|
||
|
|
<option value="2">Non</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<button type="submit" class="btn btn-primary w-100">Lancer le téléchargement</button>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="card mt-4">
|
||
|
|
<div class="card-body">
|
||
|
|
<h4>Output :</h4>
|
||
|
|
<div id="output" class="output-container"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- Button to download the ZIP -->
|
||
|
|
<button class="btn btn-secondary w-100 mt-3" onclick="window.location.href='/download_zip?format=' + document.getElementById('format').value">Télécharger ZIP</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
document.getElementById('download-form').addEventListener('submit', function (event) {
|
||
|
|
event.preventDefault();
|
||
|
|
const url = document.getElementById('url').value;
|
||
|
|
const format = document.getElementById('format').value;
|
||
|
|
const delete_choice = document.getElementById('delete_choice').value;
|
||
|
|
const copy_choice = document.getElementById('copy_choice').value;
|
||
|
|
const formData = new URLSearchParams();
|
||
|
|
formData.append('url', url);
|
||
|
|
formData.append('format', format);
|
||
|
|
formData.append('delete_choice', delete_choice);
|
||
|
|
formData.append('copy_choice', copy_choice);
|
||
|
|
fetch('/download', {
|
||
|
|
method: 'POST',
|
||
|
|
body: formData
|
||
|
|
})
|
||
|
|
.then(response => {
|
||
|
|
const outputContainer = document.getElementById('output');
|
||
|
|
const reader = response.body.getReader();
|
||
|
|
const decoder = new TextDecoder();
|
||
|
|
function read() {
|
||
|
|
reader.read().then(({ done, value }) => {
|
||
|
|
if (done) return;
|
||
|
|
outputContainer.textContent += decoder.decode(value, { stream: true });
|
||
|
|
outputContainer.scrollTop = outputContainer.scrollHeight;
|
||
|
|
read();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
read();
|
||
|
|
})
|
||
|
|
.catch(error => console.error('Erreur:', error));
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|