FEAT: Live view & page caméra enrichie — CameraDetail (flux rafraîchi, métadonnées, actions) #35

New issue

Closed

opened 2026-08-10 21:37:39 +02:00 by nonobis · 1 comment

nonobis commented

2026-08-10 21:37:39 +02:00

Owner

🎯 Contexte

La page détail d'une caméra doit être l'écran de surveillance principal : flux (ou image rafraîchie), état, métadonnées, actions et événements récents. Le WebRTC P2P (SIPSorcery) est traité par le ticket #3 existant — ici on livre un rendu image rafraîchie fonctionnel sans dépendre du WebRTC.

📚 Référence spec (MASTER_SPECIFICATION.md v2.0)

Étape 5 — Phase 22 (Live), docs/ui-pages.md → « P4a Live View », « P4b Détail Caméra » (contenu attendu, états, tests).

🔍 État actuel (vérifié dans le code)

CameraDetail.razor existe (/cameras/{Id:guid}) — contenu limité (infos + statut), pas de rendu vidéo/image, pas de rafraîchissement.
Le pipeline snapshot existe côté API (POST /api/cameras/{id}/snapshot, GET /api/cameras/{id}/events) mais n'est pas exploité par la page.
EventBroadcastService (SignalR) existe pour pousser les événements — pas de souscription côté UI caméra.

🧩 Découpage proposé

Zone « live » : image = dernière snapshot rafraîchie à intervalle configurable (ex. 5-10 s) avec transition stable (pas de flash/blink — prefers-reduced-motion respecté) ; état « Pas de flux disponible » si aucune snapshot.
Bandeau d'état : En ligne / Hors ligne / Désactivée (badge + dernière activité), couleur sémantique contrastée.
Métadonnées : fabricant, modèle, URL RTSP masquée (révélable), site parent (lien), date de création.
Actions : Prendre un snapshot (POST → snackbar succès + thumbnail mis à jour), Activer/Désactiver, Modifier, Supprimer — verbes d'action, dialogs sans @if (pattern c266f26).
Mini-timeline : 5-10 derniers événements de la caméra (type, horodatage, confiance), lien « Voir tous les événements » (/events?cameraId=... si supporté).
États 4 : skeleton (image + infos), erreur actionnable, empty (aucune donnée/snapshot), succès.

🧪 Critères d'acceptation

Image rafraîchie sans clignotement perceptible ; aucune animation si prefers-reduced-motion: reduce
URL RTSP jamais affichée en clair par défaut
Actions fonctionnelles avec feedback snackbar ; dialogs conformes au pattern documenté
Mini-timeline alimentée par l'API ; lien vers les événements filtrés
Tests bUnit RenderPage<CameraDetail> (rafraîchissement, actions, états)

📁 Fichiers concernés (estimés)

src/Heimdall.Web/Components/Pages/CameraDetail.razor (refonte)
src/Heimdall.Web/Services/ (timer/rafraîchissement, souscription SignalR)
src/Heimdall.Web/wwwroot/app.css (aspect 16/9, overlay)
tests/Heimdall.Web.Tests/

## 🎯 Contexte La page détail d'une caméra doit être l'écran de surveillance principal : flux (ou image rafraîchie), état, métadonnées, actions et événements récents. Le WebRTC P2P (SIPSorcery) est traité par le ticket #3 existant — ici on livre un rendu **image rafraîchie** fonctionnel sans dépendre du WebRTC. ## 📚 Référence spec (MASTER_SPECIFICATION.md v2.0) Étape 5 — Phase 22 (Live), `docs/ui-pages.md` → « P4a Live View », « P4b Détail Caméra » (contenu attendu, états, tests). ## 🔍 État actuel (vérifié dans le code) - `CameraDetail.razor` existe (`/cameras/{Id:guid}`) — contenu limité (infos + statut), pas de rendu vidéo/image, pas de rafraîchissement. - Le pipeline snapshot existe côté API (`POST /api/cameras/{id}/snapshot`, `GET /api/cameras/{id}/events`) mais n'est pas exploité par la page. - `EventBroadcastService` (SignalR) existe pour pousser les événements — pas de souscription côté UI caméra. ## 🧩 Découpage proposé 1. Zone « live » : image = dernière snapshot rafraîchie à intervalle configurable (ex. 5-10 s) avec **transition stable** (pas de flash/blink — `prefers-reduced-motion` respecté) ; état « Pas de flux disponible » si aucune snapshot. 2. Bandeau d'état : En ligne / Hors ligne / Désactivée (badge + dernière activité), couleur sémantique contrastée. 3. Métadonnées : fabricant, modèle, URL RTSP **masquée** (révélable), site parent (lien), date de création. 4. Actions : Prendre un snapshot (POST → snackbar succès + thumbnail mis à jour), Activer/Désactiver, Modifier, Supprimer — verbes d'action, dialogs sans @if (pattern c266f26). 5. Mini-timeline : 5-10 derniers événements de la caméra (type, horodatage, confiance), lien « Voir tous les événements » (`/events?cameraId=...` si supporté). 6. États 4 : skeleton (image + infos), erreur actionnable, empty (aucune donnée/snapshot), succès. ## 🧪 Critères d'acceptation - [ ] Image rafraîchie sans clignotement perceptible ; aucune animation si `prefers-reduced-motion: reduce` - [ ] URL RTSP jamais affichée en clair par défaut - [ ] Actions fonctionnelles avec feedback snackbar ; dialogs conformes au pattern documenté - [ ] Mini-timeline alimentée par l'API ; lien vers les événements filtrés - [ ] Tests bUnit `RenderPage<CameraDetail>` (rafraîchissement, actions, états) ## 📁 Fichiers concernés (estimés) - `src/Heimdall.Web/Components/Pages/CameraDetail.razor` (refonte) - `src/Heimdall.Web/Services/` (timer/rafraîchissement, souscription SignalR) - `src/Heimdall.Web/wwwroot/app.css` (aspect 16/9, overlay) - `tests/Heimdall.Web.Tests/`

nonobis added the

labels

2026-08-10 21:37:39 +02:00

nonobis referenced this issue from a commit

2026-08-10 23:07:54 +02:00

feat(web): live view & CameraDetail enrichie (Fixes #35)

nonobis closed this issue

2026-08-10 23:07:54 +02:00

nonobis commented

2026-08-10 23:08:09 +02:00

Author

Owner

Implémenté : vue live snapshot rafraîchi 10s, RTSP masquée + toggle, actions Activer/Désactiver/Supprimer (dialog toujours rendu), mini-timeline chips colorées, statut en badge traduit. Commit 49f451a, 178 tests Web verts (5 nouveaux).

nonobis referenced this issue from a commit

2026-08-12 19:17:20 +02:00

feat(web): live view & CameraDetail enrichie (Fixes #35)