Commit Graph

36 Commits

Author SHA1 Message Date
Josh Hawkins
1757f4cb04 Use prettier-plugin-tailwindcss (#11373)
* use prettier-plugin-tailwindcss to keep class names organized

* use prettierrc file to ensure formatting on save works with vscode

* classname reorder with prettier-plugin-tailwindcss
2024-05-14 09:06:44 -06:00
Josh Hawkins
08e5c791c8 Use cn() for class names throughout (#11278)
* add scrollbar on ptz presets dropdown

* use cn function for class names throughout

* Revert "add scrollbar on ptz presets dropdown"

This reverts commit 2cee93dc3e.
2024-05-07 08:00:25 -06:00
Nicolas Mowen
fc0f6d6095 Implement infinite scrolling for frigate+ view (#11273)
* Implement infinite scrolling for frigate+ view

* Also fixes safari preview glitch

* Show sub label name in hover
2024-05-06 18:00:21 -05:00
Nicolas Mowen
297444375c UI Fixes (#11179)
* Better scaling for frigate+ dialog and thumbnails

* Always show live objects chip

* Handle sub labels

* Send sub label correctly

* Formatting

* Undo vite

* Update web/src/utils/iconUtil.tsx
2024-04-30 19:35:23 -05:00
Nicolas Mowen
461442b399 Save initial camera state to update when websocket connects (#11174)
* Send camera state to dispatcher

* Fix logic

* Cleanup

* Send camera activitiy in on connect

* Support reading initial camera state

* Fix key

* Formatting

* Sorting
2024-04-30 07:09:50 -06:00
Josh Hawkins
11ff7cb2b7 Use full resolution aspect ratio when available (#11173)
* base recordings and live views off of actual video resolution

* don't set for jsmpeg

* reset when changing main cam

* rename

* Only use resolution for main camera

* fix lint

---------

Co-authored-by: Nicolas Mowen <nickmowen213@gmail.com>
2024-04-30 06:52:56 -06:00
Josh Hawkins
7745313cdc add chips for active objects on live dashboard (#11162) 2024-04-29 15:23:14 -06:00
leccelecce
c2c6113299 Live view not loading for MSE/JSMpeg if overriding live stream (#11141) 2024-04-28 16:28:19 -06:00
Josh Hawkins
d6e93d039d Make all corners less rounded on mobile (#11068)
* make corners less rounded on mobile

* fix live dashboard classes
2024-04-22 09:12:45 -06:00
Josh Hawkins
5f15641b1b New mask/zone editor and motion tuner (#11020)
* initial working konva

* working multi polygons

* multi zones

* clean up

* new zone dialog

* clean up

* relative coordinates and colors

* fix color order

* better motion tuner

* objects for zones

* progress

* merge dev

* edit pane

* motion and object masks

* filtering

* add objects and unsaved to type

* motion tuner, edit controls, tooltips

* object and motion edit panes

* polygon item component, switch color, object form, hover cards

* working zone edit pane

* working motion masks

* object masks and deletion of all types

* use FilterSwitch

* motion tuner fixes and tweaks

* clean up

* tweaks

* spaces in camera name

* tweaks

* allow dragging of points while drawing polygon

* turn off editing mode when switching camera

* limit interpolated coordinates and use crosshair cursor

* padding

* fix tooltip trigger for icons

* konva tweaks

* consolidate

* fix top menu items on mobile
2024-04-19 05:34:07 -06:00
Nicolas Mowen
3d43c5e811 Ui Tweaks (#10920)
* Cleanup live activity indicators for cameras

* Rename to reviews and redirect events to reviews

* Use reviews

* Remove plural

* Simplify recordings view

* Adjust icon
2024-04-10 08:40:17 -05:00
Nicolas Mowen
4d8d3cd22e Live view improvements (#10781)
* Show frigate features in bottom sheet on mobile

* Use flex wrap on mobile so the ptz icons are not cutoff

* Support opening pip from live view

* Remove unused
2024-04-02 07:45:16 -05:00
Nicolas Mowen
6dd6ca5de5 Only allow visible cameras to go live on dashboard (#10671)
* Only show live cameras that are currently visible

* Add back black background

* fix
2024-03-25 15:56:13 -05:00
Josh Hawkins
f91dc37399 Add outline for alerts/detections in motion review (#10642) 2024-03-24 06:54:34 -06:00
Nicolas Mowen
bb50b2b6f4 Respect motion only when playing back (#10632)
* Respect motion only when playing back motion

* Increase efficiency

* Fix import
2024-03-23 14:49:31 -05:00
Nicolas Mowen
380b15b286 WebUI Fixes (#10481)
* Update previews on the hour

* Allow tap to toggle controls so zooming still works

* Use hash location insteaad of state for live camera view

* Add typing
2024-03-15 13:46:17 -05:00
Josh Hawkins
79ca599ace Fix jsmpeg player component (#10425)
* fix jsmpeg component

* preserve aspect ratio

* remove forcing of jsmpeg

* full height only
2024-03-13 08:00:37 -06:00
Nicolas Mowen
92255f771b Add micropohone button for two way talk (#10408) 2024-03-12 18:19:02 -05:00
Josh Hawkins
ed99be0856 Live camera aspect ratio fixes (#10266)
* dynamically manage aspect ratio

* full size

* always use camera aspect ratio for mobile

* no need for different handling for pano cams

* don't set aspect ratio on fullscreen
2024-03-05 13:19:56 -07:00
Josh Hawkins
c74eb75554 Update camera activity indicator (#10208)
* new indicator

* create indicators directory and update imports

* create indicators directory and update imports

* remove vite
2024-03-03 09:32:47 -07:00
Nicolas Mowen
5028a9632e Individual live view (#10178)
* Get live camera view working

* Get ptz working

* Add button for ptz presets

* Add camera feature buttons

* Add button for camera audio

* Cleanup

* Cleanup mobile live

* Only use landscape check on mobile
2024-03-01 18:43:02 -06:00
Nicolas Mowen
3bf2a496e1 Fix linter and fix lint issues (#10141) 2024-02-28 16:23:56 -06:00
Josh Hawkins
485057abc1 Adapt review timeline for mobile devices (#10120)
* adapt timeline to mobile

* remove unused

* tweaks

* pointer cursor on segments
2024-02-28 06:18:08 -07:00
Nicolas Mowen
9893741990 Update tailwind css and cleanup classNames (#10107)
* Bump tailwindcss from 3.3.5 to 3.4.1 in /web

Bumps [tailwindcss](https://github.com/tailwindlabs/tailwindcss) from 3.3.5 to 3.4.1.
- [Release notes](https://github.com/tailwindlabs/tailwindcss/releases)
- [Changelog](https://github.com/tailwindlabs/tailwindcss/blob/master/CHANGELOG.md)
- [Commits](https://github.com/tailwindlabs/tailwindcss/compare/v3.3.5...v3.4.1)

---
updated-dependencies:
- dependency-name: tailwindcss
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>

* Update tailwind css and cleanup

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
2024-02-28 03:40:57 +00:00
Nicolas Mowen
fd24007618 Revamp mobile UI (#10103)
* Simplify nav components

* Allow ability to choose live layout on mobile

* Combine event views

* Undo vite

* Fix autoplay

* Remove import

* Show filters on mobile view

* Spacing

* Don't separate properties
2024-02-27 15:39:05 -06:00
Josh Hawkins
622e9741c0 Review timeline improvements (#10102)
* make event bars clickable

* outline and scroll when segment is clicked

* match outline colors to event type

* hover thumbnails

* make event bars clickable

* outline and scroll when segment is clicked

* match outline colors to event type

* hover thumbnails

* fix merge from rebase

* remove minimap opacity classes

* live player outline colors

* safelist shadow classes
2024-02-27 12:41:26 -07:00
Nicolas Mowen
8c4811ed69 Use webrtc for safari live view (#9839)
* Move safari function

* Use webrtc for safari

* Use taller aspect ratio for tall thumbnails

* Simplify thumbnail sizing

* Use correct aspect ratio on all devices
2024-02-14 18:19:55 -06:00
Josh Hawkins
fa384a7f9d ensure jsmpeg canvas is rounded and clipped (#9842) 2024-02-13 23:25:28 +00:00
Nicolas Mowen
63bc1b1582 Improve thumbnails and live player (#9828)
* Don't show gif until event is over and fix aspect

* Be more efficient about updating events

* ensure previews are sorted

* Don't show live view when window is not visible

* Move debug camera to separate view

* Improve jpg loading

* Ensure still is updated on player live finish

* Don't reload when window not visible

* Only disconnect instead of full remove

* Use start time instead of event over to determine gif
2024-02-13 01:28:36 +00:00
Josh Hawkins
f54cb21bd0 UI changes (#9823)
* fix button within button

* add subtle overlay gradient

* try disconnecting to improve memory usage

* rounded corners on gradients
2024-02-12 17:34:45 -06:00
Nicolas Mowen
bcbea8da7d Create API to create gif from previews and show instead of still thumbnails (#9786)
* Start working on animation

* Change output file

* Create preview gif

* Show animated gif for event thumb

* Remove favorite

* Cleanup
2024-02-11 07:23:45 -06:00
Nicolas Mowen
64988c9be0 Streamline live view (#9772)
* Break out live page

* Improving layouts and add chip component

* Improve default camera player sizing

* Improve live updating

* Cleanup and fit figma

* Use fixed height

* Masonry layout

* Fix stuff

* Don't force heights

* Adjust scaling

* Cleanup

* remove sidebar (#9731)

* remove sidebar

* keep sidebar on mobile for now and add icons

* Fix revalidation

* Cleanup

* Cleanup width

* Add chips for activity on cameras

* Remove dashboard from header

* Use Inter font (#9735)

* Show still image when no activity is occurring

* remove unused search params

* add playing check for webrtc

* Don't use grid at all for single column

* Fix height on mobile

* a few style updates to better match figma (#9745)

* Remove active objects when they become stationary

* Move to sidebar only and make settings separate component

* Fix layout

* Animate visibility of chips

* Sidebar is full screen

* Fix tall aspect ratio cameras

* Fix complicated aspect logic

* remove

* Adjust thumbnail aspect and add text

* margin on single column layout

* Smaller event thumb text

* Simplify basic image view

* Only show the red dot when camera is recording

* Improve typing for camera toggles

* animate chips with react-transition-group (#9763)

* don't flash when going to still image

* revalidate

* tooltips and active tracking outline (#9766)

* tooltips

* fix tooltip provider and add active tracking outline

* remove unused icon

* remove figma comment

* Get live mode working for jsmpeg

* add small gradient below timeago on event thumbnails (#9767)

* Create live mode hook and make sure jsmpeg can be used

* Enforce env var

* Use print

* Remove unstable

* Add tooltips to thumbnails

* Put back vite

* Format

* Update web/src/components/player/JSMpegPlayer.tsx

---------

Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Co-authored-by: Blake Blackshear <blake@frigate.video>
2024-02-10 05:30:53 -07:00
Josh Hawkins
d2ab44ce72 Reactify MSE player component (#9163)
* make mse a functional component with react hooks

* iOS 17 fixes

* birdseye mse

* remove debug

* fix test
2024-01-31 12:56:11 +00:00
Nicolas Mowen
9efb6b1caf Add mse live view (#9117) 2024-01-31 12:56:11 +00:00
Nicolas Mowen
2236ae5d3b Add jsmpeg support to new webUI and make birdseye default for live page (#8995)
* Add jsmpeg and make birdseye default for live view

* Fix jsmpeg

* Fix
2024-01-31 12:56:11 +00:00
Blake Blackshear
bdebb99b5a Use new UI (#8983)
* fixup build

* swap frontends
2024-01-31 12:56:11 +00:00