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

rebase to dev

Browse Source
This commit is contained in:
Josh Hawkins 2024-02-22 13:10:52 -06:00
parent 568148a451
commit 986a19cdd6
3 changed files with 153 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
web/src/hooks/use-handle-dragging.ts
View File

@ -1,4 +1,4 @@
import { useCallback } from "react";
import { useCallback, useEffect } from "react";
interface DragHandlerProps {
contentRef: React.RefObject<HTMLElement>;
@ -128,6 +128,17 @@ function useDraggableHandler({
]
);
useEffect(() => {
// TODO: determine when we want to do this
const handlebar = scrollTimeRef.current;
if (handlebar && showHandlebar) {
// handlebar.scrollIntoView({
// behavior: "smooth",
// block: "center",
// });
}
}, []);
return { handleMouseDown, handleMouseUp, handleMouseMove };
}

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

@ -170,8 +170,9 @@ function UIPlayground() {
return (
<>
<div className="absolute left-0 top-12 bottom-0 right-28 flex flex-wrap content-start gap-2 overflow-y-auto no-scrollbar">
<div className="relative w-full h-full mt-4 mr-5">
<div className="w-full h-full">
<div className="flex h-full">
<div className="flex-1 content-start gap-2 overflow-y-auto no-scrollbar mt-4 mr-5">
<Heading as="h2">UI Playground</Heading>
<Heading as="h4" className="my-5">
@ -247,8 +248,8 @@ function UIPlayground() {
</div>
</div>
</div>
</div>
<div className="absolute top-12 right-0 bottom-0">
<div className="w-[100px] overflow-y-auto no-scrollbar">
<EventReviewTimeline
segmentDuration={zoomSettings.segmentDuration} // seconds per segment
timestampSpread={zoomSettings.timestampSpread} // minutes between each major timestamp
@ -265,6 +266,8 @@ function UIPlayground() {
contentRef={contentRef} // optional content ref where previews are, can be used for observing/scrolling later
/>
</div>
</div>
</div>
</>
);
}

14
web/src/views/events/DesktopEventView.tsx
View File

@ -195,8 +195,8 @@ export default function DesktopEventView({
}
return (
<div className="relative w-full h-full">
<div className="absolute flex justify-between left-0 top-0 right-0">
<div className="flex flex-col w-full h-full">
<div className="flex justify-between mb-2">
<ToggleGroup
type="single"
defaultValue="alert"
@ -261,14 +261,17 @@ export default function DesktopEventView({
</Button>
)}
<div className="flex h-full overflow-hidden">
<div
ref={contentRef}
className="absolute left-0 top-12 bottom-0 right-28 flex flex-wrap content-start gap-2 overflow-y-auto no-scrollbar"
className="flex flex-1 flex-wrap content-start gap-2 overflow-y-auto no-scrollbar"
>
{currentItems ? (
currentItems.map((value, segIdx) => {
const lastRow = segIdx == reviewItems[severity].length - 1;
const relevantPreview = Object.values(relevantPreviews || []).find(
const relevantPreview = Object.values(
relevantPreviews || []
).find(
(preview) =>
preview.camera == value.camera &&
preview.start < value.start_time &&
@ -297,7 +300,7 @@ export default function DesktopEventView({
<div ref={lastReviewRef} />
)}
</div>
<div className="absolute top-12 right-0 bottom-0">
<div className="md:w-[100px] overflow-y-auto no-scrollbar">
<EventReviewTimeline
segmentDuration={60}
timestampSpread={15}
@ -312,6 +315,7 @@ export default function DesktopEventView({
/>
</div>
</div>
</div>
);
}