maher
84 lines
3.8 KiB
Twig
Executable File
84 lines
3.8 KiB
Twig
Executable File
<!DOCTYPE html>
|
|
{% trans_default_domain 'sign-up' %}
|
|
|
|
<html lang="{{ app.request.locale }}" dir="{{ app.request.locale == 'ar' ? 'rtl' : 'ltr' }}">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
|
|
<title>Téléchargeur de vidéos YouTube</title>
|
|
<!-- jQuery -->
|
|
<script src="{{ asset('assets/vendor/jquery@4.0.0/jquery.min.js') }}"></script>
|
|
<!-- Font Awesome pour les icônes -->
|
|
<link rel="stylesheet" href="{{ asset('assets/vendor/font-awesome@6.7.2/css/all.min.css') }}">
|
|
<link rel="stylesheet" href="{{ asset('assets/css/frontend.css') }}">
|
|
<link rel="stylesheet" href="{{ asset('assets/vendor/bootstrap@5.3.8/css/bootstrap.min.css') }}">
|
|
<link rel="stylesheet" href="{{ asset('assets/vendor/country-select-js@2.1.0/build/css/countrySelect.css') }}">
|
|
<link rel="stylesheet" href="{{ asset('assets/vendor/intl-tel-input@28.1.0/dist/css/intlTelInput.min.css') }}">
|
|
</head>
|
|
<body>
|
|
|
|
|
|
<div class="container mt-5">
|
|
<h3>Téléchargement de la vidéo</h3>
|
|
<button id="start-download" class="btn btn-primary mb-3">Lancer le téléchargement</button>
|
|
|
|
<div class="progress" style="height: 30px;">
|
|
<div id="progress-bar" class="progress-bar progress-bar-striped progress-bar-animated"
|
|
role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
|
|
0%
|
|
</div>
|
|
</div>
|
|
<div id="status" class="mt-2 text-muted">Prêt.</div>
|
|
</div>
|
|
|
|
<script src="{{ asset('assets/vendor/bootstrap@5.3.8/js/bootstrap.min.js') }}"></script>
|
|
<script src="{{ asset('assets/vendor/country-select-js@2.1.0/build/js/countrySelect.js') }}"></script>
|
|
<script src="{{ asset('assets/vendor/intl-tel-input@28.1.0/dist/js/intlTelInput.min.js') }}"></script>
|
|
|
|
<script>
|
|
|
|
$(document).ready(function() {
|
|
$('#start-download').on('click', function() {
|
|
const $progressBar = $('#progress-bar');
|
|
const $status = $('#status');
|
|
|
|
$status.text('Téléchargement en cours...');
|
|
$progressBar.css('width', '0%').attr('aria-valuenow', 0).text('0%');
|
|
$(this).prop('disabled', true); // Désactive le bouton pendant le téléchargement
|
|
|
|
// On ouvre la connexion SSE vers notre route Symfony
|
|
const eventSource = new EventSource("{{ path('app_streamed_download') }}");
|
|
|
|
eventSource.onmessage = function(event) {
|
|
const data = JSON.parse(event.data);
|
|
|
|
if (data.progress) {
|
|
// Mise à jour de la barre avec jQuery
|
|
$progressBar.css('width', data.progress + '%')
|
|
.attr('aria-valuenow', data.progress)
|
|
.text(data.progress + '%');
|
|
}
|
|
|
|
// Si le script PHP a terminé
|
|
if (data.done) {
|
|
$status.text('Téléchargement terminé avec succès !');
|
|
$progressBar.removeClass('progress-bar-animated').addClass('bg-success');
|
|
eventSource.close(); // On ferme la connexion
|
|
$('#start-download').prop('disabled', false);
|
|
}
|
|
};
|
|
|
|
eventSource.onerror = function(err) {
|
|
console.error("Erreur SSE:", err);
|
|
$status.text('Une erreur est survenue lors du téléchargement.');
|
|
eventSource.close();
|
|
$('#start-download').prop('disabled', false);
|
|
};
|
|
});
|
|
});
|
|
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|