Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2024-11-21 19:07:46 +01:00
Code Issues Projects Releases Wiki Activity

Add outline for alerts/detections in motion review (#10642)

Browse Source
This commit is contained in:
Josh Hawkins 2024-03-24 07:54:34 -05:00 committed by GitHub
parent d260c6926a
commit f91dc37399
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 51 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/components/player/LivePlayer.tsx
View File

@ -142,7 +142,7 @@ export default function LivePlayer({
<div
className={`relative flex justify-center ${liveMode == "jsmpeg" ? "size-full" : "w-full"} outline cursor-pointer ${
activeTracking
? "outline-severity_alert outline-1 rounded-2xl shadow-[0_0_6px_2px] shadow-severity_alert"
? "outline-severity_alert outline-3 rounded-2xl shadow-severity_alert"
: "outline-0 outline-background"
} transition-all duration-500 ${className}`}
onClick={onClick}

56
web/src/components/timeline/EventSegment.tsx
View File

@ -179,13 +179,13 @@ export function EventSegment({
`outline-severity_${severityType}`,
`shadow-severity_${severityType}`,
);
element.classList.add("outline-4", "shadow-[0_0_6px_1px]");
element.classList.remove("outline-0", "shadow-none");
element.classList.add("outline-3");
element.classList.remove("outline-0");
// Remove the classes after a short timeout
setTimeout(() => {
element.classList.remove("outline-4", "shadow-[0_0_6px_1px]");
element.classList.add("outline-0", "shadow-none");
element.classList.remove("outline-3");
element.classList.add("outline-0");
}, 3000);
}
@ -226,36 +226,36 @@ export function EventSegment({
{severity.map((severityValue: number, index: number) => (
<React.Fragment key={index}>
{severityValue === displaySeverityType && (
<div className="absolute left-1/2 transform -translate-x-1/2 w-[20px] md:w-[40px] h-2 z-10 cursor-pointer">
<div className="flex flex-row justify-center w-[20px] md:w-[40px]">
<div className="flex justify-center">
<HoverCard openDelay={200} closeDelay={100}>
<div
className="absolute left-1/2 transform -translate-x-1/2 w-[8px] h-2 ml-[2px] z-10 cursor-pointer"
data-severity={severityValue}
>
<HoverCardTrigger asChild>
<HoverCard openDelay={200} closeDelay={100}>
<HoverCardTrigger asChild>
<div className="absolute left-1/2 transform -translate-x-1/2 w-[20px] md:w-[40px] h-2 z-10 cursor-pointer">
<div className="flex flex-row justify-center w-[20px] md:w-[40px]">
<div className="flex justify-center">
<div
className="absolute left-1/2 transform -translate-x-1/2 w-[8px] h-2 ml-[2px] z-10 cursor-pointer"
data-severity={severityValue}
>
<div
key={`${segmentKey}_${index}_primary_data`}
className={`w-full h-2 bg-gradient-to-r ${roundBottomPrimary ? "rounded-bl-full rounded-br-full" : ""} ${roundTopPrimary ? "rounded-tl-full rounded-tr-full" : ""} ${severityColors[severityValue]}`}
></div>
</HoverCardTrigger>
<HoverCardPortal>
<HoverCardContent
className="rounded-2xl w-[250px] p-2"
side="left"
>
<img
className="rounded-lg"
src={`${apiHost}${eventThumbnail.replace("/media/frigate/", "")}`}
/>
</HoverCardContent>
</HoverCardPortal>
</div>
</div>
</HoverCard>
</div>
</div>
</div>
</div>
</HoverCardTrigger>
<HoverCardPortal>
<HoverCardContent
className="rounded-2xl w-[250px] p-2"
side="left"
>
<img
className="rounded-lg"
src={`${apiHost}${eventThumbnail.replace("/media/frigate/", "")}`}
/>
</HoverCardContent>
</HoverCardPortal>
</HoverCard>
)}
</React.Fragment>
))}

26
web/src/views/events/EventView.tsx
View File

@ -519,7 +519,7 @@ function DetectionReview({
)}
<div
className="w-full m-2 grid sm:grid-cols-2 md:grid-cols-3 3xl:grid-cols-4 gap-2 md:gap-4"
className="w-full m-2 p-1 grid sm:grid-cols-2 md:grid-cols-3 3xl:grid-cols-4 gap-2 md:gap-4"
ref={contentRef}
>
{currentItems &&
@ -534,7 +534,7 @@ function DetectionReview({
data-segment-start={
alignStartDateToTimeline(value.start_time) - segmentDuration
}
className={`review-item outline outline-offset-1 rounded-lg shadow-none transition-all my-1 md:my-0 ${selected ? `outline-4 shadow-[0_0_6px_1px] outline-severity_${value.severity} shadow-severity_${value.severity}` : "outline-0 duration-500"}`}
className={`review-item outline outline-offset-1 rounded-lg shadow-none transition-all my-1 md:my-0 ${selected ? `outline-3 outline-severity_${value.severity} shadow-severity_${value.severity}` : "outline-0 duration-500"}`}
>
<div className="aspect-video rounded-lg overflow-hidden">
<PreviewThumbnailPlayer
@ -758,6 +758,23 @@ function MotionReview({
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [playing, playbackRate]);
const getDetectionType = useCallback(
(cameraName: string) => {
if (motionOnly) {
return null;
}
const matchingItem = reviewItems?.all.find(
(item) =>
currentTime >= item.start_time &&
currentTime <= item.end_time &&
item.camera === cameraName,
);
return matchingItem ? matchingItem.severity : null;
},
[reviewItems, currentTime, motionOnly],
);
if (!relevantPreviews) {
return <ActivityIndicator />;
}
@ -767,7 +784,7 @@ function MotionReview({
<div className="flex flex-1 flex-wrap content-start gap-2 md:gap-4 overflow-y-auto no-scrollbar">
<div
ref={contentRef}
className="w-full m-2 grid sm:grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4 gap-2 md:gap-4 overflow-auto no-scrollbar"
className="w-full m-2 p-1 grid sm:grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4 gap-2 md:gap-4 overflow-auto no-scrollbar"
>
{reviewCameras.map((camera) => {
let grow;
@ -779,10 +796,11 @@ function MotionReview({
} else {
grow = "aspect-video";
}
const detectionType = getDetectionType(camera.name);
return (
<PreviewPlayer
key={camera.name}
className={`${grow}`}
className={`${detectionType ? `outline outline-3 outline-offset-1 outline-severity_${detectionType}` : "outline-0 shadow-none"} rounded-2xl ${grow}`}
camera={camera.name}
timeRange={currentTimeRange}
startTime={startTime}