jules/photobooth
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Video custom : shoot des la fin de la video

Browse Source 
La video se joue integralement (peu importe la duree) et la
capture se declenche a l'instant exact ou elle se termine.
Plus de timeout arbitraire. Pour les GIF, duree detectee depuis
le nom du fichier (ex: countdown_5s.gif) sinon 3s par defaut.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jules
2026-03-21 23:32:31 +01:00
parent cbe514bb93
commit fe61be05e1
1 changed files with 19 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
frontend/js/camera.js
View File

@@ -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();