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 Header from "@/components/Header";
|
||||
import Live from "@/pages/Live";
|
||||
import History from "@/pages/History";
|
||||
import Export from "@/pages/Export";
|
||||
import Storage from "@/pages/Storage";
|
||||
import System from "@/pages/System";
|
||||
@ -40,7 +39,6 @@ function App() {
|
||||
<Routes>
|
||||
<Route path="/" element={<Live />} />
|
||||
<Route path="/events" element={<Events />} />
|
||||
<Route path="/history" element={<History />} />
|
||||
<Route path="/export" element={<Export />} />
|
||||
<Route path="/storage" element={<Storage />} />
|
||||
<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";
|
||||
|
||||
type HistoryFilterPopoverProps = {
|
||||
// @ts-ignore
|
||||
filter: HistoryFilter | undefined;
|
||||
// @ts-ignore
|
||||
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 Chip from "@/components/Chip";
|
||||
import PreviewThumbnailPlayer from "@/components/player/PreviewThumbnailPlayer";
|
||||
import EventReviewTimeline from "@/components/timeline/EventReviewTimeline";
|
||||
import ActivityIndicator from "@/components/ui/activity-indicator";
|
||||
|
||||
@ -5,7 +5,7 @@ import EventReviewTimeline from "@/components/timeline/EventReviewTimeline";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { ReviewSegment } from "@/types/review";
|
||||
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 { 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: {
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://192.168.50.106:5000',
|
||||
target: 'http://localhost:5000',
|
||||
ws: true,
|
||||
},
|
||||
'/vod': {
|
||||
target: 'http://192.168.50.106:5000'
|
||||
target: 'http://localhost:5000'
|
||||
},
|
||||
'/clips': {
|
||||
target: 'http://192.168.50.106:5000'
|
||||
target: 'http://localhost:5000'
|
||||
},
|
||||
'/exports': {
|
||||
target: 'http://192.168.50.106:5000'
|
||||
target: 'http://localhost:5000'
|
||||
},
|
||||
'/ws': {
|
||||
target: 'ws://192.168.50.106:5000',
|
||||
target: 'ws://localhost:5000',
|
||||
ws: true,
|
||||
},
|
||||
'/live': {
|
||||
target: 'ws://192.168.50.106:5000',
|
||||
target: 'ws://localhost:5000',
|
||||
changeOrigin: true,
|
||||
ws: true,
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user