Videos didactiques multi-etapes : wizard operateur + admin dynamique

Backend : 8 endpoints API (upload/delete/reorder/toggle/label/stream/creer etape), stockage data/videos/{situation}/etape_XX.mp4, config.json toggle+labels, 6 situations par defaut, migration auto anciens fichiers flat. Admin : panneau dynamique avec toggle, etapes reordonnables, labels editables. Wizard booth : overlay plein ecran, video loop par etape, bouton validation sequentielle. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-07-12 20:41:05 +02:00
parent 5e482a89e7
commit 3aa3068127
4 changed files with 552 additions and 91 deletions
--- a/backend/main.py
+++ b/backend/main.py
@@ -1427,47 +1427,212 @@ async def _lancer_photostation():
    FLAG_PHOTOSTATION.unlink(missing_ok=True)


-# --- API Videos de situation ---
+# --- API Videos didactiques (multi-etapes) ---

 DOSSIER_VIDEOS = RACINE / "data" / "videos"
 DOSSIER_VIDEOS.mkdir(parents=True, exist_ok=True)
+FICHIER_VIDEOS_CONFIG = DOSSIER_VIDEOS / "config.json"
+
+SITUATIONS_DEFAUT = [
+    {"id": "montage", "label": "Montage / Mise en service"},
+    {"id": "demontage", "label": "Demontage"},
+    {"id": "bourrage", "label": "Bourrage imprimante"},
+    {"id": "changement_rouleau", "label": "Changement rouleau / ruban"},
+    {"id": "wifi", "label": "Probleme WiFi"},
+    {"id": "depannage_imprimante", "label": "Depannage imprimante"},
+]
+
+def charger_videos_config():
+    if FICHIER_VIDEOS_CONFIG.exists():
+        with open(FICHIER_VIDEOS_CONFIG) as f:
+            return json.load(f)
+    return {}
+
+def sauvegarder_videos_config(cfg):
+    with open(FICHIER_VIDEOS_CONFIG, "w") as f:
+        json.dump(cfg, f, indent=2, ensure_ascii=False)
+
+def _lister_etapes(situation: str):
+    dossier = DOSSIER_VIDEOS / situation
+    if not dossier.is_dir():
+        return []
+    fichiers = sorted(
+        [f for f in dossier.iterdir() if f.is_file() and f.suffix.lower() in ('.mp4', '.webm', '.mov')],
+        key=lambda f: f.name
+    )
+    return [{"index": i, "fichier": f.name} for i, f in enumerate(fichiers)]
+
+def _migrer_anciens_videos():
+    for f in DOSSIER_VIDEOS.iterdir():
+        if f.is_file() and f.suffix.lower() in ('.mp4', '.webm', '.mov'):
+            situation = f.stem
+            dossier = DOSSIER_VIDEOS / situation
+            dossier.mkdir(exist_ok=True)
+            dest = dossier / f"etape_00{f.suffix}"
+            f.rename(dest)
+
+_migrer_anciens_videos()
+

@app.get("/api/videos")
 async def api_videos():
-    videos = {}
-    for f in DOSSIER_VIDEOS.iterdir():
-        if f.is_file() and f.suffix.lower() in ('.mp4', '.webm', '.mov'):
-            videos[f.stem] = f.name
-    return {"videos": videos}
+    cfg = charger_videos_config()
+    result = {}
+    for sit in SITUATIONS_DEFAUT:
+        sid = sit["id"]
+        etapes = _lister_etapes(sid)
+        sit_cfg = cfg.get(sid, {})
+        result[sid] = {
+            "label": sit.get("label", sid),
+            "actif": sit_cfg.get("actif", False),
+            "etapes": etapes,
+            "labels_etapes": sit_cfg.get("labels_etapes", {}),
+        }
+    for sid in sorted(cfg.keys()):
+        if sid not in result:
+            etapes = _lister_etapes(sid)
+            result[sid] = {
+                "label": cfg[sid].get("label", sid),
+                "actif": cfg[sid].get("actif", False),
+                "etapes": etapes,
+                "labels_etapes": cfg[sid].get("labels_etapes", {}),
+            }
+    return {"situations": result}


-@app.post("/api/videos/upload")
-async def api_upload_video(video: UploadFile = File(...), situation: str = ""):
-    if not situation:
-        return JSONResponse({"erreur": "situation requise"}, 400)
-    ext = Path(video.filename).suffix.lower() or '.mp4'
-    dest = DOSSIER_VIDEOS / f"{situation}{ext}"
-    for old in DOSSIER_VIDEOS.glob(f"{situation}.*"):
-        old.unlink()
-    with open(dest, "wb") as f:
-        while chunk := await video.read(1024 * 1024):
-            f.write(chunk)
-    return {"ok": True, "fichier": dest.name}
-
-
-@app.delete("/api/videos/{situation}")
-async def api_delete_video(situation: str):
-    for f in DOSSIER_VIDEOS.glob(f"{situation}.*"):
-        f.unlink()
+@app.post("/api/videos/{situation}/toggle")
+async def api_toggle_situation(situation: str, req: Request):
+    body = await req.json()
+    cfg = charger_videos_config()
+    if situation not in cfg:
+        cfg[situation] = {}
+    cfg[situation]["actif"] = bool(body.get("actif", False))
+    sauvegarder_videos_config(cfg)
    return {"ok": True}


-@app.get("/api/videos/{situation}/stream")
-async def api_stream_video(situation: str):
-    for f in DOSSIER_VIDEOS.glob(f"{situation}.*"):
+@app.post("/api/videos/{situation}/upload")
+async def api_upload_etape(situation: str, video: UploadFile = File(...)):
+    dossier = DOSSIER_VIDEOS / situation
+    dossier.mkdir(parents=True, exist_ok=True)
+    existantes = sorted(dossier.glob("etape_*"))
+    prochain = len(existantes)
+    ext = Path(video.filename).suffix.lower() or '.mp4'
+    dest = dossier / f"etape_{prochain:02d}{ext}"
+    with open(dest, "wb") as f:
+        while chunk := await video.read(1024 * 1024):
+            f.write(chunk)
+    return {"ok": True, "fichier": dest.name, "index": prochain}
+
+
+@app.delete("/api/videos/{situation}/{index}")
+async def api_delete_etape(situation: str, index: int):
+    dossier = DOSSIER_VIDEOS / situation
+    if not dossier.is_dir():
+        return JSONResponse({"erreur": "situation introuvable"}, 404)
+    fichiers = sorted(
+        [f for f in dossier.iterdir() if f.is_file() and f.name.startswith("etape_")],
+        key=lambda f: f.name
+    )
+    if index < 0 or index >= len(fichiers):
+        return JSONResponse({"erreur": "index invalide"}, 400)
+    fichiers[index].unlink()
+    for i, f in enumerate(sorted(
+        [f for f in dossier.iterdir() if f.is_file() and f.name.startswith("etape_")],
+        key=lambda f: f.name
+    )):
+        nouveau = dossier / f"etape_{i:02d}{f.suffix}"
+        if f != nouveau:
+            f.rename(nouveau)
+    cfg = charger_videos_config()
+    sit_cfg = cfg.get(situation, {})
+    old_labels = sit_cfg.get("labels_etapes", {})
+    new_labels = {}
+    for k, v in old_labels.items():
+        ki = int(k)
+        if ki < index:
+            new_labels[str(ki)] = v
+        elif ki > index:
+            new_labels[str(ki - 1)] = v
+    if old_labels != new_labels:
+        sit_cfg["labels_etapes"] = new_labels
+        cfg[situation] = sit_cfg
+        sauvegarder_videos_config(cfg)
+    return {"ok": True}
+
+
+@app.post("/api/videos/{situation}/reorder")
+async def api_reorder_etapes(situation: str, req: Request):
+    body = await req.json()
+    old_idx = body.get("de")
+    new_idx = body.get("vers")
+    dossier = DOSSIER_VIDEOS / situation
+    if not dossier.is_dir():
+        return JSONResponse({"erreur": "situation introuvable"}, 404)
+    fichiers = sorted(
+        [f for f in dossier.iterdir() if f.is_file() and f.name.startswith("etape_")],
+        key=lambda f: f.name
+    )
+    if old_idx is None or new_idx is None or old_idx < 0 or old_idx >= len(fichiers):
+        return JSONResponse({"erreur": "index invalide"}, 400)
+    moved = fichiers.pop(old_idx)
+    fichiers.insert(new_idx, moved)
+    tmp_names = []
+    for i, f in enumerate(fichiers):
+        tmp = dossier / f"_tmp_{i:02d}{f.suffix}"
+        f.rename(tmp)
+        tmp_names.append(tmp)
+    for i, tmp in enumerate(tmp_names):
+        ext = tmp.suffix
+        final = dossier / f"etape_{i:02d}{ext}"
+        tmp.rename(final)
+    return {"ok": True}
+
+
+@app.post("/api/videos/{situation}/label")
+async def api_label_etape(situation: str, req: Request):
+    body = await req.json()
+    index = body.get("index")
+    label = body.get("label", "")
+    cfg = charger_videos_config()
+    if situation not in cfg:
+        cfg[situation] = {}
+    labels = cfg[situation].setdefault("labels_etapes", {})
+    labels[str(index)] = label
+    sauvegarder_videos_config(cfg)
+    return {"ok": True}
+
+
+@app.get("/api/videos/{situation}/{index}/stream")
+async def api_stream_etape(situation: str, index: int):
+    dossier = DOSSIER_VIDEOS / situation
+    if not dossier.is_dir():
+        return JSONResponse({"erreur": "situation introuvable"}, 404)
+    fichiers = sorted(
+        [f for f in dossier.iterdir() if f.is_file() and f.name.startswith("etape_")],
+        key=lambda f: f.name
+    )
+    if index < 0 or index >= len(fichiers):
+        return JSONResponse({"erreur": "index invalide"}, 404)
+    f = fichiers[index]
    media = "video/mp4" if f.suffix == ".mp4" else "video/webm"
    return FileResponse(f, media_type=media)
-    return JSONResponse({"erreur": "video introuvable"}, 404)
+
+
+@app.post("/api/videos/situation/creer")
+async def api_creer_situation(req: Request):
+    body = await req.json()
+    sid = body.get("id", "").strip().lower().replace(" ", "_")
+    label = body.get("label", sid)
+    if not sid:
+        return JSONResponse({"erreur": "id requis"}, 400)
+    cfg = charger_videos_config()
+    if sid not in cfg:
+        cfg[sid] = {"label": label, "actif": False, "labels_etapes": {}}
+        sauvegarder_videos_config(cfg)
+    dossier = DOSSIER_VIDEOS / sid
+    dossier.mkdir(parents=True, exist_ok=True)
+    return {"ok": True}


 # --- API Surprise ---
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -908,40 +908,21 @@
            Appuyer sur Tester...
          </div>
        <div class="admin-panneau" id="panneau-videos-admin">
-          <h3>Videos de situation</h3>
-          <p class="aide">Uploadez des videos pour chaque situation. Elles seront jouees automatiquement sur l'ecran du booth.</p>
-          <div class="video-situations" id="video-situations-liste">
-            <div class="video-situation-bloc" data-situation="montage">
-              <h4>Montage / Installation</h4>
-              <div class="video-situation-current" id="video-sit-montage">Aucune video</div>
-              <input type="file" id="input-video-montage" accept=".mp4,.webm,.mov" class="input-fichier">
-              <button class="btn-secondaire btn-petit" onclick="uploaderVideoSituation('montage')">Importer</button>
-              <button class="btn-danger btn-petit" onclick="supprimerVideoSituation('montage')">Supprimer</button>
-            </div>
-            <div class="video-situation-bloc" data-situation="depannage_imprimante">
-              <h4>Depannage imprimante</h4>
-              <div class="video-situation-current" id="video-sit-depannage_imprimante">Aucune video</div>
-              <input type="file" id="input-video-depannage_imprimante" accept=".mp4,.webm,.mov" class="input-fichier">
-              <button class="btn-secondaire btn-petit" onclick="uploaderVideoSituation('depannage_imprimante')">Importer</button>
-              <button class="btn-danger btn-petit" onclick="supprimerVideoSituation('depannage_imprimante')">Supprimer</button>
-            </div>
-            <div class="video-situation-bloc" data-situation="bourrage">
-              <h4>Bourrage papier</h4>
-              <div class="video-situation-current" id="video-sit-bourrage">Aucune video</div>
-              <input type="file" id="input-video-bourrage" accept=".mp4,.webm,.mov" class="input-fichier">
-              <button class="btn-secondaire btn-petit" onclick="uploaderVideoSituation('bourrage')">Importer</button>
-              <button class="btn-danger btn-petit" onclick="supprimerVideoSituation('bourrage')">Supprimer</button>
-            </div>
-            <div class="video-situation-bloc" data-situation="rechargement">
-              <h4>Rechargement papier/ruban</h4>
-              <div class="video-situation-current" id="video-sit-rechargement">Aucune video</div>
-              <input type="file" id="input-video-rechargement" accept=".mp4,.webm,.mov" class="input-fichier">
-              <button class="btn-secondaire btn-petit" onclick="uploaderVideoSituation('rechargement')">Importer</button>
-              <button class="btn-danger btn-petit" onclick="supprimerVideoSituation('rechargement')">Supprimer</button>
+          <h3>Videos didactiques</h3>
+          <p class="aide">Chaque situation peut contenir plusieurs etapes video. L'operateur verra les videos en sequence : chaque etape boucle jusqu'a validation avant de passer a la suivante.</p>
+          <div id="video-situations-liste"></div>
+          <div style="margin-top:1rem;padding:0.75rem;background:#1a1a2e;border-radius:8px;border:1px dashed #444">
+            <h4 style="margin:0 0 0.5rem">Ajouter une situation</h4>
+            <div style="display:flex;gap:0.5rem;align-items:center;flex-wrap:wrap">
+              <input type="text" id="nouvelle-situation-label" placeholder="Nom de la situation" style="flex:1;min-width:150px;padding:0.4rem 0.6rem;border-radius:6px;border:1px solid #555;background:#111;color:#fff">
+              <button class="btn-action btn-petit" onclick="creerSituation()">+ Ajouter</button>
            </div>
          </div>
          <h4 style="margin-top:1.5rem">Apercu</h4>
          <video id="video-situation-preview" style="width:100%;max-height:300px;border-radius:8px;background:#111" controls></video>
+          <div style="margin-top:1rem">
+            <button class="btn-action" onclick="lancerWizardDepuisAdmin()">&#9654; Tester le wizard sur le booth</button>
+          </div>
        </div>

        <div class="admin-panneau" id="panneau-surprise-admin">
@@ -981,6 +962,16 @@
      </div>
    </section>

+    <!-- Wizard video didactique plein ecran -->
+    <div id="wizard-video" class="popup-overlay cache" style="z-index:9999;background:rgba(0,0,0,0.97);display:flex;flex-direction:column;align-items:center;justify-content:center">
+      <div id="wizard-titre" style="color:#fff;font-size:1.8rem;font-weight:700;margin-bottom:0.3rem;text-align:center"></div>
+      <div id="wizard-etape-info" style="color:#aaa;font-size:1rem;margin-bottom:1rem"></div>
+      <video id="wizard-video-player" muted playsinline loop style="width:90%;max-height:65vh;border-radius:12px;background:#000"></video>
+      <div id="wizard-etape-label" style="color:#ccc;font-size:1.1rem;margin-top:0.8rem;text-align:center;min-height:1.5rem"></div>
+      <button id="wizard-btn-ok" onclick="wizardEtapeSuivante()" style="margin-top:1.5rem;padding:1.2rem 3rem;font-size:1.5rem;font-weight:700;border:none;border-radius:16px;background:#4caf50;color:#fff;cursor:pointer;min-width:280px">OK, c'est bon !</button>
+      <button onclick="fermerWizard()" style="margin-top:0.8rem;padding:0.6rem 1.5rem;font-size:0.9rem;border:none;border-radius:8px;background:#333;color:#aaa;cursor:pointer">Quitter</button>
+    </div>
+
    <!-- Popup sélection cadre impression -->
    <div id="popup-cadre-impression" class="popup-overlay cache">
      <div class="popup-box popup-box-cadre">
@@ -1066,6 +1057,6 @@
  <script src="/js/effects.js?v=4"></script>
  <script src="/js/gallery.js?v=4"></script>
  <script src="/js/share.js?v=8"></script>
-  <script src="/js/admin.js?v=11"></script>
+  <script src="/js/admin.js?v=12"></script>
 </body>
 </html>
--- a/frontend/js/admin.js
+++ b/frontend/js/admin.js
@@ -1487,63 +1487,273 @@ async function sauvegarderCapacites() {
  afficherStatut('Capacites sauvegardees', 'succes');
 }

-// === VIDEOS DE SITUATION ===
+// === VIDEOS DIDACTIQUES (multi-etapes) ===
+
+let _videosData = {};

 async function chargerVideosAdmin() {
  try {
    const data = await apiGet('/api/videos');
-    const situations = ['montage', 'depannage_imprimante', 'bourrage', 'rechargement'];
-    for (const sit of situations) {
-      const el = document.getElementById('video-sit-' + sit);
-      if (!el) continue;
-      const v = data.videos && data.videos[sit];
-      if (v) {
-        el.innerHTML = `<a href="#" onclick="previewVideoSituation('${sit}');return false">${_escHtml(v)}</a>`;
-      } else {
-        el.textContent = 'Aucune video';
-      }
+    _videosData = data.situations || {};
+    const container = document.getElementById('video-situations-liste');
+    if (!container) return;
+    container.innerHTML = '';
+    for (const [sid, sit] of Object.entries(_videosData)) {
+      container.appendChild(_creerBlocSituation(sid, sit));
    }
  } catch (e) {
    console.warn('Erreur chargement videos:', e);
  }
 }

-async function uploaderVideoSituation(situation) {
-  const input = document.getElementById('input-video-' + situation);
+function _creerBlocSituation(sid, sit) {
+  const bloc = document.createElement('div');
+  bloc.className = 'video-situation-bloc';
+  bloc.style.cssText = 'margin-bottom:1rem;padding:0.75rem;background:#1a1a2e;border-radius:8px;border:1px solid #333';
+  const header = document.createElement('div');
+  header.style.cssText = 'display:flex;align-items:center;gap:0.75rem;margin-bottom:0.5rem;flex-wrap:wrap';
+  const toggle = document.createElement('label');
+  toggle.className = 'toggle';
+  toggle.style.cssText = 'margin:0;flex-shrink:0';
+  const cb = document.createElement('input');
+  cb.type = 'checkbox';
+  cb.checked = !!sit.actif;
+  cb.onchange = () => toggleSituation(sid, cb.checked);
+  const slider = document.createElement('span');
+  slider.className = 'toggle-slider';
+  toggle.appendChild(cb);
+  toggle.appendChild(slider);
+  const titre = document.createElement('h4');
+  titre.style.cssText = 'margin:0;flex:1;font-size:0.95rem';
+  titre.textContent = sit.label || sid;
+  const nbEtapes = document.createElement('span');
+  nbEtapes.style.cssText = 'color:#888;font-size:0.8rem';
+  nbEtapes.textContent = `${(sit.etapes || []).length} etape(s)`;
+  header.appendChild(toggle);
+  header.appendChild(titre);
+  header.appendChild(nbEtapes);
+  bloc.appendChild(header);
+
+  const etapesDiv = document.createElement('div');
+  etapesDiv.style.cssText = 'margin-left:0.5rem';
+  (sit.etapes || []).forEach((etape, i) => {
+    const row = document.createElement('div');
+    row.style.cssText = 'display:flex;align-items:center;gap:0.5rem;margin-bottom:0.4rem;padding:0.3rem 0.5rem;background:#111;border-radius:6px';
+    const num = document.createElement('span');
+    num.style.cssText = 'color:#888;font-size:0.8rem;min-width:1.5rem';
+    num.textContent = `${i + 1}.`;
+    const labelEtape = document.createElement('input');
+    labelEtape.type = 'text';
+    labelEtape.placeholder = `Etape ${i + 1}`;
+    labelEtape.value = (sit.labels_etapes && sit.labels_etapes[String(i)]) || '';
+    labelEtape.style.cssText = 'flex:1;padding:0.2rem 0.4rem;border-radius:4px;border:1px solid #444;background:#1a1a2e;color:#fff;font-size:0.8rem';
+    labelEtape.onchange = () => labeliserEtape(sid, i, labelEtape.value);
+    const btnPlay = document.createElement('button');
+    btnPlay.className = 'btn-secondaire btn-petit';
+    btnPlay.textContent = '▶';
+    btnPlay.title = 'Apercu';
+    btnPlay.onclick = () => previewEtape(sid, i);
+    const btnUp = document.createElement('button');
+    btnUp.className = 'btn-secondaire btn-petit';
+    btnUp.textContent = '↑';
+    btnUp.disabled = i === 0;
+    btnUp.onclick = () => reordonnerEtape(sid, i, i - 1);
+    const btnDown = document.createElement('button');
+    btnDown.className = 'btn-secondaire btn-petit';
+    btnDown.textContent = '↓';
+    btnDown.disabled = i === (sit.etapes || []).length - 1;
+    btnDown.onclick = () => reordonnerEtape(sid, i, i + 1);
+    const btnDel = document.createElement('button');
+    btnDel.className = 'btn-danger btn-petit';
+    btnDel.textContent = '✕';
+    btnDel.onclick = () => supprimerEtape(sid, i);
+    row.appendChild(num);
+    row.appendChild(labelEtape);
+    row.appendChild(btnPlay);
+    row.appendChild(btnUp);
+    row.appendChild(btnDown);
+    row.appendChild(btnDel);
+    etapesDiv.appendChild(row);
+  });
+
+  const ajoutRow = document.createElement('div');
+  ajoutRow.style.cssText = 'display:flex;align-items:center;gap:0.5rem;margin-top:0.4rem';
+  const inputFile = document.createElement('input');
+  inputFile.type = 'file';
+  inputFile.accept = '.mp4,.webm,.mov';
+  inputFile.className = 'input-fichier';
+  inputFile.id = 'input-etape-' + sid;
+  inputFile.style.cssText = 'flex:1;font-size:0.75rem';
+  const btnAjout = document.createElement('button');
+  btnAjout.className = 'btn-secondaire btn-petit';
+  btnAjout.textContent = '+ Etape';
+  btnAjout.onclick = () => uploaderEtape(sid);
+  ajoutRow.appendChild(inputFile);
+  ajoutRow.appendChild(btnAjout);
+  etapesDiv.appendChild(ajoutRow);
+
+  bloc.appendChild(etapesDiv);
+  return bloc;
+}
+
+async function toggleSituation(sid, actif) {
+  try {
+    await fetch(`/api/videos/${sid}/toggle`, {
+      method: 'POST', headers: {'Content-Type': 'application/json'},
+      body: JSON.stringify({ actif })
+    });
+  } catch (e) {
+    afficherStatut('Erreur toggle', 'erreur');
+  }
+}
+
+async function uploaderEtape(sid) {
+  const input = document.getElementById('input-etape-' + sid);
  if (!input || !input.files.length) return;
  const fd = new FormData();
  fd.append('video', input.files[0]);
-  fd.append('situation', situation);
  try {
-    const resp = await fetch('/api/videos/upload', { method: 'POST', body: fd });
+    const resp = await fetch(`/api/videos/${sid}/upload`, { method: 'POST', body: fd });
    if (resp.ok) {
      input.value = '';
      chargerVideosAdmin();
-      afficherStatut('Video importee', 'succes');
+      afficherStatut('Etape ajoutee', 'succes');
    }
  } catch (e) {
-    afficherStatut('Erreur upload video', 'erreur');
+    afficherStatut('Erreur upload etape', 'erreur');
  }
 }

-async function supprimerVideoSituation(situation) {
+async function supprimerEtape(sid, index) {
  try {
-    await fetch('/api/videos/' + situation, { method: 'DELETE' });
+    await fetch(`/api/videos/${sid}/${index}`, { method: 'DELETE' });
    chargerVideosAdmin();
-    afficherStatut('Video supprimee', 'succes');
+    afficherStatut('Etape supprimee', 'succes');
  } catch (e) {
-    afficherStatut('Erreur suppression video', 'erreur');
+    afficherStatut('Erreur suppression', 'erreur');
  }
 }

-function previewVideoSituation(situation) {
+async function reordonnerEtape(sid, de, vers) {
+  try {
+    await fetch(`/api/videos/${sid}/reorder`, {
+      method: 'POST', headers: {'Content-Type': 'application/json'},
+      body: JSON.stringify({ de, vers })
+    });
+    chargerVideosAdmin();
+  } catch (e) {
+    afficherStatut('Erreur reorder', 'erreur');
+  }
+}
+
+async function labeliserEtape(sid, index, label) {
+  try {
+    await fetch(`/api/videos/${sid}/label`, {
+      method: 'POST', headers: {'Content-Type': 'application/json'},
+      body: JSON.stringify({ index, label })
+    });
+  } catch (e) {
+    console.warn('Erreur label etape:', e);
+  }
+}
+
+function previewEtape(sid, index) {
  const preview = document.getElementById('video-situation-preview');
  if (preview) {
-    preview.src = '/api/videos/' + situation + '/stream';
+    preview.src = `/api/videos/${sid}/${index}/stream`;
    preview.load();
+    preview.play();
  }
 }

+async function creerSituation() {
+  const input = document.getElementById('nouvelle-situation-label');
+  const label = (input && input.value || '').trim();
+  if (!label) return;
+  const id = label.toLowerCase().replace(/[^a-z0-9]+/g, '_').replace(/^_|_$/g, '');
+  try {
+    await fetch('/api/videos/situation/creer', {
+      method: 'POST', headers: {'Content-Type': 'application/json'},
+      body: JSON.stringify({ id, label })
+    });
+    input.value = '';
+    chargerVideosAdmin();
+    afficherStatut('Situation ajoutee', 'succes');
+  } catch (e) {
+    afficherStatut('Erreur creation situation', 'erreur');
+  }
+}
+
+// === WIZARD VIDEO DIDACTIQUE ===
+
+let _wizardSituation = null;
+let _wizardEtapes = [];
+let _wizardIndex = 0;
+
+async function lancerWizard(situationId) {
+  const data = await apiGet('/api/videos');
+  const sit = (data.situations || {})[situationId];
+  if (!sit || !sit.etapes || sit.etapes.length === 0) {
+    afficherStatut('Aucune etape pour cette situation', 'erreur');
+    return;
+  }
+  _wizardSituation = { id: situationId, ...sit };
+  _wizardEtapes = sit.etapes;
+  _wizardIndex = 0;
+  _afficherEtapeWizard();
+  document.getElementById('wizard-video').classList.remove('cache');
+}
+
+function _afficherEtapeWizard() {
+  const titre = document.getElementById('wizard-titre');
+  const info = document.getElementById('wizard-etape-info');
+  const video = document.getElementById('wizard-video-player');
+  const label = document.getElementById('wizard-etape-label');
+  const btn = document.getElementById('wizard-btn-ok');
+  titre.textContent = _wizardSituation.label || _wizardSituation.id;
+  info.textContent = `Etape ${_wizardIndex + 1} / ${_wizardEtapes.length}`;
+  const etapeLabel = (_wizardSituation.labels_etapes || {})[String(_wizardIndex)] || '';
+  label.textContent = etapeLabel;
+  video.src = `/api/videos/${_wizardSituation.id}/${_wizardIndex}/stream`;
+  video.load();
+  video.play();
+  if (_wizardIndex === _wizardEtapes.length - 1) {
+    btn.textContent = 'Terminer ✓';
+    btn.style.background = '#2196f3';
+  } else {
+    btn.textContent = "OK, c'est bon !";
+    btn.style.background = '#4caf50';
+  }
+}
+
+function wizardEtapeSuivante() {
+  _wizardIndex++;
+  if (_wizardIndex >= _wizardEtapes.length) {
+    fermerWizard();
+    return;
+  }
+  _afficherEtapeWizard();
+}
+
+function fermerWizard() {
+  const overlay = document.getElementById('wizard-video');
+  const video = document.getElementById('wizard-video-player');
+  if (video) { video.pause(); video.src = ''; }
+  overlay.classList.add('cache');
+  _wizardSituation = null;
+  _wizardEtapes = [];
+  _wizardIndex = 0;
+}
+
+function lancerWizardDepuisAdmin() {
+  const actives = Object.entries(_videosData).filter(([_, s]) => s.actif && s.etapes && s.etapes.length > 0);
+  if (actives.length === 0) {
+    afficherStatut('Aucune situation active avec des etapes', 'erreur');
+    return;
+  }
+  lancerWizard(actives[0][0]);
+}
+
 // === SURPRISE (photo/video avant capture) ===

 async function chargerSurpriseConfig() {
--- a/memoire.md
+++ b/memoire.md
@@ -99,10 +99,9 @@ Utilisateurs finaux = novices (événementiel). Erreurs imprimante : prévoir gu

 ---

-## URGENT — VPN booth en panne (2026-07-04)
+## VPN booth (2026-07-04)

-Booth sur WiFi externe, tunnel WG ne connecte pas même après reboot. Dernier handshake : 6+ jours.
-Cause probable : wg-quick@wg0 pas enabled au boot, ou Endpoint pointe vers IP locale.
+Tunnel WG a eu une panne le 04/07. Cause probable : wg-quick@wg0 pas enabled au boot, ou Endpoint IP locale.

 ### Procédure fix (clavier USB temporaire)

@@ -111,10 +110,6 @@ Cause probable : wg-quick@wg0 pas enabled au boot, ou Endpoint pointe vers IP lo
 3. `sudo systemctl enable wg-quick@wg0 && sudo systemctl restart wg-quick@wg0`
 4. Installer watchdog + reverse SSH — voir PROCEDURE_VPN_FIX.md

-### Commits non déployés sur Surface
- Flash blanc capture + printer toast CSS + admin galerie + compteur copies
- Déployer : `cd ~/photobooth && git pull && kill $(pgrep -f 'python -m backend.main')`
-
 ---

 ## LXC 111 — booth.copydev.fr (état au 2026-07-04)
@@ -160,6 +155,106 @@ Backup local des fichiers modifiés : `lxc111_backup/` dans ce dossier projet.
 ### Compteur photos
 - `distribuer_photo()` accepte paramètre `copies` et incrémente par ce nombre (pas toujours +1)

+---
+
+## Historique développement (juin-juillet 2026)
+
+### Kiosk & production (3-4 juin)
+- Kiosk boucle infinie : backend + Chromium relancés automatiquement, plus d'écran login
+- Impression Mitsubishi K60 + cadres + interface admin distante
+- Chromium : désactivation Translate (--lang=fr + prefs FR), meta notranslate
+- Verrou instance unique kiosk (anti-clignotement)
+- Intégration station d'impression photo (photostation) — popup accueil
+- USB automount avec udiskie dans kiosk-session
+- Détection USB 2 niveaux /media/<user>/<label> + filtre fstype
+- Cadres : choix avec zoom 2.5x + fond photo simulé
+
+### Caméra & preview (5-10 juin)
+- Viewfinder permanent + preview live pendant compte à rebours
+- Fix preview + miroir : thread continu, grace period, lock gphoto2
+- Fix caméra : kill gvfsd-gphoto2, race condition viewfinder, exif_transpose
+- Fix strip K60 coupe auto, diagnostic preview
+- Caméra déconnectée : retour accueil automatique + abort capture
+- Bullet-proof caméra : reconnexion auto + fix crash capture + AF LiveView
+- Capture : viewfinder=0 avant prise (AF phase-détection), timeout 20s, spinner UI
+- surveiller_dslr : reset USB auto après 3 échecs → retiré (contre-productif)
+- Fix preview live : position:absolute sur img
+- Remote debugging Chromium port 9222
+- Kiosk : git pull auto + diagnostic caméra dans admin
+
+### Imprimante & impression (4-23 juin)
+- Statut détaillé imprimante + message erreur CUPS traduit
+- Bandeau erreur imprimante tous écrans + reset USB
+- Bouton Couper papier (micro-job blanc déclenche le cutter K60)
+- Cadres : preview coin haut-gauche + compteur bloque impression pas capture
+- Pellicule : marge de coupe plus large + warmup LiveView après capture
+- Fix impression pellicule (portrait vs paysage, taille pleine, rotation)
+- Cadre de visée live correspondant au recadrage final pellicule/collage
+- Calibration impression : offsets coupe (mm) + rotation 180° configurable
+- Fix impression paysage : inverser largeur/hauteur
+
+### DSLR robustesse (21-28 juin)
+- Flash Canon configurable dans admin
+- DSLR anti-veille : autopoweroff Canon + udev no-autosuspend
+- Keepalive Canon : get_config() toutes les 10s quand preview KO
+- DSLR auto-recovery : USB reset + cadre overlay non-mirroré
+- USB rebind Canon : unbind/rebind sysfs pour recovery hard PTP freeze
+- Escalade recovery : uhubctl power cycle + backoff 60s après 10 échecs
+- Viewfinder off avant capture pour AF phase-detect
+- Viewfinder warmup en arrière-plan (accélération capture)
+
+### Email (22 juin)
+- Email plein écran avec suggestions d'adresses précédentes
+- Fermer formulaire avant envoi + raccourcis domaines FR
+- Email spool : file d'attente quand envoi échoue, retry 60s
+- Spool envoi au démarrage uniquement, message "dans la semaine"
+- Rapport email à contact@copydev.fr après vidage du spool
+
+### Événements & galerie (22-23 juin)
+- Galerie booth : QR avec auto-login, event_id aléatoire, flyer imprimable
+- Admin : galerie en ligne dans Destinations + booth envoie toutes les photos
+- Gestion événements + cadres par event + fix cadre paysage + dossier non-imprimées
+- Thème Viking Celte : bois sculpté, bronze, entrelacs
+- Cadre imposé visible en overlay sur live + preview + partage
+- Formats activables par événement + cadre imposé exclut strips
+- Lien galerie événement dans admin
+
+### Résilience & réseau (26-27 juin)
+- Écran pause, reconnexion WS auto, watchdog systemd, WiFi monitor
+- Admin WiFi : scan réseaux, connexion, mots de passe mémorisés
+- Kiosk : flag maintenance + anti-doublon backend
+- Watchdog systemd + fix stabilité kiosk/backend
+- QR code par photo : popup QR dynamique + page vue photo sur booth
+- Fix QR code URL (routes publiques /g/)
+- Fix QR après photo : corriger share.js qui écrasait afficherQR()
+- Masquer popup QR à chaque changement d'écran
+- Supprimer le timeout auto-retour du menu admin
+
+### Admin galerie & copies (30 juin)
+- Admin galerie + compteur copies + flash capture + erreur imprimante toast
+- Bump cache versions (style v12, camera v17, gallery v4)
+
+### Admin backoffice (9 juillet)
+- Rubriques Général / Événement dans admin
+- Vidéos situation (tutoriels visuels)
+- Mode surprise
+- Rembobinage ruban (instruction Mitsubishi)
+
+### Suivi consommables (12 juillet)
+- Compteur papier, ruban et photos avec diagnostic ratio
+- Compteur poses perdues + ratio corrigé 0.5 (10 poses par feuille, 20 feuilles par rouleau)
+
+---
+
+## Commits non pushés (au 12 juillet 2026)
+
+3 commits en avance sur origin/main :
+- `5e482a8` Consommables : poses perdues + ratio 0.5
+- `3b6f376` Suivi consommables : compteur papier/ruban/photos + diagnostic
+- `44a9992` Admin backoffice : rubriques + vidéos + surprise + rembobinage
+
+---
+
 ## Tâches Trello du projet

 - [📋 À faire] faire essaie avec mon dslr et imprimante ricoh et installer sur ecran tactile terra