mirror of
https://github.com/blakeblackshear/frigate.git
synced 2026-04-05 22:57:40 +03:00
f9885df0e4
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
|
||
|---|---|---|
| .. | ||
| __test__ | ||
| .vscode | ||
| images | ||
| patches | ||
| public | ||
| src | ||
| themes | ||
| .eslintrc.cjs | ||
| .gitignore | ||
| .prettierrc | ||
| components.json | ||
| index.html | ||
| login.html | ||
| package-lock.json | ||
| package.json | ||
| postcss.config.js | ||
| README.md | ||
| site.webmanifest | ||
| tailwind.config.cjs | ||
| tsconfig.json | ||
| tsconfig.node.json | ||
| vite.config.ts | ||
This is the Frigate frontend which connects to and provides a User Interface to the Python backend.
Web Development
Installing Web Dependencies Via NPM
Within /web, run:
npm install
Running development frontend
Within /web, run:
PROXY_HOST=<ip_address:port> npm run dev
The Proxy Host can point to your existing Frigate instance. Otherwise defaults to localhost:5000 if running Frigate on the same machine.
Extensions
Install these IDE extensions for an improved development experience:
- eslint