Initial commit: MKV → AVI web app (Docker + Keycloak OIDC)

- App FastAPI : recherche dans un dossier média, download original ou conversion en AVI Xvid (tone-mapping HDR→SDR, audio FR auto, MP3 stéréo) - Auth Keycloak OIDC (Authlib) optionnelle - 3 composes : app seule, stack local (keycloak.local), production (NPM) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-04 00:28:51 +02:00
commit fd2e0689bf
15 changed files with 1328 additions and 0 deletions
@@ -0,0 +1,187 @@
+const $ = (s) => document.querySelector(s);
+const filesEl = $("#files");
+const jobsEl = $("#jobs");
+const countEl = $("#count");
+const searchEl = $("#search");
+const modal = $("#modal");
+
+let currentFile = null;      // fichier sélectionné pour conversion
+let searchTimer = null;
+
+// ---------- Helpers ----------
+function human(bytes) {
+  if (!bytes && bytes !== 0) return "";
+  const u = ["o", "Ko", "Mo", "Go", "To"];
+  let i = 0, n = bytes;
+  while (n >= 1024 && i < u.length - 1) { n /= 1024; i++; }
+  return `${n.toFixed(n >= 10 || i === 0 ? 0 : 1)} ${u[i]}`;
+}
+const langName = { fre: "FR", fra: "FR", fr: "FR", eng: "EN", en: "EN", und: "?" };
+
+// ---------- Recherche / listing ----------
+// Redirige vers la connexion si la session a expiré
+function checkAuth(r) {
+  if (r.status === 401) { window.location = "/login"; return false; }
+  return true;
+}
+
+async function loadFiles(q = "") {
+  const r = await fetch(`/api/browse?q=${encodeURIComponent(q)}`);
+  if (!checkAuth(r)) return;
+  const data = await r.json();
+  countEl.textContent = data.count
+    ? `${data.count} fichier${data.count > 1 ? "s" : ""}${data.truncated ? "+" : ""}`
+    : "aucun résultat";
+  filesEl.innerHTML = "";
+  if (!data.files.length) {
+    filesEl.innerHTML = `<li class="empty">Rien trouvé.</li>`;
+    return;
+  }
+  for (const f of data.files) {
+    const li = document.createElement("li");
+    li.className = "file";
+    const dir = f.dir && f.dir !== "." ? `<span class="dir">${f.dir}/</span>` : "";
+    li.innerHTML = `
+      <div class="file-main">
+        <div class="file-name">${dir}${f.name}</div>
+        <div class="file-meta">${human(f.size)}</div>
+      </div>
+      <div class="file-actions">
+        <a class="btn ghost" href="/api/download?path=${encodeURIComponent(f.path)}">⬇ Télécharger</a>
+        <button class="btn primary conv">🎬 Convertir en AVI</button>
+      </div>`;
+    li.querySelector(".conv").addEventListener("click", () => openModal(f));
+    filesEl.appendChild(li);
+  }
+}
+
+searchEl.addEventListener("input", () => {
+  clearTimeout(searchTimer);
+  searchTimer = setTimeout(() => loadFiles(searchEl.value), 250);
+});
+
+// ---------- Modale d'options ----------
+async function openModal(file) {
+  currentFile = file;
+  $("#modal-title").textContent = file.name;
+  const info = $("#modal-info");
+  const audioSel = $("#opt-audio");
+  info.textContent = "Analyse du fichier…";
+  audioSel.innerHTML = "";
+  modal.classList.remove("hidden");
+
+  try {
+    const r = await fetch(`/api/probe?path=${encodeURIComponent(file.path)}`);
+    if (!r.ok) throw new Error((await r.json()).detail || "erreur");
+    const p = await r.json();
+    const badges = [];
+    if (p.width) badges.push(`${p.width}×${p.height}`);
+    if (p.hdr) badges.push(`<span class="tag hdr">HDR → tone-mapping</span>`);
+    badges.push(`${Math.round(p.duration / 60)} min`);
+    info.innerHTML = badges.join(" · ");
+
+    p.audio.forEach((a) => {
+      const opt = document.createElement("option");
+      const lang = langName[a.lang] || a.lang.toUpperCase();
+      const ch = a.channels ? `${a.channels}ch` : "";
+      opt.value = a.a_index;
+      opt.textContent = `#${a.a_index} · ${lang} · ${a.codec} ${ch}${a.title ? " — " + a.title : ""}`;
+      if (a.a_index === p.default_audio) opt.selected = true;
+      audioSel.appendChild(opt);
+    });
+    if (!p.audio.length) {
+      audioSel.innerHTML = `<option value="0">(aucune piste audio détectée)</option>`;
+    }
+  } catch (e) {
+    info.innerHTML = `<span class="err">Impossible d'analyser : ${e.message}</span>`;
+  }
+}
+
+$("#modal-cancel").addEventListener("click", () => modal.classList.add("hidden"));
+modal.addEventListener("click", (e) => { if (e.target === modal) modal.classList.add("hidden"); });
+
+$("#modal-start").addEventListener("click", async () => {
+  if (!currentFile) return;
+  const body = {
+    path: currentFile.path,
+    resolution: $("#opt-res").value,
+    audio: parseInt($("#opt-audio").value || "0", 10),
+  };
+  modal.classList.add("hidden");
+  const r = await fetch("/api/convert", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(body),
+  });
+  if (r.ok) { await refreshJobs(); }
+  else { alert("Erreur : " + ((await r.json()).detail || r.status)); }
+});
+
+// ---------- Jobs / progression ----------
+function jobRow(j) {
+  const li = document.createElement("li");
+  li.className = `job ${j.status}`;
+  let right = "";
+  if (j.status === "done") {
+    right = `<a class="btn primary" href="/api/result/${j.id}">⬇ Télécharger l'AVI</a>
+             <button class="btn ghost small del">✕</button>`;
+  } else if (j.status === "error") {
+    right = `<button class="btn ghost small del">✕</button>`;
+  } else {
+    right = `<button class="btn ghost small del">Annuler</button>`;
+  }
+  const statusTxt = {
+    queued: "En attente…", running: "Conversion…", done: `Terminé · ${human(j.size)}`,
+    error: "Échec", }[j.status] || j.status;
+  li.innerHTML = `
+    <div class="job-head">
+      <span class="job-name">${j.source}</span>
+      <span class="job-status">${statusTxt}${j.hdr ? " · HDR" : ""}</span>
+    </div>
+    <div class="bar"><div class="bar-fill" style="width:${j.progress || 0}%"></div></div>
+    <div class="job-actions">${right}</div>`;
+  if (j.status === "error") {
+    const d = document.createElement("div");
+    d.className = "job-err";
+    d.textContent = (j.error || "").split("\n").filter(Boolean).slice(-1)[0] || "Erreur inconnue";
+    li.appendChild(d);
+  }
+  const del = li.querySelector(".del");
+  if (del) del.addEventListener("click", async () => {
+    await fetch(`/api/jobs/${j.id}`, { method: "DELETE" });
+    refreshJobs();
+  });
+  return li;
+}
+
+async function refreshJobs() {
+  const r = await fetch("/api/jobs");
+  if (!checkAuth(r)) return;
+  const { jobs } = await r.json();
+  jobsEl.innerHTML = "";
+  if (!jobs.length) {
+    jobsEl.innerHTML = `<li class="empty">Aucune conversion pour l'instant.</li>`;
+    return;
+  }
+  jobs.forEach((j) => jobsEl.appendChild(jobRow(j)));
+}
+
+// Poll régulier des jobs
+setInterval(refreshJobs, 1500);
+
+// ---------- Utilisateur connecté ----------
+async function loadUser() {
+  try {
+    const r = await fetch("/api/me");
+    const d = await r.json();
+    if (d.auth && d.user) {
+      $("#user-name").textContent = `👤 ${d.user.name}`;
+      $("#user").classList.remove("hidden");
+    }
+  } catch { /* ignore */ }
+}
+
+// Init
+loadUser();
+loadFiles();
+refreshJobs();
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>MKV → AVI</title>
+  <link rel="stylesheet" href="/static/style.css" />
+</head>
+<body>
+  <header>
+    <div class="header-inner">
+      <div>
+        <h1>🎬 MKV → AVI</h1>
+        <p class="sub">Convertir des films (4K/HDR) en AVI Xvid pour vieux lecteurs</p>
+      </div>
+      <div id="user" class="user hidden">
+        <span id="user-name" class="user-name"></span>
+        <a class="btn ghost small" href="/logout">Déconnexion</a>
+      </div>
+    </div>
+  </header>
+
+  <main>
+    <section class="panel">
+      <div class="search">
+        <input id="search" type="search" placeholder="Rechercher un fichier dans le dossier média…" autocomplete="off" />
+        <span id="count" class="count"></span>
+      </div>
+      <ul id="files" class="files"></ul>
+    </section>
+
+    <section class="panel">
+      <h2>Conversions</h2>
+      <ul id="jobs" class="jobs"><li class="empty">Aucune conversion pour l'instant.</li></ul>
+    </section>
+  </main>
+
+  <!-- Modale d'options de conversion -->
+  <div id="modal" class="modal hidden">
+    <div class="modal-box">
+      <h3 id="modal-title">Convertir en AVI</h3>
+      <div id="modal-info" class="info"></div>
+      <label>Définition
+        <select id="opt-res">
+          <option value="720">Compatibilité max — 720 px (vieux lecteurs)</option>
+          <option value="1280">720p — 1280 px</option>
+          <option value="original">Originale (pas de redimensionnement)</option>
+        </select>
+      </label>
+      <label>Piste audio
+        <select id="opt-audio"></select>
+      </label>
+      <div class="modal-actions">
+        <button id="modal-cancel" class="btn ghost">Annuler</button>
+        <button id="modal-start" class="btn primary">🎬 Lancer la conversion</button>
+      </div>
+    </div>
+  </div>
+
+  <script src="/static/app.js"></script>
+</body>
+</html>
@@ -0,0 +1,110 @@
+:root {
+  --bg: #0f1216;
+  --panel: #171b21;
+  --panel-2: #1e242c;
+  --border: #2a323c;
+  --text: #e6e9ee;
+  --muted: #8a94a2;
+  --accent: #e6483d;
+  --accent-2: #3d7de6;
+  --ok: #38b26a;
+  --err: #e2544a;
+}
+* { box-sizing: border-box; }
+body {
+  margin: 0; background: var(--bg); color: var(--text);
+  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+}
+header {
+  padding: 22px 28px; border-bottom: 1px solid var(--border);
+  background: linear-gradient(180deg, #191d24, #12151a);
+}
+header h1 { margin: 0; font-size: 22px; }
+header .sub { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
+.header-inner {
+  max-width: 960px; margin: 0 auto; display: flex;
+  align-items: center; justify-content: space-between; gap: 16px;
+}
+.user { display: flex; align-items: center; gap: 10px; }
+.user.hidden { display: none; }
+.user-name { color: var(--text); font-size: 13px; white-space: nowrap; }
+main {
+  max-width: 960px; margin: 0 auto; padding: 24px 20px;
+  display: grid; gap: 22px;
+}
+.panel {
+  background: var(--panel); border: 1px solid var(--border);
+  border-radius: 12px; padding: 18px;
+}
+.panel h2 { margin: 0 0 12px; font-size: 15px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
+
+.search { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
+.search input {
+  flex: 1; padding: 12px 14px; border-radius: 9px;
+  border: 1px solid var(--border); background: var(--panel-2);
+  color: var(--text); font-size: 15px; outline: none;
+}
+.search input:focus { border-color: var(--accent-2); }
+.count { color: var(--muted); font-size: 13px; white-space: nowrap; }
+
+.files, .jobs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
+.empty { color: var(--muted); padding: 14px; text-align: center; }
+
+.file {
+  display: flex; align-items: center; justify-content: space-between; gap: 14px;
+  padding: 12px 14px; background: var(--panel-2);
+  border: 1px solid var(--border); border-radius: 9px;
+}
+.file-main { min-width: 0; }
+.file-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.file-name .dir { color: var(--muted); font-weight: 400; }
+.file-meta { color: var(--muted); font-size: 12px; margin-top: 2px; }
+.file-actions { display: flex; gap: 8px; flex-shrink: 0; }
+
+.btn {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 8px 13px; border-radius: 8px; border: 1px solid var(--border);
+  background: var(--panel); color: var(--text); font-size: 13px;
+  cursor: pointer; text-decoration: none; white-space: nowrap;
+}
+.btn:hover { border-color: #3a4552; }
+.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
+.btn.primary:hover { filter: brightness(1.08); }
+.btn.ghost { background: transparent; }
+.btn.small { padding: 5px 9px; font-size: 12px; }
+
+/* Jobs */
+.job { padding: 12px 14px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 9px; }
+.job-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
+.job-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.job-status { color: var(--muted); font-size: 13px; white-space: nowrap; }
+.job.done .job-status { color: var(--ok); }
+.job.error .job-status { color: var(--err); }
+.bar { height: 8px; background: #0d1116; border-radius: 6px; overflow: hidden; }
+.bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent-2), var(--ok)); transition: width .4s ease; }
+.job.done .bar-fill { background: var(--ok); }
+.job.error .bar-fill { background: var(--err); }
+.job-actions { margin-top: 10px; display: flex; gap: 8px; }
+.job-err { margin-top: 8px; color: var(--err); font-size: 12px; font-family: ui-monospace, monospace; word-break: break-word; }
+
+/* Modale */
+.modal {
+  position: fixed; inset: 0; background: rgba(0,0,0,.6);
+  display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 50;
+}
+.modal.hidden { display: none; }
+.modal-box {
+  width: 100%; max-width: 460px; background: var(--panel);
+  border: 1px solid var(--border); border-radius: 14px; padding: 22px;
+}
+.modal-box h3 { margin: 0 0 6px; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.modal .info { color: var(--muted); font-size: 13px; margin-bottom: 16px; }
+.modal label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 14px; }
+.modal select {
+  width: 100%; margin-top: 6px; padding: 10px; border-radius: 8px;
+  background: var(--panel-2); border: 1px solid var(--border); color: var(--text); font-size: 14px;
+}
+.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
+.tag { padding: 2px 8px; border-radius: 20px; font-size: 11px; }
+.tag.hdr { background: rgba(61,125,230,.18); color: #7ea6f0; }
+.err { color: var(--err); }