2024-03-02 01:43:02 +01:00
|
|
|
import { useFrigateReviews } from "@/api/ws";
|
|
|
|
import Logo from "@/components/Logo";
|
2024-03-05 00:18:30 +01:00
|
|
|
import { CameraGroupSelector } from "@/components/filter/CameraGroupSelector";
|
2024-03-02 01:43:02 +01:00
|
|
|
import { AnimatedEventThumbnail } from "@/components/image/AnimatedEventThumbnail";
|
2024-03-12 20:53:01 +01:00
|
|
|
import BirdseyeLivePlayer from "@/components/player/BirdseyeLivePlayer";
|
2024-03-02 01:43:02 +01:00
|
|
|
import LivePlayer from "@/components/player/LivePlayer";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
|
|
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
|
|
|
|
import { TooltipProvider } from "@/components/ui/tooltip";
|
|
|
|
import { usePersistence } from "@/hooks/use-persistence";
|
2024-03-12 20:53:01 +01:00
|
|
|
import { CameraConfig, FrigateConfig } from "@/types/frigateConfig";
|
2024-03-02 01:43:02 +01:00
|
|
|
import { ReviewSegment } from "@/types/review";
|
|
|
|
import { useCallback, useEffect, useMemo, useState } from "react";
|
|
|
|
import { isDesktop, isMobile, isSafari } from "react-device-detect";
|
|
|
|
import { CiGrid2H, CiGrid31 } from "react-icons/ci";
|
|
|
|
import useSWR from "swr";
|
|
|
|
|
|
|
|
type LiveDashboardViewProps = {
|
|
|
|
cameras: CameraConfig[];
|
2024-03-12 20:53:01 +01:00
|
|
|
includeBirdseye: boolean;
|
2024-03-02 01:43:02 +01:00
|
|
|
onSelectCamera: (camera: string) => void;
|
|
|
|
};
|
|
|
|
export default function LiveDashboardView({
|
|
|
|
cameras,
|
2024-03-12 20:53:01 +01:00
|
|
|
includeBirdseye,
|
2024-03-02 01:43:02 +01:00
|
|
|
onSelectCamera,
|
|
|
|
}: LiveDashboardViewProps) {
|
2024-03-12 20:53:01 +01:00
|
|
|
const { data: config } = useSWR<FrigateConfig>("config");
|
|
|
|
|
2024-03-02 01:43:02 +01:00
|
|
|
// layout
|
|
|
|
|
|
|
|
const [layout, setLayout] = usePersistence<"grid" | "list">(
|
|
|
|
"live-layout",
|
|
|
|
isDesktop ? "grid" : "list",
|
|
|
|
);
|
|
|
|
|
|
|
|
// recent events
|
|
|
|
const { payload: eventUpdate } = useFrigateReviews();
|
|
|
|
const { data: allEvents, mutate: updateEvents } = useSWR<ReviewSegment[]>([
|
|
|
|
"review",
|
|
|
|
{ limit: 10, severity: "alert" },
|
|
|
|
]);
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
if (!eventUpdate) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
// if event is ended and was saved, update events list
|
|
|
|
if (eventUpdate.type == "end" && eventUpdate.review.severity == "alert") {
|
2024-03-07 15:34:11 +01:00
|
|
|
setTimeout(() => updateEvents(), 1000);
|
2024-03-02 01:43:02 +01:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
}, [eventUpdate, updateEvents]);
|
|
|
|
|
|
|
|
const events = useMemo(() => {
|
|
|
|
if (!allEvents) {
|
|
|
|
return [];
|
|
|
|
}
|
|
|
|
|
|
|
|
const date = new Date();
|
|
|
|
date.setHours(date.getHours() - 1);
|
|
|
|
const cutoff = date.getTime() / 1000;
|
|
|
|
return allEvents.filter((event) => event.start_time > cutoff);
|
|
|
|
}, [allEvents]);
|
|
|
|
|
|
|
|
// camera live views
|
|
|
|
|
|
|
|
const [windowVisible, setWindowVisible] = useState(true);
|
|
|
|
const visibilityListener = useCallback(() => {
|
|
|
|
setWindowVisible(document.visibilityState == "visible");
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
addEventListener("visibilitychange", visibilityListener);
|
|
|
|
|
|
|
|
return () => {
|
|
|
|
removeEventListener("visibilitychange", visibilityListener);
|
|
|
|
};
|
|
|
|
}, [visibilityListener]);
|
|
|
|
|
2024-03-12 20:53:01 +01:00
|
|
|
const birdseyeConfig = useMemo(() => config?.birdseye, [config]);
|
|
|
|
|
2024-03-02 01:43:02 +01:00
|
|
|
return (
|
2024-03-05 21:19:56 +01:00
|
|
|
<div className="size-full overflow-y-auto px-2">
|
2024-03-02 01:43:02 +01:00
|
|
|
{isMobile && (
|
|
|
|
<div className="relative h-9 flex items-center justify-between">
|
|
|
|
<Logo className="absolute inset-y-0 inset-x-1/2 -translate-x-1/2 h-8" />
|
2024-03-05 00:18:30 +01:00
|
|
|
<CameraGroupSelector />
|
2024-03-02 01:43:02 +01:00
|
|
|
<div className="flex items-center gap-1">
|
|
|
|
<Button
|
2024-03-02 16:00:50 +01:00
|
|
|
className={
|
|
|
|
layout == "grid"
|
|
|
|
? "text-selected bg-blue-900 focus:bg-blue-900 bg-opacity-60 focus:bg-opacity-60"
|
|
|
|
: "text-muted-foreground bg-muted"
|
|
|
|
}
|
2024-03-02 01:43:02 +01:00
|
|
|
size="xs"
|
|
|
|
onClick={() => setLayout("grid")}
|
|
|
|
>
|
|
|
|
<CiGrid31 className="m-1" />
|
|
|
|
</Button>
|
|
|
|
<Button
|
2024-03-02 16:00:50 +01:00
|
|
|
className={
|
|
|
|
layout == "list"
|
|
|
|
? "text-selected bg-blue-900 focus:bg-blue-900 bg-opacity-60 focus:bg-opacity-60"
|
|
|
|
: "text-muted-foreground bg-muted"
|
|
|
|
}
|
2024-03-02 01:43:02 +01:00
|
|
|
size="xs"
|
|
|
|
onClick={() => setLayout("list")}
|
|
|
|
>
|
|
|
|
<CiGrid2H className="m-1" />
|
|
|
|
</Button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
|
|
|
|
{events && events.length > 0 && (
|
|
|
|
<ScrollArea>
|
|
|
|
<TooltipProvider>
|
2024-03-13 14:58:46 +01:00
|
|
|
<div className="flex gap-2 items-center">
|
2024-03-02 01:43:02 +01:00
|
|
|
{events.map((event) => {
|
|
|
|
return <AnimatedEventThumbnail key={event.id} event={event} />;
|
|
|
|
})}
|
|
|
|
</div>
|
|
|
|
</TooltipProvider>
|
|
|
|
<ScrollBar orientation="horizontal" />
|
|
|
|
</ScrollArea>
|
|
|
|
)}
|
|
|
|
|
|
|
|
<div
|
2024-03-03 17:32:35 +01:00
|
|
|
className={`my-4 grid ${layout == "grid" ? "grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4" : ""} gap-2 md:gap-4 *:rounded-2xl *:bg-black`}
|
2024-03-02 01:43:02 +01:00
|
|
|
>
|
2024-03-12 20:53:01 +01:00
|
|
|
{includeBirdseye && birdseyeConfig?.enabled && (
|
|
|
|
<BirdseyeLivePlayer
|
|
|
|
birdseyeConfig={birdseyeConfig}
|
|
|
|
liveMode={birdseyeConfig.restream ? "mse" : "jsmpeg"}
|
2024-03-16 00:28:32 +01:00
|
|
|
onClick={() => onSelectCamera("birdseye")}
|
2024-03-12 20:53:01 +01:00
|
|
|
/>
|
|
|
|
)}
|
2024-03-02 01:43:02 +01:00
|
|
|
{cameras.map((camera) => {
|
|
|
|
let grow;
|
|
|
|
const aspectRatio = camera.detect.width / camera.detect.height;
|
|
|
|
if (aspectRatio > 2) {
|
|
|
|
grow = `${layout == "grid" ? "col-span-2" : ""} aspect-wide`;
|
|
|
|
} else if (aspectRatio < 1) {
|
|
|
|
grow = `${layout == "grid" ? "row-span-2 aspect-tall md:h-full" : ""} aspect-tall`;
|
|
|
|
} else {
|
|
|
|
grow = "aspect-video";
|
|
|
|
}
|
|
|
|
return (
|
|
|
|
<LivePlayer
|
|
|
|
key={camera.name}
|
|
|
|
className={grow}
|
|
|
|
windowVisible={windowVisible}
|
|
|
|
cameraConfig={camera}
|
|
|
|
preferredLiveMode={isSafari ? "webrtc" : "mse"}
|
|
|
|
onClick={() => onSelectCamera(camera.name)}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
})}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|