administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-08 20:25:26 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

fix corner rounding

Browse Source
This commit is contained in:
Josh Hawkins 2024-02-20 14:59:05 -06:00
parent 12ed066dce
commit a3693e907f
2 changed files with 59 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -127,10 +127,6 @@ export function EventSegment({
minimapEndTime, minimapEndTime,
severityType, severityType,
}: EventSegmentProps) { }: EventSegmentProps) {
const { isStartOfEvent, isEndOfEvent } = useEventUtils(
events,
segmentDuration
);
const { const {
getSeverity, getSeverity,
getReviewed, getReviewed,
@ -148,7 +144,7 @@ export function EventSegment({
() => getReviewed(segmentTime), () => getReviewed(segmentTime),
[getReviewed, segmentTime] [getReviewed, segmentTime]
); );
const showRoundedCorners = useMemo( const { roundTop, roundBottom } = useMemo(
() => shouldShowRoundedCorners(segmentTime), () => shouldShowRoundedCorners(segmentTime),
[shouldShowRoundedCorners, segmentTime] [shouldShowRoundedCorners, segmentTime]
); );
@ -239,16 +235,8 @@ export function EventSegment({
key={`${segmentKey}_primary_data`} key={`${segmentKey}_primary_data`}
className={` className={`
w-full h-2 bg-gradient-to-r w-full h-2 bg-gradient-to-r
${ ${roundBottom ? "rounded-bl-full rounded-br-full" : ""}
showRoundedCorners && isStartOfEvent(segmentTime) ${roundTop ? "rounded-tl-full rounded-tr-full" : ""}
? "rounded-bl-full rounded-br-full"
: ""
}
${
showRoundedCorners && isEndOfEvent(segmentTime)
? "rounded-tl-full rounded-tr-full"
: ""
}
${severityColors[severity]} ${severityColors[severity]}
`} `}
@ -262,16 +250,8 @@ export function EventSegment({
key={`${segmentKey}_secondary_data`} key={`${segmentKey}_secondary_data`}
className={` className={`
w-1 h-2 bg-gradient-to-r w-1 h-2 bg-gradient-to-r
${ ${roundBottom ? "rounded-bl-full rounded-br-full" : ""}
showRoundedCorners && isStartOfEvent(segmentTime) ${roundTop ? "rounded-tl-full rounded-tr-full" : ""}
? "rounded-bl-full rounded-br-full"
: ""
}
${
showRoundedCorners && isEndOfEvent(segmentTime)
? "rounded-tl-full rounded-tr-full"
: ""
}
${severityColors[severity]} ${severityColors[severity]}
`} `}

63
web/src/hooks/use-segment-utils.ts
View File

@ -60,27 +60,72 @@ export const useSegmentUtils = (
}, [events, getSegmentStart, getSegmentEnd]); }, [events, getSegmentStart, getSegmentEnd]);
const shouldShowRoundedCorners = useCallback( const shouldShowRoundedCorners = useCallback(
(segmentTime: number): boolean => { (segmentTime: number): { roundTop: boolean, roundBottom: boolean } => {
const prevSegmentTime = segmentTime - segmentDuration; const prevSegmentTime = segmentTime - segmentDuration;
const nextSegmentTime = segmentTime + segmentDuration; const nextSegmentTime = segmentTime + segmentDuration;
const hasPrevEvent = events.some((e) => { const severityEvents = events.filter(e => e.severity === severityType);
const otherEvents = events.filter(e => e.severity !== severityType);
const hasPrevSeverityEvent = severityEvents.some(e => {
return ( return (
prevSegmentTime >= getSegmentStart(e.start_time) && prevSegmentTime >= getSegmentStart(e.start_time) &&
prevSegmentTime < getSegmentEnd(e.end_time) && prevSegmentTime < getSegmentEnd(e.end_time)
e.severity === severityType
); );
}); });
const hasNextEvent = events.some((e) => { const hasNextSeverityEvent = severityEvents.some(e => {
return ( return (
nextSegmentTime >= getSegmentStart(e.start_time) && nextSegmentTime > getSegmentStart(e.start_time) &&
nextSegmentTime < getSegmentEnd(e.end_time) && nextSegmentTime < getSegmentEnd(e.end_time)
e.severity === severityType
); );
}); });
return !hasPrevEvent || !hasNextEvent; const hasPrevOtherEvent = otherEvents.some(e => {
return (
prevSegmentTime >= getSegmentStart(e.start_time) &&
prevSegmentTime < getSegmentEnd(e.end_time)
);
});
const hasNextOtherEvent = otherEvents.some(e => {
return (
nextSegmentTime > getSegmentStart(e.start_time) &&
nextSegmentTime < getSegmentEnd(e.end_time)
);
});
const hasOverlappingSeverityEvent = severityEvents.some(e => {
return segmentTime >= getSegmentStart(e.start_time) &&
segmentTime < getSegmentEnd(e.end_time)
});
const hasOverlappingOtherEvent = otherEvents.some(e => {
return segmentTime >= getSegmentStart(e.start_time) &&
segmentTime < getSegmentEnd(e.end_time)
});
let roundTop = false;
let roundBottom = false;
if (hasOverlappingSeverityEvent) {
roundBottom = !hasPrevSeverityEvent;
roundTop = !hasNextSeverityEvent;
} else if (hasOverlappingOtherEvent) {
roundBottom = !hasPrevOtherEvent;
roundTop = !hasNextOtherEvent;
} else {
roundTop = !hasNextSeverityEvent && !hasNextOtherEvent;
roundBottom = !hasPrevSeverityEvent && !hasPrevOtherEvent;
}
return {
roundTop,
roundBottom
};
}, },
[events, getSegmentStart, getSegmentEnd, segmentDuration, severityType] [events, getSegmentStart, getSegmentEnd, segmentDuration, severityType]
); );