feat(alerts): video player for detection images#224
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
ThbltLmr
force-pushed
the
feat/alerts-video-player
branch
from
ed2258b to
e4ad386
Compare
ThbltLmr
force-pushed
the
feat/alerts-video-player
branch
from
e4ad386 to
bb2c140
Compare
ThbltLmr
force-pushed
the
feat/alerts-video-player
branch
from
bb2c140 to
9087235
Compare
Video demo - UpdatedShows:
2026-06-16.23-15-55.mp4 |
| newLastSeenAt && | ||
| isStrictlyAfter(lastSeenAt, newLastSeenAt) | ||
| ) { | ||
| // LastSeenAt has changed since last time |
There was a problem hiding this comment.
Why not keeping the comments
There was a problem hiding this comment.
Generally I'm not a fan of comments (I think they often mean the code is not clear enough 😅), so I tend to delete them when I see them
reverted in docs: restore comments!
| </MenuItem> | ||
| ))} | ||
| </Menu> | ||
| <Typography variant="body2" sx={{ whiteSpace: 'nowrap' }}> |
There was a problem hiding this comment.
I would suggest to remove it for now, because counting doesn't seem to be a relevant information for users (only for developpers !)
| aria-label={t(isPlaying ? 'buttonPause' : 'buttonPlay')} | ||
| size="large" | ||
| sx={{ border: `1px solid ${theme.palette.grey[500]}` }} | ||
| <Stack |
There was a problem hiding this comment.
It would be nice to split this component into two component and isolate actions buttons and player
There was a problem hiding this comment.
Done in refactor(controls): move controls to a dedicated components
There is a lot of shared state (controls drive the state of the player and vice-versa), so it means drilling a lot of props. Maybe we can refactor with a context or compound component: I've tried it in refactor(alerts): restructure player as a compound component, it's more code but the component props are simpler. What do you think?
Video demo - UpdatedShows:
2026-06-16.23-15-55.mp4 |
ThbltLmr
force-pushed
the
feat/alerts-video-player
branch
from
9087235 to
49c5d57
Compare
Reshape the alert images player into a compound component backed by a feature-scoped context, mirroring the Live/context convention (Context + Provider + use* hook). - AlertPlayerProvider owns all playback state (index, play/pause, speed, derived selection/marks, autoplay, keyboard shortcuts, preloading) - AlertPlayer.Image and AlertPlayer.Controls read it via useAlertPlayer(), removing the prop drilling that ran through the old player - The tree now names the domain: a part that owns the image/detection, distinct from the controls NOTE: this is a proposal to gauge whether we want to adopt the compound component + feature-scoped context pattern here. It is the first compound component in the codebase, so it is up for discussion before we commit to it more broadly. Behaviour is unchanged; build, lint and tests pass.
|
Screenshot with the crop available: |
2 participants
Summary
Replace the static detection list with a video-player UI for browsing
detection frames, backed by a paginated fetch that lets the player mount
on the first page while later pages stream in.
useAllDetectionsfans out parallel page requests via TanStackuseQueries; UI mounts as soon as any page resolves and surfaces a localized error (not a stuck spinner) when later pages fail.Component tree
Demo
2026-05-14.16-59-30.mp4