administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-07 03:35:26 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Only show timeline for selected hour

Browse Source
This commit is contained in:
Nick Mowen 2024-01-02 15:55:39 -07:00
parent 0f38eb69bd
commit 6ee7cacaa2
2 changed files with 6 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
web/src/pages/UIPlayground.tsx
View File

@ -9,8 +9,6 @@ import { Event } from "@/types/event";
import ActivityIndicator from "@/components/ui/activity-indicator";
import { useApiHost } from "@/api";
import TimelineScrubber from "@/components/playground/TimelineScrubber";
import TimelineGraph from "@/components/graph/TimelineGraph";
import { GraphDataPoint } from "@/types/graph";
// Color data
const colors = [
@ -76,36 +74,6 @@ function UIPlayground() {
"events",
{ limit: 10, after: recentTimestamp },
]);
const { data: recordingSegments } = useSWR<RecordingSegment[]>([
"front_cam/recordings",
{ before: 1704211200, after: 1704207600 },
]);
const graphData = useMemo(() => {
if (!recordingSegments) {
return { motion: [], objects: [] };
}
const motion: GraphDataPoint[] = [];
const objects: GraphDataPoint[] = [];
recordingSegments
.forEach((seg) => {
if (seg.objects > 0) {
objects.push({
x: new Date((seg.start_time + 5) * 1000),
y: seg.motion,
});
} else {
motion.push({
x: new Date((seg.start_time + 5) * 1000),
y: seg.motion,
});
}
});
return { motion, objects };
}, [recordingSegments]);
return (
<>
@ -123,28 +91,12 @@ function UIPlayground() {
{config && (
<div>
{events && events.length > 0 && (
<div className="relative">
<>
<ActivityScrubber
items={[]}
options={{
start: new Date(1704207600000),
end: new Date(1704211200000),
}}
items={eventsToScrubberItems(events)}
selectHandler={onSelect}
/>
<div className="w-full absolute left-0 top-0 h-[84px]">
<TimelineGraph
id="test"
data={[
{
name: "Motion",
data: graphData.motion,
},
{ name: "Active Objects", data: graphData.objects },
]}
/>
</div>
</div>
</>
)}
</div>
)}

6
web/src/views/history/DesktopTimelineView.tsx
View File

@ -327,8 +327,7 @@ export default function DesktopTimelineView({
key={timeline.range.start}
className={`relative p-2 ${
isSelected ? "bg-secondary bg-opacity-30 rounded-md" : ""
}`}
onClick={() => setSelectedPlayback(timeline)}
}`}
>
<ActivityScrubber
items={[]}
@ -384,8 +383,9 @@ export default function DesktopTimelineView({
);
}
}}
doubleClickHandler={() => setSelectedPlayback(timeline)}
/>
{graphData && (
{isSelected && graphData && (
<div className="w-full absolute left-0 top-0 h-[84px]">
<TimelineGraph
id={timeline.range.start.toString()}