mirror of
https://github.com/blakeblackshear/frigate.git
synced 2026-02-08 20:25:26 +03:00
Remove old history
This commit is contained in:
Nicolas Mowen
parent
7d79aa348d
commit
162ac4361f
@ -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;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -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() };
|
|
||||||
}
|
|
||||||
@ -1,5 +1,4 @@
|
|||||||
import { useFrigateEvents } from "@/api/ws";
|
import { useFrigateEvents } from "@/api/ws";
|
||||||
import Chip from "@/components/Chip";
|
|
||||||
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";
|
||||||
|
|||||||
@ -5,7 +5,7 @@ import EventReviewTimeline from "@/components/timeline/EventReviewTimeline";
|
|||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import { ReviewSegment } from "@/types/review";
|
import { ReviewSegment } from "@/types/review";
|
||||||
import { getChunkedTimeRange } from "@/utils/timelineUtil";
|
import { getChunkedTimeRange } from "@/utils/timelineUtil";
|
||||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
import { useEffect, useMemo, useRef, useState } from "react";
|
||||||
import { IoMdArrowRoundBack } from "react-icons/io";
|
import { IoMdArrowRoundBack } from "react-icons/io";
|
||||||
import { useNavigate } from "react-router-dom";
|
import { useNavigate } from "react-router-dom";
|
||||||
|
|
||||||
|
|||||||
@ -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;
|
|
||||||
}
|
|
||||||
@ -12,24 +12,24 @@ export default defineConfig({
|
|||||||
server: {
|
server: {
|
||||||
proxy: {
|
proxy: {
|
||||||
'/api': {
|
'/api': {
|
||||||
target: 'http://192.168.50.106:5000',
|
target: 'http://localhost:5000',
|
||||||
ws: true,
|
ws: true,
|
||||||
},
|
},
|
||||||
'/vod': {
|
'/vod': {
|
||||||
target: 'http://192.168.50.106:5000'
|
target: 'http://localhost:5000'
|
||||||
},
|
},
|
||||||
'/clips': {
|
'/clips': {
|
||||||
target: 'http://192.168.50.106:5000'
|
target: 'http://localhost:5000'
|
||||||
},
|
},
|
||||||
'/exports': {
|
'/exports': {
|
||||||
target: 'http://192.168.50.106:5000'
|
target: 'http://localhost:5000'
|
||||||
},
|
},
|
||||||
'/ws': {
|
'/ws': {
|
||||||
target: 'ws://192.168.50.106:5000',
|
target: 'ws://localhost:5000',
|
||||||
ws: true,
|
ws: true,
|
||||||
},
|
},
|
||||||
'/live': {
|
'/live': {
|
||||||
target: 'ws://192.168.50.106:5000',
|
target: 'ws://localhost:5000',
|
||||||
changeOrigin: true,
|
changeOrigin: true,
|
||||||
ws: true,
|
ws: true,
|
||||||
},
|
},
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user