Version livrée : 2.18.0 · Statut : ✅ · Impact : 🟡 Zone : backend (main, indexer, media_types, bookslm) + frontend (viewer.js, utils.js, style.css, sw.js).

Contexte

Le socle média de #108 (backend/media_types.py) exposait déjà AUDIO_EXTENSIONS / VIDEO_EXTENSIONS, mais ces fichiers n'étaient ni indexés ni affichables : ils tombaient dans le chemin binaire « Ce fichier est binaire et ne peut pas être affiché » + bouton download.

Ce qui a été livré

A. Backend

Indexation : AUDIO_EXTENSIONS et VIDEO_EXTENSIONS sont intégrées à SUPPORTED_EXTENSIONS (indexer.py). La branche is_media(ext) existante indexe nom / taille / mtime sans jamais lire les octets (content: ""), donc le TF-IDF et les logs restent propres. Le watcher et le filtre ext: suivent automatiquement.
Streaming : le helper Range de pdf/stream a été extrait en _stream_file_with_range(file_path, request, media_type) (206 + Content-Range + Accept-Ranges, 416 sur plage invalide, FileResponse simple sinon, lectures offloadées via asyncio.to_thread). pdf/stream l'utilise désormais aussi (comportement inchangé, tests de régression).
Nouvel endpoint GET /api/media/{vault}?path=… : sert audio/vidéo avec le MIME media_types.media_mime_type (surcharges .m4a→audio/mp4, .opus/.oga→audio/ogg, .mov→video/quicktime, .m4v→video/mp4).
Gardes-fous : _resolve_safe_path, check_vault_access, et OBSIGATE_MEDIA_MAX_INLINE_MB (défaut 500 Mo) — au-delà, l'endpoint renvoie 413 et la vue fichier bascule sur l'UI de téléchargement.
api_file_view() renvoie, avant tout read_text(), is_audio / is_video / stream_url / media_mime / size_bytes. Au-delà de la limite : unsupported: true + media_too_large: true.

B/C. Frontend — lecteurs

viewer.js dispatche data.is_audio → renderAudioViewer() et data.is_video → renderVideoViewer().
- Audio : <audio controls preload="metadata"> pleine largeur, artwork placeholder (icône Lucide audio-lines), durée lue via loadedmetadata, toolbar (titre, voûte + taille, badge durée, ouvrir l'original, télécharger).
- Vidéo : <video controls playsinline preload="metadata"> centrée sur une scène noire letterboxée (max-height: calc(100vh - 180px)), même toolbar avec durée + résolution.
renderMediaFallback() : sur l'événement error de l'élément média (codec hors web-natif : .mkv, .avi, HEVC…) ou si le fichier est trop volumineux, remplace le lecteur par l'UI binaire + message viewer.media_unsupported / viewer.media_too_large + Télécharger / Ouvrir dans un nouvel onglet.
Pause au changement de vue : _mediaViewerCleanup met en pause et détache la source quand renderFile() re-rend la zone (changement d'onglet, navigation) — pas de lecture persistante en v1 (cohérence #75).
EXT_ICONS (utils.js) : audio → audio-lines, vidéo → video.
i18n FR/EN (viewer.media_unsupported, viewer.media_too_large).

D. Recherche & intégrations

Filtres ext:mp3, ext:mp4, etc. opérationnels (les médias entrent dans l'index).
Récents / dashboards : previews vides (aucun texte extrait) — comportement naturel de la branche binaire.
BooksLM : _file_entry() ignore désormais tout média (is_media) — les octets ne sont jamais envoyés au modèle ; les images restent gérées à part via load_vault_image_data_url (vision).
Hors scope v1 (porte notée) : transcription audio via Whisper.

E. Mobile & PWA

Le service worker ne met jamais en cache le flux média (/api/media/{vault}), tout en conservant le cache des miniatures (/api/media/{vault}/thumb) et la stratégie Network First pour le reste. Les requêtes Range étaient déjà exclues.

F. Tests

tests/test_media_stream.py : 206 + Content-Range + 1024 octets, 416 hors borne, 200 + Accept-Ranges sans Range, suffix range, 413 au-delà de la limite, 403 path traversal, 403 vault sans accès, 400 non-média, MIME .mov, régression pdf/stream.
tests/test_media_indexing.py : .mp3/.mp4/.flac dans l'arborescence et l'index, content == "", watcher pertinent, filtre ext:mp3.
tests/frontend/media-viewer.test.mjs : helpers purs (formatMediaDuration, buildMediaUrl) + vérifications statiques (dispatch, <audio>/<video>, fallback, CSS, icônes, i18n, service worker, endpoints backend).
tests/e2e/media-viewer.spec.js : lecture <audio> et <video> via /api/media + réponse 206 sur requête Range. Fixtures : test_vault/sample-audio.mp3 (sine 1 s) et test_vault/sample-video.webm (VP8 64×64).

Limitations connues

Formats hors web-natifs (.mkv, .avi, HEVC, AC-4) : non lisibles sans transcodage (ffmpeg hors scope) → repli téléchargement / lecteur de l'OS.
HLS, sous-titres <track src=".vtt"> et vignettes vidéo : hors scope v1.
Gros médias (> 500 Mo par défaut) : pas de lecture intégrée (protège le worker uvicorn unique) ; ajustable via OBSIGATE_MEDIA_MAX_INLINE_MB.

#110 — Lecteur média persistant « Now Playing »

Version livrée : 2.19.0 · Statut : ✅ · Impact : 🟡 Zone : frontend (now-playing.js, viewer.js, ui.js, pane-manager.js, app.js, style.css, index.html, locales).

Principe : un seul média, téléporté

frontend/js/now-playing.js est un contrôleur singleton qui possède l'unique élément <audio>/<video> de l'application. Il est déplacé par appendChild (sans recréation, donc sans couper la lecture) entre :

la vue inline — l'onglet/panneau du média, via la surface NowPlaying.attachInline(area, data) (appelée par renderAudioViewer / renderVideoViewer de viewer.js) ; et
le dock global — un enfant direct de <body> (#now-playing-host), monté hors de .content-wrapper pour survivre à renderFile(), aux onglets, aux panneaux et à la reconstruction de la grille split.

renderFile() appelle NowPlaying.handleRender(area, data) : si la zone qui va être réécrite contient l'élément média, celui-ci est renvoyé au dock. Les autres points qui vident le contenu (dashboard _showDashboard, showWelcome, PaneManager._buildGrid / _collapseToSingle) appellent le même hook via le global window.NowPlaying.

Surfaces et ergonomie

Dock audio (desktop) : pilule flottante verre dépoli centrée en bas (.np-dock--audio) — artwork, titre, voûte, durée, play/pause, précédent/suivant, barre de progression (seek), volume, revenir au média, agrandir, fermer.
Panneau étendu : carte centrale (bottom-sheet sur mobile) avec artwork, scrub large, volume, vitesse 0,5–2×, précédent/suivant et actions ouvrir/télécharger/fermer.
Mini-vidéo flottante (.np-dock--video) : déplaçable (aimantation au coin le plus proche) et redimensionnable, géométrie persistée ; sur mobile elle se fixe au-dessus de la barre d'outils.
Mobile : mini-player au-dessus de la barre 64 px (bottom: calc(64px + env(safe-area-inset-bottom))), viewport-fit=cover ajouté, et body.np-active ajoute le décalage du contenu.

Comportements

Naviguer (onglet, panneau, dashboard, split) ne coupe pas la lecture ; le dock apparaît.
Revenir au média : NowPlaying.focus() rouvre/focalise l'onglet vault::path (window.getActiveTabManager().open).
Fermer : NowPlaying.stop() met en pause, libère l'élément et masque le dock.
Fermer l'onglet du média en cours : la lecture continue et un toast player.continues le signale.
Media Session : métadonnées (MediaMetadata) + actions play/pause/stop/seek/nexttrack/previoustrack → écran verrouillé, casque Bluetooth, touches média, Windows SMTC (WebView2).
Picture-in-Picture natif pour la vidéo (requestPictureInPicture), bouton masqué si non supporté.
Reprise après rechargement : état (fichier, position, pause, préférences volume/vitesse) persisté en localStorage (obsigate-now-playing, obsigate-player-prefs, obsigate-player-pos).

Fichiers modifiés / ajoutés

Nouveau : frontend/js/now-playing.js (contrôleur, dock, session, PiP, persistance), tests/e2e/media-viewer.spec.js (dock/retour/fermeture/mini-vidéo).
Modifiés : viewer.js (délégation inline + handleRender), ui.js (dashboard + toast de fermeture d'onglet), pane-manager.js (grille/collapse), app.js (initNowPlaying), style.css (dock/étendu/vidéo/mobile, et correction des variables --surface1/--text-dim non définies), index.html (viewport-fit=cover), locales FR/EN (player.*).

Correctifs annexes

Les variables CSS --surface1 et --text-dim, utilisées mais jamais définies depuis #108/#109, sont remplacées par --surface et --text-secondary (+ --text-dim dans toute la feuille).

Hors scope (porte notée)

Fenêtre vidéo détachée native Tauri (WebviewWindowBuilder + always_on_top) : non implémentée, à faire dans une itération dédiée (Rust, capabilities, route /player).

9.2 KiB Raw Blame History Unescape Escape

#109 — Support audio & vidéo (lecteurs HTML5 intégrés)