mirror of
https://github.com/blakeblackshear/frigate.git
synced 2025-07-30 13:48:07 +02:00
Recordings viewer (#9985)
* 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
This commit is contained in:
Nicolas Mowen
GitHub
parent
fa57a3db28
commit
f84d2db406
@ -5,7 +5,6 @@ import Wrapper from "@/components/Wrapper";
|
|||||||
import Sidebar from "@/components/Sidebar";
|
import Sidebar from "@/components/Sidebar";
|
||||||
import Header from "@/components/Header";
|
import Header from "@/components/Header";
|
||||||
import Live from "@/pages/Live";
|
import Live from "@/pages/Live";
|
||||||
import History from "@/pages/History";
|
|
||||||
import Export from "@/pages/Export";
|
import Export from "@/pages/Export";
|
||||||
import Storage from "@/pages/Storage";
|
import Storage from "@/pages/Storage";
|
||||||
import System from "@/pages/System";
|
import System from "@/pages/System";
|
||||||
@ -40,7 +39,6 @@ function App() {
|
|||||||
<Routes>
|
<Routes>
|
||||||
<Route path="/" element={<Live />} />
|
<Route path="/" element={<Live />} />
|
||||||
<Route path="/events" element={<Events />} />
|
<Route path="/events" element={<Events />} />
|
||||||
<Route path="/history" element={<History />} />
|
|
||||||
<Route path="/export" element={<Export />} />
|
<Route path="/export" element={<Export />} />
|
||||||
<Route path="/storage" element={<Storage />} />
|
<Route path="/storage" element={<Storage />} />
|
||||||
<Route path="/system" element={<System />} />
|
<Route path="/system" element={<System />} />
|
||||||
|
|||||||
@ -1,87 +0,0 @@
|
|||||||
import useSWR from "swr";
|
|
||||||
import { Card } from "../ui/card";
|
|
||||||
import { FrigateConfig } from "@/types/frigateConfig";
|
|
||||||
import ActivityIndicator from "../ui/activity-indicator";
|
|
||||||
import { LuClock, LuTrash } from "react-icons/lu";
|
|
||||||
import { HiOutlineVideoCamera } from "react-icons/hi";
|
|
||||||
import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
|
|
||||||
import {
|
|
||||||
getTimelineIcon,
|
|
||||||
getTimelineItemDescription,
|
|
||||||
} from "@/utils/timelineUtil";
|
|
||||||
import { Button } from "../ui/button";
|
|
||||||
|
|
||||||
type HistoryCardProps = {
|
|
||||||
timeline: Card;
|
|
||||||
relevantPreview?: Preview;
|
|
||||||
isMobile: boolean;
|
|
||||||
onClick?: () => void;
|
|
||||||
onDelete?: () => void;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function HistoryCard({
|
|
||||||
// @ts-ignore
|
|
||||||
relevantPreview,
|
|
||||||
timeline,
|
|
||||||
// @ts-ignore
|
|
||||||
isMobile,
|
|
||||||
onClick,
|
|
||||||
onDelete,
|
|
||||||
}: HistoryCardProps) {
|
|
||||||
const { data: config } = useSWR<FrigateConfig>("config");
|
|
||||||
|
|
||||||
if (!config) {
|
|
||||||
return <ActivityIndicator />;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Card
|
|
||||||
className="cursor-pointer my-2 xs:mr-2 w-full xs:w-[48%] sm:w-[284px]"
|
|
||||||
onClick={onClick}
|
|
||||||
>
|
|
||||||
<>
|
|
||||||
<div className="text-sm flex justify-between items-center">
|
|
||||||
<div className="pl-1 pt-1">
|
|
||||||
<LuClock className="h-5 w-5 mr-2 inline" />
|
|
||||||
{formatUnixTimestampToDateTime(timeline.time, {
|
|
||||||
strftime_fmt:
|
|
||||||
config.ui.time_format == "24hour" ? "%H:%M:%S" : "%I:%M:%S %p",
|
|
||||||
time_style: "medium",
|
|
||||||
date_style: "medium",
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
<Button className="px-2 py-2" variant="ghost" size="xs">
|
|
||||||
<LuTrash
|
|
||||||
className="w-5 h-5 stroke-danger"
|
|
||||||
onClick={(e: Event) => {
|
|
||||||
e.stopPropagation();
|
|
||||||
|
|
||||||
if (onDelete) {
|
|
||||||
onDelete();
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
<div className="pl-1 capitalize text-sm flex items-center mt-1">
|
|
||||||
<HiOutlineVideoCamera className="h-5 w-5 mr-2 inline" />
|
|
||||||
{timeline.camera.replaceAll("_", " ")}
|
|
||||||
</div>
|
|
||||||
<div className="pl-1 my-2">
|
|
||||||
<div className="text-sm font-medium">Activity:</div>
|
|
||||||
{Object.entries(timeline.entries).map(([_, entry], idx) => {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
key={idx}
|
|
||||||
className="flex text-xs capitalize my-1 items-center"
|
|
||||||
>
|
|
||||||
{getTimelineIcon(entry)}
|
|
||||||
{getTimelineItemDescription(entry)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,262 +0,0 @@
|
|||||||
import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
|
|
||||||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../ui/dialog";
|
|
||||||
import useSWR from "swr";
|
|
||||||
import { FrigateConfig } from "@/types/frigateConfig";
|
|
||||||
import VideoPlayer from "../player/VideoPlayer";
|
|
||||||
import { useMemo, useRef, useState } from "react";
|
|
||||||
import { useApiHost } from "@/api";
|
|
||||||
import TimelineEventOverlay from "../overlay/TimelineDataOverlay";
|
|
||||||
import ActivityIndicator from "../ui/activity-indicator";
|
|
||||||
import { Button } from "../ui/button";
|
|
||||||
import {
|
|
||||||
getTimelineIcon,
|
|
||||||
getTimelineItemDescription,
|
|
||||||
} from "@/utils/timelineUtil";
|
|
||||||
import { LuAlertCircle } from "react-icons/lu";
|
|
||||||
import {
|
|
||||||
Tooltip,
|
|
||||||
TooltipContent,
|
|
||||||
TooltipProvider,
|
|
||||||
TooltipTrigger,
|
|
||||||
} from "../ui/tooltip";
|
|
||||||
import Player from "video.js/dist/types/player";
|
|
||||||
|
|
||||||
type TimelinePlayerCardProps = {
|
|
||||||
timeline?: Card;
|
|
||||||
onDismiss: () => void;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function TimelinePlayerCard({
|
|
||||||
timeline,
|
|
||||||
onDismiss,
|
|
||||||
}: TimelinePlayerCardProps) {
|
|
||||||
const { data: config } = useSWR<FrigateConfig>("config");
|
|
||||||
const apiHost = useApiHost();
|
|
||||||
const playerRef = useRef<Player | undefined>();
|
|
||||||
|
|
||||||
const annotationOffset = useMemo(() => {
|
|
||||||
if (!config || !timeline) {
|
|
||||||
return 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
(config.cameras[timeline.camera]?.detect?.annotation_offset || 0) / 1000
|
|
||||||
);
|
|
||||||
}, [config, timeline]);
|
|
||||||
const [selectedItem, setSelectedItem] = useState<Timeline | undefined>();
|
|
||||||
|
|
||||||
const recordingParams = useMemo(() => {
|
|
||||||
if (!timeline) {
|
|
||||||
return {};
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
before: timeline.entries.at(-1)!!.timestamp + 30,
|
|
||||||
after: timeline.entries.at(0)!!.timestamp,
|
|
||||||
};
|
|
||||||
}, [timeline]);
|
|
||||||
|
|
||||||
const { data: recordings } = useSWR<Recording[]>(
|
|
||||||
timeline ? [`${timeline.camera}/recordings`, recordingParams] : null,
|
|
||||||
{ revalidateOnFocus: false }
|
|
||||||
);
|
|
||||||
|
|
||||||
const playbackUri = useMemo(() => {
|
|
||||||
if (!timeline) {
|
|
||||||
return "";
|
|
||||||
}
|
|
||||||
|
|
||||||
const end = timeline.entries.at(-1)!!.timestamp + 30;
|
|
||||||
const start = timeline.entries.at(0)!!.timestamp;
|
|
||||||
return `${apiHost}vod/${timeline?.camera}/start/${
|
|
||||||
Number.isInteger(start) ? start.toFixed(1) : start
|
|
||||||
}/end/${Number.isInteger(end) ? end.toFixed(1) : end}/master.m3u8`;
|
|
||||||
}, [timeline]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<Dialog
|
|
||||||
open={timeline != null}
|
|
||||||
onOpenChange={(_) => {
|
|
||||||
setSelectedItem(undefined);
|
|
||||||
onDismiss();
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<DialogContent
|
|
||||||
className="md:max-w-2xl lg:max-w-3xl xl:max-w-4xl 2xl:max-w-5xl"
|
|
||||||
onOpenAutoFocus={(e) => e.preventDefault()}
|
|
||||||
>
|
|
||||||
<DialogHeader>
|
|
||||||
<DialogTitle className="capitalize">
|
|
||||||
{`${timeline?.camera?.replaceAll(
|
|
||||||
"_",
|
|
||||||
" "
|
|
||||||
)} @ ${formatUnixTimestampToDateTime(timeline?.time ?? 0, {
|
|
||||||
strftime_fmt:
|
|
||||||
config?.ui?.time_format == "24hour" ? "%H:%M:%S" : "%I:%M:%S",
|
|
||||||
})}`}
|
|
||||||
</DialogTitle>
|
|
||||||
</DialogHeader>
|
|
||||||
{config && timeline && recordings && recordings.length > 0 && (
|
|
||||||
<>
|
|
||||||
<TimelineSummary
|
|
||||||
timeline={timeline}
|
|
||||||
annotationOffset={annotationOffset}
|
|
||||||
recordings={recordings}
|
|
||||||
onFrameSelected={(selected, seekTime) => {
|
|
||||||
setSelectedItem(selected);
|
|
||||||
playerRef.current?.pause();
|
|
||||||
playerRef.current?.currentTime(seekTime);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<div className="relative">
|
|
||||||
<VideoPlayer
|
|
||||||
options={{
|
|
||||||
preload: "auto",
|
|
||||||
autoplay: true,
|
|
||||||
sources: [
|
|
||||||
{
|
|
||||||
src: playbackUri,
|
|
||||||
type: "application/vnd.apple.mpegurl",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}}
|
|
||||||
seekOptions={{ forward: 10, backward: 5 }}
|
|
||||||
onReady={(player) => {
|
|
||||||
playerRef.current = player;
|
|
||||||
player.on("playing", () => {
|
|
||||||
setSelectedItem(undefined);
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
onDispose={() => {
|
|
||||||
playerRef.current = undefined;
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{selectedItem ? (
|
|
||||||
<TimelineEventOverlay
|
|
||||||
timeline={selectedItem}
|
|
||||||
cameraConfig={config.cameras[timeline.camera]}
|
|
||||||
/>
|
|
||||||
) : undefined}
|
|
||||||
</VideoPlayer>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</DialogContent>
|
|
||||||
</Dialog>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
type TimelineSummaryProps = {
|
|
||||||
timeline: Card;
|
|
||||||
annotationOffset: number;
|
|
||||||
recordings: Recording[];
|
|
||||||
onFrameSelected: (timeline: Timeline, frameTime: number) => void;
|
|
||||||
};
|
|
||||||
|
|
||||||
function TimelineSummary({
|
|
||||||
timeline,
|
|
||||||
annotationOffset,
|
|
||||||
recordings,
|
|
||||||
onFrameSelected,
|
|
||||||
}: TimelineSummaryProps) {
|
|
||||||
const [timeIndex, setTimeIndex] = useState<number>(-1);
|
|
||||||
|
|
||||||
// calculates the seek seconds by adding up all the seconds in the segments prior to the playback time
|
|
||||||
const getSeekSeconds = (seekUnix: number) => {
|
|
||||||
if (!recordings) {
|
|
||||||
return 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
let seekSeconds = 0;
|
|
||||||
recordings.every((segment) => {
|
|
||||||
// if the next segment is past the desired time, stop calculating
|
|
||||||
if (segment.start_time > seekUnix) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (segment.end_time < seekUnix) {
|
|
||||||
seekSeconds += segment.end_time - segment.start_time;
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
seekSeconds +=
|
|
||||||
segment.end_time - segment.start_time - (segment.end_time - seekUnix);
|
|
||||||
return true;
|
|
||||||
});
|
|
||||||
|
|
||||||
return seekSeconds;
|
|
||||||
};
|
|
||||||
|
|
||||||
const onSelectMoment = async (index: number) => {
|
|
||||||
setTimeIndex(index);
|
|
||||||
onFrameSelected(
|
|
||||||
timeline.entries[index],
|
|
||||||
getSeekSeconds(timeline.entries[index].timestamp + annotationOffset)
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
if (!timeline || !recordings) {
|
|
||||||
return <ActivityIndicator />;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex flex-col">
|
|
||||||
<div className="h-12 flex justify-center">
|
|
||||||
<div className="flex flex-row flex-nowrap justify-between overflow-auto">
|
|
||||||
{timeline.entries.map((item, index) => (
|
|
||||||
<TooltipProvider key={item.timestamp}>
|
|
||||||
<Tooltip>
|
|
||||||
<TooltipTrigger asChild>
|
|
||||||
<Button
|
|
||||||
className={`m-1 blue ${
|
|
||||||
index == timeIndex ? "text-blue-500" : "text-gray-500"
|
|
||||||
}`}
|
|
||||||
variant="secondary"
|
|
||||||
autoFocus={false}
|
|
||||||
onClick={() => onSelectMoment(index)}
|
|
||||||
>
|
|
||||||
{getTimelineIcon(item)}
|
|
||||||
</Button>
|
|
||||||
</TooltipTrigger>
|
|
||||||
<TooltipContent>
|
|
||||||
<p>{getTimelineItemDescription(item)}</p>
|
|
||||||
</TooltipContent>
|
|
||||||
</Tooltip>
|
|
||||||
</TooltipProvider>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{timeIndex >= 0 ? (
|
|
||||||
<div className="max-w-md self-center">
|
|
||||||
<div className="flex justify-start">
|
|
||||||
<div className="text-sm flex justify-between py-1 items-center">
|
|
||||||
Bounding boxes may not align
|
|
||||||
</div>
|
|
||||||
<TooltipProvider>
|
|
||||||
<Tooltip>
|
|
||||||
<TooltipTrigger asChild>
|
|
||||||
<Button size="icon" variant="ghost">
|
|
||||||
<LuAlertCircle />
|
|
||||||
</Button>
|
|
||||||
</TooltipTrigger>
|
|
||||||
<TooltipContent>
|
|
||||||
<p>
|
|
||||||
Disclaimer: This data comes from the detect feed but is
|
|
||||||
shown on the recordings.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
It is unlikely that the streams are perfectly in sync so the
|
|
||||||
bounding box and the footage will not line up perfectly.
|
|
||||||
</p>
|
|
||||||
<p>The annotation_offset field can be used to adjust this.</p>
|
|
||||||
</TooltipContent>
|
|
||||||
</Tooltip>
|
|
||||||
</TooltipProvider>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
) : null}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -16,7 +16,9 @@ import {
|
|||||||
import { Calendar } from "../ui/calendar";
|
import { Calendar } from "../ui/calendar";
|
||||||
|
|
||||||
type HistoryFilterPopoverProps = {
|
type HistoryFilterPopoverProps = {
|
||||||
|
// @ts-ignore
|
||||||
filter: HistoryFilter | undefined;
|
filter: HistoryFilter | undefined;
|
||||||
|
// @ts-ignore
|
||||||
onUpdateFilter: (filter: HistoryFilter) => void;
|
onUpdateFilter: (filter: HistoryFilter) => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -23,6 +23,7 @@ type PreviewPlayerProps = {
|
|||||||
relevantPreview?: Preview;
|
relevantPreview?: Preview;
|
||||||
autoPlayback?: boolean;
|
autoPlayback?: boolean;
|
||||||
setReviewed?: () => void;
|
setReviewed?: () => void;
|
||||||
|
onClick?: () => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
type Preview = {
|
type Preview = {
|
||||||
@ -38,6 +39,7 @@ export default function PreviewThumbnailPlayer({
|
|||||||
relevantPreview,
|
relevantPreview,
|
||||||
autoPlayback = false,
|
autoPlayback = false,
|
||||||
setReviewed,
|
setReviewed,
|
||||||
|
onClick,
|
||||||
}: PreviewPlayerProps) {
|
}: PreviewPlayerProps) {
|
||||||
const apiHost = useApiHost();
|
const apiHost = useApiHost();
|
||||||
const { data: config } = useSWR<FrigateConfig>("config");
|
const { data: config } = useSWR<FrigateConfig>("config");
|
||||||
@ -109,6 +111,7 @@ export default function PreviewThumbnailPlayer({
|
|||||||
className="relative w-full h-full cursor-pointer"
|
className="relative w-full h-full cursor-pointer"
|
||||||
onMouseEnter={isMobile ? undefined : () => onPlayback(true)}
|
onMouseEnter={isMobile ? undefined : () => onPlayback(true)}
|
||||||
onMouseLeave={isMobile ? undefined : () => onPlayback(false)}
|
onMouseLeave={isMobile ? undefined : () => onPlayback(false)}
|
||||||
|
onClick={onClick}
|
||||||
>
|
>
|
||||||
{playingBack ? (
|
{playingBack ? (
|
||||||
<PreviewContent
|
<PreviewContent
|
||||||
@ -185,6 +188,15 @@ function PreviewContent({
|
|||||||
setProgress,
|
setProgress,
|
||||||
setReviewed,
|
setReviewed,
|
||||||
}: PreviewContentProps) {
|
}: PreviewContentProps) {
|
||||||
|
const playerStartTime = useMemo(() => {
|
||||||
|
if (!relevantPreview) {
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// start with a bit of padding
|
||||||
|
return Math.max(0, review.start_time - relevantPreview.start - 8);
|
||||||
|
}, []);
|
||||||
|
|
||||||
// manual playback
|
// manual playback
|
||||||
// safari is incapable of playing at a speed > 2x
|
// safari is incapable of playing at a speed > 2x
|
||||||
// so manual seeking is required on iOS
|
// so manual seeking is required on iOS
|
||||||
@ -195,9 +207,11 @@ function PreviewContent({
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let counter = 0;
|
||||||
const intervalId: NodeJS.Timeout = setInterval(() => {
|
const intervalId: NodeJS.Timeout = setInterval(() => {
|
||||||
if (playerRef.current) {
|
if (playerRef.current) {
|
||||||
playerRef.current.currentTime(playerRef.current.currentTime()!! + 1);
|
playerRef.current.currentTime(playerStartTime + counter);
|
||||||
|
counter += 1;
|
||||||
}
|
}
|
||||||
}, 125);
|
}, 125);
|
||||||
return () => clearInterval(intervalId);
|
return () => clearInterval(intervalId);
|
||||||
@ -233,20 +247,15 @@ function PreviewContent({
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// start with a bit of padding
|
|
||||||
const playerStartTime = Math.max(
|
|
||||||
0,
|
|
||||||
review.start_time - relevantPreview.start - 8
|
|
||||||
);
|
|
||||||
|
|
||||||
if (isSafari) {
|
if (isSafari) {
|
||||||
player.pause();
|
player.pause();
|
||||||
setManualPlayback(true);
|
setManualPlayback(true);
|
||||||
} else {
|
} else {
|
||||||
|
player.currentTime(playerStartTime);
|
||||||
player.playbackRate(8);
|
player.playbackRate(8);
|
||||||
}
|
}
|
||||||
|
|
||||||
player.currentTime(playerStartTime);
|
let lastPercent = 0;
|
||||||
player.on("timeupdate", () => {
|
player.on("timeupdate", () => {
|
||||||
if (!setProgress) {
|
if (!setProgress) {
|
||||||
return;
|
return;
|
||||||
@ -262,11 +271,14 @@ function PreviewContent({
|
|||||||
if (
|
if (
|
||||||
setReviewed &&
|
setReviewed &&
|
||||||
!review.has_been_reviewed &&
|
!review.has_been_reviewed &&
|
||||||
|
lastPercent < 50 &&
|
||||||
playerPercent > 50
|
playerPercent > 50
|
||||||
) {
|
) {
|
||||||
setReviewed();
|
setReviewed();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
lastPercent = playerPercent;
|
||||||
|
|
||||||
if (playerPercent > 100) {
|
if (playerPercent > 100) {
|
||||||
playerRef.current?.pause();
|
playerRef.current?.pause();
|
||||||
setManualPlayback(false);
|
setManualPlayback(false);
|
||||||
|
|||||||
@ -25,6 +25,7 @@ export type EventReviewTimelineProps = {
|
|||||||
events: ReviewSegment[];
|
events: ReviewSegment[];
|
||||||
severityType: ReviewSeverity;
|
severityType: ReviewSeverity;
|
||||||
contentRef: RefObject<HTMLDivElement>;
|
contentRef: RefObject<HTMLDivElement>;
|
||||||
|
onHandlebarDraggingChange?: (isDragging: boolean) => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
export function EventReviewTimeline({
|
export function EventReviewTimeline({
|
||||||
@ -41,6 +42,7 @@ export function EventReviewTimeline({
|
|||||||
events,
|
events,
|
||||||
severityType,
|
severityType,
|
||||||
contentRef,
|
contentRef,
|
||||||
|
onHandlebarDraggingChange,
|
||||||
}: EventReviewTimelineProps) {
|
}: EventReviewTimelineProps) {
|
||||||
const [isDragging, setIsDragging] = useState(false);
|
const [isDragging, setIsDragging] = useState(false);
|
||||||
const [currentTimeSegment, setCurrentTimeSegment] = useState<number>(0);
|
const [currentTimeSegment, setCurrentTimeSegment] = useState<number>(0);
|
||||||
@ -152,6 +154,12 @@ export function EventReviewTimeline({
|
|||||||
}
|
}
|
||||||
}, [currentTimeSegment, showHandlebar]);
|
}, [currentTimeSegment, showHandlebar]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (onHandlebarDraggingChange) {
|
||||||
|
onHandlebarDraggingChange(isDragging);
|
||||||
|
}
|
||||||
|
}, [isDragging, onHandlebarDraggingChange]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (timelineRef.current && handlebarTime && showHandlebar) {
|
if (timelineRef.current && handlebarTime && showHandlebar) {
|
||||||
const { scrollHeight: timelineHeight } = timelineRef.current;
|
const { scrollHeight: timelineHeight } = timelineRef.current;
|
||||||
|
|||||||
@ -1,11 +1,213 @@
|
|||||||
|
import useOverlayState from "@/hooks/use-overlay-state";
|
||||||
|
import { ReviewSegment } from "@/types/review";
|
||||||
import DesktopEventView from "@/views/events/DesktopEventView";
|
import DesktopEventView from "@/views/events/DesktopEventView";
|
||||||
|
import DesktopRecordingView from "@/views/events/DesktopRecordingView";
|
||||||
import MobileEventView from "@/views/events/MobileEventView";
|
import MobileEventView from "@/views/events/MobileEventView";
|
||||||
import { isMobile } from 'react-device-detect';
|
import axios from "axios";
|
||||||
|
import { useCallback, useMemo } from "react";
|
||||||
|
import { isMobile } from "react-device-detect";
|
||||||
|
import useSWR from "swr";
|
||||||
|
import useSWRInfinite from "swr/infinite";
|
||||||
|
|
||||||
|
const API_LIMIT = 250;
|
||||||
|
|
||||||
export default function Events() {
|
export default function Events() {
|
||||||
if (isMobile) {
|
// recordings viewer
|
||||||
return <MobileEventView />;
|
const [selectedReviewId, setSelectedReviewId] = useOverlayState("review");
|
||||||
|
|
||||||
|
// review paging
|
||||||
|
|
||||||
|
const timeRange = useMemo(() => {
|
||||||
|
return { before: Date.now() / 1000, after: getHoursAgo(24) };
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const reviewSegmentFetcher = useCallback((key: any) => {
|
||||||
|
const [path, params] = Array.isArray(key) ? key : [key, undefined];
|
||||||
|
return axios.get(path, { params }).then((res) => res.data);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const reviewSearchParams = {};
|
||||||
|
const getKey = useCallback(
|
||||||
|
(index: number, prevData: ReviewSegment[]) => {
|
||||||
|
if (index > 0) {
|
||||||
|
const lastDate = prevData[prevData.length - 1].start_time;
|
||||||
|
const pagedParams = reviewSearchParams
|
||||||
|
? { before: lastDate, after: timeRange.after, limit: API_LIMIT }
|
||||||
|
: {
|
||||||
|
...reviewSearchParams,
|
||||||
|
before: lastDate,
|
||||||
|
after: timeRange.after,
|
||||||
|
limit: API_LIMIT,
|
||||||
|
};
|
||||||
|
return ["review", pagedParams];
|
||||||
}
|
}
|
||||||
|
|
||||||
return <DesktopEventView />;
|
const params = reviewSearchParams
|
||||||
|
? { limit: API_LIMIT, before: timeRange.before, after: timeRange.after }
|
||||||
|
: {
|
||||||
|
...reviewSearchParams,
|
||||||
|
limit: API_LIMIT,
|
||||||
|
before: timeRange.before,
|
||||||
|
after: timeRange.after,
|
||||||
|
};
|
||||||
|
return ["review", params];
|
||||||
|
},
|
||||||
|
[reviewSearchParams]
|
||||||
|
);
|
||||||
|
|
||||||
|
const {
|
||||||
|
data: reviewPages,
|
||||||
|
mutate: updateSegments,
|
||||||
|
size,
|
||||||
|
setSize,
|
||||||
|
isValidating,
|
||||||
|
} = useSWRInfinite<ReviewSegment[]>(getKey, reviewSegmentFetcher, {
|
||||||
|
revalidateOnFocus: false,
|
||||||
|
persistSize: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
const isDone = useMemo(
|
||||||
|
() => (reviewPages?.at(-1)?.length ?? 0) < API_LIMIT,
|
||||||
|
[reviewPages]
|
||||||
|
);
|
||||||
|
|
||||||
|
// preview videos
|
||||||
|
|
||||||
|
const previewTimes = useMemo(() => {
|
||||||
|
if (
|
||||||
|
!reviewPages ||
|
||||||
|
reviewPages.length == 0 ||
|
||||||
|
reviewPages.at(-1)!!.length == 0
|
||||||
|
) {
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
const startDate = new Date();
|
||||||
|
startDate.setMinutes(0, 0, 0);
|
||||||
|
|
||||||
|
const endDate = new Date(reviewPages.at(-1)!!.at(-1)!!.end_time);
|
||||||
|
endDate.setHours(0, 0, 0, 0);
|
||||||
|
return {
|
||||||
|
start: startDate.getTime() / 1000,
|
||||||
|
end: endDate.getTime() / 1000,
|
||||||
|
};
|
||||||
|
}, [reviewPages]);
|
||||||
|
const { data: allPreviews } = useSWR<Preview[]>(
|
||||||
|
previewTimes
|
||||||
|
? `preview/all/start/${previewTimes.start}/end/${previewTimes.end}`
|
||||||
|
: null,
|
||||||
|
{ revalidateOnFocus: false }
|
||||||
|
);
|
||||||
|
|
||||||
|
// review status
|
||||||
|
|
||||||
|
const markItemAsReviewed = useCallback(
|
||||||
|
async (reviewId: string) => {
|
||||||
|
const resp = await axios.post(`review/${reviewId}/viewed`);
|
||||||
|
|
||||||
|
if (resp.status == 200) {
|
||||||
|
updateSegments(
|
||||||
|
(data: ReviewSegment[][] | undefined) => {
|
||||||
|
if (!data) {
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
|
||||||
|
const newData: ReviewSegment[][] = [];
|
||||||
|
|
||||||
|
data.forEach((page) => {
|
||||||
|
const reviewIndex = page.findIndex((item) => item.id == reviewId);
|
||||||
|
|
||||||
|
if (reviewIndex == -1) {
|
||||||
|
newData.push([...page]);
|
||||||
|
} else {
|
||||||
|
newData.push([
|
||||||
|
...page.slice(0, reviewIndex),
|
||||||
|
{ ...page[reviewIndex], has_been_reviewed: true },
|
||||||
|
...page.slice(reviewIndex + 1),
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return newData;
|
||||||
|
},
|
||||||
|
{ revalidate: false }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[updateSegments]
|
||||||
|
);
|
||||||
|
|
||||||
|
// selected items
|
||||||
|
|
||||||
|
const selectedData = useMemo(() => {
|
||||||
|
if (!selectedReviewId) {
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!reviewPages) {
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
const allReviews = reviewPages.flat();
|
||||||
|
const selectedReview = allReviews.find(
|
||||||
|
(item) => item.id == selectedReviewId
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!selectedReview) {
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
selected: selectedReview,
|
||||||
|
cameraSegments: allReviews.filter(
|
||||||
|
(seg) => seg.camera == selectedReview.camera
|
||||||
|
),
|
||||||
|
cameraPreviews: allPreviews?.filter(
|
||||||
|
(seg) => seg.camera == selectedReview.camera
|
||||||
|
),
|
||||||
|
};
|
||||||
|
}, [selectedReviewId, reviewPages]);
|
||||||
|
|
||||||
|
if (selectedData) {
|
||||||
|
return (
|
||||||
|
<DesktopRecordingView
|
||||||
|
reviewItems={selectedData.cameraSegments}
|
||||||
|
selectedReview={selectedData.selected}
|
||||||
|
relevantPreviews={selectedData.cameraPreviews}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
if (isMobile) {
|
||||||
|
return (
|
||||||
|
<MobileEventView
|
||||||
|
reviewPages={reviewPages}
|
||||||
|
relevantPreviews={allPreviews}
|
||||||
|
reachedEnd={isDone}
|
||||||
|
isValidating={isValidating}
|
||||||
|
loadNextPage={() => setSize(size + 1)}
|
||||||
|
markItemAsReviewed={markItemAsReviewed}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<DesktopEventView
|
||||||
|
reviewPages={reviewPages}
|
||||||
|
relevantPreviews={allPreviews}
|
||||||
|
timeRange={timeRange}
|
||||||
|
reachedEnd={isDone}
|
||||||
|
isValidating={isValidating}
|
||||||
|
loadNextPage={() => setSize(size + 1)}
|
||||||
|
markItemAsReviewed={markItemAsReviewed}
|
||||||
|
onSelectReview={setSelectedReviewId}
|
||||||
|
pullLatestData={updateSegments}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function getHoursAgo(hours: number): number {
|
||||||
|
const now = new Date();
|
||||||
|
now.setHours(now.getHours() - hours);
|
||||||
|
return now.getTime() / 1000;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,284 +0,0 @@
|
|||||||
import { useCallback, useMemo, useState } from "react";
|
|
||||||
import useSWR from "swr";
|
|
||||||
import useSWRInfinite from "swr/infinite";
|
|
||||||
import { FrigateConfig } from "@/types/frigateConfig";
|
|
||||||
import Heading from "@/components/ui/heading";
|
|
||||||
import ActivityIndicator from "@/components/ui/activity-indicator";
|
|
||||||
import axios from "axios";
|
|
||||||
import { getHourlyTimelineData } from "@/utils/historyUtil";
|
|
||||||
import {
|
|
||||||
AlertDialog,
|
|
||||||
AlertDialogAction,
|
|
||||||
AlertDialogCancel,
|
|
||||||
AlertDialogContent,
|
|
||||||
AlertDialogDescription,
|
|
||||||
AlertDialogFooter,
|
|
||||||
AlertDialogHeader,
|
|
||||||
AlertDialogTitle,
|
|
||||||
} from "@/components/ui/alert-dialog";
|
|
||||||
import HistoryFilterPopover from "@/components/filter/HistoryFilterPopover";
|
|
||||||
import useApiFilter from "@/hooks/use-api-filter";
|
|
||||||
import HistoryCardView from "@/views/history/HistoryCardView";
|
|
||||||
import { Button } from "@/components/ui/button";
|
|
||||||
import { IoMdArrowBack } from "react-icons/io";
|
|
||||||
import useOverlayState from "@/hooks/use-overlay-state";
|
|
||||||
import { useNavigate } from "react-router-dom";
|
|
||||||
import { Dialog, DialogContent } from "@/components/ui/dialog";
|
|
||||||
import MobileTimelineView from "@/views/history/MobileTimelineView";
|
|
||||||
import DesktopTimelineView from "@/views/history/DesktopTimelineView";
|
|
||||||
|
|
||||||
const API_LIMIT = 200;
|
|
||||||
|
|
||||||
function History() {
|
|
||||||
const { data: config } = useSWR<FrigateConfig>("config");
|
|
||||||
const timezone = useMemo(
|
|
||||||
() =>
|
|
||||||
config?.ui?.timezone || Intl.DateTimeFormat().resolvedOptions().timeZone,
|
|
||||||
[config]
|
|
||||||
);
|
|
||||||
|
|
||||||
const [historyFilter, setHistoryFilter, historySearchParams] =
|
|
||||||
useApiFilter<HistoryFilter>();
|
|
||||||
|
|
||||||
const timelineFetcher = useCallback((key: any) => {
|
|
||||||
const [path, params] = Array.isArray(key) ? key : [key, undefined];
|
|
||||||
return axios.get(path, { params }).then((res) => res.data);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const getKey = useCallback(
|
|
||||||
(index: number, prevData: HourlyTimeline) => {
|
|
||||||
if (index > 0) {
|
|
||||||
const lastDate = prevData.end;
|
|
||||||
const pagedParams =
|
|
||||||
historySearchParams == undefined
|
|
||||||
? { before: lastDate, timezone, limit: API_LIMIT }
|
|
||||||
: {
|
|
||||||
...historySearchParams,
|
|
||||||
before: lastDate,
|
|
||||||
timezone,
|
|
||||||
limit: API_LIMIT,
|
|
||||||
};
|
|
||||||
return ["timeline/hourly", pagedParams];
|
|
||||||
}
|
|
||||||
|
|
||||||
const params =
|
|
||||||
historySearchParams == undefined
|
|
||||||
? { timezone, limit: API_LIMIT }
|
|
||||||
: { ...historySearchParams, timezone, limit: API_LIMIT };
|
|
||||||
return ["timeline/hourly", params];
|
|
||||||
},
|
|
||||||
[historySearchParams]
|
|
||||||
);
|
|
||||||
|
|
||||||
const {
|
|
||||||
data: timelinePages,
|
|
||||||
mutate: updateHistory,
|
|
||||||
size,
|
|
||||||
setSize,
|
|
||||||
isValidating,
|
|
||||||
} = useSWRInfinite<HourlyTimeline>(getKey, timelineFetcher);
|
|
||||||
|
|
||||||
const previewTimes = useMemo(() => {
|
|
||||||
if (!timelinePages) {
|
|
||||||
return undefined;
|
|
||||||
}
|
|
||||||
|
|
||||||
const startDate = new Date();
|
|
||||||
startDate.setMinutes(0, 0, 0);
|
|
||||||
|
|
||||||
const endDate = new Date(timelinePages.at(-1)!!.end);
|
|
||||||
endDate.setHours(0, 0, 0, 0);
|
|
||||||
return {
|
|
||||||
start: startDate.getTime() / 1000,
|
|
||||||
end: endDate.getTime() / 1000,
|
|
||||||
};
|
|
||||||
}, [timelinePages]);
|
|
||||||
const { data: allPreviews } = useSWR<Preview[]>(
|
|
||||||
previewTimes
|
|
||||||
? `preview/all/start/${previewTimes.start}/end/${previewTimes.end}`
|
|
||||||
: null,
|
|
||||||
{ revalidateOnFocus: false }
|
|
||||||
);
|
|
||||||
|
|
||||||
const navigate = useNavigate();
|
|
||||||
const [playback, setPlayback] = useState<TimelinePlayback | undefined>();
|
|
||||||
const [viewingPlayback, setViewingPlayback] = useOverlayState("timeline");
|
|
||||||
const setPlaybackState = useCallback(
|
|
||||||
(playback: TimelinePlayback | undefined) => {
|
|
||||||
if (playback == undefined) {
|
|
||||||
setPlayback(undefined);
|
|
||||||
navigate(-1);
|
|
||||||
} else {
|
|
||||||
setPlayback(playback);
|
|
||||||
setViewingPlayback(true);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
[navigate]
|
|
||||||
);
|
|
||||||
|
|
||||||
const isMobile = useMemo(() => {
|
|
||||||
return window.innerWidth < 768;
|
|
||||||
}, [playback]);
|
|
||||||
|
|
||||||
const timelineCards: CardsData = useMemo(() => {
|
|
||||||
if (!timelinePages) {
|
|
||||||
return {};
|
|
||||||
}
|
|
||||||
|
|
||||||
return getHourlyTimelineData(
|
|
||||||
timelinePages,
|
|
||||||
historyFilter?.detailLevel ?? "normal"
|
|
||||||
);
|
|
||||||
}, [historyFilter, timelinePages]);
|
|
||||||
|
|
||||||
const isDone =
|
|
||||||
(timelinePages?.[timelinePages.length - 1]?.count ?? 0) < API_LIMIT;
|
|
||||||
|
|
||||||
const [itemsToDelete, setItemsToDelete] = useState<string[] | null>(null);
|
|
||||||
const onDelete = useCallback(
|
|
||||||
async (timeline: Card) => {
|
|
||||||
if (timeline.entries.length > 1) {
|
|
||||||
const uniqueEvents = new Set(
|
|
||||||
timeline.entries.map((entry) => entry.source_id)
|
|
||||||
);
|
|
||||||
setItemsToDelete(new Array(...uniqueEvents));
|
|
||||||
} else {
|
|
||||||
const response = await axios.delete(
|
|
||||||
`events/${timeline.entries[0].source_id}`
|
|
||||||
);
|
|
||||||
if (response.status === 200) {
|
|
||||||
updateHistory();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
[updateHistory]
|
|
||||||
);
|
|
||||||
const onDeleteMulti = useCallback(async () => {
|
|
||||||
if (!itemsToDelete) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const responses = itemsToDelete.map(async (id) => {
|
|
||||||
return axios.delete(`events/${id}`);
|
|
||||||
});
|
|
||||||
|
|
||||||
if ((await responses[0]).status == 200) {
|
|
||||||
updateHistory();
|
|
||||||
setItemsToDelete(null);
|
|
||||||
}
|
|
||||||
}, [itemsToDelete, updateHistory]);
|
|
||||||
|
|
||||||
if (!config || !timelineCards) {
|
|
||||||
return <ActivityIndicator />;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<div className="flex justify-between">
|
|
||||||
<div className="flex justify-start">
|
|
||||||
{viewingPlayback && (
|
|
||||||
<Button
|
|
||||||
className="mt-2"
|
|
||||||
size="xs"
|
|
||||||
variant="ghost"
|
|
||||||
onClick={() => setPlaybackState(undefined)}
|
|
||||||
>
|
|
||||||
<IoMdArrowBack className="w-6 h-6" />
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
<Heading as="h2">History</Heading>
|
|
||||||
</div>
|
|
||||||
{!playback && (
|
|
||||||
<HistoryFilterPopover
|
|
||||||
filter={historyFilter}
|
|
||||||
onUpdateFilter={(filter) => setHistoryFilter(filter)}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<AlertDialog
|
|
||||||
open={itemsToDelete != null}
|
|
||||||
onOpenChange={(_) => setItemsToDelete(null)}
|
|
||||||
>
|
|
||||||
<AlertDialogContent>
|
|
||||||
<AlertDialogHeader>
|
|
||||||
<AlertDialogTitle>{`Delete ${itemsToDelete?.length} events?`}</AlertDialogTitle>
|
|
||||||
<AlertDialogDescription>
|
|
||||||
This will delete all events associated with these objects.
|
|
||||||
</AlertDialogDescription>
|
|
||||||
</AlertDialogHeader>
|
|
||||||
<AlertDialogFooter>
|
|
||||||
<AlertDialogCancel onClick={() => setItemsToDelete(null)}>
|
|
||||||
Cancel
|
|
||||||
</AlertDialogCancel>
|
|
||||||
<AlertDialogAction
|
|
||||||
className="bg-danger"
|
|
||||||
onClick={() => onDeleteMulti()}
|
|
||||||
>
|
|
||||||
Delete
|
|
||||||
</AlertDialogAction>
|
|
||||||
</AlertDialogFooter>
|
|
||||||
</AlertDialogContent>
|
|
||||||
</AlertDialog>
|
|
||||||
<HistoryCardView
|
|
||||||
timelineCards={timelineCards}
|
|
||||||
allPreviews={allPreviews}
|
|
||||||
isMobile={isMobile}
|
|
||||||
isValidating={isValidating}
|
|
||||||
isDone={isDone}
|
|
||||||
onNextPage={() => {
|
|
||||||
setSize(size + 1);
|
|
||||||
}}
|
|
||||||
onDelete={onDelete}
|
|
||||||
onItemSelected={(item) => setPlaybackState(item)}
|
|
||||||
/>
|
|
||||||
<TimelineViewer
|
|
||||||
timelineData={timelineCards}
|
|
||||||
allPreviews={allPreviews || []}
|
|
||||||
playback={viewingPlayback ? playback : undefined}
|
|
||||||
isMobile={isMobile}
|
|
||||||
onClose={() => setPlaybackState(undefined)}
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
type TimelineViewerProps = {
|
|
||||||
timelineData: CardsData | undefined;
|
|
||||||
allPreviews: Preview[];
|
|
||||||
playback: TimelinePlayback | undefined;
|
|
||||||
isMobile: boolean;
|
|
||||||
onClose: () => void;
|
|
||||||
};
|
|
||||||
|
|
||||||
function TimelineViewer({
|
|
||||||
timelineData,
|
|
||||||
allPreviews,
|
|
||||||
playback,
|
|
||||||
isMobile,
|
|
||||||
onClose,
|
|
||||||
}: TimelineViewerProps) {
|
|
||||||
if (isMobile) {
|
|
||||||
return playback != undefined ? (
|
|
||||||
<div className="w-screen absolute left-0 top-20 bottom-0 bg-background z-50">
|
|
||||||
{timelineData && <MobileTimelineView playback={playback} />}
|
|
||||||
</div>
|
|
||||||
) : null;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Dialog open={playback != undefined} onOpenChange={(_) => onClose()}>
|
|
||||||
<DialogContent className="w-[70%] max-w-[1920px] h-[90%]">
|
|
||||||
{timelineData && playback && (
|
|
||||||
<DesktopTimelineView
|
|
||||||
timelineData={timelineData}
|
|
||||||
allPreviews={allPreviews}
|
|
||||||
initialPlayback={playback}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</DialogContent>
|
|
||||||
</Dialog>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default History;
|
|
||||||
@ -1,43 +0,0 @@
|
|||||||
type CardsData = {
|
|
||||||
[day: string]: {
|
|
||||||
[hour: string]: {
|
|
||||||
[groupKey: string]: Card;
|
|
||||||
};
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
type Card = {
|
|
||||||
camera: string;
|
|
||||||
time: number;
|
|
||||||
entries: Timeline[];
|
|
||||||
uniqueKeys: string[];
|
|
||||||
};
|
|
||||||
|
|
||||||
type Preview = {
|
|
||||||
camera: string;
|
|
||||||
src: string;
|
|
||||||
type: string;
|
|
||||||
start: number;
|
|
||||||
end: number;
|
|
||||||
};
|
|
||||||
|
|
||||||
interface HistoryFilter extends FilterType {
|
|
||||||
cameras: string[];
|
|
||||||
labels: string[];
|
|
||||||
before: number | undefined;
|
|
||||||
after: number | undefined;
|
|
||||||
detailLevel: "normal" | "extra" | "full";
|
|
||||||
}
|
|
||||||
|
|
||||||
type HistoryTimeline = {
|
|
||||||
start: number;
|
|
||||||
end: number;
|
|
||||||
playbackItems: TimelinePlayback[];
|
|
||||||
};
|
|
||||||
|
|
||||||
type TimelinePlayback = {
|
|
||||||
camera: string;
|
|
||||||
range: { start: number; end: number };
|
|
||||||
timelineItems: Timeline[];
|
|
||||||
relevantPreview: Preview | undefined;
|
|
||||||
};
|
|
||||||
7
web/src/types/preview.ts
Normal file
7
web/src/types/preview.ts
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
type Preview = {
|
||||||
|
camera: string;
|
||||||
|
src: string;
|
||||||
|
type: string;
|
||||||
|
start: number;
|
||||||
|
end: number;
|
||||||
|
};
|
||||||
@ -1,206 +0,0 @@
|
|||||||
import { endOfHourOrCurrentTime } from "./dateUtil";
|
|
||||||
|
|
||||||
// group history cards by 120 seconds of activity
|
|
||||||
const GROUP_SECONDS = 120;
|
|
||||||
|
|
||||||
export function getHourlyTimelineData(
|
|
||||||
timelinePages: HourlyTimeline[],
|
|
||||||
detailLevel: string
|
|
||||||
): CardsData {
|
|
||||||
const cards: CardsData = {};
|
|
||||||
const allHours: { [key: string]: Timeline[] } = {};
|
|
||||||
|
|
||||||
timelinePages.forEach((hourlyTimeline) => {
|
|
||||||
Object.entries(hourlyTimeline.hours).forEach(([key, values]) => {
|
|
||||||
if (key in allHours) {
|
|
||||||
// only occurs when multiple pages contain elements in the same hour
|
|
||||||
allHours[key] = allHours[key]
|
|
||||||
.concat(values)
|
|
||||||
.sort((a, b) => a.timestamp - b.timestamp);
|
|
||||||
} else {
|
|
||||||
allHours[key] = values;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
Object.keys(allHours)
|
|
||||||
.sort((a, b) => a.localeCompare(b))
|
|
||||||
.reverse()
|
|
||||||
.forEach((hour) => {
|
|
||||||
const day = new Date(parseInt(hour) * 1000);
|
|
||||||
day.setHours(0, 0, 0, 0);
|
|
||||||
const dayKey = (day.getTime() / 1000).toString();
|
|
||||||
|
|
||||||
// build a map of course to the types that are included in this hour
|
|
||||||
// which allows us to know what items to keep depending on detail level
|
|
||||||
const sourceToTypes: { [key: string]: string[] } = {};
|
|
||||||
let cardTypeStart: { [camera: string]: number } = {};
|
|
||||||
Object.values(allHours[hour]).forEach((i) => {
|
|
||||||
if (i.timestamp > (cardTypeStart[i.camera] ?? 0) + GROUP_SECONDS) {
|
|
||||||
cardTypeStart[i.camera] = i.timestamp;
|
|
||||||
}
|
|
||||||
|
|
||||||
const groupKey = `${i.source_id}-${cardTypeStart[i.camera]}`;
|
|
||||||
|
|
||||||
if (groupKey in sourceToTypes) {
|
|
||||||
sourceToTypes[groupKey].push(i.class_type);
|
|
||||||
} else {
|
|
||||||
sourceToTypes[groupKey] = [i.class_type];
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!(dayKey in cards)) {
|
|
||||||
cards[dayKey] = {};
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!(hour in cards[dayKey])) {
|
|
||||||
cards[dayKey][hour] = {};
|
|
||||||
}
|
|
||||||
|
|
||||||
let cardStart: { [camera: string]: number } = {};
|
|
||||||
Object.values(allHours[hour]).forEach((i) => {
|
|
||||||
if (i.timestamp > (cardStart[i.camera] ?? 0) + GROUP_SECONDS) {
|
|
||||||
cardStart[i.camera] = i.timestamp;
|
|
||||||
}
|
|
||||||
|
|
||||||
const time = new Date(i.timestamp * 1000);
|
|
||||||
const groupKey = `${i.camera}-${cardStart[i.camera]}`;
|
|
||||||
const sourceKey = `${i.source_id}-${cardStart[i.camera]}`;
|
|
||||||
const uniqueKey = `${i.source_id}-${i.class_type}`;
|
|
||||||
|
|
||||||
// detail level for saving items
|
|
||||||
// detail level determines which timeline items for each moment is returned
|
|
||||||
// values can be normal, extra, or full
|
|
||||||
// normal: return all items except active / attribute / gone / stationary / visible unless that is the only item.
|
|
||||||
// extra: return all items except attribute / gone / visible unless that is the only item
|
|
||||||
// full: return all items
|
|
||||||
|
|
||||||
let add = true;
|
|
||||||
const sourceType = sourceToTypes[sourceKey];
|
|
||||||
let hiddenItems: string[] = [];
|
|
||||||
if (detailLevel == "normal") {
|
|
||||||
hiddenItems = [
|
|
||||||
"active",
|
|
||||||
"attribute",
|
|
||||||
"gone",
|
|
||||||
"stationary",
|
|
||||||
"visible",
|
|
||||||
];
|
|
||||||
} else if (detailLevel == "extra") {
|
|
||||||
hiddenItems = ["attribute", "gone", "visible"];
|
|
||||||
}
|
|
||||||
|
|
||||||
if (sourceType.length > 1) {
|
|
||||||
// we have multiple timeline items for this card
|
|
||||||
|
|
||||||
if (
|
|
||||||
sourceType.find((type) => hiddenItems.includes(type) == false) ==
|
|
||||||
undefined
|
|
||||||
) {
|
|
||||||
// all of the attribute items for this card make it hidden, but we need to show one
|
|
||||||
if (sourceType.indexOf(i.class_type) != 0) {
|
|
||||||
add = false;
|
|
||||||
}
|
|
||||||
} else if (hiddenItems.includes(i.class_type)) {
|
|
||||||
add = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (add) {
|
|
||||||
if (groupKey in cards[dayKey][hour]) {
|
|
||||||
if (
|
|
||||||
!cards[dayKey][hour][groupKey].uniqueKeys.includes(uniqueKey) ||
|
|
||||||
detailLevel == "full"
|
|
||||||
) {
|
|
||||||
cards[dayKey][hour][groupKey].entries.push(i);
|
|
||||||
cards[dayKey][hour][groupKey].uniqueKeys.push(uniqueKey);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
cards[dayKey][hour][groupKey] = {
|
|
||||||
camera: i.camera,
|
|
||||||
time: time.getTime() / 1000,
|
|
||||||
entries: [i],
|
|
||||||
uniqueKeys: [uniqueKey],
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
return cards;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getTimelineHoursForDay(
|
|
||||||
camera: string,
|
|
||||||
cards: CardsData,
|
|
||||||
cameraPreviews: Preview[],
|
|
||||||
timestamp: number
|
|
||||||
): HistoryTimeline {
|
|
||||||
const endOfThisHour = new Date();
|
|
||||||
endOfThisHour.setHours(endOfThisHour.getHours() + 1, 0, 0, 0);
|
|
||||||
const data: TimelinePlayback[] = [];
|
|
||||||
const startDay = new Date(timestamp * 1000);
|
|
||||||
startDay.setHours(23, 59, 59, 999);
|
|
||||||
startDay.setHours(0, 0, 0, 0);
|
|
||||||
const startTimestamp = startDay.getTime() / 1000;
|
|
||||||
let start = startDay.getTime() / 1000;
|
|
||||||
let end = 0;
|
|
||||||
|
|
||||||
const dayIdx = Object.keys(cards).find((day) => {
|
|
||||||
if (parseInt(day) < start) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
return true;
|
|
||||||
});
|
|
||||||
|
|
||||||
let day: {
|
|
||||||
[hour: string]: {
|
|
||||||
[groupKey: string]: Card;
|
|
||||||
};
|
|
||||||
} = {};
|
|
||||||
|
|
||||||
if (dayIdx != undefined) {
|
|
||||||
day = cards[dayIdx];
|
|
||||||
}
|
|
||||||
|
|
||||||
for (let i = 0; i < 24; i++) {
|
|
||||||
startDay.setHours(startDay.getHours() + 1);
|
|
||||||
|
|
||||||
if (startDay > endOfThisHour) {
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
end = endOfHourOrCurrentTime(startDay.getTime() / 1000);
|
|
||||||
const hour = Object.values(day).find((cards) => {
|
|
||||||
const card = Object.values(cards)[0];
|
|
||||||
if (card == undefined || card.time < start || card.time > end) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
return true;
|
|
||||||
});
|
|
||||||
const timelineItems: Timeline[] = hour
|
|
||||||
? Object.values(hour).flatMap((card) => {
|
|
||||||
if (card.camera == camera) {
|
|
||||||
return card.entries;
|
|
||||||
}
|
|
||||||
|
|
||||||
return [];
|
|
||||||
})
|
|
||||||
: [];
|
|
||||||
const relevantPreview = cameraPreviews.find(
|
|
||||||
(preview) =>
|
|
||||||
Math.round(preview.start) >= start && Math.floor(preview.end) <= end
|
|
||||||
);
|
|
||||||
data.push({
|
|
||||||
camera,
|
|
||||||
range: { start, end },
|
|
||||||
timelineItems,
|
|
||||||
relevantPreview,
|
|
||||||
});
|
|
||||||
start = startDay.getTime() / 1000;
|
|
||||||
}
|
|
||||||
|
|
||||||
return { start: startTimestamp, end, playbackItems: data.reverse() };
|
|
||||||
}
|
|
||||||
@ -20,6 +20,7 @@ import {
|
|||||||
MdOutlinePictureInPictureAlt,
|
MdOutlinePictureInPictureAlt,
|
||||||
} from "react-icons/md";
|
} from "react-icons/md";
|
||||||
import { FaBicycle } from "react-icons/fa";
|
import { FaBicycle } from "react-icons/fa";
|
||||||
|
import { endOfHourOrCurrentTime } from "./dateUtil";
|
||||||
|
|
||||||
export function getTimelineIcon(timelineItem: Timeline) {
|
export function getTimelineIcon(timelineItem: Timeline) {
|
||||||
switch (timelineItem.class_type) {
|
switch (timelineItem.class_type) {
|
||||||
@ -118,3 +119,31 @@ export function getTimelineItemDescription(timelineItem: Timeline) {
|
|||||||
return `${label} detected`;
|
return `${label} detected`;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function getChunkedTimeRange(timestamp: number) {
|
||||||
|
const endOfThisHour = new Date();
|
||||||
|
endOfThisHour.setHours(endOfThisHour.getHours() + 1, 0, 0, 0);
|
||||||
|
const data: { start: number; end: number }[] = [];
|
||||||
|
const startDay = new Date(timestamp * 1000);
|
||||||
|
startDay.setHours(0, 0, 0, 0);
|
||||||
|
const startTimestamp = startDay.getTime() / 1000;
|
||||||
|
let start = startDay.getTime() / 1000;
|
||||||
|
let end = 0;
|
||||||
|
|
||||||
|
for (let i = 0; i < 24; i++) {
|
||||||
|
startDay.setHours(startDay.getHours() + 1);
|
||||||
|
|
||||||
|
if (startDay > endOfThisHour) {
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
end = endOfHourOrCurrentTime(startDay.getTime() / 1000);
|
||||||
|
data.push({
|
||||||
|
start,
|
||||||
|
end,
|
||||||
|
});
|
||||||
|
start = startDay.getTime() / 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
return { start: startTimestamp, end, ranges: data };
|
||||||
|
}
|
||||||
|
|||||||
@ -1,3 +1,4 @@
|
|||||||
|
import { useFrigateEvents } from "@/api/ws";
|
||||||
import PreviewThumbnailPlayer from "@/components/player/PreviewThumbnailPlayer";
|
import PreviewThumbnailPlayer from "@/components/player/PreviewThumbnailPlayer";
|
||||||
import EventReviewTimeline from "@/components/timeline/EventReviewTimeline";
|
import EventReviewTimeline from "@/components/timeline/EventReviewTimeline";
|
||||||
import ActivityIndicator from "@/components/ui/activity-indicator";
|
import ActivityIndicator from "@/components/ui/activity-indicator";
|
||||||
@ -12,73 +13,39 @@ import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
|
|||||||
import { FrigateConfig } from "@/types/frigateConfig";
|
import { FrigateConfig } from "@/types/frigateConfig";
|
||||||
import { ReviewSegment, ReviewSeverity } from "@/types/review";
|
import { ReviewSegment, ReviewSeverity } from "@/types/review";
|
||||||
import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
|
import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
|
||||||
import axios from "axios";
|
|
||||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||||
import { LuCalendar, LuFilter, LuVideo } from "react-icons/lu";
|
import { LuCalendar, LuFilter, LuRefreshCcw, LuVideo } from "react-icons/lu";
|
||||||
import { MdCircle } from "react-icons/md";
|
import { MdCircle } from "react-icons/md";
|
||||||
import useSWR from "swr";
|
import useSWR from "swr";
|
||||||
import useSWRInfinite from "swr/infinite";
|
|
||||||
|
|
||||||
const API_LIMIT = 250;
|
type DesktopEventViewProps = {
|
||||||
|
reviewPages?: ReviewSegment[][];
|
||||||
export default function DesktopEventView() {
|
relevantPreviews?: Preview[];
|
||||||
|
timeRange: { before: number; after: number };
|
||||||
|
reachedEnd: boolean;
|
||||||
|
isValidating: boolean;
|
||||||
|
loadNextPage: () => void;
|
||||||
|
markItemAsReviewed: (reviewId: string) => void;
|
||||||
|
onSelectReview: (reviewId: string) => void;
|
||||||
|
pullLatestData: () => void;
|
||||||
|
};
|
||||||
|
export default function DesktopEventView({
|
||||||
|
reviewPages,
|
||||||
|
relevantPreviews,
|
||||||
|
timeRange,
|
||||||
|
reachedEnd,
|
||||||
|
isValidating,
|
||||||
|
loadNextPage,
|
||||||
|
markItemAsReviewed,
|
||||||
|
onSelectReview,
|
||||||
|
pullLatestData,
|
||||||
|
}: DesktopEventViewProps) {
|
||||||
const { data: config } = useSWR<FrigateConfig>("config");
|
const { data: config } = useSWR<FrigateConfig>("config");
|
||||||
const [severity, setSeverity] = useState<ReviewSeverity>("alert");
|
const [severity, setSeverity] = useState<ReviewSeverity>("alert");
|
||||||
const contentRef = useRef<HTMLDivElement | null>(null);
|
const contentRef = useRef<HTMLDivElement | null>(null);
|
||||||
|
|
||||||
// review paging
|
// review paging
|
||||||
|
|
||||||
const [after, setAfter] = useState(0);
|
|
||||||
useEffect(() => {
|
|
||||||
const now = new Date();
|
|
||||||
now.setHours(now.getHours() - 24);
|
|
||||||
setAfter(now.getTime() / 1000);
|
|
||||||
|
|
||||||
const intervalId: NodeJS.Timeout = setInterval(() => {
|
|
||||||
const now = new Date();
|
|
||||||
now.setHours(now.getHours() - 24);
|
|
||||||
setAfter(now.getTime() / 1000);
|
|
||||||
}, 60000);
|
|
||||||
return () => clearInterval(intervalId);
|
|
||||||
}, [60000]);
|
|
||||||
|
|
||||||
const reviewSearchParams = {};
|
|
||||||
const reviewSegmentFetcher = useCallback((key: any) => {
|
|
||||||
const [path, params] = Array.isArray(key) ? key : [key, undefined];
|
|
||||||
return axios.get(path, { params }).then((res) => res.data);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const getKey = useCallback(
|
|
||||||
(index: number, prevData: ReviewSegment[]) => {
|
|
||||||
if (index > 0) {
|
|
||||||
const lastDate = prevData[prevData.length - 1].start_time;
|
|
||||||
const pagedParams = reviewSearchParams
|
|
||||||
? { before: lastDate, after: after, limit: API_LIMIT }
|
|
||||||
: {
|
|
||||||
...reviewSearchParams,
|
|
||||||
before: lastDate,
|
|
||||||
after: after,
|
|
||||||
limit: API_LIMIT,
|
|
||||||
};
|
|
||||||
return ["review", pagedParams];
|
|
||||||
}
|
|
||||||
|
|
||||||
const params = reviewSearchParams
|
|
||||||
? { limit: API_LIMIT, after: after }
|
|
||||||
: { ...reviewSearchParams, limit: API_LIMIT, after: after };
|
|
||||||
return ["review", params];
|
|
||||||
},
|
|
||||||
[reviewSearchParams]
|
|
||||||
);
|
|
||||||
|
|
||||||
const {
|
|
||||||
data: reviewPages,
|
|
||||||
mutate: updateSegments,
|
|
||||||
size,
|
|
||||||
setSize,
|
|
||||||
isValidating,
|
|
||||||
} = useSWRInfinite<ReviewSegment[]>(getKey, reviewSegmentFetcher);
|
|
||||||
|
|
||||||
const reviewItems = useMemo(() => {
|
const reviewItems = useMemo(() => {
|
||||||
const all: ReviewSegment[] = [];
|
const all: ReviewSegment[] = [];
|
||||||
const alerts: ReviewSegment[] = [];
|
const alerts: ReviewSegment[] = [];
|
||||||
@ -111,11 +78,6 @@ export default function DesktopEventView() {
|
|||||||
};
|
};
|
||||||
}, [reviewPages]);
|
}, [reviewPages]);
|
||||||
|
|
||||||
const isDone = useMemo(
|
|
||||||
() => (reviewPages?.at(-1)?.length ?? 0) < API_LIMIT,
|
|
||||||
[reviewPages]
|
|
||||||
);
|
|
||||||
|
|
||||||
const currentItems = useMemo(() => {
|
const currentItems = useMemo(() => {
|
||||||
const current = reviewItems[severity];
|
const current = reviewItems[severity];
|
||||||
|
|
||||||
@ -135,8 +97,8 @@ export default function DesktopEventView() {
|
|||||||
if (pagingObserver.current) pagingObserver.current.disconnect();
|
if (pagingObserver.current) pagingObserver.current.disconnect();
|
||||||
try {
|
try {
|
||||||
pagingObserver.current = new IntersectionObserver((entries) => {
|
pagingObserver.current = new IntersectionObserver((entries) => {
|
||||||
if (entries[0].isIntersecting && !isDone) {
|
if (entries[0].isIntersecting && !reachedEnd) {
|
||||||
setSize(size + 1);
|
loadNextPage();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
if (node) pagingObserver.current.observe(node);
|
if (node) pagingObserver.current.observe(node);
|
||||||
@ -144,7 +106,7 @@ export default function DesktopEventView() {
|
|||||||
// no op
|
// no op
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
[isValidating, isDone]
|
[isValidating, reachedEnd]
|
||||||
);
|
);
|
||||||
|
|
||||||
const [minimap, setMinimap] = useState<string[]>([]);
|
const [minimap, setMinimap] = useState<string[]>([]);
|
||||||
@ -209,46 +171,24 @@ export default function DesktopEventView() {
|
|||||||
return data;
|
return data;
|
||||||
}, [minimap]);
|
}, [minimap]);
|
||||||
|
|
||||||
// review status
|
// new data alert
|
||||||
|
|
||||||
const setReviewed = useCallback(
|
const { payload: eventUpdate } = useFrigateEvents();
|
||||||
async (id: string) => {
|
const [hasUpdate, setHasUpdate] = useState(false);
|
||||||
const resp = await axios.post(`review/${id}/viewed`);
|
useEffect(() => {
|
||||||
|
if (!eventUpdate) {
|
||||||
if (resp.status == 200) {
|
return;
|
||||||
updateSegments();
|
|
||||||
}
|
}
|
||||||
},
|
|
||||||
[updateSegments]
|
|
||||||
);
|
|
||||||
|
|
||||||
// preview videos
|
// if event is ended and was saved, update events list
|
||||||
|
|
||||||
const previewTimes = useMemo(() => {
|
|
||||||
if (
|
if (
|
||||||
!reviewPages ||
|
eventUpdate.type == "end" &&
|
||||||
reviewPages.length == 0 ||
|
(eventUpdate.after.has_clip || eventUpdate.after.has_snapshot)
|
||||||
reviewPages.at(-1)!!.length == 0
|
|
||||||
) {
|
) {
|
||||||
return undefined;
|
setHasUpdate(true);
|
||||||
|
return;
|
||||||
}
|
}
|
||||||
|
}, [eventUpdate]);
|
||||||
const startDate = new Date();
|
|
||||||
startDate.setMinutes(0, 0, 0);
|
|
||||||
|
|
||||||
const endDate = new Date(reviewPages.at(-1)!!.at(-1)!!.end_time);
|
|
||||||
endDate.setHours(0, 0, 0, 0);
|
|
||||||
return {
|
|
||||||
start: startDate.getTime() / 1000,
|
|
||||||
end: endDate.getTime() / 1000,
|
|
||||||
};
|
|
||||||
}, [reviewPages]);
|
|
||||||
const { data: allPreviews } = useSWR<Preview[]>(
|
|
||||||
previewTimes
|
|
||||||
? `preview/all/start/${previewTimes.start}/end/${previewTimes.end}`
|
|
||||||
: null,
|
|
||||||
{ revalidateOnFocus: false }
|
|
||||||
);
|
|
||||||
|
|
||||||
if (!config) {
|
if (!config) {
|
||||||
return <ActivityIndicator />;
|
return <ActivityIndicator />;
|
||||||
@ -307,6 +247,20 @@ export default function DesktopEventView() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{hasUpdate && (
|
||||||
|
<Button
|
||||||
|
className="absolute top-14 left-[50%] -translate-x-[50%] z-30 bg-gray-400 text-white"
|
||||||
|
variant="secondary"
|
||||||
|
onClick={() => {
|
||||||
|
setHasUpdate(false);
|
||||||
|
pullLatestData();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<LuRefreshCcw className="w-4 h-4 mr-2" />
|
||||||
|
New Items To Review
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
|
||||||
<div
|
<div
|
||||||
ref={contentRef}
|
ref={contentRef}
|
||||||
className="absolute left-0 top-12 bottom-0 right-28 flex flex-wrap content-start gap-2 overflow-y-auto no-scrollbar"
|
className="absolute left-0 top-12 bottom-0 right-28 flex flex-wrap content-start gap-2 overflow-y-auto no-scrollbar"
|
||||||
@ -314,7 +268,7 @@ export default function DesktopEventView() {
|
|||||||
{currentItems ? (
|
{currentItems ? (
|
||||||
currentItems.map((value, segIdx) => {
|
currentItems.map((value, segIdx) => {
|
||||||
const lastRow = segIdx == reviewItems[severity].length - 1;
|
const lastRow = segIdx == reviewItems[severity].length - 1;
|
||||||
const relevantPreview = Object.values(allPreviews || []).find(
|
const relevantPreview = Object.values(relevantPreviews || []).find(
|
||||||
(preview) =>
|
(preview) =>
|
||||||
preview.camera == value.camera &&
|
preview.camera == value.camera &&
|
||||||
preview.start < value.start_time &&
|
preview.start < value.start_time &&
|
||||||
@ -331,10 +285,11 @@ export default function DesktopEventView() {
|
|||||||
<PreviewThumbnailPlayer
|
<PreviewThumbnailPlayer
|
||||||
review={value}
|
review={value}
|
||||||
relevantPreview={relevantPreview}
|
relevantPreview={relevantPreview}
|
||||||
setReviewed={() => setReviewed(value.id)}
|
setReviewed={() => markItemAsReviewed(value.id)}
|
||||||
|
onClick={() => onSelectReview(value.id)}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
{lastRow && !isDone && <ActivityIndicator />}
|
{lastRow && !reachedEnd && <ActivityIndicator />}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
})
|
})
|
||||||
@ -343,12 +298,11 @@ export default function DesktopEventView() {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="absolute top-12 right-0 bottom-0">
|
<div className="absolute top-12 right-0 bottom-0">
|
||||||
{after != 0 && (
|
|
||||||
<EventReviewTimeline
|
<EventReviewTimeline
|
||||||
segmentDuration={60}
|
segmentDuration={60}
|
||||||
timestampSpread={15}
|
timestampSpread={15}
|
||||||
timelineStart={Math.floor(Date.now() / 1000)}
|
timelineStart={timeRange.before}
|
||||||
timelineEnd={after}
|
timelineEnd={timeRange.after}
|
||||||
showMinimap
|
showMinimap
|
||||||
minimapStartTime={minimapBounds.start}
|
minimapStartTime={minimapBounds.start}
|
||||||
minimapEndTime={minimapBounds.end}
|
minimapEndTime={minimapBounds.end}
|
||||||
@ -356,7 +310,6 @@ export default function DesktopEventView() {
|
|||||||
severityType={severity}
|
severityType={severity}
|
||||||
contentRef={contentRef}
|
contentRef={contentRef}
|
||||||
/>
|
/>
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
119
web/src/views/events/DesktopRecordingView.tsx
Normal file
119
web/src/views/events/DesktopRecordingView.tsx
Normal file
@ -0,0 +1,119 @@
|
|||||||
|
import DynamicVideoPlayer, {
|
||||||
|
DynamicVideoController,
|
||||||
|
} from "@/components/player/DynamicVideoPlayer";
|
||||||
|
import EventReviewTimeline from "@/components/timeline/EventReviewTimeline";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { ReviewSegment } from "@/types/review";
|
||||||
|
import { getChunkedTimeRange } from "@/utils/timelineUtil";
|
||||||
|
import { useEffect, useMemo, useRef, useState } from "react";
|
||||||
|
import { IoMdArrowRoundBack } from "react-icons/io";
|
||||||
|
import { useNavigate } from "react-router-dom";
|
||||||
|
|
||||||
|
type DesktopRecordingViewProps = {
|
||||||
|
selectedReview: ReviewSegment;
|
||||||
|
reviewItems: ReviewSegment[];
|
||||||
|
relevantPreviews?: Preview[];
|
||||||
|
};
|
||||||
|
export default function DesktopRecordingView({
|
||||||
|
selectedReview,
|
||||||
|
reviewItems,
|
||||||
|
relevantPreviews,
|
||||||
|
}: DesktopRecordingViewProps) {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const controllerRef = useRef<DynamicVideoController | undefined>(undefined);
|
||||||
|
const contentRef = useRef<HTMLDivElement | null>(null);
|
||||||
|
|
||||||
|
// timeline time
|
||||||
|
|
||||||
|
const timeRange = useMemo(
|
||||||
|
() => getChunkedTimeRange(selectedReview.start_time),
|
||||||
|
[]
|
||||||
|
);
|
||||||
|
const [selectedRangeIdx, setSelectedRangeIdx] = useState(
|
||||||
|
timeRange.ranges.findIndex((chunk) => {
|
||||||
|
return (
|
||||||
|
chunk.start <= selectedReview.start_time &&
|
||||||
|
chunk.end >= selectedReview.start_time
|
||||||
|
);
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
// move to next clip
|
||||||
|
useEffect(() => {
|
||||||
|
if (!controllerRef.current) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (selectedRangeIdx < timeRange.ranges.length - 1) {
|
||||||
|
controllerRef.current.onClipEndedEvent(() => {
|
||||||
|
setSelectedRangeIdx(selectedRangeIdx + 1);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}, [controllerRef, selectedRangeIdx]);
|
||||||
|
|
||||||
|
// scrubbing and timeline state
|
||||||
|
|
||||||
|
const [scrubbing, setScrubbing] = useState(false);
|
||||||
|
const [currentTime, setCurrentTime] = useState<number>(
|
||||||
|
selectedReview?.start_time || Date.now() / 1000
|
||||||
|
);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (scrubbing) {
|
||||||
|
controllerRef.current?.scrubToTimestamp(currentTime);
|
||||||
|
}
|
||||||
|
}, [controllerRef, currentTime, scrubbing]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!scrubbing) {
|
||||||
|
controllerRef.current?.seekToTimestamp(currentTime, true);
|
||||||
|
}
|
||||||
|
}, [controllerRef, scrubbing]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div ref={contentRef} className="relative w-full h-full">
|
||||||
|
<Button
|
||||||
|
className="absolute left-0 top-0 rounded-lg"
|
||||||
|
onClick={() => navigate(-1)}
|
||||||
|
>
|
||||||
|
<IoMdArrowRoundBack className="w-5 h-5 mr-[10px]" />
|
||||||
|
Back
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<div className="absolute left-[20%] top-8 right-[20%]">
|
||||||
|
<DynamicVideoPlayer
|
||||||
|
camera={selectedReview.camera}
|
||||||
|
timeRange={timeRange.ranges[selectedRangeIdx]}
|
||||||
|
cameraPreviews={relevantPreviews || []}
|
||||||
|
onControllerReady={(controller) => {
|
||||||
|
controllerRef.current = controller;
|
||||||
|
controllerRef.current.onPlayerTimeUpdate((timestamp: number) => {
|
||||||
|
setCurrentTime(timestamp);
|
||||||
|
});
|
||||||
|
|
||||||
|
controllerRef.current?.seekToTimestamp(
|
||||||
|
selectedReview.start_time,
|
||||||
|
true
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="absolute top-0 right-0 bottom-0">
|
||||||
|
<EventReviewTimeline
|
||||||
|
segmentDuration={30}
|
||||||
|
timestampSpread={15}
|
||||||
|
timelineStart={timeRange.end}
|
||||||
|
timelineEnd={timeRange.start}
|
||||||
|
showHandlebar
|
||||||
|
handlebarTime={currentTime}
|
||||||
|
setHandlebarTime={setCurrentTime}
|
||||||
|
events={reviewItems}
|
||||||
|
severityType={selectedReview.severity}
|
||||||
|
contentRef={contentRef}
|
||||||
|
onHandlebarDraggingChange={(scrubbing) => setScrubbing(scrubbing)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -3,72 +3,32 @@ import ActivityIndicator from "@/components/ui/activity-indicator";
|
|||||||
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
|
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
|
||||||
import { FrigateConfig } from "@/types/frigateConfig";
|
import { FrigateConfig } from "@/types/frigateConfig";
|
||||||
import { ReviewSegment, ReviewSeverity } from "@/types/review";
|
import { ReviewSegment, ReviewSeverity } from "@/types/review";
|
||||||
import axios from "axios";
|
|
||||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||||
import { MdCircle } from "react-icons/md";
|
import { MdCircle } from "react-icons/md";
|
||||||
import useSWR from "swr";
|
import useSWR from "swr";
|
||||||
import useSWRInfinite from "swr/infinite";
|
|
||||||
|
|
||||||
const API_LIMIT = 250;
|
type MobileEventViewProps = {
|
||||||
|
reviewPages?: ReviewSegment[][];
|
||||||
export default function MobileEventView() {
|
relevantPreviews?: Preview[];
|
||||||
|
reachedEnd: boolean;
|
||||||
|
isValidating: boolean;
|
||||||
|
loadNextPage: () => void;
|
||||||
|
markItemAsReviewed: (reviewId: string) => void;
|
||||||
|
};
|
||||||
|
export default function MobileEventView({
|
||||||
|
reviewPages,
|
||||||
|
relevantPreviews,
|
||||||
|
reachedEnd,
|
||||||
|
isValidating,
|
||||||
|
loadNextPage,
|
||||||
|
markItemAsReviewed,
|
||||||
|
}: MobileEventViewProps) {
|
||||||
const { data: config } = useSWR<FrigateConfig>("config");
|
const { data: config } = useSWR<FrigateConfig>("config");
|
||||||
const [severity, setSeverity] = useState<ReviewSeverity>("alert");
|
const [severity, setSeverity] = useState<ReviewSeverity>("alert");
|
||||||
const contentRef = useRef<HTMLDivElement | null>(null);
|
const contentRef = useRef<HTMLDivElement | null>(null);
|
||||||
|
|
||||||
// review paging
|
// review paging
|
||||||
|
|
||||||
const [after, setAfter] = useState(0);
|
|
||||||
useEffect(() => {
|
|
||||||
const now = new Date();
|
|
||||||
now.setHours(now.getHours() - 24);
|
|
||||||
setAfter(now.getTime() / 1000);
|
|
||||||
|
|
||||||
const intervalId: NodeJS.Timeout = setInterval(() => {
|
|
||||||
const now = new Date();
|
|
||||||
now.setHours(now.getHours() - 24);
|
|
||||||
setAfter(now.getTime() / 1000);
|
|
||||||
}, 60000);
|
|
||||||
return () => clearInterval(intervalId);
|
|
||||||
}, [60000]);
|
|
||||||
|
|
||||||
const reviewSearchParams = {};
|
|
||||||
const reviewSegmentFetcher = useCallback((key: any) => {
|
|
||||||
const [path, params] = Array.isArray(key) ? key : [key, undefined];
|
|
||||||
return axios.get(path, { params }).then((res) => res.data);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const getKey = useCallback(
|
|
||||||
(index: number, prevData: ReviewSegment[]) => {
|
|
||||||
if (index > 0) {
|
|
||||||
const lastDate = prevData[prevData.length - 1].start_time;
|
|
||||||
const pagedParams = reviewSearchParams
|
|
||||||
? { before: lastDate, after: after, limit: API_LIMIT }
|
|
||||||
: {
|
|
||||||
...reviewSearchParams,
|
|
||||||
before: lastDate,
|
|
||||||
after: after,
|
|
||||||
limit: API_LIMIT,
|
|
||||||
};
|
|
||||||
return ["review", pagedParams];
|
|
||||||
}
|
|
||||||
|
|
||||||
const params = reviewSearchParams
|
|
||||||
? { limit: API_LIMIT, after: after }
|
|
||||||
: { ...reviewSearchParams, limit: API_LIMIT, after: after };
|
|
||||||
return ["review", params];
|
|
||||||
},
|
|
||||||
[reviewSearchParams]
|
|
||||||
);
|
|
||||||
|
|
||||||
const {
|
|
||||||
data: reviewPages,
|
|
||||||
mutate: updateSegments,
|
|
||||||
size,
|
|
||||||
setSize,
|
|
||||||
isValidating,
|
|
||||||
} = useSWRInfinite<ReviewSegment[]>(getKey, reviewSegmentFetcher);
|
|
||||||
|
|
||||||
const reviewItems = useMemo(() => {
|
const reviewItems = useMemo(() => {
|
||||||
const all: ReviewSegment[] = [];
|
const all: ReviewSegment[] = [];
|
||||||
const alerts: ReviewSegment[] = [];
|
const alerts: ReviewSegment[] = [];
|
||||||
@ -101,11 +61,6 @@ export default function MobileEventView() {
|
|||||||
};
|
};
|
||||||
}, [reviewPages]);
|
}, [reviewPages]);
|
||||||
|
|
||||||
const isDone = useMemo(
|
|
||||||
() => (reviewPages?.at(-1)?.length ?? 0) < API_LIMIT,
|
|
||||||
[reviewPages]
|
|
||||||
);
|
|
||||||
|
|
||||||
const currentItems = useMemo(() => {
|
const currentItems = useMemo(() => {
|
||||||
const current = reviewItems[severity];
|
const current = reviewItems[severity];
|
||||||
|
|
||||||
@ -125,8 +80,8 @@ export default function MobileEventView() {
|
|||||||
if (pagingObserver.current) pagingObserver.current.disconnect();
|
if (pagingObserver.current) pagingObserver.current.disconnect();
|
||||||
try {
|
try {
|
||||||
pagingObserver.current = new IntersectionObserver((entries) => {
|
pagingObserver.current = new IntersectionObserver((entries) => {
|
||||||
if (entries[0].isIntersecting && !isDone) {
|
if (entries[0].isIntersecting && !reachedEnd) {
|
||||||
setSize(size + 1);
|
loadNextPage();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
if (node) pagingObserver.current.observe(node);
|
if (node) pagingObserver.current.observe(node);
|
||||||
@ -134,7 +89,7 @@ export default function MobileEventView() {
|
|||||||
// no op
|
// no op
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
[isValidating, isDone]
|
[isValidating, reachedEnd]
|
||||||
);
|
);
|
||||||
|
|
||||||
const [minimap, setMinimap] = useState<string[]>([]);
|
const [minimap, setMinimap] = useState<string[]>([]);
|
||||||
@ -199,47 +154,6 @@ export default function MobileEventView() {
|
|||||||
return data;
|
return data;
|
||||||
}, [minimap]);
|
}, [minimap]);
|
||||||
|
|
||||||
// review status
|
|
||||||
|
|
||||||
const setReviewed = useCallback(
|
|
||||||
async (id: string) => {
|
|
||||||
const resp = await axios.post(`review/${id}/viewed`);
|
|
||||||
|
|
||||||
if (resp.status == 200) {
|
|
||||||
updateSegments();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
[updateSegments]
|
|
||||||
);
|
|
||||||
|
|
||||||
// preview videos
|
|
||||||
|
|
||||||
const previewTimes = useMemo(() => {
|
|
||||||
if (
|
|
||||||
!reviewPages ||
|
|
||||||
reviewPages.length == 0 ||
|
|
||||||
reviewPages.at(-1)!!.length == 0
|
|
||||||
) {
|
|
||||||
return undefined;
|
|
||||||
}
|
|
||||||
|
|
||||||
const startDate = new Date();
|
|
||||||
startDate.setMinutes(0, 0, 0);
|
|
||||||
|
|
||||||
const endDate = new Date(reviewPages.at(-1)!!.at(-1)!!.end_time);
|
|
||||||
endDate.setHours(0, 0, 0, 0);
|
|
||||||
return {
|
|
||||||
start: startDate.getTime() / 1000,
|
|
||||||
end: endDate.getTime() / 1000,
|
|
||||||
};
|
|
||||||
}, [reviewPages]);
|
|
||||||
const { data: allPreviews } = useSWR<Preview[]>(
|
|
||||||
previewTimes
|
|
||||||
? `preview/all/start/${previewTimes.start}/end/${previewTimes.end}`
|
|
||||||
: null,
|
|
||||||
{ revalidateOnFocus: false }
|
|
||||||
);
|
|
||||||
|
|
||||||
if (!config) {
|
if (!config) {
|
||||||
return <ActivityIndicator />;
|
return <ActivityIndicator />;
|
||||||
}
|
}
|
||||||
@ -291,7 +205,7 @@ export default function MobileEventView() {
|
|||||||
{currentItems ? (
|
{currentItems ? (
|
||||||
currentItems.map((value, segIdx) => {
|
currentItems.map((value, segIdx) => {
|
||||||
const lastRow = segIdx == reviewItems[severity].length - 1;
|
const lastRow = segIdx == reviewItems[severity].length - 1;
|
||||||
const relevantPreview = Object.values(allPreviews || []).find(
|
const relevantPreview = Object.values(relevantPreviews || []).find(
|
||||||
(preview) =>
|
(preview) =>
|
||||||
preview.camera == value.camera &&
|
preview.camera == value.camera &&
|
||||||
preview.start < value.start_time &&
|
preview.start < value.start_time &&
|
||||||
@ -309,10 +223,10 @@ export default function MobileEventView() {
|
|||||||
review={value}
|
review={value}
|
||||||
relevantPreview={relevantPreview}
|
relevantPreview={relevantPreview}
|
||||||
autoPlayback={minimapBounds.end == value.start_time}
|
autoPlayback={minimapBounds.end == value.start_time}
|
||||||
setReviewed={() => setReviewed(value.id)}
|
setReviewed={() => markItemAsReviewed(value.id)}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
{lastRow && !isDone && <ActivityIndicator />}
|
{lastRow && !reachedEnd && <ActivityIndicator />}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
})
|
})
|
||||||
|
|||||||
@ -1,270 +0,0 @@
|
|||||||
import ActivityScrubber from "@/components/scrubber/ActivityScrubber";
|
|
||||||
import ActivityIndicator from "@/components/ui/activity-indicator";
|
|
||||||
import { FrigateConfig } from "@/types/frigateConfig";
|
|
||||||
|
|
||||||
import { useEffect, useMemo, useRef, useState } from "react";
|
|
||||||
import useSWR from "swr";
|
|
||||||
import TimelineItemCard from "@/components/card/TimelineItemCard";
|
|
||||||
import { getTimelineHoursForDay } from "@/utils/historyUtil";
|
|
||||||
import { GraphDataPoint } from "@/types/graph";
|
|
||||||
import TimelineGraph from "@/components/graph/TimelineGraph";
|
|
||||||
import TimelineBar from "@/components/bar/TimelineBar";
|
|
||||||
import DynamicVideoPlayer, {
|
|
||||||
DynamicVideoController,
|
|
||||||
} from "@/components/player/DynamicVideoPlayer";
|
|
||||||
|
|
||||||
type DesktopTimelineViewProps = {
|
|
||||||
timelineData: CardsData;
|
|
||||||
allPreviews: Preview[];
|
|
||||||
initialPlayback: TimelinePlayback;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function DesktopTimelineView({
|
|
||||||
timelineData,
|
|
||||||
allPreviews,
|
|
||||||
initialPlayback,
|
|
||||||
}: DesktopTimelineViewProps) {
|
|
||||||
const { data: config } = useSWR<FrigateConfig>("config");
|
|
||||||
const timezone = useMemo(
|
|
||||||
() =>
|
|
||||||
config?.ui?.timezone || Intl.DateTimeFormat().resolvedOptions().timeZone,
|
|
||||||
[config]
|
|
||||||
);
|
|
||||||
|
|
||||||
const controllerRef = useRef<DynamicVideoController | undefined>(undefined);
|
|
||||||
const initialScrollRef = useRef<HTMLDivElement | null>(null);
|
|
||||||
|
|
||||||
// handle scrolling to initial timeline item
|
|
||||||
useEffect(() => {
|
|
||||||
if (initialScrollRef.current != null) {
|
|
||||||
initialScrollRef.current.scrollIntoView();
|
|
||||||
}
|
|
||||||
}, [initialScrollRef]);
|
|
||||||
|
|
||||||
const cameraPreviews = useMemo(() => {
|
|
||||||
return allPreviews.filter((preview) => {
|
|
||||||
return preview.camera == initialPlayback.camera;
|
|
||||||
});
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const [timelineTime, setTimelineTime] = useState(0);
|
|
||||||
const timelineStack = useMemo(
|
|
||||||
() =>
|
|
||||||
getTimelineHoursForDay(
|
|
||||||
initialPlayback.camera,
|
|
||||||
timelineData,
|
|
||||||
cameraPreviews,
|
|
||||||
initialPlayback.range.start + 60
|
|
||||||
),
|
|
||||||
[]
|
|
||||||
);
|
|
||||||
|
|
||||||
const [selectedPlaybackIdx, setSelectedPlaybackIdx] = useState(
|
|
||||||
timelineStack.playbackItems.findIndex((playback) => {
|
|
||||||
return (
|
|
||||||
playback.range.start == initialPlayback.range.start &&
|
|
||||||
playback.range.end == initialPlayback.range.end
|
|
||||||
);
|
|
||||||
})
|
|
||||||
);
|
|
||||||
const selectedPlayback = useMemo(
|
|
||||||
() => timelineStack.playbackItems[selectedPlaybackIdx],
|
|
||||||
[selectedPlaybackIdx]
|
|
||||||
);
|
|
||||||
|
|
||||||
// handle moving to next clip
|
|
||||||
useEffect(() => {
|
|
||||||
if (!controllerRef.current) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (selectedPlaybackIdx > 0) {
|
|
||||||
controllerRef.current.onClipEndedEvent(() => {
|
|
||||||
console.log("setting to " + (selectedPlaybackIdx - 1));
|
|
||||||
setSelectedPlaybackIdx(selectedPlaybackIdx - 1);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}, [controllerRef, selectedPlaybackIdx]);
|
|
||||||
|
|
||||||
const { data: activity } = useSWR<RecordingActivity>(
|
|
||||||
[
|
|
||||||
`${initialPlayback.camera}/recording/hourly/activity`,
|
|
||||||
{
|
|
||||||
after: timelineStack.start,
|
|
||||||
before: timelineStack.end,
|
|
||||||
timezone,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
{ revalidateOnFocus: false }
|
|
||||||
);
|
|
||||||
|
|
||||||
const timelineGraphData = useMemo(() => {
|
|
||||||
if (!activity) {
|
|
||||||
return {};
|
|
||||||
}
|
|
||||||
|
|
||||||
const graphData: {
|
|
||||||
[hour: string]: { objects: number[]; motion: GraphDataPoint[] };
|
|
||||||
} = {};
|
|
||||||
|
|
||||||
Object.entries(activity).forEach(([hour, data]) => {
|
|
||||||
const objects: number[] = [];
|
|
||||||
const motion: GraphDataPoint[] = [];
|
|
||||||
|
|
||||||
data.forEach((seg, idx) => {
|
|
||||||
if (seg.hasObjects) {
|
|
||||||
objects.push(idx);
|
|
||||||
}
|
|
||||||
|
|
||||||
motion.push({
|
|
||||||
x: new Date(seg.date * 1000),
|
|
||||||
y: seg.count,
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
graphData[hour] = { objects, motion };
|
|
||||||
});
|
|
||||||
|
|
||||||
return graphData;
|
|
||||||
}, [activity]);
|
|
||||||
|
|
||||||
if (!config) {
|
|
||||||
return <ActivityIndicator />;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="w-full flex flex-col">
|
|
||||||
<div className="flex mt-2 max-h-[60%]">
|
|
||||||
<DynamicVideoPlayer
|
|
||||||
className="w-2/3 bg-black flex justify-center items-center"
|
|
||||||
camera={initialPlayback.camera}
|
|
||||||
timeRange={selectedPlayback.range}
|
|
||||||
cameraPreviews={cameraPreviews}
|
|
||||||
onControllerReady={(controller) => {
|
|
||||||
controllerRef.current = controller;
|
|
||||||
controllerRef.current.onPlayerTimeUpdate((timestamp: number) => {
|
|
||||||
setTimelineTime(timestamp);
|
|
||||||
});
|
|
||||||
|
|
||||||
if (initialPlayback.timelineItems.length > 0) {
|
|
||||||
controllerRef.current?.seekToTimestamp(
|
|
||||||
selectedPlayback.timelineItems[0].timestamp,
|
|
||||||
true
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<div className="relative h-full w-1/3">
|
|
||||||
<div className="absolute px-2 left-0 top-0 right-0 bottom-0 overflow-y-auto overflow-x-hidden">
|
|
||||||
{selectedPlayback.timelineItems.map((timeline) => {
|
|
||||||
return (
|
|
||||||
<TimelineItemCard
|
|
||||||
key={timeline.timestamp}
|
|
||||||
timeline={timeline}
|
|
||||||
relevantPreview={selectedPlayback.relevantPreview}
|
|
||||||
onSelect={() => {
|
|
||||||
controllerRef.current?.seekToTimelineItem(timeline);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="relative mt-4 w-full h-full">
|
|
||||||
<div className="absolute left-0 top-0 right-0 bottom-0 overflow-auto">
|
|
||||||
{timelineStack.playbackItems.map((timeline, tIdx) => {
|
|
||||||
const isInitiallySelected =
|
|
||||||
initialPlayback.range.start == timeline.range.start;
|
|
||||||
const isSelected =
|
|
||||||
timeline.range.start == selectedPlayback.range.start;
|
|
||||||
const graphData = timelineGraphData[timeline.range.start];
|
|
||||||
const start = new Date(timeline.range.start * 1000);
|
|
||||||
const end = new Date(timeline.range.end * 1000);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
ref={isInitiallySelected ? initialScrollRef : null}
|
|
||||||
key={timeline.range.start}
|
|
||||||
>
|
|
||||||
{isSelected ? (
|
|
||||||
<div className="p-2 relative bg-secondary bg-opacity-30 rounded-md">
|
|
||||||
<ActivityScrubber
|
|
||||||
timeBars={
|
|
||||||
isSelected
|
|
||||||
? [
|
|
||||||
{
|
|
||||||
time: new Date(
|
|
||||||
Math.max(timeline.range.start, timelineTime) *
|
|
||||||
1000
|
|
||||||
),
|
|
||||||
id: "playback",
|
|
||||||
},
|
|
||||||
]
|
|
||||||
: []
|
|
||||||
}
|
|
||||||
options={{
|
|
||||||
snap: null,
|
|
||||||
min: start,
|
|
||||||
max: end,
|
|
||||||
start: start,
|
|
||||||
end: end,
|
|
||||||
zoomable: false,
|
|
||||||
height: "120px",
|
|
||||||
}}
|
|
||||||
timechangeHandler={(data) => {
|
|
||||||
controllerRef.current?.scrubToTimestamp(
|
|
||||||
data.time.getTime() / 1000
|
|
||||||
);
|
|
||||||
setTimelineTime(data.time.getTime() / 1000);
|
|
||||||
}}
|
|
||||||
timechangedHandler={(data) => {
|
|
||||||
controllerRef.current?.seekToTimestamp(
|
|
||||||
data.time.getTime() / 1000,
|
|
||||||
true
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
{isSelected && graphData && (
|
|
||||||
<div className="absolute left-2 right-2 top-0 h-[84px]">
|
|
||||||
<TimelineGraph
|
|
||||||
id={timeline.range.start.toString()}
|
|
||||||
data={[
|
|
||||||
{
|
|
||||||
name: "Motion",
|
|
||||||
data: graphData.motion,
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
objects={graphData.objects}
|
|
||||||
start={graphData.motion[0].x.getTime()}
|
|
||||||
end={graphData.motion.at(-1)!!.x.getTime()}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<TimelineBar
|
|
||||||
startTime={timeline.range.start}
|
|
||||||
graphData={graphData}
|
|
||||||
onClick={() => {
|
|
||||||
setSelectedPlaybackIdx(tIdx);
|
|
||||||
|
|
||||||
let startTs;
|
|
||||||
if (timeline.timelineItems.length > 0) {
|
|
||||||
startTs = selectedPlayback.timelineItems[0].timestamp;
|
|
||||||
} else {
|
|
||||||
startTs = timeline.range.start;
|
|
||||||
}
|
|
||||||
|
|
||||||
controllerRef.current?.seekToTimestamp(startTs, true);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,149 +0,0 @@
|
|||||||
import HistoryCard from "@/components/card/HistoryCard";
|
|
||||||
import ActivityIndicator from "@/components/ui/activity-indicator";
|
|
||||||
import Heading from "@/components/ui/heading";
|
|
||||||
import { FrigateConfig } from "@/types/frigateConfig";
|
|
||||||
import {
|
|
||||||
formatUnixTimestampToDateTime,
|
|
||||||
getRangeForTimestamp,
|
|
||||||
} from "@/utils/dateUtil";
|
|
||||||
import { useCallback, useRef } from "react";
|
|
||||||
import useSWR from "swr";
|
|
||||||
|
|
||||||
type HistoryCardViewProps = {
|
|
||||||
timelineCards: CardsData | never[];
|
|
||||||
allPreviews: Preview[] | undefined;
|
|
||||||
isMobile: boolean;
|
|
||||||
isValidating: boolean;
|
|
||||||
isDone: boolean;
|
|
||||||
onNextPage: () => void;
|
|
||||||
onDelete: (card: Card) => void;
|
|
||||||
onItemSelected: (item: TimelinePlayback) => void;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function HistoryCardView({
|
|
||||||
timelineCards,
|
|
||||||
allPreviews,
|
|
||||||
isMobile,
|
|
||||||
isValidating,
|
|
||||||
isDone,
|
|
||||||
onNextPage,
|
|
||||||
onDelete,
|
|
||||||
onItemSelected,
|
|
||||||
}: HistoryCardViewProps) {
|
|
||||||
const { data: config } = useSWR<FrigateConfig>("config");
|
|
||||||
|
|
||||||
// hooks for infinite scroll
|
|
||||||
const observer = useRef<IntersectionObserver | null>();
|
|
||||||
const lastTimelineRef = useCallback(
|
|
||||||
(node: HTMLElement | null) => {
|
|
||||||
if (isValidating) return;
|
|
||||||
if (observer.current) observer.current.disconnect();
|
|
||||||
try {
|
|
||||||
observer.current = new IntersectionObserver((entries) => {
|
|
||||||
if (entries[0].isIntersecting && !isDone) {
|
|
||||||
onNextPage();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
if (node) observer.current.observe(node);
|
|
||||||
} catch (e) {
|
|
||||||
// no op
|
|
||||||
}
|
|
||||||
},
|
|
||||||
[isValidating, isDone]
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
{Object.entries(timelineCards)
|
|
||||||
.reverse()
|
|
||||||
.map(([day, timelineDay], dayIdx) => {
|
|
||||||
return (
|
|
||||||
<div key={day}>
|
|
||||||
<Heading
|
|
||||||
className="sticky py-2 -top-4 left-0 bg-background w-full z-20"
|
|
||||||
as="h3"
|
|
||||||
>
|
|
||||||
{formatUnixTimestampToDateTime(parseInt(day), {
|
|
||||||
strftime_fmt: "%A %b %d",
|
|
||||||
time_style: "medium",
|
|
||||||
date_style: "medium",
|
|
||||||
})}
|
|
||||||
</Heading>
|
|
||||||
{Object.entries(timelineDay).map(
|
|
||||||
([hour, timelineHour], hourIdx) => {
|
|
||||||
if (Object.values(timelineHour).length == 0) {
|
|
||||||
return <div key={hour}></div>;
|
|
||||||
}
|
|
||||||
|
|
||||||
const lastRow =
|
|
||||||
dayIdx == Object.values(timelineCards).length - 1 &&
|
|
||||||
hourIdx == Object.values(timelineDay).length - 1;
|
|
||||||
const previewMap: { [key: string]: Preview | undefined } = {};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div key={hour} ref={lastRow ? lastTimelineRef : null}>
|
|
||||||
<Heading as="h4">
|
|
||||||
{formatUnixTimestampToDateTime(parseInt(hour), {
|
|
||||||
strftime_fmt:
|
|
||||||
config?.ui.time_format == "24hour"
|
|
||||||
? "%H:00"
|
|
||||||
: "%I:00 %p",
|
|
||||||
time_style: "medium",
|
|
||||||
date_style: "medium",
|
|
||||||
})}
|
|
||||||
</Heading>
|
|
||||||
|
|
||||||
<div className="flex flex-wrap">
|
|
||||||
{Object.entries(timelineHour)
|
|
||||||
.reverse()
|
|
||||||
.map(([key, timeline]) => {
|
|
||||||
const startTs = Object.values(timeline.entries)[0]
|
|
||||||
.timestamp;
|
|
||||||
let relevantPreview = previewMap[timeline.camera];
|
|
||||||
|
|
||||||
if (relevantPreview == undefined) {
|
|
||||||
relevantPreview = previewMap[timeline.camera] =
|
|
||||||
Object.values(allPreviews || []).find(
|
|
||||||
(preview) =>
|
|
||||||
preview.camera == timeline.camera &&
|
|
||||||
preview.start < startTs &&
|
|
||||||
preview.end > startTs
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<HistoryCard
|
|
||||||
key={key}
|
|
||||||
timeline={timeline}
|
|
||||||
isMobile={isMobile}
|
|
||||||
relevantPreview={relevantPreview}
|
|
||||||
onClick={() => {
|
|
||||||
onItemSelected({
|
|
||||||
camera: timeline.camera,
|
|
||||||
range: getRangeForTimestamp(timeline.time),
|
|
||||||
timelineItems: Object.values(
|
|
||||||
timelineHour
|
|
||||||
).flatMap((card) =>
|
|
||||||
card.camera == timeline.camera
|
|
||||||
? card.entries
|
|
||||||
: []
|
|
||||||
),
|
|
||||||
relevantPreview: relevantPreview,
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
onDelete={() => onDelete(timeline)}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
{lastRow && !isDone && <ActivityIndicator />}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,137 +0,0 @@
|
|||||||
import ActivityScrubber, {
|
|
||||||
ScrubberItem,
|
|
||||||
} from "@/components/scrubber/ActivityScrubber";
|
|
||||||
import ActivityIndicator from "@/components/ui/activity-indicator";
|
|
||||||
import { FrigateConfig } from "@/types/frigateConfig";
|
|
||||||
import {
|
|
||||||
getTimelineDetectionIcon,
|
|
||||||
getTimelineIcon,
|
|
||||||
} from "@/utils/timelineUtil";
|
|
||||||
import { renderToStaticMarkup } from "react-dom/server";
|
|
||||||
import { useMemo, useRef, useState } from "react";
|
|
||||||
import useSWR from "swr";
|
|
||||||
import DynamicVideoPlayer, {
|
|
||||||
DynamicVideoController,
|
|
||||||
} from "@/components/player/DynamicVideoPlayer";
|
|
||||||
|
|
||||||
type MobileTimelineViewProps = {
|
|
||||||
playback: TimelinePlayback;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function MobileTimelineView({
|
|
||||||
playback,
|
|
||||||
}: MobileTimelineViewProps) {
|
|
||||||
const { data: config } = useSWR<FrigateConfig>("config");
|
|
||||||
|
|
||||||
const controllerRef = useRef<DynamicVideoController | undefined>(undefined);
|
|
||||||
|
|
||||||
const [timelineTime, setTimelineTime] = useState(
|
|
||||||
playback.timelineItems.length > 0
|
|
||||||
? playback.timelineItems[0].timestamp
|
|
||||||
: playback.range.start
|
|
||||||
);
|
|
||||||
|
|
||||||
const recordingParams = useMemo(() => {
|
|
||||||
return {
|
|
||||||
before: playback.range.end,
|
|
||||||
after: playback.range.start,
|
|
||||||
};
|
|
||||||
}, [playback]);
|
|
||||||
const { data: recordings } = useSWR<Recording[]>(
|
|
||||||
playback ? [`${playback.camera}/recordings`, recordingParams] : null,
|
|
||||||
{ revalidateOnFocus: false }
|
|
||||||
);
|
|
||||||
|
|
||||||
if (!config || !recordings) {
|
|
||||||
return <ActivityIndicator />;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="w-full">
|
|
||||||
<DynamicVideoPlayer
|
|
||||||
camera={playback.camera}
|
|
||||||
timeRange={playback.range}
|
|
||||||
cameraPreviews={
|
|
||||||
playback.relevantPreview ? [playback.relevantPreview] : []
|
|
||||||
}
|
|
||||||
onControllerReady={(controller) => {
|
|
||||||
controllerRef.current = controller;
|
|
||||||
controllerRef.current.onPlayerTimeUpdate((timestamp: number) => {
|
|
||||||
setTimelineTime(timestamp);
|
|
||||||
});
|
|
||||||
|
|
||||||
if (playback.timelineItems.length > 0) {
|
|
||||||
controllerRef.current?.seekToTimestamp(
|
|
||||||
playback.timelineItems[0].timestamp,
|
|
||||||
true
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<div className="m-1">
|
|
||||||
{playback != undefined && (
|
|
||||||
<ActivityScrubber
|
|
||||||
items={timelineItemsToScrubber(playback.timelineItems)}
|
|
||||||
timeBars={[{ time: new Date(timelineTime * 1000), id: "playback" }]}
|
|
||||||
options={{
|
|
||||||
start: new Date(playback.range.start * 1000),
|
|
||||||
end: new Date(playback.range.end * 1000),
|
|
||||||
snap: null,
|
|
||||||
min: new Date(playback.range.start * 1000),
|
|
||||||
max: new Date(playback.range.end * 1000),
|
|
||||||
timeAxis: { scale: "minute", step: 15 },
|
|
||||||
zoomable: false,
|
|
||||||
}}
|
|
||||||
timechangeHandler={(data) => {
|
|
||||||
controllerRef.current?.scrubToTimestamp(
|
|
||||||
data.time.getTime() / 1000
|
|
||||||
);
|
|
||||||
setTimelineTime(data.time.getTime() / 1000);
|
|
||||||
}}
|
|
||||||
timechangedHandler={(data) => {
|
|
||||||
controllerRef.current?.seekToTimestamp(
|
|
||||||
data.time.getTime() / 1000,
|
|
||||||
true
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
selectHandler={(data) => {
|
|
||||||
if (data.items.length > 0) {
|
|
||||||
const selected = parseFloat(data.items[0].split("-")[0]);
|
|
||||||
|
|
||||||
const timeline = playback.timelineItems.find(
|
|
||||||
(timeline) => timeline.timestamp == selected
|
|
||||||
);
|
|
||||||
|
|
||||||
if (timeline) {
|
|
||||||
controllerRef.current?.seekToTimelineItem(timeline);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function timelineItemsToScrubber(items: Timeline[]): ScrubberItem[] {
|
|
||||||
return items.map((item, idx) => {
|
|
||||||
return {
|
|
||||||
id: `${item.timestamp}-${idx}`,
|
|
||||||
content: getTimelineContentElement(item),
|
|
||||||
start: new Date(item.timestamp * 1000),
|
|
||||||
end: new Date(item.timestamp * 1000),
|
|
||||||
type: "box",
|
|
||||||
};
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function getTimelineContentElement(item: Timeline): HTMLElement {
|
|
||||||
const output = document.createElement(`div-${item.timestamp}`);
|
|
||||||
output.innerHTML = renderToStaticMarkup(
|
|
||||||
<div className="flex items-center">
|
|
||||||
{getTimelineDetectionIcon(item)} : {getTimelineIcon(item)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
return output;
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue
Block a user