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

use alert/detection colors as background for motion segments (#11182)

Browse Source
This commit is contained in:
Josh Hawkins 2024-04-30 19:38:22 -05:00 committed by GitHub
parent 297444375c
commit bb335638a4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 12 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -38,12 +38,8 @@ export function MotionSegment({
dense, dense,
}: MotionSegmentProps) { }: MotionSegmentProps) {
const severityType = "all"; const severityType = "all";
const { const { getSeverity, getReviewed, displaySeverityType } =
getSeverity, useEventSegmentUtils(segmentDuration, events, severityType);
getReviewed,
displaySeverityType,
shouldShowRoundedCorners,
} = useEventSegmentUtils(segmentDuration, events, severityType);
const { interpolateMotionAudioData } = useMotionSegmentUtils( const { interpolateMotionAudioData } = useMotionSegmentUtils(
segmentDuration, segmentDuration,
@ -68,11 +64,6 @@ export function MotionSegment({
[getReviewed, segmentTime], [getReviewed, segmentTime],
); );
const { roundTopSecondary, roundBottomSecondary } = useMemo(
() => shouldShowRoundedCorners(segmentTime),
[shouldShowRoundedCorners, segmentTime],
);
const timestamp = useMemo(() => new Date(segmentTime * 1000), [segmentTime]); const timestamp = useMemo(() => new Date(segmentTime * 1000), [segmentTime]);
const segmentKey = useMemo(() => segmentTime, [segmentTime]); const segmentKey = useMemo(() => segmentTime, [segmentTime]);
@ -152,16 +143,16 @@ export function MotionSegment({
const animationClassesFirstHalf = `motion-segment ${firstHalfSegmentWidth > 0 ? "hidden" : ""} const animationClassesFirstHalf = `motion-segment ${firstHalfSegmentWidth > 0 ? "hidden" : ""}
zoom-in-[0.2] ${firstHalfSegmentWidth < 5 ? "duration-200" : "duration-1000"}`; zoom-in-[0.2] ${firstHalfSegmentWidth < 5 ? "duration-200" : "duration-1000"}`;
const severityColors: { [key: number]: string } = { const severityColorsBg: { [key: number]: string } = {
1: reviewed 1: reviewed
? "from-severity_significant_motion-dimmed/50 to-severity_significant_motion/50" ? "from-severity_significant_motion-dimmed/10 to-severity_significant_motion/10"
: "from-severity_significant_motion-dimmed to-severity_significant_motion", : "from-severity_significant_motion-dimmed/20 to-severity_significant_motion/20",
2: reviewed 2: reviewed
? "from-severity_detection-dimmed/50 to-severity_detection/50" ? "from-severity_detection-dimmed/10 to-severity_detection/10"
: "from-severity_detection-dimmed to-severity_detection", : "from-severity_detection-dimmed/20 to-severity_detection/20",
3: reviewed 3: reviewed
? "from-severity_alert-dimmed/50 to-severity_alert/50" ? "from-severity_alert-dimmed/10 to-severity_alert/10"
: "from-severity_alert-dimmed to-severity_alert", : "from-severity_alert-dimmed/20 to-severity_alert/20",
}; };
const segmentClick = useCallback(() => { const segmentClick = useCallback(() => {
@ -179,7 +170,7 @@ export function MotionSegment({
<div <div
key={segmentKey} key={segmentKey}
data-segment-id={segmentKey} data-segment-id={segmentKey}
className={`segment ${firstHalfSegmentWidth > 0 || secondHalfSegmentWidth > 0 ? "has-data" : ""} ${segmentClasses}`} className={`segment ${firstHalfSegmentWidth > 0 || secondHalfSegmentWidth > 0 ? "has-data" : ""} ${segmentClasses} bg-gradient-to-r ${severityColorsBg[severity[0]]}`}
onClick={segmentClick} onClick={segmentClick}
onTouchEnd={(event) => handleTouchStart(event, segmentClick)} onTouchEnd={(event) => handleTouchStart(event, segmentClick)}
> >
@ -219,7 +210,7 @@ export function MotionSegment({
<div <div
key={`${segmentKey}_motion_data_1`} key={`${segmentKey}_motion_data_1`}
data-motion-value={secondHalfSegmentWidth} data-motion-value={secondHalfSegmentWidth}
className={`${isDesktop && animationClassesSecondHalf} h-[2px] rounded-full ${severity[0] != 0 ? "bg-motion_review-dimmed" : "bg-motion_review"}`} className={`${isDesktop && animationClassesSecondHalf} h-[2px] rounded-full bg-motion_review`}
style={{ style={{
width: secondHalfSegmentWidth || 1, width: secondHalfSegmentWidth || 1,
}} }}
@ -232,7 +223,7 @@ export function MotionSegment({
<div <div
key={`${segmentKey}_motion_data_2`} key={`${segmentKey}_motion_data_2`}
data-motion-value={firstHalfSegmentWidth} data-motion-value={firstHalfSegmentWidth}
className={`${isDesktop && animationClassesFirstHalf} h-[2px] rounded-full ${severity[0] != 0 ? "bg-motion_review-dimmed" : "bg-motion_review"}`} className={`${isDesktop && animationClassesFirstHalf} h-[2px] rounded-full bg-motion_review`}
style={{ style={{
width: firstHalfSegmentWidth || 1, width: firstHalfSegmentWidth || 1,
}} }}
@ -240,29 +231,6 @@ export function MotionSegment({
</div> </div>
</div> </div>
</div> </div>
{!motionOnly &&
severity.map((severityValue: number, index: number) => {
if (severityValue > 0) {
return (
<React.Fragment key={index}>
<div className="absolute right-0 h-[8px] z-10">
<div
key={`${segmentKey}_${index}_secondary_data`}
className={`
w-1 h-[8px] bg-gradient-to-r
${roundBottomSecondary ? "rounded-bl-full rounded-br-full" : ""}
${roundTopSecondary ? "rounded-tl-full rounded-tr-full" : ""}
${severityColors[severityValue]}
`}
></div>
</div>
</React.Fragment>
);
} else {
return null;
}
})}
</div> </div>
)} )}
</> </>