mirror of
https://github.com/blakeblackshear/frigate.git
synced 2026-08-05 02:18:52 +03:00
Josh Hawkins
013b5bd342
Dragging the handlebar, especially quickly or with fast direction changes, could exceed React's nested update limit and unmount the whole app, leaving a blank screen. Motion search was worst affected. The drag loop committed a new time into React state on every animation frame. Edge auto-scrolling mutates scrollTop each iteration, so the value always differed and React's same-value bail-out never engaged, letting the update chain run to the limit of 50. Pace those commits to one per 100ms and flush the pending value on release, so the drop position is still exact. The handlebar position and label are written to the DOM directly and remain at frame rate. useUserInteraction dispatched state on every scroll and touchmove event; only commit on the leading edge. Motion search also passed fresh array literals for the timeline's events, motion events and unavailable ranges, giving the segment memo and the drag effect new dependencies on every render. Both views also passed an inline arrow for onHandlebarDraggingChange, which is an effect dependency that calls setState.
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