v0.1.0 — Réécriture complète de OhmStreaming

Nouvelle version réécrite de zéro : recherche multi-sources (Vostfree,
French-Manga), extraction 2 niveaux, proxy vidéo intégré, streaming/téléchargement
HLS, métadonnées Kitsu, bibliothèque locale, comptes JWT + administration,
découverte fusionnée, indexeur Torznab (Sonarr/Prowlarr).

app/templates/admin.html

@@ -0,0 +1,199 @@
+{% extends "base.html" %}
+{% set active = 'admin' %}
+{% block title %}Administration — Ohm Stream{% endblock %}
+
+{% block content %}
+<h1 class="page-title">Administration</h1>
+<p class="page-sub">Utilisateurs, sources et santé du système.</p>
+
+<div x-data="adminPage()" x-init="load()">
+
+  <div class="panel">
+    <h2>📊 Statistiques</h2>
+    <div class="title-stats" style="margin-top:0">
+      <span>Utilisateurs : <strong x-text="stats.users ?? '—'"></strong></span>
+      <template x-for="(n, st) in stats.downloads || {}" :key="st">
+        <span><span class="status-pill" :class="'status-' + st" x-text="st"></span> <strong x-text="n"></strong></span>
+      </template>
+    </div>
+  </div>
+
+  <div class="panel">
+    <h2>🌐 Sources de scraping</h2>
+    <table class="table">
+      <thead><tr><th>Source</th><th>URL</th><th>Activée</th><th>Santé</th><th></th></tr></thead>
+      <tbody>
+        <template x-for="s in sources" :key="s.name">
+          <tr>
+            <td><strong x-text="s.label"></strong> <span style="color:var(--text-dim);font-size:0.8rem" x-text="'(' + s.name + ')'"></span></td>
+            <td style="font-size:0.82rem;color:var(--text-dim)" x-text="s.base_url"></td>
+            <td><div class="toggle" :class="s.enabled && 'on'" @click="toggle(s)"></div></td>
+            <td>
+              <span x-show="s.health == null" style="color:var(--text-dim)">—</span>
+              <span x-show="s.health === true" style="color:var(--success)">✔ OK</span>
+              <span x-show="s.health === false" style="color:var(--danger)" :title="s.healthDetail">✖ KO</span>
+            </td>
+            <td><button class="btn btn-sm btn-ghost" @click="healthCheck(s)" :disabled="s._checking" x-text="s._checking ? '…' : 'Tester'"></button></td>
+          </tr>
+        </template>
+      </tbody>
+    </table>
+  </div>
+
+  <div class="panel">
+    <h2>🔗 Intégrations Sonarr / Prowlarr</h2>
+
+    <h3 style="margin:1rem 0 0.4rem;font-size:0.95rem">OhmStreaming comme indexeur (Torznab)</h3>
+    <p style="color:var(--text-dim);font-size:0.85rem;margin:0 0 0.6rem">
+      Ajoutez un indexeur « Torznab » dans Prowlarr ou Sonarr avec cette URL et cette clé —
+      les épisodes grabés par Sonarr entrent directement dans la file de téléchargements OhmStreaming.
+    </p>
+    <table class="table">
+      <tbody>
+        <tr>
+          <td style="width:110px"><strong>URL</strong></td>
+          <td><code x-text="integrations.torznab.endpoint"></code></td>
+          <td style="width:90px"><button class="btn btn-sm btn-ghost" @click="copy(integrations.torznab.endpoint)">Copier</button></td>
+        </tr>
+        <tr>
+          <td><strong>Clé API</strong></td>
+          <td><code x-text="integrations.torznab.apikey"></code></td>
+          <td style="display:flex;gap:0.4rem">
+            <button class="btn btn-sm btn-ghost" @click="copy(integrations.torznab.apikey)">Copier</button>
+            <button class="btn btn-sm btn-ghost" @click="regenerateKey()" :disabled="integrations._regen">Régénérer</button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
+    <h3 style="margin:1.4rem 0 0.4rem;font-size:0.95rem">Sonarr → « Pour toi »</h3>
+    <p style="color:var(--text-dim);font-size:0.85rem;margin:0 0 0.6rem">
+      Les genres des séries téléchargées sur Sonarr personnalisent la section
+      « Pour toi » (ce qui y est possédé n'est pas re-recommandé).
+    </p>
+    <div style="display:flex;gap:0.5rem;flex-wrap:wrap;align-items:center">
+      <input class="input" x-model="integrations.sonarr.url" placeholder="http://sonarr:8989"
+             style="flex:1;min-width:200px" @change="integrations.sonarr._dirty = true">
+      <input class="input" x-model="integrations.sonarr.apikey" placeholder="Clé API Sonarr"
+             style="flex:1;min-width:200px" @change="integrations.sonarr._dirty = true">
+      <button class="btn btn-sm" @click="saveSonarr()" :disabled="!integrations.sonarr._dirty">Enregistrer</button>
+      <button class="btn btn-sm btn-ghost" @click="testSonarr()" :disabled="integrations._testing"
+              x-text="integrations._testing ? '…' : 'Tester'"></button>
+    </div>
+    <p x-show="integrations.testResult" style="margin:0.5rem 0 0;font-size:0.85rem"
+       :style="integrations.testResult?.ok ? 'color:var(--success)' : 'color:var(--danger)'"
+       x-text="integrations.testResult?.detail"></p>
+  </div>
+
+  <div class="panel">
+    <h2>👥 Utilisateurs</h2>
+    <table class="table">
+      <thead><tr><th>ID</th><th>Nom</th><th>Rôle</th><th>Actif</th><th>Créé le</th><th></th></tr></thead>
+      <tbody>
+        <template x-for="u in users" :key="u.id">
+          <tr>
+            <td x-text="u.id"></td>
+            <td><strong x-text="u.username"></strong></td>
+            <td>
+              <span class="badge" :class="u.is_admin ? 'badge-source' : 'badge-type'"
+                    x-text="u.is_admin ? 'admin' : 'utilisateur'"></span>
+            </td>
+            <td><div class="toggle" :class="u.is_active && 'on'" @click="post(`/api/admin/users/${u.id}/toggle-active`)"></div></td>
+            <td style="font-size:0.82rem;color:var(--text-dim)" x-text="u.created_at?.slice(0, 10)"></td>
+            <td style="display:flex;gap:0.4rem">
+              <button class="btn btn-sm btn-ghost" @click="post(`/api/admin/users/${u.id}/toggle-admin`)" x-text="u.is_admin ? 'Rétrograder' : 'Promouvoir'"></button>
+              <button class="btn btn-sm btn-danger" @click="del(u)">Supprimer</button>
+            </td>
+          </tr>
+        </template>
+      </tbody>
+    </table>
+  </div>
+
+  <template x-if="forbidden">
+    <div class="login-error">Cette page est réservée aux administrateurs.</div>
+  </template>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+function adminPage() {
+  return {
+    users: [], sources: [], stats: {}, forbidden: false,
+    integrations: {
+      torznab: { apikey: '', endpoint: '' }, sonarr: { url: '', apikey: '' },
+      _regen: false, _testing: false, testResult: null,
+    },
+
+    async load() {
+      const [u, s, st] = await Promise.all([
+        fetch('/api/admin/users'), fetch('/api/admin/sources'), fetch('/api/admin/stats'),
+      ]);
+      if (u.status === 403) { this.forbidden = true; return; }
+      this.users = await u.json();
+      this.sources = await s.json();
+      this.stats = await st.json();
+      const itg = await fetch('/api/admin/integrations');
+      if (itg.ok) {
+        const data = await itg.json();
+        this.integrations.torznab = data.torznab;
+        this.integrations.sonarr = { ...data.sonarr, _dirty: false };
+      }
+    },
+
+    copy(value) {
+      navigator.clipboard.writeText(value).then(() => toast('✔ Copié'));
+    },
+
+    async regenerateKey() {
+      if (!confirm('Régénérer la clé API Torznab ? Les indexeurs configurés devront être mis à jour.')) return;
+      this.integrations._regen = true;
+      const res = await fetch('/api/admin/integrations/torznab/regenerate', { method: 'POST' });
+      if (res.ok) { this.integrations.torznab.apikey = (await res.json()).apikey; toast('✔ Nouvelle clé générée'); }
+      this.integrations._regen = false;
+    },
+
+    async saveSonarr() {
+      const res = await fetch('/api/admin/integrations/sonarr', {
+        method: 'PUT', headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ url: this.integrations.sonarr.url, apikey: this.integrations.sonarr.apikey }),
+      });
+      if (res.ok) { this.integrations.sonarr._dirty = false; toast('✔ Configuration Sonarr enregistrée'); }
+    },
+
+    async toggle(s) {
+      const res = await fetch(`/api/admin/sources/${s.name}/toggle`, {
+        method: 'POST', headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ enabled: !s.enabled }),
+      });
+      if (res.ok) s.enabled = !s.enabled;
+    },
+
+    async healthCheck(s) {
+      s._checking = true;
+      const res = await fetch(`/api/admin/sources/${s.name}/health`, { method: 'POST' });
+      const data = await res.json();
+      s.health = data.healthy; s.healthDetail = data.detail;
+      s._checking = false;
+      toast(data.healthy ? `✔ ${s.label} : ${data.detail}` : `✖ ${s.label} : ${data.detail}`);
+    },
+
+    async post(url) { await fetch(url, { method: 'POST' }); await this.load(); },
+
+    async testSonarr() {
+      this.integrations._testing = true;
+      const res = await fetch('/api/admin/integrations/sonarr/test', { method: 'POST' });
+      this.integrations.testResult = res.ok ? await res.json() : { ok: false, detail: 'Erreur serveur' };
+      this.integrations._testing = false;
+    },
+
+    async del(u) {
+      if (!confirm(`Supprimer le compte « ${u.username} » ?`)) return;
+      await fetch('/api/admin/users/' + u.id, { method: 'DELETE' });
+      await this.load();
+    },
+  };
+}
+</script>
+{% endblock %}

app/templates/base.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>{% block title %}Ohm Stream{% endblock %}</title>
+  <link rel="stylesheet" href="/static/css/style.css">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+  <script src="https://unpkg.com/htmx.org@2.0.4"></script>
+  <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.1/dist/cdn.min.js"></script>
+</head>
+<body>
+<header class="topbar" x-data="{ username: '' }" x-init="fetch('/auth/me').then(r => r.json()).then(u => username = u.username).catch(() => {})">
+  <a class="logo" href="/">OHM<span>STREAM</span></a>
+  <nav class="topnav">
+    <a class="{{ 'active' if active == 'discover' }}" href="/discover">Découvrir</a>
+    <a class="{{ 'active' if active == 'search' }}" href="/">Recherche</a>
+    <a class="{{ 'active' if active == 'downloads' }}" href="/downloads">Téléchargements</a>
+    <a class="{{ 'active' if active == 'library' }}" href="/library">Bibliothèque</a>
+    <a class="{{ 'active' if active == 'favorites' }}" href="/favorites">Favoris</a>
+    <a class="{{ 'active' if active == 'admin' }}" href="/admin">Admin</a>
+  </nav>
+  <div class="topbar-right">
+    <div class="avatar" x-text="username ? username[0] : '·'" :title="username"></div>
+    <form method="post" action="/auth/logout" style="display:inline">
+      <button class="icon-btn" type="submit" title="Déconnexion">⏻</button>
+    </form>
+  </div>
+</header>
+<main class="main">
+  {% block content %}{% endblock %}
+</main>
+<script src="/static/js/app.js"></script>
+{% block scripts %}{% endblock %}
+</body>
+</html>

app/templates/discover.html

@@ -0,0 +1,141 @@
+{% extends "base.html" %}
+{% set active = 'discover' %}
+{% block title %}Découvrir — Ohm Stream{% endblock %}
+
+{% block content %}
+<h1 class="page-title">Découvrir</h1>
+<p class="page-sub">Nouveautés de tes sources, incontournables et suggestions basées sur tes téléchargements.</p>
+
+<div x-data="discoverPage()" x-init="load()" x-cloak>
+
+  <!-- ------------------------------------------------ Skeletons de chargement -->
+  <div x-show="loading">
+    <section class="rail-section" x-data="{ n: 8 }">
+      <div class="skel skel-title"></div>
+      <div class="rail rail-skel">
+        <template x-for="i in n"><div class="rail-card skel skel-card"></div></template>
+      </div>
+    </section>
+    <section class="rail-section" x-data="{ n: 8 }">
+      <div class="skel skel-title"></div>
+      <div class="rail rail-skel">
+        <template x-for="i in n"><div class="rail-card skel skel-card"></div></template>
+      </div>
+    </section>
+  </div>
+
+  <template x-if="error">
+    <div class="login-error" x-text="error"></div>
+  </template>
+
+  <!-- ------------------------------------------------ Nouveautés -->
+  <section class="rail-section" x-show="!loading && latest.length > 0">
+    <h2 class="rail-title">🆕 Nouveautés <span class="rail-source">de tes sources, triées par date de sortie</span></h2>
+    <div class="rail-wrap">
+      <button class="rail-nav rail-prev" type="button" aria-label="Défiler à gauche"
+              @click="scrollRail($el, -1)">‹</button>
+      <div class="rail">
+        <template x-for="(item, i) in latest" :key="item.source + item.source_id">
+          <a class="card rail-card" :style="`--i:${i}`" :href="`/title/${item.source}/${encodeURIComponent(item.source_id)}`">
+            <img class="card-poster" :src="item.image_url || '/static/img/placeholder.svg'" :alt="item.title"
+                 loading="lazy" onerror="this.src='/static/img/placeholder.svg'">
+            <span class="card-chip" x-text="item.label"></span>
+            <span class="card-year" x-text="item.start_date ? item.start_date.slice(0, 4) : ''"></span>
+            <span class="card-airing" x-show="item.status === 'current'" title="En cours de diffusion">● EN COURS</span>
+            <div class="card-overlay">
+              <div class="card-title" x-text="item.title"></div>
+              <div class="card-meta">
+                <span class="badge badge-type" x-show="item.rating" x-text="item.rating ? '★ ' + item.rating : ''"></span>
+              </div>
+            </div>
+          </a>
+        </template>
+      </div>
+      <button class="rail-nav rail-next" type="button" aria-label="Défiler à droite"
+              @click="scrollRail($el, 1)">›</button>
+    </div>
+  </section>
+
+  <!-- ------------------------------------------------ Incontournables -->
+  <section class="rail-section" x-show="!loading && mustWatch.length > 0">
+    <h2 class="rail-title">🔥 Incontournables <span class="rail-source">les classiques les mieux notés</span></h2>
+    <div class="rail-wrap">
+      <button class="rail-nav rail-prev" type="button" aria-label="Défiler à gauche"
+              @click="scrollRail($el, -1)">‹</button>
+      <div class="rail">
+        <template x-for="(item, i) in mustWatch" :key="'mw' + item.kitsu_id">
+          <a class="card rail-card" :style="`--i:${i}`" :href="`/?q=${encodeURIComponent(item.title)}`" :title="`Rechercher « ${item.title} »`">
+            <img class="card-poster" :src="item.image_url || '/static/img/placeholder.svg'" :alt="item.title"
+                 loading="lazy" onerror="this.src='/static/img/placeholder.svg'">
+            <span class="card-chip" x-show="item.rating" x-text="item.rating ? '★ ' + item.rating : ''"></span>
+            <div class="card-overlay">
+              <div class="card-title" x-text="item.title"></div>
+              <div class="card-meta"><span class="badge badge-type" x-text="item.year || ''"></span></div>
+            </div>
+          </a>
+        </template>
+      </div>
+      <button class="rail-nav rail-next" type="button" aria-label="Défiler à droite"
+              @click="scrollRail($el, 1)">›</button>
+    </div>
+  </section>
+
+  <!-- ------------------------------------------------ Pour toi -->
+  <section class="rail-section" x-show="!loading && forYou.items.length > 0">
+    <h2 class="rail-title">✨ Pour toi
+      <span class="rail-source" x-show="forYou.based_on.length"
+            x-text="forYou.based_on.length ? 'parce que tu aimes : ' + forYou.based_on.join(', ') : ''"></span>
+    </h2>
+    <div class="rail-wrap">
+      <button class="rail-nav rail-prev" type="button" aria-label="Défiler à gauche"
+              @click="scrollRail($el, -1)">‹</button>
+      <div class="rail">
+        <template x-for="(item, i) in forYou.items" :key="'fy' + item.kitsu_id">
+          <a class="card rail-card" :style="`--i:${i}`" :href="`/?q=${encodeURIComponent(item.title)}`" :title="`Rechercher « ${item.title} »`">
+            <img class="card-poster" :src="item.image_url || '/static/img/placeholder.svg'" :alt="item.title"
+                 loading="lazy" onerror="this.src='/static/img/placeholder.svg'">
+            <span class="card-chip" x-show="item.rating" x-text="item.rating ? '★ ' + item.rating : ''"></span>
+            <div class="card-overlay">
+              <div class="card-title" x-text="item.title"></div>
+              <div class="card-meta"><span class="badge badge-type" x-text="item.year || ''"></span></div>
+            </div>
+          </a>
+        </template>
+      </div>
+      <button class="rail-nav rail-next" type="button" aria-label="Défiler à droite"
+              @click="scrollRail($el, 1)">›</button>
+    </div>
+  </section>
+
+  <template x-if="!loading && !error && latest.length === 0 && mustWatch.length === 0 && forYou.items.length === 0">
+    <div class="empty-state"><div class="big">🏜️</div>Rien à afficher pour le moment — réessaie plus tard.</div>
+  </template>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+function discoverPage() {
+  return {
+    latest: [], mustWatch: [], forYou: { based_on: [], items: [] },
+    loading: true, error: null,
+    scrollRail(el, dir) {
+      const rail = el.closest('.rail-wrap').querySelector('.rail');
+      rail.scrollBy({ left: dir * rail.clientWidth * 0.85, behavior: 'smooth' });
+    },
+    async load() {
+      this.loading = true; this.error = null;
+      try {
+        const res = await fetch('/api/discover');
+        if (!res.ok) throw new Error('Erreur ' + res.status);
+        const data = await res.json();
+        this.latest = data.latest;
+        this.mustWatch = data.must_watch;
+        this.forYou = data.for_you;
+      } catch (e) { this.error = e.message; }
+      finally { this.loading = false; }
+    },
+  };
+}
+</script>
+{% endblock %}

app/templates/downloads.html

@@ -0,0 +1,122 @@
+{% extends "base.html" %}
+{% set active = 'downloads' %}
+{% block title %}Téléchargements — Ohm Stream{% endblock %}
+
+{% block content %}
+<div x-data="downloadsPage()" x-init="connect()">
+  <div style="display:flex;align-items:center;gap:0.8rem;margin-bottom:1.6rem">
+    <div>
+      <h1 class="page-title">Téléchargements</h1>
+      <p class="page-sub" style="margin-bottom:0">
+        <span x-text="items.length"></span> tâche(s) —
+        <span :style="connected ? 'color:var(--success)' : 'color:var(--danger)'"
+              x-text="connected ? '● temps réel' : '○ reconnecté…'"></span>
+      </p>
+    </div>
+    <div style="flex:1"></div>
+    <button class="btn btn-ghost btn-sm" @click="action('clear-finished')">🧹 Nettoyer</button>
+    <button class="btn btn-danger btn-sm" @click="action('cancel-all')">✖ Tout annuler</button>
+  </div>
+
+  <template x-if="items.length === 0">
+    <div class="empty-state"><div class="big">📭</div>Aucun téléchargement. Lance une recherche !</div>
+  </template>
+
+  <div class="episode-list">
+    <template x-for="d in items" :key="d.id">
+      <div class="dl-row">
+        <div class="dl-head">
+          <span class="status-pill" :class="'status-' + d.status" x-text="d.status_label"></span>
+          <span class="dl-title" x-text="d.title"></span>
+          <div class="dl-actions">
+            <template x-if="d.status === 'downloading'">
+              <button class="btn btn-sm btn-ghost" @click="action(d.id + '/pause')">⏸</button>
+            </template>
+            <template x-if="d.status === 'paused'">
+              <button class="btn btn-sm btn-ghost" @click="action(d.id + '/resume')">▶</button>
+            </template>
+            <template x-if="['failed', 'cancelled'].includes(d.status)">
+              <button class="btn btn-sm btn-ghost" @click="action(d.id + '/retry')">↻</button>
+            </template>
+            <template x-if="['pending', 'downloading', 'paused'].includes(d.status)">
+              <button class="btn btn-sm btn-danger" @click="action(d.id + '/cancel')">✖</button>
+            </template>
+            <template x-if="d.status === 'done'">
+              <a class="btn btn-sm" :href="'/watch/' + d.id">▶ Regarder</a>
+            </template>
+          </div>
+        </div>
+        <div style="display:flex;align-items:center;gap:0.9rem">
+          <div class="progress">
+            <div class="progress-fill" :class="d.status"
+                 :style="`width:${d.percent ?? (d.status === 'done' ? 100 : 0)}%`"></div>
+          </div>
+          <span style="min-width:4rem;text-align:right;font-size:0.85rem;font-weight:600"
+                x-text="d.percent != null ? d.percent + '%' : (d.status === 'done' ? '100%' : '—')"></span>
+        </div>
+        <div class="dl-stats">
+          <span x-text="fmtBytes(d.downloaded_bytes) + ' / ' + (d.total_bytes ? fmtBytes(d.total_bytes) : '?')"></span>
+          <span x-show="d.speed_bps" x-text="'⚡ ' + fmtBytes(d.speed_bps) + '/s'"></span>
+          <span x-show="d.eta_seconds != null" x-text="'⏱ ' + fmtEta(d.eta_seconds)"></span>
+          <span x-show="d.error" style="color:var(--danger)" x-text="d.error"></span>
+        </div>
+      </div>
+    </template>
+  </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+function downloadsPage() {
+  return {
+    items: [], connected: false, es: null,
+
+    connect() {
+      this.es = new EventSource('/api/downloads/events');
+      this.es.onopen = () => this.connected = true;
+      this.es.onerror = () => this.connected = false;
+      this.es.onmessage = (ev) => {
+        const msg = JSON.parse(ev.data);
+        if (msg.type === 'snapshot') this.items = msg.items;
+        else if (msg.type === 'update') this.upsert(msg.item);
+      };
+    },
+
+    upsert(item) {
+      const i = this.items.findIndex(d => d.id === item.id);
+      if (i >= 0) this.items[i] = item;
+      else this.items.unshift(item);
+      this.sort();
+    },
+
+    sort() {
+      const order = { downloading: 0, pending: 1, paused: 2 };
+      this.items.sort((a, b) => (order[a.status] ?? 3) - (order[b.status] ?? 3));
+    },
+
+    async action(path) {
+      await fetch('/api/downloads/' + path, { method: 'POST' });
+      if (path === 'clear-finished') {
+        const res = await fetch('/api/downloads');
+        this.items = await res.json();
+      }
+    },
+
+    fmtBytes(n) {
+      if (n == null) return '?';
+      const units = ['o', 'Ko', 'Mo', 'Go'];
+      let i = 0;
+      while (n >= 1024 && i < units.length - 1) { n /= 1024; i++; }
+      return n.toFixed(i ? 1 : 0) + ' ' + units[i];
+    },
+
+    fmtEta(s) {
+      if (s < 60) return s + 's';
+      if (s < 3600) return Math.floor(s / 60) + 'min';
+      return Math.floor(s / 3600) + 'h' + String(Math.floor((s % 3600) / 60)).padStart(2, '0');
+    },
+  };
+}
+</script>
+{% endblock %}

app/templates/favorites.html

@@ -0,0 +1,62 @@
+{% extends "base.html" %}
+{% set active = 'favorites' %}
+{% block title %}Favoris — Ohm Stream{% endblock %}
+
+{% block content %}
+<h1 class="page-title">Favoris</h1>
+<p class="page-sub" x-data x-text="$store.fav?.total != null ? $store.fav.total + ' titre(s) suivi(s)' : ''"></p>
+
+<div x-data="favoritesPage()" x-init="load()">
+  <div class="spinner" x-show="loading"></div>
+
+  <template x-if="!loading && items.length === 0">
+    <div class="empty-state"><div class="big">⭐</div>Aucun favori — ajoute-en depuis une fiche de titre.</div>
+  </template>
+
+  <div class="grid">
+    <template x-for="f in items" :key="f.id">
+      <div class="card">
+        <a :href="`/title/${f.source}/${encodeURIComponent(f.source_id)}`">
+          <img class="card-poster" :src="f.image_url || '/static/img/placeholder.svg'" loading="lazy"
+               onerror="this.src='/static/img/placeholder.svg'">
+        </a>
+        <span class="card-chip" x-text="f.source"></span>
+        <button class="btn btn-sm btn-danger" style="position:absolute;top:0.5rem;right:0.5rem"
+                @click.prevent="remove(f)">✖</button>
+        <div class="card-overlay">
+          <div class="card-title" x-text="f.title"></div>
+        </div>
+      </div>
+    </template>
+  </div>
+
+  <div style="display:flex;gap:0.6rem;justify-content:center;margin-top:1.6rem" x-show="total > limit">
+    <button class="btn btn-ghost btn-sm" :disabled="offset === 0" @click="page(-1)">← Précédent</button>
+    <button class="btn btn-ghost btn-sm" :disabled="offset + limit >= total" @click="page(1)">Suivant →</button>
+  </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+function favoritesPage() {
+  return {
+    items: [], total: 0, offset: 0, limit: 24, loading: true,
+    async load() {
+      this.loading = true;
+      const res = await fetch(`/api/favorites?offset=${this.offset}&limit=${this.limit}`);
+      const data = await res.json();
+      this.items = data.items; this.total = data.total;
+      Alpine.store('fav', { total: data.total });
+      this.loading = false;
+    },
+    async page(dir) { this.offset = Math.max(0, this.offset + dir * this.limit); await this.load(); },
+    async remove(f) {
+      await fetch('/api/favorites/' + f.id, { method: 'DELETE' });
+      await this.load();
+      toast('Favori retiré');
+    },
+  };
+}
+</script>
+{% endblock %}

app/templates/index.html

@@ -0,0 +1,66 @@
+{% extends "base.html" %}
+{% set active = 'search' %}
+{% block title %}Recherche — Ohm Stream{% endblock %}
+
+{% block content %}
+<h1 class="page-title">Recherche unifiée</h1>
+<p class="page-sub">Une seule requête interroge toutes tes sources activées.</p>
+
+<div x-data="searchPage()">
+  <form class="search-bar" @submit.prevent="run">
+    <input type="search" x-model="query" placeholder="Naruto, One Piece, Frieren…" autofocus>
+    <button class="btn" type="submit" :disabled="loading">Rechercher</button>
+  </form>
+
+  <div class="spinner" x-show="loading"></div>
+
+  <template x-if="error">
+    <div class="login-error" x-text="error"></div>
+  </template>
+
+  <template x-if="!loading && searched && results.length === 0">
+    <div class="empty-state"><div class="big">🏜️</div>Aucun résultat pour cette recherche.</div>
+  </template>
+
+  <div class="grid" x-show="results.length > 0">
+    <template x-for="r in results" :key="r.source + r.source_id">
+        <a class="card" :href="`/title/${r.source}/${encodeURIComponent(r.source_id)}`">
+        <img class="card-poster" :src="r.image_url || '/static/img/placeholder.svg'" :alt="r.title" loading="lazy"
+             onerror="this.src='/static/img/placeholder.svg'">
+        <span class="card-chip" x-text="r.source"></span>
+        <div class="card-overlay">
+          <div class="card-title" x-text="r.title"></div>
+          <div class="card-meta">
+            <span class="badge badge-type" x-text="r.media_type"></span>
+          </div>
+        </div>
+      </a>
+    </template>
+  </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+function searchPage() {
+  return {
+    query: new URLSearchParams(location.search).get('q') || '',
+    results: [], loading: false, searched: false, error: null,
+    init() { if (this.query) this.run(); },
+    async run() {
+      if (this.query.trim().length < 2) return;
+      this.loading = true; this.error = null; this.searched = false;
+      history.replaceState(null, '', '?q=' + encodeURIComponent(this.query));
+      try {
+        const res = await fetch('/api/search?q=' + encodeURIComponent(this.query.trim()));
+        if (!res.ok) throw new Error('Erreur ' + res.status);
+        const data = await res.json();
+        this.results = data.results;
+        if (data.failed_sources.length) this.error = 'Sources en échec : ' + data.failed_sources.join(', ');
+      } catch (e) { this.error = e.message; }
+      finally { this.loading = false; this.searched = true; }
+    }
+  };
+}
+</script>
+{% endblock %}

app/templates/library.html

@@ -0,0 +1,54 @@
+{% extends "base.html" %}
+{% set active = 'library' %}
+{% block title %}Bibliothèque — Ohm Stream{% endblock %}
+
+{% block content %}
+<h1 class="page-title">Bibliothèque</h1>
+<p class="page-sub">Tes fichiers téléchargés, prêts à être regardés.</p>
+
+<div x-data="libraryPage()" x-init="load()">
+  <div class="spinner" x-show="loading"></div>
+
+  <template x-if="!loading && items.length === 0">
+    <div class="empty-state"><div class="big">🎞️</div>Rien ici pour l'instant — télécharge des épisodes !</div>
+  </template>
+
+  <div class="episode-list">
+    <template x-for="f in items" :key="f.id">
+      <a class="episode-row" :href="'/watch/' + f.id">
+        <span style="font-size:1.3rem">🎬</span>
+        <span class="episode-name" style="font-weight:600" x-text="f.title"></span>
+        <span style="font-size:0.8rem;color:var(--text-dim)" x-text="fmtBytes(f.total_bytes)"></span>
+        <span x-show="f.position_seconds > 0" class="badge badge-type"
+              x-text="'⏵ ' + fmtTime(f.position_seconds)"></span>
+        <span class="btn btn-sm">▶</span>
+      </a>
+    </template>
+  </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+function libraryPage() {
+  return {
+    items: [], loading: true,
+    async load() {
+      const res = await fetch('/api/library');
+      this.items = await res.json();
+      this.loading = false;
+    },
+    fmtBytes(n) {
+      if (n == null) return '';
+      const units = ['o', 'Ko', 'Mo', 'Go']; let i = 0;
+      while (n >= 1024 && i < units.length - 1) { n /= 1024; i++; }
+      return n.toFixed(i ? 1 : 0) + ' ' + units[i];
+    },
+    fmtTime(s) {
+      const h = Math.floor(s / 3600), m = Math.floor((s % 3600) / 60), sec = Math.floor(s % 60);
+      return (h ? h + ':' + String(m).padStart(2, '0') : m) + ':' + String(sec).padStart(2, '0');
+    },
+  };
+}
+</script>
+{% endblock %}

app/templates/login.html

@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Connexion — Ohm Stream</title>
+  <link rel="stylesheet" href="/static/css/style.css">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+  <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.1/dist/cdn.min.js"></script>
+</head>
+<body class="login-page">
+  <div class="login-card" x-data="{ mode: 'login', error: null }"
+       x-init="
+         window.addEventListener('htmx:responseError', e => {
+           error = e.detail.xhr.status === 401 ? 'Identifiants invalides'
+                 : e.detail.xhr.status === 409 ? 'Nom d\'utilisateur déjà pris'
+                 : 'Erreur ' + e.detail.xhr.status;
+         })">
+    <span class="logo">OHM<span style="color:var(--text);font-weight:400">STREAM</span></span>
+    <p class="login-sub">Ton centre de contrôle anime &amp; séries</p>
+
+    <div class="login-tabs">
+      <div class="login-tab" :class="mode === 'login' && 'active'" @click="mode = 'login'; error = null">Connexion</div>
+      <div class="login-tab" :class="mode === 'register' && 'active'" @click="mode = 'register'; error = null">Inscription</div>
+    </div>
+
+    <div class="login-error" x-show="error" x-text="error" style="margin-bottom:0.8rem"></div>
+
+    <form x-show="mode === 'login'" hx-post="/auth/login" hx-swap="none">
+      <input class="input" name="username" placeholder="Nom d'utilisateur" required autocomplete="username">
+      <input class="input" name="password" type="password" placeholder="Mot de passe" required autocomplete="current-password">
+      <button class="btn" type="submit">Se connecter</button>
+    </form>
+
+    <form x-show="mode === 'register'" hx-post="/auth/register" hx-swap="none">
+      <input class="input" name="username" placeholder="Nom d'utilisateur (3+ caractères)" required minlength="3" autocomplete="username">
+      <input class="input" name="password" type="password" placeholder="Mot de passe (6+ caractères)" required minlength="6" autocomplete="new-password">
+      <button class="btn" type="submit">Créer mon compte</button>
+      <p style="font-size:0.75rem;color:var(--text-dim);text-align:center">Le premier compte créé est administrateur.</p>
+    </form>
+  </div>
+  <script src="https://unpkg.com/htmx.org@2.0.4"></script>
+  <script>
+    // Redirection après login/register réussi (303 intercepté par htmx)
+    document.body.addEventListener('htmx:afterRequest', e => {
+      if (e.detail.successful && (e.detail.pathInfo.requestPath.startsWith('/auth/login') || e.detail.pathInfo.requestPath.startsWith('/auth/register'))) {
+        window.location.href = '/';
+      }
+    });
+  </script>
+</body>
+</html>

app/templates/title.html

@@ -0,0 +1,176 @@
+{% extends "base.html" %}
+{% set active = 'search' %}
+{% block title %}Fiche — Ohm Stream{% endblock %}
+
+{% block content %}
+<div x-data="titlePage()" data-source="{{ source }}" data-source-id="{{ source_id }}"
+     x-init="load($el.dataset.source, $el.dataset.sourceId)">
+  <div class="spinner" x-show="loading"></div>
+
+  <template x-if="error">
+    <div class="login-error" x-text="error"></div>
+  </template>
+
+  <template x-if="details">
+    <div>
+      <div class="title-hero">
+        <div class="title-banner" :style="details.banner_url || details.image_url ? `background-image:url('${details.banner_url || details.image_url}')` : ''"></div>
+        <div class="title-hero-inner">
+          <img class="title-poster" :src="details.image_url || '/static/img/placeholder.svg'"
+               onerror="this.src='/static/img/placeholder.svg'">
+          <div class="title-info">
+            <h1 x-text="details.title"></h1>
+            <div class="title-tags">
+              <span class="badge badge-source" x-text="details.source"></span>
+              <template x-for="g in details.genres.slice(0, 6)"><span class="badge badge-type" x-text="g"></span></template>
+            </div>
+            <p class="title-synopsis" x-text="details.synopsis || 'Pas de synopsis disponible.'"></p>
+            <div class="title-stats">
+              <span x-show="details.rating"><span class="rating-star">★</span> <strong x-text="details.rating"></strong>/10</span>
+              <span x-show="details.year">Année : <strong x-text="details.year"></strong></span>
+              <span><strong x-text="details.episodes.length"></strong> épisode(s)</span>
+            </div>
+            <div class="title-actions">
+              <button class="btn" @click="downloadSeason" :disabled="seasonJob.running">
+                <span x-show="!seasonJob.running">⬇ Télécharger la saison</span>
+                <span x-show="seasonJob.running" x-text="`⏳ ${seasonJob.done}/${seasonJob.total} ajoutés…`"></span>
+              </button>
+              <button class="btn btn-ghost" @click="toggleFavorite">
+                <span x-text="favorite ? '★ Dans les favoris' : '☆ Ajouter aux favoris'"></span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <h2 class="section-title">Épisodes</h2>
+      <div class="episode-list">
+        <template x-for="ep in details.episodes" :key="ep.number">
+          <div class="episode-row">
+            <span class="episode-num" x-text="'E' + ep.number"></span>
+            <span class="episode-name" x-text="ep.title || `Épisode ${ep.number}`"></span>
+            <button class="btn btn-sm btn-ghost" @click="streamEpisode(ep)" :disabled="ep._busy">▶ Stream</button>
+            <button class="btn btn-sm" @click="downloadEpisode(ep)" :disabled="ep._busy">⬇</button>
+          </div>
+        </template>
+      </div>
+
+      <!-- Lecteur modal -->
+      <div x-show="player.active" style="position:fixed;inset:0;background:rgba(0,0,0,0.85);z-index:50;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:0.8rem"
+           @keydown.escape.window="closePlayer()" x-transition x-cloak>
+        <video x-ref="player" controls autoplay style="max-width:90vw;max-height:80vh;border-radius:8px"></video>
+        <button class="btn btn-ghost" @click="closePlayer()">Fermer ✕</button>
+      </div>
+    </div>
+  </template>
+</div>
+{% endblock %}
+
+
+{% block scripts %}
+<script src="https://cdn.jsdelivr.net/npm/hls.js@1.5.13/dist/hls.min.js"></script>
+<script>
+function titlePage() {
+  return {
+    source: null, sourceId: null,
+    details: null, loading: true, error: null, favorite: false,
+    player: { active: false, hls: null },
+    seasonJob: { running: false, done: 0, total: 0 },
+
+    async load(source, sourceId) {
+      this.source = source; this.sourceId = sourceId;
+      try {
+        const res = await fetch(`/api/titles/${source}/${encodeURIComponent(sourceId)}`);
+        if (!res.ok) throw new Error((await res.json()).detail || 'Erreur ' + res.status);
+        this.details = await res.json();
+        this.details.episodes.forEach(e => e._busy = false);
+        document.title = this.details.title + ' — Ohm Stream';
+      } catch (e) { this.error = e.message; }
+      finally { this.loading = false; }
+    },
+
+    // Chaîne complète : page épisode → embeds → lien vidéo direct
+    async extract(ep) {
+      const res = await fetch('/api/extract?episode_url=' + encodeURIComponent(ep.url));
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.detail || 'Extraction impossible');
+      if (!data.links.length) throw new Error(data.errors[0] || 'Aucun lien vidéo résolu');
+      return data.links[0];
+    },
+
+    epLabel(ep) { return `${this.details.title} - E${ep.number}`; },
+
+    // Lecture via le proxy serveur (tokens liés à l'IP, Referer obligatoire)
+    openPlayer(link) {
+      const ref = link.headers?.Referer || '';
+      const src = '/api/proxy?url=' + encodeURIComponent(link.url)
+        + (ref ? '&ref=' + encodeURIComponent(ref) : '');
+      const video = this.$refs.player;
+      if (link.is_hls && window.Hls && window.Hls.isSupported()) {
+        this.player.hls = new Hls();
+        this.player.hls.loadSource(src);
+        this.player.hls.attachMedia(video);
+      } else {
+        video.src = src;  // Safari lit le HLS nativement
+      }
+      this.player.active = true;
+    },
+
+    closePlayer() {
+      if (this.player.hls) { this.player.hls.destroy(); this.player.hls = null; }
+      this.$refs.player.pause();
+      this.$refs.player.removeAttribute('src');
+      this.player.active = false;
+    },
+
+    async streamEpisode(ep) {
+      ep._busy = true;
+      try {
+        const link = await this.extract(ep);
+        this.openPlayer(link);
+      } catch (e) { toast('⚠ ' + e.message); }
+      finally { ep._busy = false; }
+    },
+
+    async downloadEpisode(ep) {
+      ep._busy = true;
+      try {
+        const link = await this.extract(ep);
+        const referer = link.headers?.Referer || ep.url;
+        const internal = [link.url, referer, this.epLabel(ep)].join('|');
+        await fetch('/api/downloads', {
+          method: 'POST', headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ internal_url: internal }),
+        });
+        toast('⬇ Ajouté : ' + this.epLabel(ep));
+      } catch (e) { toast('⚠ ' + e.message); }
+      finally { ep._busy = false; }
+    },
+
+    async downloadSeason() {
+      this.seasonJob = { running: true, done: 0, total: this.details.episodes.length };
+      for (const ep of this.details.episodes) {
+        await this.downloadEpisode(ep);
+        this.seasonJob.done++;
+      }
+      this.seasonJob.running = false;
+      toast('✔ Saison ajoutée à la file de téléchargement');
+    },
+
+    async toggleFavorite() {
+      if (this.favorite) return;
+      await fetch('/api/favorites', {
+        method: 'POST', headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          source: this.source, source_id: this.sourceId,
+          title: this.details.title, image_url: this.details.image_url,
+          payload: { year: this.details.year, genres: this.details.genres },
+        }),
+      });
+      this.favorite = true;
+      toast('⭐ Ajouté aux favoris');
+    },
+  };
+}
+</script>
+{% endblock %}

app/templates/watch.html

@@ -0,0 +1,62 @@
+{% extends "base.html" %}
+{% set active = 'library' %}
+{% block title %}Lecture — Ohm Stream{% endblock %}
+
+{% block content %}
+<div x-data="watchPage({{ download_id }})" x-init="load()">
+  <div style="display:flex;align-items:center;gap:1rem;margin-bottom:1.2rem">
+    <a href="/library" class="btn btn-ghost btn-sm">← Bibliothèque</a>
+    <h1 class="page-title" style="margin:0" x-text="file ? file.title : '…'"></h1>
+    <div style="flex:1"></div>
+    <a class="btn btn-ghost btn-sm" x-show="neighbors.previous" :href="'/watch/' + neighbors.previous">⏮ Précédent</a>
+    <a class="btn btn-sm" x-show="neighbors.next" :href="'/watch/' + neighbors.next">Suivant ⏭</a>
+  </div>
+
+  <div class="player-wrap">
+    <video x-ref="video" :src="`/api/stream/${id}`" controls
+           @timeupdate.throttle.5s="saveProgress"
+           @loadedmetadata="restorePosition">
+    </video>
+  </div>
+  <p class="page-sub" x-show="position > 0">⏵ Reprise automatique à ta position précédente.</p>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+function watchPage(id) {
+  return {
+    id, file: null, neighbors: {}, position: 0,
+
+    async load() {
+      const [fileRes, neighRes] = await Promise.all([
+        fetch('/api/downloads/' + id),
+        fetch(`/api/library/${id}/neighbors`),
+      ]);
+      this.file = await fileRes.json();
+      this.neighbors = await neighRes.json();
+      document.title = (this.file.title || 'Lecture') + ' — Ohm Stream';
+      // Position enregistrée côté serveur via /api/library
+      const lib = await fetch('/api/library').then(r => r.json());
+      const entry = lib.find(f => f.id === id);
+      this.position = entry?.position_seconds || 0;
+    },
+
+    restorePosition() {
+      if (this.position > 5 && this.$refs.video.duration - this.position > 10) {
+        this.$refs.video.currentTime = this.position;
+      }
+    },
+
+    saveProgress() {
+      const t = this.$refs.video.currentTime;
+      if (!t) return;
+      fetch(`/api/stream/${id}/progress`, {
+        method: 'POST', headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ position_seconds: t }),
+      });
+    },
+  };
+}
+</script>
+{% endblock %}