administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-17 16:44:29 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

update playground

Browse Source
This commit is contained in:
Josh Hawkins 2024-11-29 20:19:49 -06:00
parent a6d695adac
commit 5cf8df72fd
1 changed files with 25 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,4 @@
import { useMemo, useRef, useState } from "react"; import { useCallback, useMemo, useRef, useState } from "react";
import Heading from "@/components/ui/heading"; import Heading from "@/components/ui/heading";
import useSWR from "swr"; import useSWR from "swr";
import { FrigateConfig } from "@/types/frigateConfig"; import { FrigateConfig } from "@/types/frigateConfig";
@ -29,6 +29,7 @@ import { useNavigate } from "react-router-dom";
import SummaryTimeline from "@/components/timeline/SummaryTimeline"; import SummaryTimeline from "@/components/timeline/SummaryTimeline";
import { isMobile } from "react-device-detect"; import { isMobile } from "react-device-detect";
import IconPicker, { IconElement } from "@/components/icons/IconPicker"; import IconPicker, { IconElement } from "@/components/icons/IconPicker";
import { useTimelineZoom } from "@/hooks/use-timeline-zoom";
// Color data // Color data
const colors = [ const colors = [
@ -173,32 +174,35 @@ function UIPlayground() {
return Math.floor(Date.now() / 1000); // Default to current time if no events return Math.floor(Date.now() / 1000); // Default to current time if no events
}, [mockEvents]); }, [mockEvents]);
const [zoomLevel, setZoomLevel] = useState(0);
const [zoomSettings, setZoomSettings] = useState({ const [zoomSettings, setZoomSettings] = useState({
segmentDuration: 60, segmentDuration: 60,
timestampSpread: 15, timestampSpread: 15,
}); });
const possibleZoomLevels = [ const possibleZoomLevels = useMemo(
() => [
{ segmentDuration: 60, timestampSpread: 15 }, { segmentDuration: 60, timestampSpread: 15 },
{ segmentDuration: 30, timestampSpread: 5 }, { segmentDuration: 30, timestampSpread: 5 },
{ segmentDuration: 10, timestampSpread: 1 }, { segmentDuration: 10, timestampSpread: 1 },
]; ],
[],
function handleZoomIn() {
const nextZoomLevel = Math.min(
possibleZoomLevels.length - 1,
zoomLevel + 1,
); );
setZoomLevel(nextZoomLevel);
setZoomSettings(possibleZoomLevels[nextZoomLevel]);
}
function handleZoomOut() { const handleZoomChange = useCallback(
const nextZoomLevel = Math.max(0, zoomLevel - 1); (newZoomLevel: number) => {
setZoomLevel(nextZoomLevel); setZoomSettings(possibleZoomLevels[newZoomLevel]);
setZoomSettings(possibleZoomLevels[nextZoomLevel]); },
} [possibleZoomLevels],
);
const { zoomLevel, handleZoom } = useTimelineZoom({
zoomSettings,
zoomLevels: possibleZoomLevels,
onZoomChange: handleZoomChange,
});
const handleZoomIn = () => handleZoom(-1);
const handleZoomOut = () => handleZoom(1);
const [isDragging, setIsDragging] = useState(false); const [isDragging, setIsDragging] = useState(false);
@ -330,6 +334,7 @@ function UIPlayground() {
<div className="my-4 w-[40px]"> <div className="my-4 w-[40px]">
<CameraActivityIndicator /> <CameraActivityIndicator />
</div> </div>
zoom level: {zoomLevel}
<p> <p>
<Button <Button
variant="default" variant="default"
@ -367,7 +372,6 @@ function UIPlayground() {
</a>{" "} </a>{" "}
for usage. for usage.
</p> </p>
<div className="my-5"> <div className="my-5">
{colors.map((color, index) => ( {colors.map((color, index) => (
<ColorSwatch <ColorSwatch
@ -401,7 +405,6 @@ function UIPlayground() {
setExportEndTime={setExportEndTime} setExportEndTime={setExportEndTime}
events={mockEvents} // events, including new has_been_reviewed and severity properties events={mockEvents} // events, including new has_been_reviewed and severity properties
motion_events={mockMotionData} motion_events={mockMotionData}
severityType={"alert"} // choose the severity type for the middle line - all other severity types are to the right
contentRef={contentRef} // optional content ref where previews are, can be used for observing/scrolling later contentRef={contentRef} // optional content ref where previews are, can be used for observing/scrolling later
dense={isMobile} // dense will produce a smaller handlebar and only minute resolution on timestamps dense={isMobile} // dense will produce a smaller handlebar and only minute resolution on timestamps
/> />