From 77b1127816a065d25898b194e6ead8dc48c7a7e7 Mon Sep 17 00:00:00 2001
From: Jules <contact@copydev.fr>
Date: Tue, 23 Jun 2026 00:36:57 +0200
Subject: [PATCH] Cadre impose visible en overlay sur live + preview + partage

- Overlay cadre sur les 3 ecrans : live (capture), preview (filtres), partage
- chargerCadreImpose() au debut de chaque capture : affiche le cadre event
- Photos sauvegardees sans cadre, cadre applique uniquement a l'impression
- afficherCadreOverlay cherche d'abord dans les cadres evenement

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/css/style.css |  1 +
 frontend/index.html    |  8 +++++---
 frontend/js/camera.js  | 16 ++++++++++++++++
 frontend/js/effects.js | 28 ++++++++++++++++++++++------
 4 files changed, 44 insertions(+), 9 deletions(-)
diff --git a/frontend/css/style.css b/frontend/css/style.css
index 4ca3149..4510896 100644
--- a/frontend/css/style.css
+++ b/frontend/css/style.css
@@ -574,6 +574,7 @@ html, body {
   align-items: center;
   justify-content: center;
   overflow: hidden;
+  position: relative;
 }
 
 .photo-miniature img {
diff --git a/frontend/index.html b/frontend/index.html
index a4e4b97..9a4894b 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -7,7 +7,7 @@
   <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
   <meta name="google" content="notranslate">
   <meta http-equiv="Content-Language" content="fr">
-  <link rel="stylesheet" href="/css/style.css?v=6">
+  <link rel="stylesheet" href="/css/style.css?v=7">
   <link rel="stylesheet" href="/css/themes.css?v=2">
 </head>
 <body>
@@ -86,6 +86,7 @@
     <section id="ecran-capture" class="ecran">
       <div id="preview-live" class="preview-live">
         <img id="img-preview" src="" alt="Preview">
+        <img id="cadre-overlay-live" class="cadre-overlay cache" src="" alt="">
         <div id="cadre-guide-recadrage" class="cadre-guide-recadrage cache"></div>
         <div id="preview-erreur-camera" class="preview-erreur-camera cache">
           <div class="preview-erreur-icon">&#128247;</div>
@@ -129,6 +130,7 @@
       <h2>Partagez votre photo !</h2>
       <div class="photo-miniature">
         <img id="photo-partage" src="" alt="Photo">
+        <img id="cadre-overlay-partage" class="cadre-overlay cache" src="" alt="">
       </div>
       <div class="grille-partage">
         <button class="btn-partage" id="btn-imprimer" onclick="ouvrirImpression()">
@@ -759,8 +761,8 @@
 
   <script src="/js/websocket.js?v=3"></script>
   <script src="/js/app.js?v=5"></script>
-  <script src="/js/camera.js?v=11"></script>
-  <script src="/js/effects.js?v=3"></script>
+  <script src="/js/camera.js?v=12"></script>
+  <script src="/js/effects.js?v=4"></script>
   <script src="/js/gallery.js?v=3"></script>
   <script src="/js/share.js?v=7"></script>
   <script src="/js/admin.js?v=6"></script>
diff --git a/frontend/js/camera.js b/frontend/js/camera.js
index 4133ee4..9c0fdd5 100644
--- a/frontend/js/camera.js
+++ b/frontend/js/camera.js
@@ -185,6 +185,7 @@ async function lancerCapture() {
   document.getElementById('photo-resultat').src = '';
   document.getElementById('photo-partage').src = '';
 
+  await chargerCadreImpose();
   majCompteurAccueil();
 
   // Verifier l'etat de la camera avant de commencer
@@ -435,6 +436,21 @@ async function majBoutonImprimerCompteur() {
   }
 }
 
+async function chargerCadreImpose() {
+  const fmt = (config.impression?.format || '15x20').replace('-2up', '');
+  const data = await apiGet(`/api/cadres-impression/${fmt}`).catch(() => null);
+  if (!data) { afficherCadreOverlay(null); return; }
+  if (data.event_mode === 'impose' && data.event_cadre) {
+    cadreChoisi = data.event_cadre;
+    afficherCadreOverlay(cadreChoisi);
+  } else if (data.event_mode === 'defaut' && data.event_cadre) {
+    cadreChoisi = data.event_cadre;
+    afficherCadreOverlay(cadreChoisi);
+  } else {
+    afficherCadreOverlay(null);
+  }
+}
+
 function pause(ms) {
   return new Promise(resolve => setTimeout(resolve, ms));
 }
diff --git a/frontend/js/effects.js b/frontend/js/effects.js
index fb42c6f..f8e5935 100644
--- a/frontend/js/effects.js
+++ b/frontend/js/effects.js
@@ -78,17 +78,33 @@ async function appliquerFiltreStrip(filtre) {
 }
 
 function afficherCadreOverlay(nom) {
-  const el = document.getElementById('cadre-overlay-preview');
-  if (!el) return;
+  const ids = ['cadre-overlay-preview', 'cadre-overlay-live', 'cadre-overlay-partage'];
   if (!nom) {
-    el.classList.add('cache');
-    el.src = '';
+    ids.forEach(id => {
+      const el = document.getElementById(id);
+      if (el) { el.classList.add('cache'); el.src = ''; }
+    });
     return;
   }
   const config_imp = config.impression || {};
   const fmt = (config_imp.format || '15x20').replace('-2up', '');
-  el.src = `/assets/cadres/${fmt}/${nom}`;
-  el.classList.remove('cache');
+  const event_id = (config.evenement || {}).event_id;
+  let src = `/assets/cadres/${fmt}/${nom}`;
+  if (event_id) {
+    const eventSrc = `/data/evenements/${event_id}/cadres/${fmt}/${nom}`;
+    src = eventSrc;
+  }
+  ids.forEach(id => {
+    const el = document.getElementById(id);
+    if (el) {
+      el.src = src;
+      el.onerror = () => {
+        el.src = `/assets/cadres/${fmt}/${nom}`;
+        el.onerror = null;
+      };
+      el.classList.remove('cache');
+    }
+  });
 }
 
 async function chargerOverlays() {
