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

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

@ -60,27 +60,72 @@ export const useSegmentUtils = (
}, [events, getSegmentStart, getSegmentEnd]);
const shouldShowRoundedCorners = useCallback(
(segmentTime: number): boolean => {
(segmentTime: number): { roundTop: boolean, roundBottom: boolean } => {
const prevSegmentTime = 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 (
prevSegmentTime >= getSegmentStart(e.start_time) &&
prevSegmentTime < getSegmentEnd(e.end_time) &&
e.severity === severityType
prevSegmentTime < getSegmentEnd(e.end_time)
);
});
const hasNextEvent = events.some((e) => {
const hasNextSeverityEvent = severityEvents.some(e => {
return (
nextSegmentTime >= getSegmentStart(e.start_time) &&
nextSegmentTime < getSegmentEnd(e.end_time) &&
e.severity === severityType
nextSegmentTime > getSegmentStart(e.start_time) &&
nextSegmentTime < getSegmentEnd(e.end_time)
);
});
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]
);