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

Timeline tweaks (#10693)

Browse Source 
* make segment height static

* fix timeline overscrolling

* better alignment of motion timeline segments
This commit is contained in:
Josh Hawkins 2024-03-26 16:36:28 -05:00 committed by GitHub
parent 1377d33e25
commit c82ed43c13
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 48 additions and 55 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
const generateSegments = useCallback(() => {
const segmentCount = timelineDuration / segmentDuration;
const segmentCount = Math.ceil(timelineDuration / segmentDuration);
return Array.from({ length: segmentCount }, (_, index) => {
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
}, [showMinimap, isFirstSegmentInMinimap, events, segmentDuration]);
const segmentClasses = `h-2 relative w-full ${
const segmentClasses = `h-[8px] relative w-full ${
showMinimap
? isInMinimapRange
? "bg-secondary-highlight"
@ -149,7 +149,7 @@ export function EventSegment({
: ""
} ${
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 && (
<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="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 justify-center">
<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}
>
<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]}`}
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>

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

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

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

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

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

@ -57,7 +57,7 @@ export function SummaryTimeline({
// Generate segments for the timeline
const generateSegments = useCallback(() => {
const segmentCount = reviewTimelineDuration / segmentDuration;
const segmentCount = Math.ceil(reviewTimelineDuration / segmentDuration);
if (segmentHeight) {
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) {
return (
<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
className={`pointer-events-none select-none h-0.5 ${
timestamp.getMinutes() % timestampSpread === 0 &&
@ -84,7 +84,7 @@ export function Timestamp({
segmentKey,
}: TimestampSegmentProps) {
return (
<div className="absolute left-[15px] h-2 z-10">
<div className="absolute left-[15px] h-[8px] z-10">
{!isFirstSegmentInMinimap && !isLastSegmentInMinimap && (
<div
key={`${segmentKey}_timestamp`}

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

@ -82,7 +82,7 @@ export function useCameraMotionNextTimestamp(
});
const noMotionRanges = useMemo(() => {
if (!motionData || !reviewItems) {
if (!motionData || !reviewItems || !motionData) {
return;
}
@ -100,8 +100,7 @@ export function useCameraMotionNextTimestamp(
alignStartDateToTimeline(timeRangeSegmentEnd)) %
segmentDuration;
const startIndex =
offset > 0 ? Math.floor(offset / (segmentDuration / 15)) : 0;
const startIndex = Math.abs(Math.floor(offset / 15));
for (
let i = startIndex;

48
web/src/hooks/use-draggable-element.ts
View File

@ -42,10 +42,12 @@ function useDraggableElement({
setIsDragging,
setDraggableElementPosition,
}: DraggableElementProps) {
const segmentHeight = 8;
const [clientYPosition, setClientYPosition] = useState<number | null>(null);
const [initialClickAdjustment, setInitialClickAdjustment] = useState(0);
const [elementScrollIntoView, setElementScrollIntoView] = useState(true);
const [scrollEdgeSize, setScrollEdgeSize] = useState<number>();
const [fullTimelineHeight, setFullTimelineHeight] = useState<number>();
const [segments, setSegments] = useState<HTMLDivElement[]>([]);
const { alignStartDateToTimeline, getCumulativeScrollTop } = useTimelineUtils(
{
@ -137,15 +139,9 @@ function useDraggableElement({
const timestampToPixels = useCallback(
(time: number) => {
const { scrollHeight: timelineHeight } =
timelineRef.current as HTMLDivElement;
const segmentHeight =
timelineHeight / (timelineDuration / segmentDuration);
return ((timelineStartAligned - time) / segmentDuration) * segmentHeight;
},
[segmentDuration, timelineRef, timelineStartAligned, timelineDuration],
[segmentDuration, timelineStartAligned],
);
const updateDraggableElementPosition = useCallback(
@ -226,21 +222,17 @@ function useDraggableElement({
showDraggableElement &&
isDragging &&
clientYPosition &&
segments
segments &&
fullTimelineHeight
) {
const { scrollHeight: timelineHeight, scrollTop: scrolled } =
timelineRef.current;
const segmentHeight =
timelineHeight / (timelineDuration / segmentDuration);
const { scrollTop: scrolled } = timelineRef.current;
const parentScrollTop = getCumulativeScrollTop(timelineRef.current);
// bottom of timeline
const elementEarliest = draggableElementEarliestTime
? timestampToPixels(draggableElementEarliestTime)
: segmentHeight * (timelineDuration / segmentDuration) -
segmentHeight * 3.5;
: fullTimelineHeight - segmentHeight * 1.5;
// top of timeline - default 2 segments added for draggableElement visibility
const elementLatest = draggableElementLatestTime
@ -314,7 +306,11 @@ function useDraggableElement({
scrollEdgeSize)) /
scrollEdgeSize,
);
timelineRef.current.scrollTop += segmentHeight * intensity;
const newScrollTop = Math.min(
fullTimelineHeight - segmentHeight,
timelineRef.current.scrollTop + segmentHeight * intensity,
);
timelineRef.current.scrollTop = newScrollTop;
}
}
@ -374,11 +370,7 @@ function useDraggableElement({
!isDragging &&
segments.length > 0
) {
const { scrollHeight: timelineHeight, scrollTop: scrolled } =
timelineRef.current;
const segmentHeight =
timelineHeight / (timelineDuration / segmentDuration);
const { scrollTop: scrolled } = timelineRef.current;
const alignedSegmentTime = alignStartDateToTimeline(draggableElementTime);
@ -426,6 +418,7 @@ function useDraggableElement({
useEffect(() => {
if (timelineRef.current && draggableElementTime && timelineCollapsed) {
setFullTimelineHeight(timelineRef.current.scrollHeight);
const alignedSegmentTime = alignStartDateToTimeline(draggableElementTime);
let segmentElement = timelineRef.current.querySelector(
@ -435,8 +428,12 @@ function useDraggableElement({
if (!segmentElement) {
// segment not found, maybe we collapsed over a collapsible segment
let searchTime = alignedSegmentTime;
while (searchTime >= timelineStartAligned - timelineDuration) {
searchTime -= segmentDuration;
while (
searchTime < timelineStartAligned &&
searchTime < timelineStartAligned + timelineDuration
) {
searchTime += segmentDuration;
segmentElement = timelineRef.current.querySelector(
`[data-segment-id="${searchTime}"]`,
);
@ -456,10 +453,11 @@ function useDraggableElement({
}, [timelineCollapsed]);
useEffect(() => {
if (timelineRef.current) {
if (timelineRef.current && segments) {
setScrollEdgeSize(timelineRef.current.clientHeight * 0.03);
setFullTimelineHeight(timelineRef.current.scrollHeight);
}
}, [timelineRef]);
}, [timelineRef, segments]);
return { handleMouseDown, handleMouseUp, handleMouseMove };
}

8
web/src/hooks/use-timeline-utils.ts
View File

@ -40,13 +40,9 @@ export function useTimelineUtils({
const getVisibleTimelineDuration = useCallback(() => {
if (timelineRef?.current && timelineDuration) {
const {
scrollHeight: timelineHeight,
clientHeight: visibleTimelineHeight,
} = timelineRef.current;
const { clientHeight: visibleTimelineHeight } = timelineRef.current;
const segmentHeight =
timelineHeight / (timelineDuration / segmentDuration);
const segmentHeight = 8;
const visibleTime =
(visibleTimelineHeight / segmentHeight) * segmentDuration;

6
web/src/pages/UIPlayground.tsx
View File

@ -367,7 +367,7 @@ function UIPlayground() {
segmentDuration={zoomSettings.segmentDuration} // seconds per segment
timestampSpread={zoomSettings.timestampSpread} // minutes between each major timestamp
timelineStart={Math.floor(Date.now() / 1000)} // timestamp start of the timeline - the earlier time
timelineEnd={Math.floor(Date.now() / 1000) - 24 * 60 * 60} // end of timeline - the later time
timelineEnd={Math.floor(Date.now() / 1000) - 4 * 60 * 60} // end of timeline - the later time
showHandlebar // show / hide the handlebar
handlebarTime={handlebarTime} // set the time of the handlebar
setHandlebarTime={setHandlebarTime} // expose handler to set the handlebar time
@ -391,7 +391,7 @@ function UIPlayground() {
segmentDuration={zoomSettings.segmentDuration} // seconds per segment
timestampSpread={zoomSettings.timestampSpread} // minutes between each major timestamp
timelineStart={Math.floor(Date.now() / 1000)} // timestamp start of the timeline - the earlier time
timelineEnd={Math.floor(Date.now() / 1000) - 24 * 60 * 60} // end of timeline - the later time
timelineEnd={Math.floor(Date.now() / 1000) - 4 * 60 * 60} // end of timeline - the later time
showHandlebar // show / hide the handlebar
handlebarTime={handlebarTime} // set the time of the handlebar
setHandlebarTime={setHandlebarTime} // expose handler to set the handlebar time
@ -416,7 +416,7 @@ function UIPlayground() {
<SummaryTimeline
reviewTimelineRef={reviewTimelineRef} // the ref to the review timeline
timelineStart={Math.floor(Date.now() / 1000)} // timestamp start of the timeline - the earlier time
timelineEnd={Math.floor(Date.now() / 1000) - 24 * 60 * 60} // end of timeline - the later time
timelineEnd={Math.floor(Date.now() / 1000) - 4 * 60 * 60} // end of timeline - the later time
segmentDuration={zoomSettings.segmentDuration}
events={mockEvents}
severityType={"alert"} // show only events of this severity on the summary timeline