chris/frigate
1
0
Fork 0
forked from Github/frigate
Code Pull Requests Packages Activity

Improve graph using pandas (#9234)

Browse Source 
* Ensure viewport is always full screen

* Protect against hour with no cards and ensure data is consistent

* Reduce grouped up image refreshes

* Include current hour and fix scrubbing bugginess

* Scroll initially selected timeline in to view

* Expand timelne class type

* Use poster image for preview on video player instead of using separate image view

* Fix available streaming modes

* Incrase timing for grouping timline items

* Fix audio activity listener

* Fix player not switching views correctly

* Use player time to convert to timeline time

* Update sub labels for previous timeline items

* Show mini timeline bar for non selected items

* Rewrite desktop timeline to use separate dynamic video player component

* Extend improvements to mobile as well

* Improve time formatting

* Fix scroll

* Fix no preview case

* Mobile fixes

* Audio toggle fixes

* More fixes for mobile

* Improve scaling of graph motion activity

* Add keyboard shortcut hook and support shortcuts for playback page

* Fix sizing of dialog

* Improve height scaling of dialog

* simplify and fix layout system for timeline

* Fix timeilne items not working

* Implement basic Frigate+ submitting from timeline
This commit is contained in:
Nicolas Mowen
2024-01-31 05:29:18 -07:00
committed by Blake Blackshear
parent 9c4b69191b
commit af3f6dadcb
28 changed files with 1379 additions and 852 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/pages/ConfigEditor.tsx
View File

@@ -122,7 +122,7 @@ function ConfigEditor() {
}
return (
<div className="absolute top-24 bottom-16 right-0 left-0 md:left-24 lg:left-40">
<div className="absolute top-28 bottom-16 right-0 left-0 md:left-24 lg:left-60">
<div className="lg:flex justify-between mr-1">
<Heading as="h2">Config</Heading>
<div>

2
web/src/pages/Dashboard.tsx
View File

@@ -159,7 +159,7 @@ function Camera({ camera }: { camera: CameraConfig }) {
onClick={(e) => {
e.stopPropagation();
e.preventDefault();
sendAudio(detectValue == "ON" ? "OFF" : "ON");
sendAudio(audioValue == "ON" ? "OFF" : "ON");
}}
>
<LuEar />

2
web/src/pages/History.tsx
View File

@@ -268,7 +268,7 @@ function TimelineViewer({
return (
<Dialog open={playback != undefined} onOpenChange={(_) => onClose()}>
<DialogContent className="md:max-w-2xl lg:max-w-4xl xl:max-w-6xl 2xl:max-w-7xl 3xl:max-w-[1720px]">
<DialogContent className="w-[70%] max-w-[1920px] h-[90%]">
{timelineData && playback && (
<DesktopTimelineView
timelineData={timelineData}

118
web/src/pages/Live.tsx
View File

@@ -48,7 +48,7 @@ function Live() {
const defaultLiveMode = useMemo(() => {
if (cameraConfig) {
if (restreamEnabled) {
return cameraConfig.ui.live_mode;
return cameraConfig.ui.live_mode || config?.ui.live_mode;
}
return "jsmpeg";
@@ -65,55 +65,75 @@ function Live() {
<div className=" w-full">
<div className="flex justify-between">
<Heading as="h2">Live</Heading>
<div>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button className="capitalize" variant="outline">
{camera?.replaceAll("_", " ") || "Select A Camera"}
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuLabel>Select A Camera</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuRadioGroup value={camera} onValueChange={setCamera}>
{sortedCameras.map((item) => (
<DropdownMenuRadioItem
className="capitalize"
key={item.name}
value={item.name}
>
{item.name.replaceAll("_", " ")}
<div className="flex">
<div className="mx-1">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button className="capitalize" variant="outline">
{camera?.replaceAll("_", " ") || "Select A Camera"}
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuLabel>Select A Camera</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuRadioGroup
value={camera}
onValueChange={setCamera}
>
{config?.birdseye.enabled && (
<DropdownMenuRadioItem value="birdseye">
Birdseye
</DropdownMenuRadioItem>
)}
{sortedCameras.map((item) => (
<DropdownMenuRadioItem
className="capitalize"
key={item.name}
value={item.name}
>
{item.name.replaceAll("_", " ")}
</DropdownMenuRadioItem>
))}
</DropdownMenuRadioGroup>
</DropdownMenuContent>
</DropdownMenu>
</div>
<div className="mx-1">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button className="capitalize" variant="outline">
{viewSource || defaultLiveMode || "Select A Live Mode"}
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuLabel>Select A Live Mode</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuRadioGroup
value={`${viewSource}`}
onValueChange={setViewSource}
>
{restreamEnabled && (
<DropdownMenuRadioItem value="webrtc">
Webrtc
</DropdownMenuRadioItem>
)}
{restreamEnabled && (
<DropdownMenuRadioItem value="mse">
MSE
</DropdownMenuRadioItem>
)}
<DropdownMenuRadioItem value="jsmpeg">
Jsmpeg
</DropdownMenuRadioItem>
))}
</DropdownMenuRadioGroup>
</DropdownMenuContent>
</DropdownMenu>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button className="capitalize" variant="outline">
{viewSource || defaultLiveMode || "Select A Live Mode"}
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuLabel>Select A Live Mode</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuRadioGroup
value={`${viewSource}`}
onValueChange={setViewSource}
>
<DropdownMenuRadioItem value="webrtc">
Webrtc
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="mse">MSE</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="jsmpeg">
Jsmpeg
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="debug">
Debug
</DropdownMenuRadioItem>
</DropdownMenuRadioGroup>
</DropdownMenuContent>
</DropdownMenu>
{camera != "birdseye" && (
<DropdownMenuRadioItem value="debug">
Debug
</DropdownMenuRadioItem>
)}
</DropdownMenuRadioGroup>
</DropdownMenuContent>
</DropdownMenu>
</div>
</div>
</div>
{config && camera == "birdseye" && sourceIsLoaded && (