The previous approach (useEffect → onActiveMotionChange callback →
parent state update) was unreliable: the dot only appeared if motion
was active at the moment of initial mount but did not react to
subsequent WS motion events.
Root cause: the intermediate state chain breaks because React's
useEffect batching and component re-render timing can cause the
parent state to lag behind or miss updates when motion changes after
mount.
Fix: replace the mechanism entirely with a dedicated CameraMotionDot
component that calls useCameraActivity directly. Being a proper React
component it subscribes to the {camera}/motion WS topic via
useSyncExternalStore and re-renders immediately and reliably whenever
motion state changes — no intermediate callbacks or parent state needed.
- Remove onActiveMotionChange prop from LivePlayer; add showMotionDot
boolean prop (default true) to suppress the internal dot in grid view
- Remove cameraMotionStates state and setCameraMotionStates from
DraggableGridLayout
- Add CameraMotionDot component with direct useCameraActivity hook
https://claude.ai/code/session_019B4dJXtcxvHn97ZaqHUB62
The connect() function creates a WebSocket but never stores the
reference. The useEffect cleanup only closes the RTCPeerConnection
via pcRef, leaving the WebSocket open.
Each time the component re-renders with changed deps (camera switch,
playback toggle, microphone toggle), a new WebSocket is created
without closing the previous one. This leaks connections until the
browser garbage-collects them or the server times out.
Store the WebSocket in a ref and close it in the cleanup function.
The motionVisible condition gated the external dot (via onActiveMotionChange
callback) on liveReady, causing the dot to stay hidden for cameras in
continuous mode (showStillWithoutActivity=false) while the stream is loading
or reconnecting. Since the parent (DraggableGridLayout) renders the dot
outside the stream viewport, it should reflect actual motion state without
depending on stream load status.
Simplify the callback-path effect to use !!(autoLive && !offline &&
activeMotion) so the dot appears in the grid card whenever motion is active.
The full condition (including liveReady) is still used for the inline dot
rendered inside LivePlayer when no callback is provided.
https://claude.ai/code/session_019B4dJXtcxvHn97ZaqHUB62
getStats was always passed showStats (false in grid view), so underlying
players never collected stats data. Now uses showStats || !!onStatsUpdate
so players collect stats whenever the external callback is present.
https://claude.ai/code/session_019B4dJXtcxvHn97ZaqHUB62
Use useRef to store onStatsUpdate/onLoadingChange/onActiveMotionChange
callbacks so useEffect deps don't include the callback references.
Inline arrow functions in .map() change identity every render, causing
the previous useEffect([stats, onCallback]) to re-fire on each parent
re-render, triggering another setState → re-render → infinite loop.
https://claude.ai/code/session_019B4dJXtcxvHn97ZaqHUB62
Move PlayerStats, ActivityIndicator and motion dot rendering outside the
zoom transform div in DraggableGridLayout so they are not scaled when
the user zooms with Shift+Wheel.
- Add onStatsUpdate, onLoadingChange, onActiveMotionChange callback props
to LivePlayer; when provided, suppress the internal overlay elements
and bubble state up to the parent instead
- In DraggableGridLayout, maintain per-camera overlay states and render
the three overlays as siblings to the zoom div (inside the clipping
viewport) so they remain at natural size regardless of zoom level
https://claude.ai/code/session_019B4dJXtcxvHn97ZaqHUB62
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
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
* keep nav buttons visible
nav buttons would be hidden when closing and reopening dialog after selecting the tracking details pane
* better ux in tracking details
actually pause the video and seek when annotation offset changes to make it easier to visually line up the bounding box
* improve detail stream ux
* update dummy camera docs
* fix docs link
* face recognition dynamic config
* lpr dynamic config
* safe changes for birdseye dynamic config
* bird classification dynamic config
* always assign new config to stats emitter to make telemetry fields dynamic
* add wildcard support for camera config updates in config_set
* update restart required fields for global sections
* add test
* fix rebase issue
* collapsible settings sidebar
use the preexisting control available with shadcn's sidebar (cmd/ctrl-B) to give users more space to set masks/zones on smaller screens
* dynamic ffmpeg
* ensure previews dir exists
when ffmpeg processes restart, there's a brief window where the preview frame generation pipeline is torn down and restarted. before these changes, ffmpeg only restarted on crash/stall recovery or full Frigate restart. Now that ffmpeg restarts happen on-demand via config changes, there's a higher chance a frontend request hits the preview_mp4 or preview_gif endpoints during that brief restart window when the directory might not exist yet. The existing os.listdir() call would throw FileNotFoundError without a directory existence check. this fix just checks if the directory exists and returns 404 if not, exactly how preview_thumbnail already handles the same scenario a few lines below
* global ffmpeg section
* clean up
* tweak
* fix test
* remove unused RecoilRoot and fix implicit ref callback
Remove the vestigial recoil dependency (zero consumers) and convert
the implicit-return ref callback in SearchView to block form to
prevent React 19 interpreting it as a cleanup function.
* replace react-transition-group with framer-motion in Chip
Replace CSSTransition with framer-motion AnimatePresence + motion.div
for React 19 compatibility (react-transition-group uses findDOMNode).
framer-motion is already a project dependency.
* migrate react-grid-layout v1 to v2
- Replace WidthProvider(Responsive) HOC with useContainerWidth hook
- Update types: Layout (single item) → LayoutItem, Layout[] → Layout
- Replace isDraggable/isResizable/resizeHandles with dragConfig/resizeConfig
- Update EventCallback signature for v2 API
- Remove @types/react-grid-layout (v2 includes its own types)
* upgrade vaul, next-themes, framer-motion, react-zoom-pan-pinch
- vaul: ^0.9.1 → ^1.1.2
- next-themes: ^0.3.0 → ^0.4.6
- framer-motion: ^11.5.4 → ^12.35.0 (React 19 native support)
- react-zoom-pan-pinch: 3.4.4 → latest
* upgrade to React 19, react-konva v19, eslint-plugin-react-hooks v5
Core React 19 upgrade with all necessary type fixes:
- Update RefObject types to accept T | null (React 19 refs always nullable)
- Add JSX namespace imports (no longer global in React 19)
- Add initial values to useRef calls (required in React 19)
- Fix ReactElement.props unknown type in config-form components
- Fix IconWrapper interface to use HTMLAttributes instead of index signature
- Add monaco-editor as dev dependency for type declarations
- Upgrade react-konva to v19, eslint-plugin-react-hooks to v5
* upgrade typescript to 5.9.3
* modernize Context.Provider to React 19 shorthand
Replace <Context.Provider value={...}> with <Context value={...}>
across all project-owned context providers. External library contexts
(react-icons IconContext, radix TooltipPrimitive) left unchanged.
* add runtime patches for React 19 compatibility
- Patch @radix-ui/react-compose-refs@1.1.2: stabilize useComposedRefs
to prevent infinite render loops from unstable ref callbacks
https://github.com/radix-ui/primitives/issues/3799
- Patch @radix-ui/react-slot@1.2.4: use useComposedRefs hook in
SlotClone instead of inline composeRefs to prevent re-render cycles
https://github.com/radix-ui/primitives/pull/3804
- Patch react-use-websocket@4.8.1: remove flushSync wrappers that
cause "Maximum update depth exceeded" with React 19 auto-batching
https://github.com/facebook/react/issues/27613
- Add npm overrides to ensure single hoisted copies of compose-refs
and react-slot across all Radix packages
- Add postinstall script for patch-package
- Remove leftover react-transition-group dependency
* formatting
* use availableWidth instead of useContainerWidth for grid layout
The useContainerWidth hook from react-grid-layout v2 returns raw
container width without accounting for scrollbar width, causing the
grid to not fill the full available space. Use the existing
availableWidth value from useResizeObserver which already compensates
for scrollbar width, matching the working implementation.
* remove unused carousel component and fix React 19 peer deps
Remove embla-carousel-react and its unused Carousel UI component.
Upgrade sonner v1 → v2 for native React 19 support. Remove
@types/react-icons stub (react-icons bundles its own types).
These changes eliminate all peer dependency conflicts, so
npm install works without --legacy-peer-deps.
* fix React 19 infinite re-render loop on live dashboard
The "Maximum update depth exceeded" error was caused by two issues:
1. useDeferredStreamMetadata returned a new `{}` default on every render
when SWR data was undefined, creating an unstable reference that
triggered the useEffect in useCameraLiveMode on every render cycle.
Fixed by using a stable module-level EMPTY_METADATA constant.
2. useResizeObserver's rest parameter `...refs` created a new array on
every render, causing its useEffect to re-run and re-observe elements
continuously. Fixed by stabilizing refs with useRef and only
reconnecting the observer when actual DOM elements change.
* debug replay implementation
* fix masks after dev rebase
* fix squash merge issues
* fix
* fix
* fix
* no need to write debug replay camera to config
* camera and filter button and dropdown
* add filters
* add ability to edit motion and object config for debug replay
* add debug draw overlay to debug replay
* add guard to prevent crash when camera is no longer in camera_states
* fix overflow due to radix absolutely positioned elements
* increase number of messages
* ensure deep_merge replaces existing list values when override is true
* add back button
* add debug replay to explore and review menus
* clean up
* clean up
* update instructions to prevent exposing exception info
* fix typing
* refactor output logic
* refactor with helper function
* move init to function for consistency
* migrator and runtime config changes
* component changes to use rasterized_mask
* frontend
* convert none to empty string for config save
* i18n
* update tests
* add enabled config to zones
* zones frontend
* i18n
* docs
* tweaks
* use dashed stroke to indicate disabled
* allow toggle from icon
* use filelock to ensure atomic config updates from endpoint
* enforce atomic config update in the frontend
* toggle via mqtt
* fix global object masks
* correctly handle global object masks in dispatcher
* ws hooks
* render masks and zones based on ws enabled state
* use enabled_in_config for zones and masks
* frontend for enabled_in_config
* tweaks
* i18n
* publish websocket on config save
* i18n tweaks
* pydantic title and description
* i18n generation
* tweaks
* fix typing
* use react-jsonschema-form for UI config
* don't use properties wrapper when generating config i18n json
* configure for full i18n support
* section fields
* add descriptions to all fields for i18n
* motion i18n
* fix nullable fields
* sanitize internal fields
* add switches widgets and use friendly names
* fix nullable schema entries
* ensure update_topic is added to api calls
this needs further backend implementation to work correctly
* add global sections, camera config overrides, and reset button
* i18n
* add reset logic to global config view
* tweaks
* fix sections and live validation
* fix validation for schema objects that can be null
* generic and custom per-field validation
* improve generic error validation messages
* remove show advanced fields switch
* tweaks
* use shadcn theme
* fix array field template
* i18n tweaks
* remove collapsible around root section
* deep merge schema for advanced fields
* add array field item template and fix ffmpeg section
* add missing i18n keys
* tweaks
* comment out api call for testing
* add config groups as a separate i18n namespace
* add descriptions to all pydantic fields
* make titles more concise
* new titles as i18n
* update i18n config generation script to use json schema
* tweaks
* tweaks
* rebase
* clean up
* form tweaks
* add wildcards and fix object filter fields
* add field template for additionalproperties schema objects
* improve typing
* add section description from schema and clarify global vs camera level descriptions
* separate and consolidate global and camera i18n namespaces
* clean up now obsolete namespaces
* tweaks
* refactor sections and overrides
* add ability to render components before and after fields
* fix titles
* chore(sections): remove legacy single-section components replaced by template
* refactor configs to use individual files with a template
* fix review description
* apply hidden fields after ui schema
* move util
* remove unused i18n
* clean up error messages
* fix fast refresh
* add custom validation and use it for ffmpeg input roles
* update nav tree
* remove unused
* re-add override and modified indicators
* mark pending changes and add confirmation dialog for resets
* fix red unsaved dot
* tweaks
* add docs links, readonly keys, and restart required per field
* add special case and comments for global motion section
* add section form special cases
* combine review sections
* tweaks
* add audio labels endpoint
* add audio label switches and input to filter list
* fix type
* remove key from config when resetting to default/global
* don't show description for new key/val fields
* tweaks
* spacing tweaks
* add activity indicator and scrollbar tweaks
* add docs to filter fields
* wording changes
* fix global ffmpeg section
* add review classification zones to review form
* add backend endpoint and frontend widget for ffmpeg presets and manual args
* improve wording
* hide descriptions for additional properties arrays
* add warning log about incorrectly nested model config
* spacing and language tweaks
* fix i18n keys
* networking section docs and description
* small wording tweaks
* add layout grid field
* refactor with shared utilities
* field order
* add individual detectors to schema
add detector titles and descriptions (docstrings in pydantic are used for descriptions) and add i18n keys to globals
* clean up detectors section and i18n
* don't save model config back to yaml when saving detectors
* add full detectors config to api model dump
works around the way we use detector plugins so we can have the full detector config for the frontend
* add restart button to toast when restart is required
* add ui option to remove inner cards
* fix buttons
* section tweaks
* don't zoom into text on mobile
* make buttons sticky at bottom of sections
* small tweaks
* highlight label of changed fields
* add null to enum list when unwrapping
* refactor to shared utils and add save all button
* add undo all button
* add RJSF to dictionary
* consolidate utils
* preserve form data when changing cameras
* add mono fonts
* add popover to show what fields will be saved
* fix mobile menu not re-rendering with unsaved dots
* tweaks
* fix logger and env vars config section saving
use escaped periods in keys to retain them in the config file (eg "frigate.embeddings")
* add timezone widget
* role map field with validation
* fix validation for model section
* add another hidden field
* add footer message for required restart
* use rjsf for notifications view
* fix config saving
* add replace rules field
* default column layout and add field sizing
* clean up field template
* refactor profile settings to match rjsf forms
* tweaks
* refactor frigate+ view and make tweaks to sections
* show frigate+ model info in detection model settings when using a frigate+ model
* update restartRequired for all fields
* fix restart fields
* tweaks and add ability enable disabled cameras
more backend changes required
* require restart when enabling camera that is disabled in config
* disable save when form is invalid
* refactor ffmpeg section for readability
* change label
* clean up camera inputs fields
* misc tweaks to ffmpeg section
- add raw paths endpoint to ensure credentials get saved
- restart required tooltip
* maintenance settings tweaks
* don't mutate with lodash
* fix description re-rendering for nullable object fields
* hide reindex field
* update rjsf
* add frigate+ description to settings pane
* disable save all when any section is invalid
* show translated field name in validation error pane
* clean up
* remove unused
* fix genai merge
* fix genai
* improve jsmpeg player websocket handling
prevent websocket console messages from appearing when player is destroyed
* reformat files after ruff upgrade
* use latest preview frame for latest image when camera is offline
* remove frame extraction logic
* tests
* frontend
* add description to api endpoint
