Update app.py

app.py

@@ -1,8 +1,8 @@
-# app.py — Video Editor API (v0.5.10)
-# v0.5.10:
-# - Accepte deux jeux d'ENV: (BACKEND_POINTER_URL/BACKEND_BASE_URL) OU (POINTER_URL/FALLBACK_BASE)
-# - Ajout /_ping et /_env pour diagnostic rapide (sans mots interdits)
-# - Reste identique côté API/UI
+# app.py — Video Editor API (v0.5.9)
+# v0.5.9:
+# - Centrages "Aller à #" / "Frame #" 100% fiables (attend rendu + image chargée)
+# - /mask, /mask/rename, /mask/delete : Body(...) explicite => plus de 422 silencieux
+# - Bouton "Enregistrer masque" : erreurs visibles (alert) si l’API ne répond pas OK
 
 from fastapi import FastAPI, UploadFile, File, HTTPException, Request, Body, Response
 from fastapi.responses import HTMLResponse, FileResponse, RedirectResponse
@@ -18,32 +18,25 @@ import shutil as _shutil
 import os
 import httpx
 
-# Supporte tes anciens noms d'ENV ET les nouveaux :
-POINTER_URL = (
-    os.getenv("BACKEND_POINTER_URL")
-    or os.getenv("POINTER_URL")
-    or ""
-).strip()
-
-FALLBACK_BASE = (
-    os.getenv("BACKEND_BASE_URL")
-    or os.getenv("FALLBACK_BASE")
-    or "http://127.0.0.1:8765"
-).strip()
+POINTER_URL = os.getenv("BACKEND_POINTER_URL", "").strip()
+FALLBACK_BASE = os.getenv("BACKEND_BASE_URL", "http://127.0.0.1:8765").strip()
 
 _backend_url_cache = {"url": None, "ts": 0.0}
 
 def get_backend_base() -> str:
     """
     Renvoie l'URL du backend.
-    - Si un pointeur d'URL est défini (fichier texte externe contenant l’URL publique courante),
-      on lit le contenu et on le met en cache 30 s.
-    - Sinon on utilise FALLBACK_BASE.
+    - Si BACKEND_POINTER_URL est défini (lien vers un petit fichier texte contenant
+      l’URL publique actuelle du backend), on lit le contenu et on le met en cache 30 s.
+    - Sinon on utilise FALLBACK_BASE (par défaut 127.0.0.1:8765).
     """
     try:
         if POINTER_URL:
             now = time.time()
-            need_refresh = (not _backend_url_cache["url"] or now - _backend_url_cache["ts"] > 30)
+            need_refresh = (
+                not _backend_url_cache["url"] or
+                now - _backend_url_cache["ts"] > 30
+            )
             if need_refresh:
                 r = httpx.get(POINTER_URL, timeout=5)
                 url = (r.text or "").strip()
@@ -58,10 +51,10 @@ def get_backend_base() -> str:
         return FALLBACK_BASE
 # ---------------------------------------------------------------------------
 print("[BOOT] Video Editor API starting…")
-print(f"[BOOT] POINTER_URL={'(set)' if POINTER_URL else '(unset)'}")
+print(f"[BOOT] POINTER_URL={POINTER_URL or '(unset)'}")
 print(f"[BOOT] FALLBACK_BASE={FALLBACK_BASE}")
 
-app = FastAPI(title="Video Editor API", version="0.5.10")
+app = FastAPI(title="Video Editor API", version="0.5.9")
 
 DATA_DIR = Path("/app/data")
 THUMB_DIR = DATA_DIR / "_thumbs"
@@ -72,7 +65,7 @@ for p in (DATA_DIR, THUMB_DIR, MASK_DIR):
 app.mount("/data", StaticFiles(directory=str(DATA_DIR)), name="data")
 app.mount("/thumbs", StaticFiles(directory=str(THUMB_DIR)), name="thumbs")
 
-# --- PROXY (pas de CORS côté navigateur) -------------------------------------
+# --- PROXY VERS LE BACKEND (pas de CORS côté navigateur) --------------------
 @app.api_route("/p/{full_path:path}", methods=["GET","POST","PUT","PATCH","DELETE","OPTIONS"])
 async def proxy_all(full_path: str, request: Request):
     base = get_backend_base().rstrip("/")
@@ -126,9 +119,14 @@ def _meta(video: Path):
     return {"frames": frames, "fps": fps, "w": w, "h": h}
 
 def _frame_jpg(video: Path, idx: int) -> Path:
+    """
+    Crée (si besoin) et renvoie le chemin de la miniature d'index idx.
+    Utilise FFmpeg pour seek rapide si disponible, sinon OpenCV.
+    """
     out = THUMB_DIR / f"f_{video.stem}_{idx}.jpg"
     if out.exists():
         return out
+
     if _has_ffmpeg():
         m = _meta(video) or {"fps": 30.0}
         fps = float(m.get("fps") or 30.0) or 30.0
@@ -147,6 +145,8 @@ def _frame_jpg(video: Path, idx: int) -> Path:
             return out
         except subprocess.CalledProcessError as e:
             print(f"[FRAME:FFMPEG] seek fail t={t:.4f} idx={idx}: {e}", file=sys.stdout)
+            # fallback OpenCV
+
     cap = cv2.VideoCapture(str(video))
     if not cap.isOpened():
         print(f"[FRAME] Cannot open video for frames: {video}", file=sys.stdout)
@@ -163,6 +163,7 @@ def _frame_jpg(video: Path, idx: int) -> Path:
     if not ok or img is None:
         print(f"[FRAME] Cannot read idx={idx} for: {video}", file=sys.stdout)
         raise HTTPException(500, "Impossible de lire la frame demandée.")
+    # Redimension (≈320 px)
     h, w = img.shape[:2]
     if w > 320:
         new_w = 320
@@ -202,6 +203,11 @@ def _save_masks(vid: str, data: Dict[str, Any]):
     _mask_file(vid).write_text(json.dumps(data, ensure_ascii=False, indent=2), encoding="utf-8")
 
 def _gen_thumbs_background(video: Path, vid_stem: str):
+    """
+    Génère toutes les vignettes en arrière-plan :
+    - Si FFmpeg dispo : ultra rapide (décode en continu, écrit f_<stem>_%d.jpg)
+    - Sinon : OpenCV optimisé (lecture séquentielle, redimensionnement CPU)
+    """
     progress_data[vid_stem] = {'percent': 0, 'logs': [], 'done': False}
     try:
         m = _meta(video)
@@ -214,6 +220,8 @@ def _gen_thumbs_background(video: Path, vid_stem: str):
             progress_data[vid_stem]['logs'].append("Aucune frame détectée")
             progress_data[vid_stem]['done'] = True
             return
+
+        # Nettoyer d’anciennes thumbs du même stem
         for f in THUMB_DIR.glob(f"f_{video.stem}_*.jpg"):
             f.unlink(missing_ok=True)
 
@@ -229,6 +237,7 @@ def _gen_thumbs_background(video: Path, vid_stem: str):
             ]
             progress_data[vid_stem]['logs'].append("FFmpeg: génération en cours…")
             proc = subprocess.Popen(cmd)
+
             last_report = -1
             while proc.poll() is None:
                 generated = len(list(THUMB_DIR.glob(f"f_{video.stem}_*.jpg")))
@@ -238,12 +247,14 @@ def _gen_thumbs_background(video: Path, vid_stem: str):
                     progress_data[vid_stem]['logs'].append(f"Gen {generated}/{total_frames}")
                     last_report = generated
                 time.sleep(0.4)
+
             proc.wait()
             generated = len(list(THUMB_DIR.glob(f"f_{video.stem}_*.jpg")))
             progress_data[vid_stem]['percent'] = 100
             progress_data[vid_stem]['logs'].append("OK FFmpeg: {}/{} thumbs".format(generated, total_frames))
             progress_data[vid_stem]['done'] = True
             print(f"[PRE-GEN:FFMPEG] {generated} thumbs for {video.name}", file=sys.stdout)
+
         else:
             progress_data[vid_stem]['logs'].append("OpenCV (FFmpeg non dispo) : génération…")
             cap = cv2.VideoCapture(str(video))
@@ -258,6 +269,7 @@ def _gen_thumbs_background(video: Path, vid_stem: str):
                 if not ok or img is None:
                     break
                 out = THUMB_DIR / f"f_{video.stem}_{idx}.jpg"
+                # Redimension léger (≈320 px de large)
                 h, w = img.shape[:2]
                 if w > 320:
                     new_w = 320
@@ -275,6 +287,7 @@ def _gen_thumbs_background(video: Path, vid_stem: str):
             progress_data[vid_stem]['logs'].append(f"OK OpenCV: {idx}/{total_frames} thumbs")
             progress_data[vid_stem]['done'] = True
             print(f"[PRE-GEN:CV2] {idx} thumbs for {video.name}", file=sys.stdout)
+
     except Exception as e:
         progress_data[vid_stem]['logs'].append(f"Erreur: {e}")
         progress_data[vid_stem]['done'] = True
@@ -284,29 +297,13 @@ def _gen_thumbs_background(video: Path, vid_stem: str):
 def root():
     return {
         "ok": True,
-        "routes": ["/", "/health", "/files", "/upload", "/meta/{vid}", "/frame_idx", "/poster/{vid}", "/window/{vid}", "/mask", "/mask/{vid}", "/mask/rename", "/mask/delete", "/progress/{vid_stem}", "/ui", "/_ping", "/_env"]
+        "routes": ["/", "/health", "/files", "/upload", "/meta/{vid}", "/frame_idx", "/poster/{vid}", "/window/{vid}", "/mask", "/mask/{vid}", "/mask/rename", "/mask/delete", "/progress/{vid_stem}", "/ui"]
     }
 
 @app.get("/health", tags=["meta"])
 def health():
     return {"status": "ok"}
 
-# Diagnostics simples (pour vérifier conteneur & ENV)
-@app.get("/_ping", tags=["meta"])
-def ping():
-    return {"ok": True, "ts": time.time()}
-
-@app.get("/_env", tags=["meta"])
-def env_info():
-    # On n’expose pas les secrets, juste des infos utiles
-    resolved = get_backend_base()
-    return {
-        "pointer_set": bool(POINTER_URL),
-        "pointer_url_length": len(POINTER_URL or ""),
-        "fallback_base": FALLBACK_BASE,
-        "resolved_base": resolved
-    }
-
 @app.get("/files", tags=["io"])
 def files():
     items = [p.name for p in sorted(DATA_DIR.glob("*")) if _is_video(p)]
@@ -414,9 +411,797 @@ def window(vid: str, center: int = 0, count: int = 21):
     print(f"[WINDOW] {vid} start={start} n={n} sel={sel} frames={frames}", file=sys.stdout)
     return {"vid": vid, "start": start, "count": n, "selected": sel, "items": items, "frames": frames}
 
+# ----- Masques -----
+@app.post("/mask", tags=["mask"])
+async def save_mask(payload: Dict[str, Any] = Body(...)):
+    vid = payload.get("vid")
+    if not vid:
+        raise HTTPException(400, "vid manquant")
+    pts = payload.get("points") or []
+    if len(pts) != 4:
+        raise HTTPException(400, "points rect (x1,y1,x2,y2) requis")
+    data = _load_masks(vid)
+    m = {
+        "id": uuid.uuid4().hex[:10],
+        "time_s": float(payload.get("time_s") or 0.0),
+        "frame_idx": int(payload.get("frame_idx") or 0),
+        "shape": "rect",
+        "points": [float(x) for x in pts],
+        "color": payload.get("color") or "#10b981",
+        "note": payload.get("note") or ""
+    }
+    data.setdefault("masks", []).append(m)
+    _save_masks(vid, data)
+    print(f"[MASK] save {vid} frame={m['frame_idx']} note={m['note']}", file=sys.stdout)
+    return {"saved": True, "mask": m}
+
+@app.get("/mask/{vid}", tags=["mask"])
+def list_masks(vid: str):
+    return _load_masks(vid)
+
+@app.post("/mask/rename", tags=["mask"])
+async def rename_mask(payload: Dict[str, Any] = Body(...)):
+    vid = payload.get("vid")
+    mid = payload.get("id")
+    new_note = (payload.get("note") or "").strip()
+    if not vid or not mid:
+        raise HTTPException(400, "vid et id requis")
+    data = _load_masks(vid)
+    for m in data.get("masks", []):
+        if m.get("id") == mid:
+            m["note"] = new_note
+            _save_masks(vid, data)
+            return {"ok": True}
+    raise HTTPException(404, "Masque introuvable")
+
+@app.post("/mask/delete", tags=["mask"])
+async def delete_mask(payload: Dict[str, Any] = Body(...)):
+    vid = payload.get("vid")
+    mid = payload.get("id")
+    if not vid or not mid:
+        raise HTTPException(400, "vid et id requis")
+    data = _load_masks(vid)
+    data["masks"] = [m for m in data.get("masks", []) if m.get("id") != mid]
+    _save_masks(vid, data)
+    return {"ok": True}
+
 # ---------- UI ----------
-HTML_TEMPLATE = r"""(… tout le HTML/JS de ton UI identique à ta version 0.5.9 …)"""
-# Pour gagner de la place ici, garde exactement ton HTML_TEMPLATE 0.5.9 précédent.
+HTML_TEMPLATE = r"""
+<!doctype html>
+<html lang="fr"><meta charset="utf-8">
+<title>Video Editor</title>
+<style>
+ :root{--b:#e5e7eb;--muted:#64748b; --controlsH:44px; --active-bg:#dbeafe; --active-border:#2563eb;}
+ *{box-sizing:border-box}
+ body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial;margin:16px;color:#111}
+ h1{margin:0 0 8px 0}
+ .topbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
+ .card{border:1px solid var(--b);border-radius:12px;padding:10px;background:#fff}
+ .muted{color:var(--muted);font-size:13px}
+ .layout{display:grid;grid-template-columns:1fr 320px;gap:14px;align-items:start}
+ .viewer{max-width:1024px;margin:0 auto; position:relative}
+ .player-wrap{position:relative; padding-bottom: var(--controlsH);}
+ video{display:block;width:100%;height:auto;max-height:58vh;border-radius:10px;box-shadow:0 0 0 1px #ddd}
+ #editCanvas{position:absolute;left:0;right:0;top:0;bottom:var(--controlsH);border-radius:10px;pointer-events:none}
+ .timeline-container{margin-top:10px}
+ .timeline{position:relative;display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;overflow-y:hidden;padding:6px;border:1px solid var(--b);border-radius:10px;-webkit-overflow-scrolling:touch;width:100%}
+ .thumb{flex:0 0 auto;display:inline-block;position:relative;transition:transform 0.2s;text-align:center}
+ .thumb:hover{transform:scale(1.05)}
+ .thumb img{height:var(--thumbH,110px);display:block;border-radius:6px;cursor:pointer;border:2px solid transparent;object-fit:cover}
+ .thumb img.sel{border-color:var(--active-border)}
+ .thumb img.sel-strong{outline:3px solid var(--active-border);box-shadow:0 0 0 3px #fff,0 0 0 5px var(--active-border)}
+ .thumb.hasmask::after{content:"★";position:absolute;right:6px;top:4px;color:#f5b700;text-shadow:0 0 3px rgba(0,0,0,0.35);font-size:16px}
+ .thumb-label{font-size:11px;color:var(--muted);margin-top:2px;display:block}
+ .timeline.filter-masked .thumb:not(.hasmask){display:none}
+ .tools .row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
+ .btn{padding:8px 12px;border-radius:8px;border:1px solid var(--b);background:#f8fafc;cursor:pointer;transition:background 0.2s, border 0.2s}
+ .btn:hover{background:var(--active-bg);border-color:var(--active-border)}
+ .btn.active,.btn.toggled{background:var(--active-bg);border-color:var(--active-border)}
+ .swatch{width:20px;height:20px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #ccc;cursor:pointer;transition:box-shadow 0.2s}
+ .swatch.sel{box-shadow:0 0 0 2px var(--active-border)}
+ ul.clean{list-style:none;padding-left:0;margin:6px 0}
+ ul.clean li{margin:2px 0;display:flex;align-items:center;gap:6px}
+ .rename-btn{font-size:12px;padding:2px 4px;border:none;background:transparent;cursor:pointer;color:#64748b;transition:color 0.2s}
+ .rename-btn:hover{color:#2563eb}
+ .delete-btn{color:#ef4444;font-size:14px;cursor:pointer;transition:color 0.2s}
+ .delete-btn:hover{color:#b91c1c}
+ #loading-indicator{display:none;margin-top:6px;color:#f59e0b}
+ .portion-row{display:flex;gap:6px;align-items:center;margin-top:8px}
+ .portion-input{width:70px}
+ #tl-progress-bar{background:#f3f4f6;border-radius:4px;height:8px;margin-top:10px}
+ #tl-progress-fill{background:#2563eb;height:100%;width:0;border-radius:4px}
+ #popup {position:fixed;top:20%;left:50%;transform:translate(-50%, -50%);background:#fff;padding:20px;border-radius:8px;box-shadow:0 0 10px rgba(0,0,0,0.2);z-index:1000;display:none;min-width:320px}
+ #popup-progress-bar{background:#f3f4f6;border-radius:4px;height:8px;margin:10px 0}
+ #popup-progress-fill{background:#2563eb;height:100%;width:0;border-radius:4px}
+ #popup-logs {max-height:200px;overflow:auto;font-size:12px;color:#6b7280}
+ .playhead{position:absolute;top:0;bottom:0;width:2px;background:var(--active-border);opacity:.9;pointer-events:none;display:block}
+ #portionBand{position:absolute;top:0;height:calc(var(--thumbH,110px) + 24px);background:rgba(37,99,235,.12);pointer-events:none;display:none}
+ #inHandle,#outHandle{position:absolute;top:0;height:calc(var(--thumbH,110px) + 24px);width:6px;background:rgba(37,99,235,.9);border-radius:2px;cursor:ew-resize;display:none;pointer-events:auto}
+ #hud{position:absolute;right:10px;top:10px;background:rgba(17,24,39,.6);color:#fff;font-size:12px;padding:4px 8px;border-radius:6px}
+ #toast{position:fixed;right:12px;bottom:12px;display:flex;flex-direction:column;gap:8px;z-index:2000}
+ .toast-item{background:#111827;color:#fff;padding:8px 12px;border-radius:8px;box-shadow:0 6px 16px rgba(0,0,0,.25);opacity:.95}
+</style>
+<h1>🎬 Video Editor</h1>
+<div class="topbar card">
+ <form action="/p/upload?redirect=1" method="post" enctype="multipart/form-data" style="display:flex;gap:8px;align-items:center" id="uploadForm">
+  <strong>Charger une vidéo :</strong>
+  <input type="file" name="file" accept="video/*" required>
+  <button class="btn" type="submit">Uploader</button>
+ </form>
+ <span class="muted" id="msg">__MSG__</span>
+ <span class="muted">Liens : <a href="/docs" target="_blank">/docs</a> • <a href="/files" target="_blank">/files</a></span>
+</div>
+<div class="layout">
+ <div>
+  <div class="viewer card" id="viewerCard">
+   <div class="player-wrap" id="playerWrap">
+    <video id="player" controls playsinline poster="/poster/__VID__">
+     <source id="vidsrc" src="/data/__VID__" type="video/mp4">
+    </video>
+    <canvas id="editCanvas"></canvas>
+    <div id="hud"></div>
+   </div>
+   <div class="muted" style="margin-top:6px">
+    <label>Frame # <input id="goFrame" type="number" min="1" value="1" style="width:90px"> </label>
+    <label>à <input id="endPortion" class="portion-input" type="number" min="1" placeholder="Optionnel pour portion"></label>
+    <button id="isolerBoucle" class="btn">Isoler & Boucle</button>
+    <button id="resetFull" class="btn" style="display:none">Retour full</button>
+    <span id="posInfo" style="margin-left:10px"></span>
+    <span id="status" style="margin-left:10px;color:#2563eb"></span>
+   </div>
+  </div>
+  <div class="card timeline-container">
+   <h4 style="margin:2px 0 8px 0">Timeline</h4>
+   <div class="row" id="tlControls" style="margin:4px 0 8px 0;gap:8px;align-items:center">
+     <button id="btnFollow" class="btn" title="Centrer pendant la lecture (OFF par défaut)">🔭 Suivre</button>
+     <button id="btnFilterMasked" class="btn" title="Afficher uniquement les frames avec masque">⭐ Masquées</button>
+     <label class="muted">Zoom <input id="zoomSlider" type="range" min="80" max="180" value="110" step="10"></label>
+     <label class="muted">Aller à # <input id="gotoInput" type="number" min="1" style="width:90px"></label>
+     <button id="gotoBtn" class="btn">Aller</button>
+     <span class="muted" id="maskedCount"></span>
+   </div>
+   <div id="timeline" class="timeline"></div>
+   <div class="muted" id="tlNote" style="margin-top:6px;display:none">Mode secours: vignettes générées dans le navigateur.</div>
+   <div id="loading-indicator">Chargement des frames...</div>
+   <div id="tl-progress-bar"><div id="tl-progress-fill"></div></div>
+  </div>
+ </div>
+ <div class="card tools">
+  <div class="row"><span class="muted">Mode : <strong id="modeLabel">Lecture</strong></span></div>
+  <div class="row" style="margin-top:6px">
+   <button id="btnEdit" class="btn" title="Passer en mode édition pour dessiner un masque">✏️ Éditer cette image</button>
+   <button id="btnBack" class="btn" style="display:none" title="Retour au mode lecture">🎬 Retour lecteur</button>
+   <button id="btnSave" class="btn" style="display:none" title="Enregistrer le masque sélectionné">💾 Enregistrer masque</button>
+   <button id="btnClear" class="btn" style="display:none" title="Effacer la sélection actuelle">🧽 Effacer sélection</button>
+  </div>
+  <div style="margin-top:10px">
+   <div class="muted">Couleur</div>
+   <div class="row" id="palette" style="margin-top:6px">
+    <div class="swatch" data-c="#10b981" style="background:#10b981" title="Vert"></div>
+    <div class="swatch" data-c="#2563eb" style="background:#2563eb" title="Bleu"></div>
+    <div class="swatch" data-c="#ef4444" style="background:#ef4444" title="Rouge"></div>
+    <div class="swatch" data-c="#f59e0b" style="background:#f59e0b" title="Orange"></div>
+    <div class="swatch" data-c="#a21caf" style="background:#a21caf" title="Violet"></div>
+   </div>
+  </div>
+  <div style="margin-top:12px">
+   <details open>
+    <summary><strong>Masques</strong></summary>
+    <div id="maskList" class="muted">—</div>
+    <button class="btn" style="margin-top:8px" id="exportBtn" title="Exporter la vidéo avec les masques appliqués (bientôt IA)">Exporter vidéo modifiée</button>
+   </details>
+   <div style="margin-top:6px">
+    <strong>Vidéos disponibles</strong>
+    <ul id="fileList" class="clean muted" style="max-height:180px;overflow:auto">Chargement…</ul>
+  </div>
+ </div>
+</div>
+<div id="popup">
+ <h3>Génération thumbs en cours</h3>
+ <div id="popup-progress-bar"><div id="popup-progress-fill"></div></div>
+ <div id="popup-logs"></div>
+</div>
+<div id="toast"></div>
+<script>
+const API_BASE = '';
+const P = (p) => p;
+
+const serverVid = "__VID__";
+const serverMsg = "__MSG__";
+document.getElementById('msg').textContent = serverMsg;
+// Elements
+const statusEl = document.getElementById('status');
+const player = document.getElementById('player');
+const srcEl = document.getElementById('vidsrc');
+const canvas = document.getElementById('editCanvas');
+const ctx = canvas.getContext('2d');
+const modeLabel = document.getElementById('modeLabel');
+const btnEdit = document.getElementById('btnEdit');
+const btnBack = document.getElementById('btnBack');
+const btnSave = document.getElementById('btnSave');
+const btnClear= document.getElementById('btnClear');
+const posInfo = document.getElementById('posInfo');
+const goFrame = document.getElementById('goFrame');
+const palette = document.getElementById('palette');
+const fileList= document.getElementById('fileList');
+const tlBox = document.getElementById('timeline');
+const tlNote = document.getElementById('tlNote');
+const playerWrap = document.getElementById('playerWrap');
+const loadingInd = document.getElementById('loading-indicator');
+const isolerBoucle = document.getElementById('isolerBoucle');
+const resetFull = document.getElementById('resetFull');
+const endPortion = document.getElementById('endPortion');
+const popup = document.getElementById('popup');
+const popupLogs = document.getElementById('popup-logs');
+const tlProgressFill = document.getElementById('tl-progress-fill');
+const popupProgressFill = document.getElementById('popup-progress-fill');
+const btnFollow = document.getElementById('btnFollow');
+const btnFilterMasked = document.getElementById('btnFilterMasked');
+const zoomSlider = document.getElementById('zoomSlider');
+const maskedCount = document.getElementById('maskedCount');
+const hud = document.getElementById('hud');
+const toastWrap = document.getElementById('toast');
+const gotoInput = document.getElementById('gotoInput');
+const gotoBtn = document.getElementById('gotoBtn');
+
+// State
+let vidName = serverVid || '';
+function fileStem(name){ const i = name.lastIndexOf('.'); return i>0 ? name.slice(0,i) : name; }
+let vidStem = '';
+let bustToken = Date.now();
+let fps = 30, frames = 0;
+let currentIdx = 0;
+let mode = 'view';
+let rect = null, dragging=false, sx=0, sy=0;
+let color = '#10b981';
+let rectMap = new Map();
+let masks = [];
+let maskedSet = new Set();
+let timelineUrls = [];
+let portionStart = null;
+let portionEnd = null;
+let loopInterval = null;
+let chunkSize = 50;
+let timelineStart = 0, timelineEnd = 0;
+let viewRangeStart = 0, viewRangeEnd = 0; // portée visible (portion ou full)
+const scrollThreshold = 100;
+let followMode = false;
+let isPaused = true;
+let thumbEls = new Map();
+let lastCenterMs = 0;
+const CENTER_THROTTLE_MS = 150;
+const PENDING_KEY = 've_pending_masks_v1';
+let maskedOnlyMode = false;
+
+// Utils
+function showToast(msg){ const el = document.createElement('div'); el.className='toast-item'; el.textContent=String(msg||''); toastWrap.appendChild(el); setTimeout(()=>{ el.remove(); }, 2000); }
+function ensureOverlays(){
+  if(!document.getElementById('playhead')){ const ph=document.createElement('div'); ph.id='playhead'; ph.className='playhead'; tlBox.appendChild(ph); }
+  if(!document.getElementById('portionBand')){ const pb=document.createElement('div'); pb.id='portionBand'; tlBox.appendChild(pb); }
+  if(!document.getElementById('inHandle')){ const ih=document.createElement('div'); ih.id='inHandle'; tlBox.appendChild(ih); }
+  if(!document.getElementById('outHandle')){ const oh=document.createElement('div'); oh.id='outHandle'; tlBox.appendChild(oh); }
+}
+function playheadEl(){ return document.getElementById('playhead'); }
+function portionBand(){ return document.getElementById('portionBand'); }
+function inHandle(){ return document.getElementById('inHandle'); }
+function outHandle(){ return document.getElementById('outHandle'); }
+function findThumbEl(idx){ return thumbEls.get(idx) || null; }
+function updateHUD(){ const total = frames || 0, cur = currentIdx+1; hud.textContent = `t=${player.currentTime.toFixed(2)}s • #${cur}/${total} • ${fps.toFixed(2)}fps`; }
+function updateSelectedThumb(){
+  tlBox.querySelectorAll('.thumb img.sel, .thumb img.sel-strong').forEach(img=>{ img.classList.remove('sel','sel-strong'); });
+  const el = findThumbEl(currentIdx); if(!el) return; const img = el.querySelector('img');
+  img.classList.add('sel'); if(isPaused) img.classList.add('sel-strong');
+}
+function rawCenterThumb(el){
+  tlBox.scrollLeft = Math.max(0, el.offsetLeft + el.clientWidth/2 - tlBox.clientWidth/2);
+}
+async function ensureThumbVisibleCentered(idx){
+  for(let k=0; k<40; k++){
+    const el = findThumbEl(idx);
+    if(el){
+      const img = el.querySelector('img');
+      if(!img.complete || img.naturalWidth === 0){
+        await new Promise(r=>setTimeout(r, 25));
+      }else{
+        rawCenterThumb(el);
+        updatePlayhead();
+        return true;
+      }
+    }else{
+      await new Promise(r=>setTimeout(r, 25));
+    }
+  }
+  return false;
+}
+function centerSelectedThumb(){ ensureThumbVisibleCentered(currentIdx); }
+function updatePlayhead(){
+  ensureOverlays();
+  const el = findThumbEl(currentIdx);
+  const ph = playheadEl();
+  if(!el){ ph.style.display='none'; return; }
+  ph.style.display='block'; ph.style.left = (el.offsetLeft + el.clientWidth/2) + 'px';
+}
+function updatePortionOverlays(){
+  ensureOverlays();
+  const pb = portionBand(), ih = inHandle(), oh = outHandle();
+  if(portionStart==null || portionEnd==null){ pb.style.display='none'; ih.style.display='none'; oh.style.display='none'; return; }
+  const a = findThumbEl(portionStart), b = findThumbEl(portionEnd-1);
+  if(!a || !b){ pb.style.display='none'; ih.style.display='none'; oh.style.display='none'; return; }
+  const left = a.offsetLeft, right = b.offsetLeft + b.clientWidth;
+  pb.style.display='block'; pb.style.left = left+'px'; pb.style.width = Math.max(0, right-left)+'px';
+  ih.style.display='block'; ih.style.left = (left - ih.clientWidth/2) + 'px';
+  oh.style.display='block'; oh.style.left = (right - oh.clientWidth/2) + 'px';
+}
+function nearestFrameIdxFromClientX(clientX){
+  const rect = tlBox.getBoundingClientRect();
+  const xIn = clientX - rect.left + tlBox.scrollLeft;
+  let bestIdx = currentIdx, bestDist = Infinity;
+  for(const [idx, el] of thumbEls.entries()){
+    const mid = el.offsetLeft + el.clientWidth/2;
+    const d = Math.abs(mid - xIn);
+    if(d < bestDist){ bestDist = d; bestIdx = idx; }
+  }
+  return bestIdx;
+}
+function loadPending(){ try{ return JSON.parse(localStorage.getItem(PENDING_KEY) || '[]'); }catch{ return []; } }
+function savePendingList(lst){ localStorage.setItem(PENDING_KEY, JSON.stringify(lst)); }
+function addPending(payload){ const lst = loadPending(); lst.push(payload); savePendingList(lst); }
+async function flushPending(){
+  const lst = loadPending(); if(!lst.length) return;
+  const kept = [];
+  for(const p of lst){
+    try{ const r = await fetch(P('/mask'),{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(p)}); if(!r.ok) kept.push(p); }
+    catch{ kept.push(p); }
+  }
+  savePendingList(kept);
+  if(kept.length===0) showToast('Masques hors-ligne synchronisés ✅');
+}
+
+// Layout
+function syncTimelineWidth(){ const w = playerWrap.clientWidth; tlBox.style.width = w + 'px'; }
+function fitCanvas(){
+  const r=player.getBoundingClientRect();
+  const ctrlH = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--controlsH'));
+  canvas.width=Math.round(r.width);
+  canvas.height=Math.round(r.height - ctrlH);
+  canvas.style.width=r.width+'px';
+  canvas.style.height=(r.height - ctrlH)+'px';
+  syncTimelineWidth();
+}
+function timeToIdx(t){ return Math.max(0, Math.min(frames-1, Math.round((fps||30) * t))); }
+function idxToSec(i){ return (fps||30)>0 ? (i / fps) : 0; }
+
+function setMode(m){
+  mode=m;
+  if(m==='edit'){
+    player.pause();
+    player.controls = false;
+    playerWrap.classList.add('edit-mode');
+    modeLabel.textContent='Édition';
+    btnEdit.style.display='none'; btnBack.style.display='inline-block';
+    btnSave.style.display='inline-block'; btnClear.style.display='inline-block';
+    canvas.style.pointerEvents='auto';
+    rect = rectMap.get(currentIdx) || null; draw();
+  }else{
+    player.controls = true;
+    playerWrap.classList.remove('edit-mode');
+    modeLabel.textContent='Lecture';
+    btnEdit.style.display='inline-block'; btnBack.style.display='none';
+    btnSave.style.display='none'; btnClear.style.display='none';
+    canvas.style.pointerEvents='none';
+    rect=null; draw();
+  }
+}
+function draw(){
+  ctx.clearRect(0,0,canvas.width,canvas.height);
+  if(rect){
+    const x=Math.min(rect.x1,rect.x2), y=Math.min(rect.y1,rect.y2);
+    const w=Math.abs(rect.x2-rect.x1), h=Math.abs(rect.y2-rect.y1);
+    ctx.strokeStyle=rect.color||color; ctx.lineWidth=2; ctx.strokeRect(x,y,w,h);
+    ctx.fillStyle=(rect.color||color)+'28'; ctx.fillRect(x,y,w,h);
+  }
+}
+canvas.addEventListener('mousedown',(e)=>{
+  if(mode!=='edit' || !vidName) return;
+  dragging=true; const r=canvas.getBoundingClientRect();
+  sx=e.clientX-r.left; sy=e.clientY-r.top;
+  rect={x1:sx,y1:sy,x2:sx,y2:sy,color:color}; draw();
+});
+canvas.addEventListener('mousemove',(e)=>{
+  if(!dragging) return;
+  const r=canvas.getBoundingClientRect();
+  rect.x2=e.clientX-r.left; rect.y2=e.clientY-r.top; draw();
+});
+['mouseup','mouseleave'].forEach(ev=>canvas.addEventListener(ev,()=>{ dragging=false; }));
+btnClear.onclick=()=>{ rect=null; rectMap.delete(currentIdx); draw(); };
+btnEdit.onclick =()=> setMode('edit');
+btnBack.onclick =()=> setMode('view');
+
+// Palette
+palette.querySelectorAll('.swatch').forEach(el=>{
+  if(el.dataset.c===color) el.classList.add('sel');
+  el.onclick=()=>{
+    palette.querySelectorAll('.swatch').forEach(s=>s.classList.remove('sel'));
+    el.classList.add('sel'); color=el.dataset.c;
+    if(rect){ rect.color=color; draw(); }
+  };
+});
+
+// === Timeline ===
+async function loadTimelineUrls(){
+  timelineUrls = [];
+  const stem = vidStem, b = bustToken;
+  for(let idx=0; idx<frames; idx++){
+    timelineUrls[idx] = P(`/thumbs/f_${stem}_${idx}.jpg?b=${b}`);
+  }
+  tlProgressFill.style.width='0%';
+}
+
+async function renderTimeline(centerIdx){
+  if(!vidName) return;
+  loadingInd.style.display='block';
+  if(timelineUrls.length===0) await loadTimelineUrls();
+  tlBox.innerHTML = ''; thumbEls = new Map(); ensureOverlays();
+
+  if(maskedOnlyMode){
+    const idxs = Array.from(maskedSet).sort((a,b)=>a-b);
+    for(const i of idxs){ addThumb(i,'append'); }
+    setTimeout(async ()=>{ syncTimelineWidth(); updateSelectedThumb(); await ensureThumbVisibleCentered(currentIdx); loadingInd.style.display='none'; updatePlayhead(); updatePortionOverlays(); },0);
+    return;
+  }
+
+  if(portionStart!=null && portionEnd!=null){
+    const s = Math.max(0, portionStart), e = Math.min(frames, portionEnd);
+    for(let i=s;i<e;i++){ addThumb(i,'append'); }
+    setTimeout(async ()=>{ syncTimelineWidth(); updateSelectedThumb(); await ensureThumbVisibleCentered(currentIdx); loadingInd.style.display='none'; updatePlayhead(); updatePortionOverlays(); },0);
+    return;
+  }
+
+  await loadWindow(centerIdx ?? currentIdx);
+  loadingInd.style.display='none';
+}
+
+async function loadWindow(centerIdx){
+  tlBox.innerHTML=''; thumbEls = new Map(); ensureOverlays();
+  const rngStart = (viewRangeStart ?? 0);
+  const rngEnd = (viewRangeEnd ?? frames);
+  const mid = Math.max(rngStart, Math.min(centerIdx, Math.max(rngStart, rngEnd-1)));
+  const start = Math.max(rngStart, Math.min(mid - Math.floor(chunkSize/2), Math.max(rngStart, rngEnd - chunkSize)));
+  const end = Math.min(rngEnd, start + chunkSize);
+  for(let i=start;i<end;i++){ addThumb(i,'append'); }
+  timelineStart = start; timelineEnd = end;
+  setTimeout(async ()=>{
+    syncTimelineWidth();
+    updateSelectedThumb();
+    await ensureThumbVisibleCentered(currentIdx);
+    updatePortionOverlays();
+  },0);
+}
+
+function addThumb(idx, place='append'){
+  if(thumbEls.has(idx)) return;
+  const wrap=document.createElement('div'); wrap.className='thumb'; wrap.dataset.idx=idx;
+  if(maskedSet.has(idx)) wrap.classList.add('hasmask');
+  const img=new Image(); img.title='frame '+(idx+1);
+  img.src=timelineUrls[idx];
+  img.onerror = () => {
+    const fallback = P(`/frame_idx?vid=${encodeURIComponent(vidName)}&idx=${idx}`);
+    img.onerror = null;
+    img.src = fallback;
+    img.onload = () => {
+      const nu = P(`/thumbs/f_${vidStem}_${idx}.jpg?b=${Date.now()}`);
+      timelineUrls[idx] = nu;
+      img.src = nu;
+      img.onload = null;
+    };
+  };
+  if(idx===currentIdx){ img.classList.add('sel'); if(isPaused) img.classList.add('sel-strong'); }
+  img.onclick=async ()=>{
+    currentIdx=idx; player.currentTime=idxToSec(currentIdx);
+    if(mode==='edit'){ rect = rectMap.get(currentIdx)||null; draw(); }
+    updateSelectedThumb(); await ensureThumbVisibleCentered(currentIdx); updatePlayhead();
+  };
+  wrap.appendChild(img);
+  const label=document.createElement('span'); label.className='thumb-label'; label.textContent = `#${idx+1}`;
+  wrap.appendChild(label);
+  if(place==='append'){ tlBox.appendChild(wrap); }
+  else if(place==='prepend'){ tlBox.insertBefore(wrap, tlBox.firstChild); }
+  else{ tlBox.appendChild(wrap); }
+  thumbEls.set(idx, wrap);
+}
+
+// Scroll chunk (mode normal uniquement)
+tlBox.addEventListener('scroll', ()=>{
+  if (maskedOnlyMode || (portionStart!=null && portionEnd!=null)){
+    updatePlayhead(); updatePortionOverlays();
+    return;
+  }
+  const scrollLeft = tlBox.scrollLeft, scrollWidth = tlBox.scrollWidth, clientWidth = tlBox.clientWidth;
+  if (scrollWidth - scrollLeft - clientWidth < scrollThreshold && timelineEnd < viewRangeEnd){
+    const newEnd = Math.min(viewRangeEnd, timelineEnd + chunkSize);
+    for(let i=timelineEnd;i<newEnd;i++){ addThumb(i,'append'); }
+    timelineEnd = newEnd;
+  }
+  if (scrollLeft < scrollThreshold && timelineStart > viewRangeStart){
+    const newStart = Math.max(viewRangeStart, timelineStart - chunkSize);
+    for(let i=newStart;i<timelineStart;i++){ addThumb(i,'prepend'); }
+    tlBox.scrollLeft += (timelineStart - newStart) * (110 + 8);
+    timelineStart = newStart;
+  }
+  updatePlayhead(); updatePortionOverlays();
+});
+
+// Isoler & Boucle
+isolerBoucle.onclick = async ()=>{
+  const start = parseInt(goFrame.value || '1',10) - 1;
+  const end = parseInt(endPortion.value || '',10);
+  if(!endPortion.value || end <= start || end > frames){ alert('Portion invalide (fin > début)'); return; }
+  if (end - start > 1200 && !confirm('Portion très large, cela peut être lent. Continuer ?')) return;
+  portionStart = start; portionEnd = end;
+  viewRangeStart = start; viewRangeEnd = end;
+  player.pause(); isPaused = true;
+  currentIdx = start; player.currentTime = idxToSec(start);
+  await renderTimeline(currentIdx);
+  resetFull.style.display = 'inline-block';
+  startLoop(); updatePortionOverlays();
+};
+function startLoop(){
+  if(loopInterval) clearInterval(loopInterval);
+  if(portionEnd != null){
+    loopInterval = setInterval(()=>{ if(player.currentTime >= idxToSec(portionEnd)) player.currentTime = idxToSec(portionStart); }, 100);
+  }
+}
+resetFull.onclick = async ()=>{
+  portionStart = null; portionEnd = null;
+  viewRangeStart = 0; viewRangeEnd = frames;
+  goFrame.value = 1; endPortion.value = '';
+  player.pause(); isPaused = true;
+  await renderTimeline(currentIdx);
+  resetFull.style.display='none';
+  clearInterval(loopInterval); updatePortionOverlays();
+};
+
+// Drag IN/OUT
+function attachHandleDrag(handle, which){
+  let draggingH=false;
+  function onMove(e){
+    if(!draggingH) return;
+    const idx = nearestFrameIdxFromClientX(e.clientX);
+    if(which==='in'){ portionStart = Math.min(idx, portionEnd ?? idx+1); goFrame.value = (portionStart+1); }
+    else { portionEnd = Math.max(idx+1, (portionStart ?? idx)); endPortion.value = portionEnd; }
+    viewRangeStart = (portionStart ?? 0); viewRangeEnd = (portionEnd ?? frames);
+    updatePortionOverlays();
+  }
+  handle.addEventListener('mousedown', (e)=>{ draggingH=true; e.preventDefault(); });
+  window.addEventListener('mousemove', onMove);
+  window.addEventListener('mouseup', ()=>{ draggingH=false; });
+}
+ensureOverlays(); attachHandleDrag(document.getElementById('inHandle'), 'in'); attachHandleDrag(document.getElementById('outHandle'), 'out');
+
+// Progress popup
+async function showProgress(vidStem){
+  popup.style.display = 'block';
+  const interval = setInterval(async () => {
+    const r = await fetch(P('/progress/' + vidStem));
+    const d = await r.json();
+    tlProgressFill.style.width = d.percent + '%';
+    popupProgressFill.style.width = d.percent + '%';
+    popupLogs.innerHTML = d.logs.map(x=>String(x)).join('<br>');
+    if(d.done){
+      clearInterval(interval);
+      popup.style.display = 'none';
+      await renderTimeline(currentIdx);
+    }
+  }, 800);
+}
+
+// Meta & boot
+async function loadVideoAndMeta() {
+  if(!vidName){ statusEl.textContent='Aucune vidéo sélectionnée.'; return; }
+  vidStem = fileStem(vidName); bustToken = Date.now();
+  const bust = Date.now();
+  srcEl.src = P('/data/'+encodeURIComponent(vidName)+'?t='+bust);
+  player.setAttribute('poster', P('/poster/'+encodeURIComponent(vidName)+'?t='+bust));
+  player.load();
+  fitCanvas();
+  statusEl.textContent = 'Chargement vidéo…';
+  try{
+    const r=await fetch(P('/meta/'+encodeURIComponent(vidName)));
+    if(r.ok){
+      const m=await r.json();
+      fps=m.fps||30; frames=m.frames||0;
+      statusEl.textContent = `OK (${frames} frames @ ${fps.toFixed(2)} fps)`;
+      viewRangeStart = 0; viewRangeEnd = frames;
+      await loadTimelineUrls();
+      await loadMasks();
+      currentIdx = 0; player.currentTime = 0;
+      await renderTimeline(0);
+      showProgress(vidStem);
+    }else{
+      statusEl.textContent = 'Erreur meta';
+    }
+  }catch(err){
+    statusEl.textContent = 'Erreur réseau meta';
+  }
+}
+player.addEventListener('loadedmetadata', async ()=>{
+  fitCanvas();
+  if(!frames || frames<=0){
+    try{ const r=await fetch(P('/meta/'+encodeURIComponent(vidName))); if(r.ok){ const m=await r.json(); fps=m.fps||30; frames=m.frames||0; } }catch{}
+  }
+  currentIdx=0; goFrame.value=1; rectMap.clear(); rect=null; draw();
+});
+window.addEventListener('resize', ()=>{ fitCanvas(); });
+player.addEventListener('pause', ()=>{ isPaused = true; updateSelectedThumb(); centerSelectedThumb(); });
+player.addEventListener('play', ()=>{ isPaused = false; updateSelectedThumb(); });
+player.addEventListener('timeupdate', ()=>{
+  posInfo.textContent='t='+player.currentTime.toFixed(2)+'s';
+  currentIdx=timeToIdx(player.currentTime);
+  if(mode==='edit'){ rect = rectMap.get(currentIdx) || null; draw(); }
+  updateHUD(); updateSelectedThumb(); updatePlayhead();
+  if(followMode && !isPaused){
+    const now = Date.now();
+    if(now - lastCenterMs > CENTER_THROTTLE_MS){ lastCenterMs = now; centerSelectedThumb(); }
+  }
+});
+goFrame.addEventListener('change', async ()=>{
+  if(!vidName) return;
+  const val=Math.max(1, parseInt(goFrame.value||'1',10));
+  player.pause(); isPaused = true;
+  currentIdx=val-1; player.currentTime=idxToSec(currentIdx);
+  if(mode==='edit'){ rect = rectMap.get(currentIdx) || null; draw(); }
+  await renderTimeline(currentIdx);
+  await ensureThumbVisibleCentered(currentIdx);
+});
+
+// Follow / Filter / Zoom / Goto
+btnFollow.onclick = ()=>{ followMode = !followMode; btnFollow.classList.toggle('toggled', followMode); if(followMode) centerSelectedThumb(); };
+btnFilterMasked.onclick = async ()=>{
+  maskedOnlyMode = !maskedOnlyMode;
+  btnFilterMasked.classList.toggle('toggled', maskedOnlyMode);
+  tlBox.classList.toggle('filter-masked', maskedOnlyMode);
+  await renderTimeline(currentIdx);
+  await ensureThumbVisibleCentered(currentIdx);
+};
+zoomSlider.addEventListener('input', ()=>{ tlBox.style.setProperty('--thumbH', zoomSlider.value + 'px'); });
+async function gotoFrameNum(){
+  const v = parseInt(gotoInput.value||'',10);
+  if(!Number.isFinite(v) || v<1 || v>frames) return;
+  player.pause(); isPaused = true;
+  currentIdx = v-1; player.currentTime = idxToSec(currentIdx);
+  goFrame.value = v;
+  await renderTimeline(currentIdx);
+  await ensureThumbVisibleCentered(currentIdx);
+}
+gotoBtn.onclick = ()=>{ gotoFrameNum(); };
+gotoInput.addEventListener('keydown',(e)=>{ if(e.key==='Enter'){ e.preventDefault(); gotoFrameNum(); } });
+
+// Drag & drop upload
+const uploadZone = document.getElementById('uploadForm');
+uploadZone.addEventListener('dragover', (e) => { e.preventDefault(); uploadZone.style.borderColor = '#2563eb'; });
+uploadZone.addEventListener('dragleave', () => { uploadZone.style.borderColor = 'transparent'; });
+uploadZone.addEventListener('drop', (e) => {
+  e.preventDefault(); uploadZone.style.borderColor = 'transparent';
+  const file = e.dataTransfer.files[0];
+  if(file && file.type.startsWith('video/')){
+    const fd = new FormData(); fd.append('file', file);
+    fetch(P('/upload?redirect=1'), {method: 'POST', body: fd}).then(() => location.reload());
+  }
+});
+// Export placeholder
+document.getElementById('exportBtn').onclick = () => { console.log('Export en cours... (IA à venir)'); alert('Fonctionnalité export IA en développement !'); };
+
+// Fichiers & masques
+async function loadFiles(){
+  const r=await fetch(P('/files')); const d=await r.json();
+  if(!d.items || !d.items.length){ fileList.innerHTML='<li>(aucune)</li>'; return; }
+  fileList.innerHTML='';
+  d.items.forEach(name=>{
+    const li=document.createElement('li');
+    const delBtn = document.createElement('span'); delBtn.className='delete-btn'; delBtn.textContent='❌'; delBtn.title='Supprimer cette vidéo';
+    delBtn.onclick=async()=>{
+      if(!confirm(`Supprimer "${name}" ?`)) return;
+      await fetch(P('/delete/'+encodeURIComponent(name)),{method:'DELETE'});
+      loadFiles(); if(vidName===name){ vidName=''; loadVideoAndMeta(); }
+    };
+    const a=document.createElement('a'); a.textContent=name; a.href='/ui?v='+encodeURIComponent(name); a.title='Ouvrir cette vidéo';
+    li.appendChild(delBtn); li.appendChild(a); fileList.appendChild(li);
+  });
+}
+async function loadMasks(){
+  loadingInd.style.display='block';
+  const box=document.getElementById('maskList');
+  const r=await fetch(P('/mask/'+encodeURIComponent(vidName)));
+  const d=await r.json();
+  masks=d.masks||[];
+  maskedSet = new Set(masks.map(m=>parseInt(m.frame_idx||0,10)));
+  rectMap.clear();
+  masks.forEach(m=>{
+    if(m.shape==='rect'){
+      const [x1,y1,x2,y2] = m.points;
+      const normW = canvas.clientWidth, normH = canvas.clientHeight;
+      rectMap.set(m.frame_idx, {x1:x1*normW, y1:y1*normH, x2:x2*normW, y2:y2*normH, color:m.color});
+    }
+  });
+  maskedCount.textContent = `(${maskedSet.size} ⭐)`;
+  if(!masks.length){ box.textContent='—'; loadingInd.style.display='none'; return; }
+  box.innerHTML='';
+  const ul=document.createElement('ul'); ul.className='clean';
+  masks.forEach(m=>{
+    const li=document.createElement('li');
+    const fr=(parseInt(m.frame_idx||0,10)+1);
+    const t=(m.time_s||0).toFixed(2);
+    const col=m.color||'#10b981';
+    const label=m.note||(`frame ${fr}`);
+    li.innerHTML = `<span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:${col};margin-right:6px;vertical-align:middle"></span> <strong>${label.replace(/</g,'&lt;').replace(/>/g,'&gt;')}</strong> — #${fr} · t=${t}s`;
+    const renameBtn=document.createElement('span'); renameBtn.className='rename-btn'; renameBtn.textContent='✏️'; renameBtn.title='Renommer le masque';
+    renameBtn.onclick=async()=>{
+      const nv=prompt('Nouveau nom du masque :', label);
+      if(nv===null) return;
+      const rr=await fetch(P('/mask/rename'),{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({vid:vidName,id:m.id,note:nv})});
+      if(rr.ok){ await loadMasks(); await renderTimeline(currentIdx); draw(); showToast('Masque renommé ✅'); } else {
+        const txt = await rr.text(); alert('Échec renommage: ' + rr.status + ' ' + txt);
+      }
+    };
+    const delMaskBtn=document.createElement('span'); delMaskBtn.className='delete-btn'; delMaskBtn.textContent='❌'; delMaskBtn.title='Supprimer ce masque';
+    delMaskBtn.onclick=async()=>{
+      if(!confirm(`Supprimer masque "${label}" ?`)) return;
+      const rr=await fetch(P('/mask/delete'),{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({vid:vidName,id:m.id})});
+      if(rr.ok){ await loadMasks(); await renderTimeline(currentIdx); draw(); showToast('Masque supprimé ✅'); } else {
+        const txt = await rr.text(); alert('Échec suppression: ' + rr.status + ' ' + txt);
+      }
+    };
+    li.appendChild(renameBtn); li.appendChild(delMaskBtn); ul.appendChild(li);
+  });
+  box.appendChild(ul);
+  loadingInd.style.display='none';
+}
+
+// Save mask (+ cache)
+btnSave.onclick = async ()=>{
+  if(!rect || !vidName){ alert('Aucune sélection.'); return; }
+  const defaultName = `frame ${currentIdx+1}`;
+  const note = (prompt('Nom du masque (optionnel) :', defaultName) || defaultName).trim();
+  const normW = canvas.clientWidth, normH = canvas.clientHeight;
+  const x=Math.min(rect.x1,rect.x2)/normW;
+  const y=Math.min(rect.y1,rect.y2)/normH;
+  const w=Math.abs(rect.x2-rect.x1)/normW;
+  const h=Math.abs(rect.y2-rect.y1)/normH;
+  const payload={vid:vidName,time_s:player.currentTime,frame_idx:currentIdx,shape:'rect',points:[x,y,x+w,y+h],color:rect.color||color,note:note};
+  addPending(payload);
+  try{
+    const r=await fetch(P('/mask'),{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(payload)});
+    if(r.ok){
+      const lst = loadPending().filter(x => !(x.vid===payload.vid && x.frame_idx===payload.frame_idx && x.time_s===payload.time_s));
+      savePendingList(lst);
+      rectMap.set(currentIdx,{...rect});
+      await loadMasks(); await renderTimeline(currentIdx);
+      showToast('Masque enregistré ✅');
+    } else {
+      const txt = await r.text();
+      alert('Échec enregistrement masque: ' + r.status + ' ' + txt);
+    }
+  }catch(e){
+    alert('Erreur réseau lors de l’enregistrement du masque.');
+  }
+};
+
+// Boot
+async function boot(){
+  const lst = JSON.parse(localStorage.getItem('ve_pending_masks_v1') || '[]'); if(lst.length){ /* flush pending si besoin */ }
+  await loadFiles();
+  if(serverVid){ vidName=serverVid; await loadVideoAndMeta(); }
+  else{ const qs=new URLSearchParams(location.search); const v=qs.get('v')||''; if(v){ vidName=v; await loadVideoAndMeta(); } }
+}
+boot();
+
+// Hide controls in edit-mode
+const style = document.createElement('style');
+style.textContent = `.player-wrap.edit-mode video::-webkit-media-controls { display: none !important; } .player-wrap.edit-mode video::before { content: none !important; }`;
+document.head.appendChild(style);
+</script>
+</html>
+"""
 
 @app.get("/ui", response_class=HTMLResponse, tags=["meta"])
 def ui(v: Optional[str] = "", msg: Optional[str] = ""):