diff --git a/frontend/js/camera.js b/frontend/js/camera.js index dc22268..ee703eb 100644 --- a/frontend/js/camera.js +++ b/frontend/js/camera.js @@ -99,8 +99,9 @@ async function compteARebours() { const anim = choisirAnimationAleatoire(); if (anim.type === 'custom') { - // Jouer une video/gif en plein ecran - await jouerAnimationCustom(anim.nom, duree); + // Jouer la video/gif en plein ecran, shoot des qu'elle finit + await jouerAnimationCustom(anim.nom); + return; // pas de compte a rebours CSS } else { // Animation CSS classique conteneur.classList.remove('cache'); @@ -123,7 +124,7 @@ async function compteARebours() { } } -async function jouerAnimationCustom(nom, duree) { +async function jouerAnimationCustom(nom) { // Creer un overlay plein ecran pour la video/gif const overlay = document.createElement('div'); overlay.className = 'video-countdown-overlay'; @@ -132,24 +133,31 @@ async function jouerAnimationCustom(nom, duree) { if (ext === 'gif') { const img = document.createElement('img'); - img.src = `/assets/animations/${nom}`; + // Ajouter un timestamp pour forcer le rechargement (relancer le GIF depuis le debut) + img.src = `/assets/animations/${nom}?t=${Date.now()}`; overlay.appendChild(img); document.body.appendChild(overlay); - await pause(duree * 1000); + + // Pour un GIF, on attend sa duree naturelle + // Comme on ne peut pas detecter la fin d'un GIF, on utilise un fallback de 3s + // L'utilisateur peut configurer la duree dans le nom du fichier (ex: countdown_5s.gif) + const match = nom.match(/(\d+)s/); + const dureeGif = match ? parseInt(match[1]) * 1000 : 3000; + await pause(dureeGif); } else { + // Video MP4/WebM : on attend la fin exacte de la video const video = document.createElement('video'); video.src = `/assets/animations/${nom}`; video.muted = true; video.playsInline = true; - video.autoplay = true; overlay.appendChild(video); document.body.appendChild(overlay); - // Attendre la fin de la video ou le timeout - await Promise.race([ - new Promise(resolve => { video.onended = resolve; }), - pause(duree * 1000 + 2000), - ]); + await new Promise(resolve => { + video.onended = resolve; + video.onerror = resolve; + video.play().catch(resolve); + }); } overlay.remove();