When serving Frigate at a subpath, the paths that show in the URL bar
and that wind up in your browser history are anchored at the web root.
I.e. you go to `https://example.com/frigate/`, it changes to
`https://example.com/`, and clicking around works as expected, but the
`frigate/` prefix is gone.
It's confusing if you don't know that the URL's are entirely virtual.
Also, your browser history is useless, since the URL's point to e.g.
`https://example.com/#kitchen`, but visiting that URL will not hit
`/frigate/` at all.
Most of the work is already done. Nginx injects javascript to set
`window.baseURL` based on the X-Ingress-Path header. This change passes
that to BrowserRouter, so that it'll be part of the URL's it shows.
Fixes#4526
* 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
* Save review thumbs in dedicated folder
* Create exports table
* Save exports to DB and save thumbnail for export
* Save full frame always
* Fix rounded corners
* Save exports that are in progress
* No need to remove spaces
* Reorganize apis to use IDs
* Use new apis for frontend
* Get video playback working
* Fix deleting and renaming
* Import existing exports to DB
* Implement downloading
* Formatting
* Cleanup live activity indicators for cameras
* Rename to reviews and redirect events to reviews
* Use reviews
* Remove plural
* Simplify recordings view
* Adjust icon
* Rename graph
* Use separate view for general metrics
* Get storage graph formatted
* Show camera storage usage
* Cleanup ticks
* Remove storage link
* Add icons and frigate logo
* Undo
* Use optimistic state for metrics toggle
* Use optimistic state and skeletons for loading
* Separate settings items so layout is more consistent
* Convert settings on mobile to drawer
* Fix sizing on mobile and make scrollable
* remove padding
* Use dialog instead of popover
* Don't focus on first item
* Simpler tab fix
* 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
* Use timerange everywhere and ensure recordings has last 24 hours
* Pause recording when selecting timeline
* Fix loading layout
* Fix updating current time not always working
* Simplify dynamic video player
* Clean up desktop sizing
* Fix current hour
* Make padding consistent
* Improve spacing for extra cameras
* Make back button consistent
* Fix preview player not jumping to correct time
* Dont use useEffect due to preview changing
* Simplify
* Fix transition
* Use dynamic imports to reduce initial load times
Remove videojs
* Convert to using hls.js instead of videojs
* Improve mobile controls experience
* Cleanup
* Ensure playback rate stays teh same when source changes
* Use webp for latest camera image
* Switch to hls.js on error
* Don't rerun error if hls already tried
* Fix error checking
* also check for media decode error to fallback to HLS
---------
Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
* 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
* 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
* Reduce redundant code and don't pull new items when marking as reviewed
* Chunk recording times and run playback
* fix overwriting existing data
* Implement scrubbing
* Show refresh button
* Remove old history
* Fix race condition
* Cleanup handling
* Remove console
* Add ui for events
* Display data for review items
* Use preview thumbnails
* Implement paging
* Show icons for what was detected
* Show progress bar on preview thumbnail
* Hide the overlays on hover and update reviewed status
* Dim previews that have been reviewed
* Show audio icons
* Cleanup preview thumb player
* initial implementation of review timeline
* Use timeout for hover playback
* Break apart mobile and desktop views
* Show icons for sub labels
* autoplay first video on mobile
* Only show the last 24 hours by default
* Rework scrolling to fix nested scrolling
* Final scroll cleanups
---------
Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
* 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>
