Video/GIF en boucle sur l'ecran d'accueil

- Choix d'un media d'accueil dans les parametres Evenement
- GIF ou video (MP4/WebM) joue en boucle en fond d'ecran
- Import direct depuis le backoffice
- Si aucun media, l'animation cercle par defaut est affichee
- Le texte (nom evenement, instruction) reste par-dessus

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/js/admin.js

@@ -466,11 +466,40 @@ function setupToggleListeners() {
 
 // === EVENEMENT ===
 
-function chargerEvenementAdmin() {
+async function chargerEvenementAdmin() {
   const event = config.evenement || {};
   setValue('admin-nom-event', event.nom);
   setValue('admin-couleur-primaire', event.couleur_primaire || '#e91e63');
   setValue('admin-couleur-secondaire', event.couleur_secondaire || '#ffffff');
+  await rafraichirMediaAccueil();
+  const select = document.getElementById('admin-media-accueil');
+  if (event.media_accueil) select.value = event.media_accueil;
+}
+
+async function rafraichirMediaAccueil() {
+  const data = await apiGet('/api/animations/custom');
+  const select = document.getElementById('admin-media-accueil');
+  const valeur = select.value;
+  select.innerHTML = '<option value="">Aucun (animation par defaut)</option>';
+  for (const nom of data.tous) {
+    const opt = document.createElement('option');
+    opt.value = nom;
+    opt.textContent = nom;
+    select.appendChild(opt);
+  }
+  if (valeur) select.value = valeur;
+}
+
+async function uploaderMediaAccueil() {
+  const input = document.getElementById('input-media-accueil');
+  if (!input.files.length) return;
+
+  const formData = new FormData();
+  formData.append('fichier', input.files[0]);
+  await fetch('/api/upload/animation', { method: 'POST', body: formData });
+  input.value = '';
+  await rafraichirMediaAccueil();
+  afficherStatut('Media importe', 'succes');
 }
 
 async function sauvegarderEvenement() {
@@ -479,8 +508,10 @@ async function sauvegarderEvenement() {
       nom: getValue('admin-nom-event'),
       couleur_primaire: getValue('admin-couleur-primaire'),
       couleur_secondaire: getValue('admin-couleur-secondaire'),
+      media_accueil: getValue('admin-media-accueil') || null,
     },
   });
+  appliquerConfig();
   afficherStatut('Evenement sauvegarde', 'succes');
 }
 

frontend/js/app.js

@@ -33,8 +33,41 @@ function appliquerConfig() {
   toggleVisible('btn-imprimer', fonc.impression);
   toggleVisible('btn-email', fonc.email);
   toggleVisible('btn-qr', fonc.qr_code);
+
+  // Media d'accueil (video/gif en boucle)
+  appliquerMediaAccueil(event.media_accueil);
 }
 
+function appliquerMediaAccueil(media) {
+  const video = document.getElementById('accueil-video');
+  const gif = document.getElementById('accueil-gif');
+  const animDefaut = document.getElementById('accueil-animation-defaut');
+
+  // Reset
+  video.classList.add('cache');
+  gif.classList.add('cache');
+  video.pause();
+  video.src = '';
+  gif.src = '';
+
+  if (!media) {
+    // Pas de media, afficher l'animation par defaut
+    animDefaut.classList.remove('cache');
+    return;
+  }
+
+  animDefaut.classList.add('cache');
+  const ext = media.split('.').pop().toLowerCase();
+
+  if (ext === 'gif') {
+    gif.src = `/assets/animations/${media}`;
+    gif.classList.remove('cache');
+  } else {
+    video.src = `/assets/animations/${media}`;
+    video.classList.remove('cache');
+    video.play().catch(() => {});
+  }
+
 // --- Navigation ---
 
 function allerA(ecran) {