feat: filtre par catégorie dans la GUI
Docker / docker (push) Successful in 1m15s

- arte_api.py : GENRE_PAGES devient une liste de (nom, url), chaque
  concert reçoit un champ "categories" avec ses genres d'appartenance
- main.py : endpoint /api/categories + param ?category= sur /api/concerts
- index.html : barre de pills catégories (Tout + 10 genres)
- style.css : styles .cat-bar / .cat-pill avec pill active en or
- app.js : chargement dynamique des pills, filtre catégorie dans le state

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
dev
2026-04-26 13:03:52 +02:00
parent 1815a4e8c2
commit 16736e2e7a
5 changed files with 122 additions and 30 deletions
+42 -26
View File
@@ -16,21 +16,25 @@ PLAYER_API = "https://api.arte.tv/api/player/v2/config/fr/{pid}"
SEARCH_URL = "https://www.arte.tv/fr/search/?q={q}"
GENRE_PAGES = [
"https://www.arte.tv/fr/p/pop-rock/",
"https://www.arte.tv/fr/p/classique/",
"https://www.arte.tv/fr/p/musiques-electroniques/",
"https://www.arte.tv/fr/p/jazz",
"https://www.arte.tv/fr/p/arts-de-la-scene",
"https://www.arte.tv/fr/p/hip-hop",
"https://www.arte.tv/fr/p/metal",
"https://www.arte.tv/fr/p/opera",
"https://www.arte.tv/fr/p/world",
"https://www.arte.tv/fr/p/musique-baroque/",
# arte-concert pages pour l'agenda et contenu exclusif
("Pop & Rock", "https://www.arte.tv/fr/p/pop-rock/"),
("Classique", "https://www.arte.tv/fr/p/classique/"),
("Electro", "https://www.arte.tv/fr/p/musiques-electroniques/"),
("Jazz", "https://www.arte.tv/fr/p/jazz"),
("Arts de la scène", "https://www.arte.tv/fr/p/arts-de-la-scene"),
("Hip-hop", "https://www.arte.tv/fr/p/hip-hop"),
("Metal", "https://www.arte.tv/fr/p/metal"),
("Opéra", "https://www.arte.tv/fr/p/opera"),
("World", "https://www.arte.tv/fr/p/world"),
("Baroque", "https://www.arte.tv/fr/p/musique-baroque/"),
]
EXTRA_PAGES = [
"https://www.arte.tv/fr/arte-concert/agenda/",
"https://www.arte.tv/fr/arte-concert/",
]
CATEGORIES = [name for name, _ in GENRE_PAGES]
_HEADERS = {
"User-Agent": (
"Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 "
@@ -88,14 +92,23 @@ def _metadata_for_pid(pid: str) -> dict | None:
def _fetch_all_sync() -> list[dict]:
all_ids: set[str] = set()
for url in GENRE_PAGES:
id_cats: dict[str, list[str]] = {}
for name, url in GENRE_PAGES:
ids = _prog_ids_from_page(url)
logger.info(" %s%d IDs", name, len(ids))
for pid in ids:
id_cats.setdefault(pid, []).append(name)
all_ids: set[str] = set(id_cats)
for url in EXTRA_PAGES:
ids = _prog_ids_from_page(url)
logger.info(" %s%d IDs", url.split("/fr/")[1], len(ids))
all_ids |= ids
logger.info("Total unique programme IDs: %d", len(all_ids))
concerts = _resolve_ids(all_ids)
for c in concerts:
c["categories"] = id_cats.get(c["id"], [])
concerts.sort(key=lambda c: c.get("expiry") or "", reverse=True)
return concerts
@@ -131,30 +144,33 @@ async def get_all_concerts() -> list[dict]:
return _cache["data"]
async def fetch_concerts(page: int = 1, search: str = "", page_size: int = 24) -> dict:
async def fetch_concerts(page: int = 1, search: str = "", page_size: int = 24, category: str = "") -> dict:
all_c = await get_all_concerts()
if category:
all_c = [c for c in all_c if category in (c.get("categories") or [])]
cached_ids = {c["id"] for c in all_c}
if search:
q = search.lower()
# local filter
local = [
c for c in all_c
if q in (c.get("title") or "").lower()
or q in (c.get("subtitle") or "").lower()
or q in (c.get("description") or "").lower()
]
# Arte search for IDs not in cache
loop = asyncio.get_event_loop()
remote_ids = await loop.run_in_executor(None, _search_sync, search)
new_ids = remote_ids - cached_ids
if new_ids:
extra = await loop.run_in_executor(None, _resolve_ids, new_ids, None)
# merge: local results first, then extras not already present
local_ids = {c["id"] for c in local}
for c in extra:
if c["id"] not in local_ids:
local.append(c)
# Remote search only when no category filter (results have no category info)
if not category:
loop = asyncio.get_event_loop()
remote_ids = await loop.run_in_executor(None, _search_sync, search)
new_ids = remote_ids - cached_ids
if new_ids:
extra = await loop.run_in_executor(None, _resolve_ids, new_ids, None)
local_ids = {c["id"] for c in local}
for c in extra:
if c["id"] not in local_ids:
local.append(c)
filtered = local
else:
filtered = all_c
+8 -3
View File
@@ -8,7 +8,7 @@ from fastapi.staticfiles import StaticFiles
from fastapi.templating import Jinja2Templates
from pydantic import BaseModel
from arte_api import fetch_concerts, invalidate_cache
from arte_api import fetch_concerts, invalidate_cache, CATEGORIES
from downloader import DownloadManager
logging.basicConfig(level=logging.INFO)
@@ -31,9 +31,14 @@ async def index(request: Request):
# ------------------------------------------------------------------ API: concerts
@app.get("/api/categories")
async def api_categories():
return CATEGORIES
@app.get("/api/concerts")
async def api_concerts(page: int = 1, search: str = "", page_size: int = 24):
return await fetch_concerts(page=page, search=search, page_size=page_size)
async def api_concerts(page: int = 1, search: str = "", page_size: int = 24, category: str = ""):
return await fetch_concerts(page=page, search=search, page_size=page_size, category=category)
@app.post("/api/refresh")
+28 -1
View File
@@ -4,6 +4,7 @@
const state = {
page: 1,
search: '',
category: '',
pageSize: 24,
totalPages: 1,
current: null, // concert object shown in modal
@@ -21,6 +22,7 @@ const modalOverlay = $('modal-overlay');
const dlPanel = $('dl-panel');
const dlPanelBody = $('dl-panel-body');
const dlBadge = $('dl-badge');
const catBar = $('cat-bar');
// ── Helpers ──────────────────────────────────────────────────────────────────
function fmtDuration(secs) {
@@ -45,12 +47,37 @@ function debounce(fn, ms) {
let t; return (...a) => { clearTimeout(t); t = setTimeout(() => fn(...a), ms); };
}
// ── Categories ───────────────────────────────────────────────────────────────
async function loadCategories() {
try {
const cats = await fetch('/api/categories').then(r => r.json());
cats.forEach(cat => {
const btn = document.createElement('button');
btn.className = 'cat-pill';
btn.dataset.cat = cat;
btn.textContent = cat;
catBar.appendChild(btn);
});
} catch {}
}
catBar.addEventListener('click', e => {
const pill = e.target.closest('.cat-pill');
if (!pill) return;
catBar.querySelectorAll('.cat-pill').forEach(p => p.classList.remove('active'));
pill.classList.add('active');
state.category = pill.dataset.cat;
state.page = 1;
refresh();
});
// ── Concerts ─────────────────────────────────────────────────────────────────
async function loadConcerts() {
const params = new URLSearchParams({
page: state.page,
search: state.search,
page_size: state.pageSize,
category: state.category,
});
const res = await fetch(`/api/concerts?${params}`);
if (!res.ok) throw new Error(res.statusText);
@@ -359,6 +386,6 @@ document.addEventListener('keydown', e => {
// ── Init ─────────────────────────────────────────────────────────────────────
(async () => {
await refreshDlHistory();
await Promise.all([loadCategories(), refreshDlHistory()]);
await refresh();
})();
+39
View File
@@ -195,6 +195,45 @@ body {
letter-spacing: 0.02em;
}
/* ══ CATEGORY BAR ══════════════════════════════════════════════════════════ */
.cat-bar {
display: flex;
gap: 8px;
margin-bottom: 20px;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
padding-bottom: 2px;
}
.cat-bar::-webkit-scrollbar { display: none; }
.cat-pill {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 20px;
color: var(--text-dim);
cursor: pointer;
font-family: 'Inter', sans-serif;
font-size: 13px;
padding: 6px 16px;
white-space: nowrap;
transition: color var(--transition), border-color var(--transition), background var(--transition);
flex-shrink: 0;
}
.cat-pill:hover {
color: var(--text);
border-color: rgba(255,255,255,0.15);
}
.cat-pill.active {
background: var(--gold);
border-color: var(--gold);
color: #000;
font-weight: 600;
}
/* ══ GRID ══════════════════════════════════════════════════════════════════ */
.grid {
display: grid;
+5
View File
@@ -52,6 +52,11 @@
<!-- ══ MAIN ═══════════════════════════════════════════════════════════════ -->
<main class="main">
<!-- categories -->
<div class="cat-bar" id="cat-bar">
<button class="cat-pill active" data-cat="">Tout</button>
</div>
<!-- status bar -->
<div class="status-bar" id="status-bar">
<span id="status-text">Chargement du catalogue…</span>