This PR addresses performance issues in the media grid by disabling
resource-intensive CSS transitions and ensuring immediate layout
updates. Previously, the default `0.2s` transition duration for grid
reshuffling was causing browser overloads on devices with multiple live
video viewers, leading to stuttering and occasionally missing
short-lived video events.
## Changes
### 1. Disable Masonry Transitions
- Set `transitionDuration` to `0` in the Masonry configuration to
eliminate CSS-driven animations during layout.
- Set `stagger` to `0` to ensure all items move simultaneously and
instantly.
- Set `resize` to `false` in the Masonry config, as window resizing is
already efficiently handled by the controller's `ResizeObserver`.
### 2. Immediate Layout Updates
- Introduced a `_forceLayout()` method in `MediaGridController` that:
- Cancels any pending throttled layout calls to avoid redundant work.
- Triggers a browser reflow via `getBoundingClientRect()` to ensure all
element dimensions are synchronized before the next draw.
- Forces an immediate Masonry layout.
- Integrated `_forceLayout()` into `selectCell()` and `unselectAll()` to
guarantee the grid updates at the exact moment a user interacts with it.
### 3. Test Alignment
- Updated `tests/components-lib/media-grid-controller.test.ts` to
reflect the changes.
## Performance Impact
By eliminating timed transitions, we significantly reduce the peak CPU
and GPU load during grid selection changes. This results in a much
snappier UI where video viewers snap into position instantly, preventing
the "shuttering" effect and ensuring that time-critical video playback
is not interrupted by heavy animation cycles.
---------
Co-authored-by: dermotduffy <dermot.duffy@gmail.com>
- Add support for Frigate reviews / detections.
- Add support for GenAI metadata.
- Significant internal refactor to more flexible "UnifiedQuery" to allow
mixing cameras with simple metadata and review metadata (e.g. a timeline
view of a Frigate camera with reviews, and a Reolink camera with simple
metadata).
- Add support for folder media as camera media.
There are a few more PRs to commit prior to this going live, but
commiting this for now due to the scale of the change.
BREAKING CHANGE: `media_type` and `events_type` are retired under
`live`, `viewer` and `timeline` configuration sections, instead media
type is associated (once) with the camera under `media`.
- For Frigate cameras, you must be running at least [integration
v5.12.0](https://github.com/blakeblackshear/frigate-hass-integration/releases/tag/v5.12.0).
- Closes: #2191
Includes a significant refactor of cameras, and the introduction of a
`2-way-audio` capability that is dynamically fetched from `go2rtc`. One
gotcha is if you previously had a substream with 2-way audio, you may
need to modify
```yaml
- camera_entity: camera.foo
capabilities:
disable_except:
- substream
```
... to ...
```yaml
- camera_entity: camera.foo
capabilities:
disable_except:
- substream
- 2-way-audio
```
Refactors media player handling entirely to make the code more
consistent and less boilerplate. Add testing for media player actions.
- Closes#1921
- Closes#1916
- Closes#1889
Whilst a simple change theoretically, the card has such a collection of
surfaces that can overlap other surfaces, it's challenging to get this
to work right! There's a real chance this will have broken something
z-index related (e.g. X overlaps Y when it should not), or (for related
reasons) broken curver corners on the card.
Whilst the Frigate support in this card is the best among camera
engines, the name incorrectly suggests that Frigate is a requirement.
Instead, to broaden the appeal, change to more camera agnostic name.
This does not suggest any change in priority, role or support for
Frigate.
This change is likely to be bug prone, due to the size of the rename --
the code contains 1500+ references to "Frigate" most of which make sense
to rename, some which do not, all of which needed human assessment.
- Closes#1298
BREAKING CHANGE: References to `frigate-card` in all kinds of
configuration need to be updated to `advanced-camera-card`. An automated
config upgrade should take care of the majority of usecases (click `Edit
-> Upgrade -> Save`), though may not be perfect.
