Fix regex
This commit is contained in:
299
index.html
Normal file
299
index.html
Normal file
@@ -0,0 +1,299 @@
|
||||
{% extends "layout.html" %}
|
||||
|
||||
{% block title %}Télécharger - Spotify Downloader{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-8">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="mb-0"><i class="bi bi-download me-2"></i>Nouveau téléchargement</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form id="downloadForm">
|
||||
<div class="mb-3">
|
||||
<label for="url" class="form-label">
|
||||
<i class="bi bi-link-45deg me-1"></i>URL Spotify
|
||||
</label>
|
||||
<textarea
|
||||
class="form-control"
|
||||
id="url"
|
||||
name="url"
|
||||
rows="4"
|
||||
placeholder="Collez une ou plusieurs URLs Spotify (une par ligne) Exemple: https://open.spotify.com/track/... https://open.spotify.com/playlist/..."
|
||||
required
|
||||
></textarea>
|
||||
<div class="form-text">Accepte les tracks, albums et playlists Spotify</div>
|
||||
<div id="urlError" class="text-danger mt-1" style="display: none;"></div>
|
||||
</div>
|
||||
|
||||
<div class="row g-3 mb-3">
|
||||
<div class="col-md-4">
|
||||
<label for="format" class="form-label">
|
||||
<i class="bi bi-music-note me-1"></i>Format
|
||||
</label>
|
||||
<select class="form-select" id="format" name="format">
|
||||
<option value="mp3">MP3</option>
|
||||
<option value="flac">FLAC</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label for="copy_choice" class="form-label">
|
||||
<i class="bi bi-folder-plus me-1"></i>Copier vers NAS
|
||||
</label>
|
||||
<select class="form-select" id="copy_choice" name="copy_choice">
|
||||
<option value="no">Non</option>
|
||||
<option value="yes">Oui</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-4 d-flex align-items-end">
|
||||
<div class="form-check">
|
||||
<input type="checkbox" class="form-check-input" id="delete_old" name="delete_old">
|
||||
<label class="form-check-label" for="delete_old">Supprimer anciens fichiers</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
|
||||
<button type="button" id="cancelBtn" class="btn btn-outline-danger me-md-2" disabled>
|
||||
<i class="bi bi-x-circle me-1"></i>Annuler
|
||||
</button>
|
||||
<button type="submit" id="submitBtn" class="btn btn-spotify">
|
||||
<i class="bi bi-download me-1"></i>Télécharger
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div id="downloadStatus" class="mt-4" style="display: none;">
|
||||
<div class="d-flex justify-content-between align-items-center mb-2">
|
||||
<span id="statusText" class="badge bg-info">En attente...</span>
|
||||
<span id="progressText" class="text-muted small">0%</span>
|
||||
</div>
|
||||
<div id="progressContainer" class="progress mb-3 progress-indeterminate" style="height: 25px;">
|
||||
<div id="progressBar" class="progress-bar progress-bar-striped progress-bar-animated" style="width: 100%;"></div>
|
||||
</div>
|
||||
<div class="output-box rounded p-3" id="logOutput" style="max-height: 400px; overflow-y: auto;">
|
||||
<div class="text-muted text-center">En attente du téléchargement...</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if recent_downloads %}
|
||||
<div class="card mt-4">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<h5 class="mb-0"><i class="bi bi-clock-history me-2"></i>Téléchargements récents</h5>
|
||||
<a href="{{ url_for('history') }}" class="btn btn-sm btn-outline-light">Voir tout</a>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<div class="list-group list-group-flush">
|
||||
{% for dl in recent_downloads %}
|
||||
<div class="list-group-item bg-transparent d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<span class="badge bg-{{ 'success' if dl.status == 'completed' else 'danger' if dl.status == 'error' else 'warning' if dl.status == 'running' else 'secondary' }}">
|
||||
{{ dl.status }}
|
||||
</span>
|
||||
<small class="text-muted ms-2">{{ dl.format_type.upper() }}</small>
|
||||
</div>
|
||||
<small class="text-muted">{{ dl.created_at.strftime('%d/%m %H:%M') }}</small>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
<script>
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
const form = document.getElementById('downloadForm');
|
||||
const submitBtn = document.getElementById('submitBtn');
|
||||
const cancelBtn = document.getElementById('cancelBtn');
|
||||
const downloadStatus = document.getElementById('downloadStatus');
|
||||
const statusText = document.getElementById('statusText');
|
||||
const progressText = document.getElementById('progressText');
|
||||
const progressBar = document.getElementById('progressBar');
|
||||
const progressContainer = document.getElementById('progressContainer');
|
||||
const logOutput = document.getElementById('logOutput');
|
||||
const urlError = document.getElementById('urlError');
|
||||
|
||||
let currentDownloadId = null;
|
||||
let eventSource = null;
|
||||
|
||||
const spotifyPattern = /^https?:\/\/open\.spotify\.com\/(track|album|playlist)\/[\w-]+/;
|
||||
|
||||
function validateUrls(text) {
|
||||
const urls = text.split('\n').filter(u => u.trim());
|
||||
for (const url of urls) {
|
||||
if (!spotifyPattern.test(url.trim())) {
|
||||
return { valid: false, invalid: url };
|
||||
}
|
||||
}
|
||||
return { valid: true, count: urls.length };
|
||||
}
|
||||
|
||||
document.getElementById('url').addEventListener('input', function() {
|
||||
const result = validateUrls(this.value);
|
||||
if (this.value.trim() && !result.valid) {
|
||||
urlError.textContent = `URL invalide: ${result.invalid.substring(0, 50)}...`;
|
||||
urlError.style.display = 'block';
|
||||
} else {
|
||||
urlError.style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
function appendLog(message, type = 'info') {
|
||||
const lines = message.split('\n').filter(l => l.trim());
|
||||
lines.forEach(line => {
|
||||
const span = document.createElement('div');
|
||||
span.className = `log-${type}`;
|
||||
span.textContent = line;
|
||||
logOutput.appendChild(span);
|
||||
});
|
||||
logOutput.scrollTop = logOutput.scrollHeight;
|
||||
}
|
||||
|
||||
function setStatus(status, progress) {
|
||||
const badges = {
|
||||
'pending': ['bg-secondary', 'En attente...'],
|
||||
'running': ['bg-warning', 'En cours...'],
|
||||
'completed': ['bg-success', 'Terminé !'],
|
||||
'error': ['bg-danger', 'Erreur'],
|
||||
'cancelled': ['bg-secondary', 'Annulé']
|
||||
};
|
||||
const [color, text] = badges[status] || ['bg-secondary', status];
|
||||
statusText.className = `badge ${color}`;
|
||||
statusText.textContent = text;
|
||||
progressText.textContent = `${progress}%`;
|
||||
|
||||
if (status === 'running') {
|
||||
progressBar.classList.add('progress-bar-animated');
|
||||
progressBar.style.width = '100%';
|
||||
progressContainer.classList.add('progress-indeterminate');
|
||||
} else {
|
||||
progressBar.classList.remove('progress-bar-animated');
|
||||
progressBar.style.width = `${progress}%`;
|
||||
progressContainer.classList.remove('progress-indeterminate');
|
||||
|
||||
if (status === 'completed') {
|
||||
progressBar.classList.remove('progress-bar-striped');
|
||||
showToast('Téléchargement terminé avec succès !', 'success');
|
||||
} else if (status === 'error') {
|
||||
showToast('Erreur lors du téléchargement', 'error');
|
||||
} else if (status === 'cancelled') {
|
||||
showToast('Téléchargement annulé', 'warning');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function startStream(downloadId) {
|
||||
if (eventSource) {
|
||||
eventSource.close();
|
||||
}
|
||||
|
||||
eventSource = new EventSource(`/api/download/${downloadId}/stream`);
|
||||
|
||||
eventSource.onmessage = function(e) {
|
||||
const [id, status, progress, log] = e.data.split('|');
|
||||
|
||||
if (log !== '__END__' && log) {
|
||||
let type = 'info';
|
||||
if (log.includes('Erreur') || log.includes('Error')) type = 'error';
|
||||
else if (log.includes('terminé') || log.includes('Terminé')) type = 'success';
|
||||
else if (log.includes('Downloaded')) type = 'success';
|
||||
else if (log.includes('Ajout')) type = 'info';
|
||||
|
||||
appendLog(log, type);
|
||||
}
|
||||
|
||||
setStatus(status, parseInt(progress));
|
||||
|
||||
if (status === 'completed' || status === 'error' || status === 'cancelled') {
|
||||
eventSource.close();
|
||||
eventSource = null;
|
||||
submitBtn.disabled = false;
|
||||
cancelBtn.disabled = true;
|
||||
}
|
||||
};
|
||||
|
||||
eventSource.onerror = function() {
|
||||
eventSource.close();
|
||||
eventSource = null;
|
||||
};
|
||||
}
|
||||
|
||||
form.addEventListener('submit', async function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const urlValue = document.getElementById('url').value;
|
||||
const validation = validateUrls(urlValue);
|
||||
|
||||
if (!validation.valid) {
|
||||
urlError.textContent = `URL invalide: ${validation.invalid.substring(0, 50)}...`;
|
||||
urlError.style.display = 'block';
|
||||
return;
|
||||
}
|
||||
|
||||
const formData = {
|
||||
url: urlValue,
|
||||
format: document.getElementById('format').value,
|
||||
delete_old: document.getElementById('delete_old').checked,
|
||||
copy_choice: document.getElementById('copy_choice').value
|
||||
};
|
||||
|
||||
submitBtn.disabled = true;
|
||||
cancelBtn.disabled = false;
|
||||
downloadStatus.style.display = 'block';
|
||||
logOutput.innerHTML = '';
|
||||
setStatus('pending', 0);
|
||||
appendLog(`Démarrage de ${validation.count} téléchargement(s)...`, 'info');
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/download', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(formData)
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.error) {
|
||||
appendLog(`Erreur: ${data.error}`, 'error');
|
||||
setStatus('error', 0);
|
||||
submitBtn.disabled = false;
|
||||
cancelBtn.disabled = true;
|
||||
return;
|
||||
}
|
||||
|
||||
currentDownloadId = data.id;
|
||||
setStatus('running', 0);
|
||||
startStream(currentDownloadId);
|
||||
|
||||
} catch (err) {
|
||||
appendLog(`Erreur réseau: ${err.message}`, 'error');
|
||||
setStatus('error', 0);
|
||||
submitBtn.disabled = false;
|
||||
cancelBtn.disabled = true;
|
||||
}
|
||||
});
|
||||
|
||||
cancelBtn.addEventListener('click', async function() {
|
||||
if (!currentDownloadId) return;
|
||||
|
||||
try {
|
||||
await fetch(`/api/download/${currentDownloadId}/cancel`, {
|
||||
method: 'POST'
|
||||
});
|
||||
appendLog('Annulation en cours...', 'warning');
|
||||
} catch (err) {
|
||||
appendLog(`Erreur: ${err.message}`, 'error');
|
||||
}
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user