forked from Github/frigate
Individual live view (#10178)
* Get live camera view working * Get ptz working * Add button for ptz presets * Add camera feature buttons * Add button for camera audio * Cleanup * Cleanup mobile live * Only use landscape check on mobile
This commit is contained in:
Nicolas Mowen
330
web/src/views/live/LiveCameraView.tsx
Normal file
330
web/src/views/live/LiveCameraView.tsx
Normal file
@@ -0,0 +1,330 @@
|
||||
import {
|
||||
useAudioState,
|
||||
useDetectState,
|
||||
usePtzCommand,
|
||||
useRecordingsState,
|
||||
useSnapshotsState,
|
||||
} from "@/api/ws";
|
||||
import CameraFeatureToggle from "@/components/dynamic/CameraFeatureToggle";
|
||||
import LivePlayer from "@/components/player/LivePlayer";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { TooltipProvider } from "@/components/ui/tooltip";
|
||||
import useKeyboardListener from "@/hooks/use-keyboard-listener";
|
||||
import { CameraConfig } from "@/types/frigateConfig";
|
||||
import { CameraPtzInfo } from "@/types/ptz";
|
||||
import React, { useCallback, useMemo, useState } from "react";
|
||||
import {
|
||||
isDesktop,
|
||||
isMobile,
|
||||
isSafari,
|
||||
useMobileOrientation,
|
||||
} from "react-device-detect";
|
||||
import { BsThreeDotsVertical } from "react-icons/bs";
|
||||
import {
|
||||
FaAngleDown,
|
||||
FaAngleLeft,
|
||||
FaAngleRight,
|
||||
FaAngleUp,
|
||||
} from "react-icons/fa";
|
||||
import { GiSpeaker, GiSpeakerOff } from "react-icons/gi";
|
||||
import { IoMdArrowBack } from "react-icons/io";
|
||||
import { LuEar, LuEarOff, LuVideo, LuVideoOff } from "react-icons/lu";
|
||||
import {
|
||||
MdNoPhotography,
|
||||
MdPersonOff,
|
||||
MdPersonSearch,
|
||||
MdPhotoCamera,
|
||||
MdZoomIn,
|
||||
MdZoomOut,
|
||||
} from "react-icons/md";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import useSWR from "swr";
|
||||
|
||||
type LiveCameraViewProps = {
|
||||
camera: CameraConfig;
|
||||
};
|
||||
export default function LiveCameraView({ camera }: LiveCameraViewProps) {
|
||||
const navigate = useNavigate();
|
||||
const { isPortrait } = useMobileOrientation();
|
||||
|
||||
// camera features
|
||||
|
||||
const { payload: detectState, send: sendDetect } = useDetectState(
|
||||
camera.name,
|
||||
);
|
||||
const { payload: recordState, send: sendRecord } = useRecordingsState(
|
||||
camera.name,
|
||||
);
|
||||
const { payload: snapshotState, send: sendSnapshot } = useSnapshotsState(
|
||||
camera.name,
|
||||
);
|
||||
const { payload: audioState, send: sendAudio } = useAudioState(camera.name);
|
||||
|
||||
// playback state
|
||||
|
||||
const [audio, setAudio] = useState(false);
|
||||
|
||||
const growClassName = useMemo(() => {
|
||||
if (isMobile) {
|
||||
if (isPortrait) {
|
||||
return "absolute left-2 right-2 top-[50%] -translate-y-[50%]";
|
||||
} else {
|
||||
return "absolute top-2 bottom-2 left-[50%] -translate-x-[50%]";
|
||||
}
|
||||
} else if (camera.detect.width / camera.detect.height > 2) {
|
||||
return "absolute left-2 right-2 top-[50%] -translate-y-[50%]";
|
||||
} else {
|
||||
return "absolute top-2 bottom-2 left-[50%] -translate-x-[50%]";
|
||||
}
|
||||
}, [camera, isPortrait]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`size-full flex flex-col ${isMobile ? "landscape:flex-row" : ""}`}
|
||||
>
|
||||
<div
|
||||
className={`w-full h-12 flex flex-row items-center justify-between ${isMobile ? "landscape:w-min landscape:h-full landscape:flex-col" : ""}`}
|
||||
>
|
||||
<Button
|
||||
className={`rounded-lg ${isMobile ? "ml-2" : "ml-0"}`}
|
||||
size={isMobile ? "icon" : "default"}
|
||||
onClick={() => navigate(-1)}
|
||||
>
|
||||
<IoMdArrowBack className="size-5 lg:mr-[10px]" />
|
||||
{isDesktop && "Back"}
|
||||
</Button>
|
||||
<TooltipProvider>
|
||||
<div
|
||||
className={`flex flex-row items-center gap-1 mr-1 *:rounded-lg ${isMobile ? "landscape:flex-col" : ""}`}
|
||||
>
|
||||
<CameraFeatureToggle
|
||||
className="p-2 md:p-0"
|
||||
Icon={audio ? GiSpeaker : GiSpeakerOff}
|
||||
isActive={audio}
|
||||
title={`${audio ? "Disable" : "Enable"} Camera Audio`}
|
||||
onClick={() => setAudio(!audio)}
|
||||
/>
|
||||
<CameraFeatureToggle
|
||||
className="p-2 md:p-0"
|
||||
Icon={detectState == "ON" ? MdPersonSearch : MdPersonOff}
|
||||
isActive={detectState == "ON"}
|
||||
title={`${detectState == "ON" ? "Disable" : "Enable"} Detect`}
|
||||
onClick={() => sendDetect(detectState == "ON" ? "OFF" : "ON")}
|
||||
/>
|
||||
<CameraFeatureToggle
|
||||
className="p-2 md:p-0"
|
||||
Icon={recordState == "ON" ? LuVideo : LuVideoOff}
|
||||
isActive={recordState == "ON"}
|
||||
title={`${recordState == "ON" ? "Disable" : "Enable"} Recording`}
|
||||
onClick={() => sendRecord(recordState == "ON" ? "OFF" : "ON")}
|
||||
/>
|
||||
<CameraFeatureToggle
|
||||
className="p-2 md:p-0"
|
||||
Icon={snapshotState == "ON" ? MdPhotoCamera : MdNoPhotography}
|
||||
isActive={snapshotState == "ON"}
|
||||
title={`${snapshotState == "ON" ? "Disable" : "Enable"} Snapshots`}
|
||||
onClick={() => sendSnapshot(snapshotState == "ON" ? "OFF" : "ON")}
|
||||
/>
|
||||
{camera.audio.enabled_in_config && (
|
||||
<CameraFeatureToggle
|
||||
className="p-2 md:p-0"
|
||||
Icon={audioState == "ON" ? LuEar : LuEarOff}
|
||||
isActive={audioState == "ON"}
|
||||
title={`${audioState == "ON" ? "Disable" : "Enable"} Audio Detect`}
|
||||
onClick={() => sendAudio(audioState == "ON" ? "OFF" : "ON")}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
|
||||
<div className="relative size-full">
|
||||
<div
|
||||
className={growClassName}
|
||||
style={{ aspectRatio: camera.detect.width / camera.detect.height }}
|
||||
>
|
||||
<LivePlayer
|
||||
key={camera.name}
|
||||
className="size-full"
|
||||
windowVisible
|
||||
showStillWithoutActivity={false}
|
||||
cameraConfig={camera}
|
||||
playAudio={audio}
|
||||
preferredLiveMode={isSafari ? "webrtc" : "mse"}
|
||||
/>
|
||||
</div>
|
||||
{camera.onvif.host != "" && <PtzControlPanel camera={camera.name} />}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function PtzControlPanel({ camera }: { camera: string }) {
|
||||
const { data: ptz } = useSWR<CameraPtzInfo>(`${camera}/ptz/info`);
|
||||
|
||||
const { send: sendPtz } = usePtzCommand(camera);
|
||||
|
||||
const onStop = useCallback(
|
||||
(e: React.SyntheticEvent) => {
|
||||
e.preventDefault();
|
||||
sendPtz("STOP");
|
||||
},
|
||||
[sendPtz],
|
||||
);
|
||||
|
||||
useKeyboardListener(
|
||||
["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "+", "-"],
|
||||
(key, down, repeat) => {
|
||||
if (repeat) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!down) {
|
||||
sendPtz("STOP");
|
||||
return;
|
||||
}
|
||||
|
||||
switch (key) {
|
||||
case "ArrowLeft":
|
||||
sendPtz("MOVE_LEFT");
|
||||
break;
|
||||
case "ArrowRight":
|
||||
sendPtz("MOVE_RIGHT");
|
||||
break;
|
||||
case "ArrowUp":
|
||||
sendPtz("MOVE_UP");
|
||||
break;
|
||||
case "ArrowDown":
|
||||
sendPtz("MOVE_DOWN");
|
||||
break;
|
||||
case "+":
|
||||
sendPtz("ZOOM_IN");
|
||||
break;
|
||||
case "-":
|
||||
sendPtz("ZOOM_OUT");
|
||||
break;
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="absolute left-[50%] -translate-x-[50%] bottom-[10%] flex items-center gap-1">
|
||||
{ptz?.features?.includes("pt") && (
|
||||
<>
|
||||
<Button
|
||||
onMouseDown={(e) => {
|
||||
e.preventDefault();
|
||||
sendPtz("MOVE_LEFT");
|
||||
}}
|
||||
onTouchStart={(e) => {
|
||||
e.preventDefault();
|
||||
sendPtz("MOVE_LEFT");
|
||||
}}
|
||||
onMouseUp={onStop}
|
||||
onTouchEnd={onStop}
|
||||
>
|
||||
<FaAngleLeft />
|
||||
</Button>
|
||||
<Button
|
||||
onMouseDown={(e) => {
|
||||
e.preventDefault();
|
||||
sendPtz("MOVE_UP");
|
||||
}}
|
||||
onTouchStart={(e) => {
|
||||
e.preventDefault();
|
||||
sendPtz("MOVE_UP");
|
||||
}}
|
||||
onMouseUp={onStop}
|
||||
onTouchEnd={onStop}
|
||||
>
|
||||
<FaAngleUp />
|
||||
</Button>
|
||||
<Button
|
||||
onMouseDown={(e) => {
|
||||
e.preventDefault();
|
||||
sendPtz("MOVE_DOWN");
|
||||
}}
|
||||
onTouchStart={(e) => {
|
||||
e.preventDefault();
|
||||
sendPtz("MOVE_DOWN");
|
||||
}}
|
||||
onMouseUp={onStop}
|
||||
onTouchEnd={onStop}
|
||||
>
|
||||
<FaAngleDown />
|
||||
</Button>
|
||||
<Button
|
||||
onMouseDown={(e) => {
|
||||
e.preventDefault();
|
||||
sendPtz("MOVE_RIGHT");
|
||||
}}
|
||||
onTouchStart={(e) => {
|
||||
e.preventDefault();
|
||||
sendPtz("MOVE_RIGHT");
|
||||
}}
|
||||
onMouseUp={onStop}
|
||||
onTouchEnd={onStop}
|
||||
>
|
||||
<FaAngleRight />
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
{ptz?.features?.includes("zoom") && (
|
||||
<>
|
||||
<Button
|
||||
onMouseDown={(e) => {
|
||||
e.preventDefault();
|
||||
sendPtz("ZOOM_IN");
|
||||
}}
|
||||
onTouchStart={(e) => {
|
||||
e.preventDefault();
|
||||
sendPtz("ZOOM_IN");
|
||||
}}
|
||||
onMouseUp={onStop}
|
||||
onTouchEnd={onStop}
|
||||
>
|
||||
<MdZoomIn />
|
||||
</Button>
|
||||
<Button
|
||||
onMouseDown={(e) => {
|
||||
e.preventDefault();
|
||||
sendPtz("ZOOM_OUT");
|
||||
}}
|
||||
onTouchStart={(e) => {
|
||||
e.preventDefault();
|
||||
sendPtz("ZOOM_OUT");
|
||||
}}
|
||||
onMouseUp={onStop}
|
||||
onTouchEnd={onStop}
|
||||
>
|
||||
<MdZoomOut />
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
{(ptz?.presets?.length ?? 0) > 0 && (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button>
|
||||
<BsThreeDotsVertical />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
{ptz?.presets.map((preset) => {
|
||||
return (
|
||||
<DropdownMenuItem onSelect={() => sendPtz(`preset_${preset}`)}>
|
||||
{preset}
|
||||
</DropdownMenuItem>
|
||||
);
|
||||
})}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
143
web/src/views/live/LiveDashboardView.tsx
Normal file
143
web/src/views/live/LiveDashboardView.tsx
Normal file
@@ -0,0 +1,143 @@
|
||||
import { useFrigateReviews } from "@/api/ws";
|
||||
import Logo from "@/components/Logo";
|
||||
import { AnimatedEventThumbnail } from "@/components/image/AnimatedEventThumbnail";
|
||||
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";
|
||||
import { CameraConfig } from "@/types/frigateConfig";
|
||||
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[];
|
||||
onSelectCamera: (camera: string) => void;
|
||||
};
|
||||
export default function LiveDashboardView({
|
||||
cameras,
|
||||
onSelectCamera,
|
||||
}: LiveDashboardViewProps) {
|
||||
// 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") {
|
||||
updateEvents();
|
||||
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]);
|
||||
|
||||
return (
|
||||
<div className="size-full overflow-y-scroll px-2">
|
||||
{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" />
|
||||
<div />
|
||||
<div className="flex items-center gap-1">
|
||||
<Button
|
||||
className={layout == "grid" ? "text-blue-600 bg-blue-200" : ""}
|
||||
size="xs"
|
||||
variant="secondary"
|
||||
onClick={() => setLayout("grid")}
|
||||
>
|
||||
<CiGrid31 className="m-1" />
|
||||
</Button>
|
||||
<Button
|
||||
className={layout == "list" ? "text-blue-600 bg-blue-200" : ""}
|
||||
size="xs"
|
||||
variant="secondary"
|
||||
onClick={() => setLayout("list")}
|
||||
>
|
||||
<CiGrid2H className="m-1" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{events && events.length > 0 && (
|
||||
<ScrollArea>
|
||||
<TooltipProvider>
|
||||
<div className="flex">
|
||||
{events.map((event) => {
|
||||
return <AnimatedEventThumbnail key={event.id} event={event} />;
|
||||
})}
|
||||
</div>
|
||||
</TooltipProvider>
|
||||
<ScrollBar orientation="horizontal" />
|
||||
</ScrollArea>
|
||||
)}
|
||||
|
||||
<div
|
||||
className={`mt-4 grid ${layout == "grid" ? "grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4" : ""} gap-2 md:gap-4 *:rounded-2xl *:bg-black`}
|
||||
>
|
||||
{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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user