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

better alignment of motion timeline segments

Browse Source
This commit is contained in:
Josh Hawkins 2024-03-26 16:09:04 -05:00
parent 3da16b1565
commit 81baf285a9
6 changed files with 18 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/components/timeline/EventReviewTimeline.tsx
View File

@ -166,7 +166,7 @@ export function EventReviewTimeline({
// Generate segments for the timeline // Generate segments for the timeline
const generateSegments = useCallback(() => { const generateSegments = useCallback(() => {
const segmentCount = timelineDuration / segmentDuration; const segmentCount = Math.ceil(timelineDuration / segmentDuration);
return Array.from({ length: segmentCount }, (_, index) => { return Array.from({ length: segmentCount }, (_, index) => {
const segmentTime = timelineStartAligned - index * segmentDuration; const segmentTime = timelineStartAligned - index * segmentDuration;

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

@ -139,7 +139,7 @@ export function EventSegment({
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [showMinimap, isFirstSegmentInMinimap, events, segmentDuration]); }, [showMinimap, isFirstSegmentInMinimap, events, segmentDuration]);
const segmentClasses = `h-2 relative w-full ${ const segmentClasses = `h-[8px] relative w-full ${
showMinimap showMinimap
? isInMinimapRange ? isInMinimapRange
? "bg-secondary-highlight" ? "bg-secondary-highlight"
@ -149,7 +149,7 @@ export function EventSegment({
: "" : ""
} ${ } ${
isFirstSegmentInMinimap || isLastSegmentInMinimap isFirstSegmentInMinimap || isLastSegmentInMinimap
? "relative h-2 border-b-2 border-neutral-600" ? "relative h-[8px] border-b-2 border-neutral-600"
: "" : ""
}`; }`;
@ -230,16 +230,16 @@ export function EventSegment({
{severityValue === displaySeverityType && ( {severityValue === displaySeverityType && (
<HoverCard openDelay={200} closeDelay={100}> <HoverCard openDelay={200} closeDelay={100}>
<HoverCardTrigger asChild> <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="absolute left-1/2 transform -translate-x-1/2 w-[20px] md:w-[40px] h-[8px] z-10 cursor-pointer">
<div className="flex flex-row justify-center w-[20px] md:w-[40px]"> <div className="flex flex-row justify-center w-[20px] md:w-[40px]">
<div className="flex justify-center"> <div className="flex justify-center">
<div <div
className="absolute left-1/2 transform -translate-x-1/2 w-[8px] h-2 ml-[2px] z-10 cursor-pointer" className="absolute left-1/2 transform -translate-x-1/2 w-[8px] h-[8px] ml-[2px] z-10 cursor-pointer"
data-severity={severityValue} data-severity={severityValue}
> >
<div <div
key={`${segmentKey}_${index}_primary_data`} 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]}`} className={`w-full h-[8px] bg-gradient-to-r ${roundBottomPrimary ? "rounded-bl-full rounded-br-full" : ""} ${roundTopPrimary ? "rounded-tl-full rounded-tr-full" : ""} ${severityColors[severityValue]}`}
></div> ></div>
</div> </div>
</div> </div>

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

@ -144,7 +144,7 @@ export function MotionSegment({
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [showMinimap, isFirstSegmentInMinimap, events, segmentDuration]); }, [showMinimap, isFirstSegmentInMinimap, events, segmentDuration]);
const segmentClasses = `h-2 relative w-full ${ const segmentClasses = `h-[8px] relative w-full ${
showMinimap showMinimap
? isInMinimapRange ? isInMinimapRange
? "bg-secondary-highlight" ? "bg-secondary-highlight"
@ -154,7 +154,7 @@ export function MotionSegment({
: "" : ""
} ${ } ${
isFirstSegmentInMinimap || isLastSegmentInMinimap isFirstSegmentInMinimap || isLastSegmentInMinimap
? "relative h-2 border-b-2 border-gray-500" ? "relative h-[8px] border-b-2 border-gray-500"
: "" : ""
}`; }`;
@ -223,9 +223,9 @@ export function MotionSegment({
</> </>
)} )}
<div className="absolute left-1/2 transform -translate-x-1/2 w-[20px] md:w-[40px] h-2 z-10 cursor-pointer"> <div className="absolute left-1/2 transform -translate-x-1/2 w-[20px] md:w-[40px] h-[8px] z-10 cursor-pointer">
<div className="flex flex-row justify-center w-[20px] md:w-[40px] mb-[1px]"> <div className="flex flex-row justify-center w-[20px] md:w-[40px] pt-[1px] mb-[1px]">
<div className="flex justify-center"> <div className="flex justify-center mb-[1px]">
<div <div
key={`${segmentKey}_motion_data_1`} key={`${segmentKey}_motion_data_1`}
data-motion-value={secondHalfSegmentWidth} data-motion-value={secondHalfSegmentWidth}
@ -237,7 +237,7 @@ export function MotionSegment({
</div> </div>
</div> </div>
<div className="flex flex-row justify-center w-[20px] md:w-[40px]"> <div className="flex flex-row justify-center pb-[1px] w-[20px] md:w-[40px]">
<div className="flex justify-center"> <div className="flex justify-center">
<div <div
key={`${segmentKey}_motion_data_2`} key={`${segmentKey}_motion_data_2`}
@ -256,11 +256,11 @@ export function MotionSegment({
if (severityValue > 0) { if (severityValue > 0) {
return ( return (
<React.Fragment key={index}> <React.Fragment key={index}>
<div className="absolute right-0 h-2 z-10"> <div className="absolute right-0 h-[8px] z-10">
<div <div
key={`${segmentKey}_${index}_secondary_data`} key={`${segmentKey}_${index}_secondary_data`}
className={` className={`
w-1 h-2 bg-gradient-to-r w-1 h-[8px] bg-gradient-to-r
${roundBottomSecondary ? "rounded-bl-full rounded-br-full" : ""} ${roundBottomSecondary ? "rounded-bl-full rounded-br-full" : ""}
${roundTopSecondary ? "rounded-tl-full rounded-tr-full" : ""} ${roundTopSecondary ? "rounded-tl-full rounded-tr-full" : ""}
${severityColors[severityValue]} ${severityColors[severityValue]}

2
web/src/components/timeline/SummaryTimeline.tsx
View File

@ -57,7 +57,7 @@ export function SummaryTimeline({
// Generate segments for the timeline // Generate segments for the timeline
const generateSegments = useCallback(() => { const generateSegments = useCallback(() => {
const segmentCount = reviewTimelineDuration / segmentDuration; const segmentCount = Math.ceil(reviewTimelineDuration / segmentDuration);
if (segmentHeight) { if (segmentHeight) {
return Array.from({ length: segmentCount }, (_, index) => { return Array.from({ length: segmentCount }, (_, index) => {

4
web/src/components/timeline/segment-metadata.tsx
View File

@ -59,7 +59,7 @@ export function MinimapBounds({
export function Tick({ timestamp, timestampSpread }: TickSegmentProps) { export function Tick({ timestamp, timestampSpread }: TickSegmentProps) {
return ( return (
<div className="absolute"> <div className="absolute">
<div className="flex items-end content-end w-[12px] h-2"> <div className="flex items-end content-end w-[12px] h-[8px]">
<div <div
className={`pointer-events-none select-none h-0.5 ${ className={`pointer-events-none select-none h-0.5 ${
timestamp.getMinutes() % timestampSpread === 0 && timestamp.getMinutes() % timestampSpread === 0 &&
@ -84,7 +84,7 @@ export function Timestamp({
segmentKey, segmentKey,
}: TimestampSegmentProps) { }: TimestampSegmentProps) {
return ( return (
<div className="absolute left-[15px] h-2 z-10"> <div className="absolute left-[15px] h-[8px] z-10">
{!isFirstSegmentInMinimap && !isLastSegmentInMinimap && ( {!isFirstSegmentInMinimap && !isLastSegmentInMinimap && (
<div <div
key={`${segmentKey}_timestamp`} key={`${segmentKey}_timestamp`}

2
web/src/hooks/use-camera-activity.ts
View File

@ -82,7 +82,7 @@ export function useCameraMotionNextTimestamp(
}); });
const noMotionRanges = useMemo(() => { const noMotionRanges = useMemo(() => {
if (!motionData || !reviewItems) { if (!motionData || !reviewItems || !motionData) {
return; return;
} }