useResizeObserver reads ref.current during render (before commit), so on
first render ref.current is null, no observation starts, and containerWidth
stays 0 if no subsequent re-render happens (e.g. page refresh with cached
SWR data). useLayoutEffect runs after refs are committed, so ref.current
is always the real DOM element.
This fixes both the right-column overflow (no window.innerWidth fallback
needed — width is always the actual container width) and the black screen
on refresh (containerWidth is reliable before the first paint).
https://claude.ai/code/session_01H1sqbcFmtwwsdNTJcJHJWd
useResizeObserver reads ref.current at render time; on page refresh with
fast SWR cache, no re-render occurs after mount so ref.current remains null
in the effect, observation never starts, and containerWidth stays 0 forever.
Add a useLayoutEffect that measures offsetWidth synchronously before paint
as a seed value (effectiveWidth = containerWidth || initialWidth). Once
ResizeObserver fires normally, containerWidth takes over. The Responsive
grid is gated on effectiveWidth > 0 so it always renders correctly on both
first load and refresh.
https://claude.ai/code/session_01H1sqbcFmtwwsdNTJcJHJWd
Gate <Responsive> rendering on containerWidth > 0 so it only mounts after
ResizeObserver has measured the container. Use availableWidth directly as
the width prop (no window.innerWidth fallback) since the component now only
renders when containerWidth is known. This prevents the grid from rendering
wider than its container (which caused the rightmost column to overflow the
right edge).
https://claude.ai/code/session_01H1sqbcFmtwwsdNTJcJHJWd
availableWidth starts at 0 (not null/undefined) before ResizeObserver fires.
The ?? operator passes 0 through instead of falling back to window.innerWidth,
making cellHeight negative and causing react-grid-layout to render a ~10px
container. The overflow-x-hidden div then becomes an implicit scroll container,
producing the 'cards squeezed in a small rectangle' symptom.
Changing ?? to || makes 0 trigger the window.innerWidth fallback, giving a
reasonable initial rowHeight until the real container width is measured.
https://claude.ai/code/session_01H1sqbcFmtwwsdNTJcJHJWd
VideoPreview's <video> had aspect-video + size-full, but size-full overrides
the aspect-ratio constraint, leaving object-fit at the default fill.
Adding object-contain preserves the video's natural aspect ratio in event cards.
https://claude.ai/code/session_01EwdaKGsrRLZ74smmCQ1MgW
PreviewVideoPlayer's <video> had no explicit object-fit, so browsers
applied the CSS default (fill), stretching the video when the container
aspect ratio (detect resolution) didn't match the actual preview video.
Adding object-contain preserves aspect ratio in the recording/history view.
https://claude.ai/code/session_01EwdaKGsrRLZ74smmCQ1MgW
Grid tiles explicitly set --frigate-mse-object-fit:fill so video stretches
to fill the card without preserving aspect ratio. The MsePlayer default
is contain, so History preview and all other contexts keep correct proportions.
https://claude.ai/code/session_01EwdaKGsrRLZ74smmCQ1MgW
The MSE player default was set to 'fill' which stretches video in all contexts.
Only the draggable grid should use 'cover' (via --frigate-mse-object-fit:cover).
Changing the fallback to 'contain' restores aspect-ratio-preserving behaviour
everywhere else (History preview, etc.) while keeping the grid fill intact.
https://claude.ai/code/session_01EwdaKGsrRLZ74smmCQ1MgW
* add shm frame lifetime calculation and update UI for shared memory metrics
* consistent sizing on activity indicator in save buttons
* fix offline overlay overflowing on mobile when in grid mode
* refactor websockets to remove react-tracked
react 19 removed useReducer eager bailout, which broke react-tracked.
react-tracked works by wrapping state in a JavaScript Proxy. When a component reads state.someField, the proxy records that access. On the next state update, it compares only the fields each component actually touched and skips re-renders if those fields are unchanged. Under the hood, this relies on useReducer — and in React 18, useReducer had an "eager bail-out" that short-circuited rendering when the new state was === to the old state. React 19 removed that optimization, so every dispatch now schedules a render regardless, and the proxy comparison runs too late to prevent it.
useSyncExternalStore is a React primitive (added in 18, stable in 19) designed for exactly this pattern: subscribing to an external store:
useSyncExternalStore(
subscribe, // (listener) => unsubscribe — called when the store changes
getSnapshot // () => value — returns the current value for this subscriber
)
React calls getSnapshot during render and compares the result with Object.is. If the value is the same reference, the component bails out — no re-render. The key difference from react-tracked is that this bail-out is built into React's reconciler, not bolted on via proxy tricks and useReducer.
The per-topic subscription model makes this efficient. Instead of one global store where every subscriber has to check if their fields changed, each useWs("some/topic", ...) call subscribes only to that topic's listener set. When a message arrives for front_door/detect/state, only components subscribed to that exact topic get their listener fired → React calls their getSnapshot → Object.is compares the value → bail-out if unchanged. Components watching back_yard/detect/state are never even notified.
* remove react-tracked and react-use-websocket
* refactor usePolygonStates to use ws topic subscription
* fix TimeAgo refresh interval always returning 1s due to unit mismatch (seconds vs milliseconds)
older events now correctly refresh every minute/hour instead of every second
* simplify
* clean up
* don't resend onconnect
* clean up
* remove patch
* optimize recordings/summary endpoint db query
replace strftime with integer arithmetic. increases speed by about 6x, especially noticeable for installs with long retention days
* optimize calendar rendering with Set lookups and remove unnecessary remount key
The old code built Date[] arrays with a TZDate object for every day in recording history (365+ timezone-aware date constructions). react-day-picker then did O(visible × history) date comparisons to match each of the displayed days against these arrays. Now we build Set<string> from the raw keys (zero date construction), and pass matcher functions that do O(1) Set.has() lookups. react-day-picker only calls these for visible days
* clean up
* add optional field widget
adds a switch to enable nullable fields like skip_motion_threshold
* config field updates
add skip_motion_threshold optional switch
add fps back to detect restart required
* don't use ternary operator when displaying motion previews
the main previews were being unnecessarily unmounted
* lazy mount motion preview clips to reduce DOM overhead
* Support GenAI for embeddings
* Add embed API support
* Add support for embedding via genai
* Basic docs
* undo
* Fix sending images
* Don't require download check
* Set model
* Handle emb correctly
* Clarification
* Cleanup
* Cleanup
