Files
downloader_video/templates/frontend/index.html.twig
T

149 lines
6.9 KiB
Twig
Executable File

<!DOCTYPE html>
{% trans_default_domain 'home' %}
<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">
<meta name="description"
content="Téléchargez des vidéos depuis n'importe quel site
en quelques secondes avec VideoPowerPME. Gratuit,
sans inscription, compatible YouTube, Instagram,
TikTok, Facebook et plus encore.">
<meta name="keywords" content="télécharger vidéo en ligne, téléchargeur vidéo gratuit,
download vidéo YouTube, convertir YouTube MP4,
downloader vidéo sans logiciel, VideoPowerPME">
<meta name="robots" content="index, follow">
<meta name="author" content="VideoPowerPME">
<link rel="canonical" href="https://videopowerpme.com/fr/">
<link rel="alternate" hreflang="en" href="{{ url('change_language', {'lang': 'en'}) }}">
<link rel="alternate" hreflang="ar" href="{{ url('change_language', {'lang': 'ar'}) }}">
<link rel="alternate" hreflang="fr" href="{{ url('change_language', {'lang': 'fr'}) }}">
<link rel="alternate" hreflang="x-default" href="{{ url('change_language', {'lang': 'fr'}) }}">
<title>{{ 'title_home'|trans}}</title>
<!-- 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/bootstrap@5.3.8/css/bootstrap.rtl.min.css') }}">
</head>
<body>
<!-- BARRE HORIZONTALE TOUT EN HAUT DE LA PAGE -->
<header class="top-header-bar">
<div class="top-bar-container">
<!-- Section langue fixe (pas de JS, simple affichage) -->
<div class="static-lang">
<a href="{{ path('change_language', {'lang': 'ar'}) }}">🇸🇦</a>
<a href="{{ path('change_language', {'lang': 'fr'}) }}">🇫🇷</a>
<a href="{{ path('change_language', {'lang': 'en'}) }}">🇬🇧</a>
</div>
<!-- Badge démontrant l'absence de connexion obligatoire -->
{% if is_granted('ROLE_USER') %}
<div class="d-flex align-items-center gap-3">
<!-- History Button -->
<a href="{{ path('app_frontend_history') }}" class="btn btn-light border menu-btn">
<i class="fa-solid fa-clock-rotate-left"></i>
{{ "btn_history"|trans }}
</a>
<!-- Logout Button -->
<a href="{{ path('security_logout') }}">
<button class="btn btn-danger menu-btn">
<i class="fa-solid fa-arrow-right-to-bracket"></i>
{{ "btn_decnx"|trans }}
</button>
</a>
<!-- User Info -->
<div class="d-flex align-items-center gap-2">
<span class="username">{{ app.user.pseudo|e }}</span>
<i class="fa-solid fa-circle-user fa-2xl"></i>
</div>
</div>
{% else %}
<a href="{{ path('security_login') }}">
<button class="btn btn-success menu-btn">
<i class="fa-solid fa-right-to-bracket"></i>
{{ "btn_cnx"|trans }}
</button>
</a>
{% endif %}
</div>
</header>
<div class="main-alert">
{% if not is_granted('ROLE_USER') %}
<div class="alert alert-primary" role="alert">
<i class="fa-solid fa-bell"></i>
{{ "alert_defaut"|trans }}
</div>
{% endif %}
</div>
<!-- Contenu principal (centré) -->
<div class="main-container">
<!-- Logo et titre -->
<div class="logo-area">
<i class="fab fa-youtube logo-icon"></i>
<span class="logo-text">VideoPowerPME</span>
</div>
<!-- Zone de saisie des URLs -->
<div class="url-section">
<div class="url-input-area">
<textarea id="youtubeUrls" placeholder="{{ 'placeholder_url'|trans }}"></textarea>
<div class="format-row">
{#<select id="formatSelect">
<option value="mp4-1080p">MP4 - 1080p</option>
<option value="mp4-720p" selected>MP4 - 720p</option>
<option value="mp4-480p">MP4 - 480p</option>
<option value="webm-1080p">WebM - 1080p</option>
<option value="webm-720p">WebM - 720p</option>
</select>#}
<button id="processBtn" class="process-btn"><i class="fas fa-download"></i> <span class="btn-text">{{ 'btn_start'|trans }}</span></button>
</div>
</div>
</div>
<!-- Liste des vidéos avec progression et statut -->
<div class="video-list" id="videoListContainer">
<!-- Les éléments dynamiques sont insérés ici -->
</div>
</div>
<script src="{{ asset('assets/vendor/jquery@4.0.0/jquery.min.js') }}"></script>
<script src="{{ asset('assets/vendor/bootstrap@5.3.8/js/bootstrap.min.js') }}"></script>
<script>
const ENDPOINTS = {
getInfo: "{{ path('app_frontend_size_movie') }}", // retourne { name: "...", sizeMB: 180 } ou erreur
streamDownload: "{{ path('app_streamed_download') }}", // téléchargement direct
backgroundDownload: "{{ path('app_background_download') }}", // lance tâche de fond
urlAuth: "{{ path('security_login') }}" // retourne { authenticated: true/false }
// téléchargement le vidéo anonyme
};
function checkAuth() {
{% if is_granted('ROLE_USER') %}
return true;
{% else %}
return false;
{% endif %}
}
</script>
<script src="{{ asset('assets/js/frontend.js?v=1') }}"></script>
</body>
</html>