feat: lecteur média persistant Now Playing (dock audio, mini-vidéo PiP, Media Session, mobile) #110

docs/features/media-viewers-109.md

@@ -97,3 +97,88 @@ et ne peut pas être affiché » + bouton download.
 - 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`).
+