Commit Graph

25 Commits

Author SHA1 Message Date
Josh Hawkins
2782931c72
Update frontend to React 19 (#22275)
* 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.
2026-03-05 07:42:38 -07:00
Josh Hawkins
b52044aecc
Add Detail stream in History view (#20525)
* new type

* activity stream panel

* use context provider for activity stream

* new activity stream panel in history view

* overlay for object tracking details in history view

* use overlay in video player

* don't refetch timeline

* fix activity stream group from being highlighted prematurely

* use annotation offset

* fix scrolling and use custom hook for interaction

* memoize to prevent unnecessary renders

* i18n and timestamp formatting

* add annotation offset slider

* bg color

* add collapsible component

* refactor

* rename activity to detail

* fix merge conflicts

* i18n

* more i18n
2025-10-16 07:24:14 -06:00
Josh Hawkins
b6e0e5698a
Proper i18n date/time handling (#17858)
* install date-fns-tz

* add date locale hook

* refactor formatUnixTimestampToDateTime

Use date-fns style instead of using strftime. This requires changing the i18n keys to the way date-fns represents dates (eg: "MMM d, h:mm:ss aaa"  instead of "%b %-d, %H:%M"

* refactor calendar to use new hook

* fix useFormattedTimestamp to use new formatUnixTimestampToDateTime date_format

* change i18n keys to new format

* fix timeline

* fix review

* fix explore

* fix metrics

* fix notifications

* fix face library

* clean up
2025-04-22 15:50:21 -06:00
Josh Hawkins
cc2dbdcb44
Timeline improvements (#16429)
* virtualize event segments

* use virtual segments in event review timeline

* add segmentkey to props

* virtualize motion segments

* use virtual segments in motion review timeline

* update draggable element hook to use only math

* timeline zooming hook

* add zooming to event review timeline

* update playground

* zoomable timeline on recording view

* consolidate divs in summary timeline

* only calculate motion data for visible motion segments

* use swr loading state

* fix motion only

* keep handlebar centered when zooming

* zoom animations

* clean up

* ensure motion only checks both halves of segment

* prevent handlebar jump when using motion only mode
2025-02-09 14:13:32 -07:00
Nicolas Mowen
a13b9815f6
Various fixes (#14786)
* Catch openvino error

* Remove clip deletion

* Update deletion text

* Fix timeline not respecting timezone config

* Tweaks

* More timezone fixes

* Fix

* More timezone fixes

* Fix shm docs
2024-11-04 07:07:57 -07:00
Josh Hawkins
fe2fec81ac
Improve timeline auto scrolling (#13556)
* Improve timeline auto scrolling

* touch events
2024-09-04 10:48:45 -06:00
Josh Hawkins
1e80342c41
UI tweaks and bugfixes (#11692)
* UI tweaks and bugfixes

* fix linter complaints in unmodified files
2024-06-02 12:00:59 -05:00
Josh Hawkins
c0073db859
fix touch events (#11265) 2024-05-06 12:35:18 -06:00
Josh Hawkins
ca8ef70096
Support desktop touchscreens for timelines (#11241)
* support desktop touchscreens

* remove placeholder select

* add max height to settings cameras dropdown
2024-05-04 21:00:33 -06:00
Josh Hawkins
7a7ae81d50
always use full resolution time when dragging (#10939) 2024-04-11 07:29:34 -06:00
Josh Hawkins
427c6a6afb
Timeline tweaks (#10816)
* limit handles from overdragging when segments don't fill up timeline

* use separate state for switch

* add key
2024-04-03 19:20:47 -06:00
Josh Hawkins
7fac91dce4
UI tweaks and bugfixes (#10775)
* fix wrong segments when changing filters in motion only mode

* pixel alignment, better outlines, and more figma matching

* fix stats from crashing the ui

* separate layout from aspect classes

* check for invalid value

* avoid undefined classnames
2024-04-01 08:23:57 -06:00
Josh Hawkins
36d5e5b45f
Timeline tweaks for mobile (#10726)
* add dense prop, combine duplicate code, fix mobile bug

* put segment height in hook

* playground
2024-03-28 10:03:06 -05:00
Josh Hawkins
98a1e6ee22
fix draggable element pixel alignment (#10708) 2024-03-27 07:21:38 -06:00
Josh Hawkins
c82ed43c13
Timeline tweaks (#10693)
* make segment height static

* fix timeline overscrolling

* better alignment of motion timeline segments
2024-03-26 15:36:28 -06:00
Josh Hawkins
1cd374d3ad
add option to only scrollintoview initially (#10689) 2024-03-26 10:29:07 -06:00
Josh Hawkins
bc6b4c38b8
improve timeline scrolling with dynamic speed (#10677) 2024-03-25 20:29:42 -06:00
Josh Hawkins
71c7504de5
fix timeline upward scrolling limit (#10673) 2024-03-25 14:56:20 -06:00
Josh Hawkins
51db63e42b
Motion review changes (#10667)
* Add outlines in motion only mode

* fix playground
2024-03-25 10:19:55 -06:00
Josh Hawkins
7b64091128
Motion review playback optimizations (#10659)
* handle motion timestamps with ranges

* check for overlaps when checking segment for events

* rename motion color vars to significant_motion for consistency

* safelist significant_motion

* rename vars for clarity and use timeout instead of interval
2024-03-24 20:37:44 -06:00
Josh Hawkins
4159334520
option to show motion only on motion timeline (#10626) 2024-03-23 07:33:50 -06:00
Josh Hawkins
0ac7aaabe3
Timeline minimap and scrolling changes (#10589)
* add function to get visible timeline duration

* Don't show minimap when minimap bounds exceed timeline area

* when minimap is hidden, only scroll timeline when needed

* observe only when not showing minimap

* no need to duplicate observer

* fix out of order param

* timeline utils hook props

---------

Co-authored-by: Nicolas Mowen <nickmowen213@gmail.com>
2024-03-21 11:49:04 -06:00
Josh Hawkins
4040191101
fixes and changes (#10587) 2024-03-21 08:00:04 -06:00
Josh Hawkins
f113acee33
Summary timeline (#10569)
* implement summary timeline

* implement summary timeline

* merge dev

* conditionally attach listeners only when dragging

* set up listeners with a ref
2024-03-20 20:56:15 -06:00
Josh Hawkins
d249e5b27f
Timeline fixes and export handles (#10522)
* select an export range from timeline

* height tweak
2024-03-18 14:58:54 -06:00