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

use unix timestamps everywhere

Browse Source
This commit is contained in:
Josh Hawkins 2024-02-20 11:46:22 -06:00
parent 62d95cca71
commit 12ed066dce
6 changed files with 28 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -89,7 +89,7 @@ export function EventReviewTimeline({
const segmentAlignedTime = alignDateToTimeline(timelineStart);
return Array.from({ length: segmentCount }, (_, index) => {
const segmentTime = segmentAlignedTime - index * segmentDuration * 1000;
const segmentTime = segmentAlignedTime - index * segmentDuration;
return (
<EventSegment
@ -134,7 +134,7 @@ export function EventReviewTimeline({
requestAnimationFrame(() => {
if (currentTimeRef.current && currentTimeSegment) {
currentTimeRef.current.textContent = new Date(
currentTimeSegment
currentTimeSegment * 1000
).toLocaleTimeString([], {
hour: "2-digit",
minute: "2-digit",
@ -156,7 +156,7 @@ export function EventReviewTimeline({
// Calculate the segment index corresponding to the target time
const alignedHandlebarTime = alignDateToTimeline(handlebarTime);
const segmentIndex = Math.ceil(
(timelineStart - alignedHandlebarTime) / (segmentDuration * 1000)
(timelineStart - alignedHandlebarTime) / segmentDuration
);
// Calculate the top position based on the segment index

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

@ -46,7 +46,7 @@ function MinimapBounds({
<>
{isFirstSegmentInMinimap && (
<div className="absolute inset-0 -bottom-5 w-full flex items-center justify-center text-xs text-primary font-medium z-20 text-center text-[9px]">
{new Date(alignedMinimapStartTime).toLocaleTimeString([], {
{new Date(alignedMinimapStartTime * 1000).toLocaleTimeString([], {
hour: "2-digit",
minute: "2-digit",
month: "short",
@ -57,7 +57,7 @@ function MinimapBounds({
{isLastSegmentInMinimap && (
<div className="absolute inset-0 -top-1 w-full flex items-center justify-center text-xs text-primary font-medium z-20 text-center text-[9px]">
{new Date(alignedMinimapEndTime).toLocaleTimeString([], {
{new Date(alignedMinimapEndTime * 1000).toLocaleTimeString([], {
hour: "2-digit",
minute: "2-digit",
month: "short",
@ -153,11 +153,8 @@ export function EventSegment({
[shouldShowRoundedCorners, segmentTime]
);
const timestamp = useMemo(() => new Date(segmentTime), [segmentTime]);
const segmentKey = useMemo(
() => Math.floor(segmentTime / 1000),
[segmentTime]
);
const timestamp = useMemo(() => new Date(segmentTime * 1000), [segmentTime]);
const segmentKey = useMemo(() => segmentTime, [segmentTime]);
const alignedMinimapStartTime = useMemo(
() => alignDateToTimeline(minimapStartTime ?? 0),

12
web/src/hooks/use-event-utils.ts
View File

@ -5,7 +5,7 @@ export const useEventUtils = (events: Event[], segmentDuration: number) => {
const isStartOfEvent = useCallback((time: number): boolean => {
return events.some((event) => {
const segmentStart = getSegmentStart(event.start_time);
return time >= segmentStart && time < segmentStart + segmentDuration * 1000;
return time >= segmentStart && time < segmentStart + segmentDuration;
});
}, [events, segmentDuration]);
@ -13,23 +13,23 @@ export const useEventUtils = (events: Event[], segmentDuration: number) => {
return events.some((event) => {
if (typeof event.end_time === 'number') {
const segmentEnd = getSegmentEnd(event.end_time);
return time >= segmentEnd - segmentDuration * 1000 && time < segmentEnd;
return time >= segmentEnd - segmentDuration && time < segmentEnd;
}
return false; // Return false if end_time is undefined
});
}, [events, segmentDuration]);
const getSegmentStart = useCallback((time: number): number => {
return Math.floor(time / (segmentDuration * 1000)) * (segmentDuration * 1000);
return Math.floor(time / (segmentDuration)) * (segmentDuration);
}, [segmentDuration]);
const getSegmentEnd = useCallback((time: number): number => {
return Math.ceil(time / (segmentDuration * 1000)) * (segmentDuration * 1000);
return Math.ceil(time / (segmentDuration)) * (segmentDuration);
}, [segmentDuration]);
const alignDateToTimeline = useCallback((time: number): number => {
const remainder = time % (segmentDuration * 1000);
const adjustment = remainder !== 0 ? segmentDuration * 1000 - remainder : 0;
const remainder = time % (segmentDuration);
const adjustment = remainder !== 0 ? segmentDuration - remainder : 0;
return time + adjustment;
}, [segmentDuration]);

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

@ -91,7 +91,7 @@ function useDraggableHandler({
const segmentIndex = Math.floor(newHandlePosition / segmentHeight);
const segmentStartTime = alignDateToTimeline(
Math.floor(timelineStart - segmentIndex * segmentDuration * 1000)
timelineStart - segmentIndex * segmentDuration
);
if (showHandlebar) {
@ -100,7 +100,7 @@ function useDraggableHandler({
thumb.style.top = `${newHandlePosition - segmentHeight}px`;
if (currentTimeRef.current) {
currentTimeRef.current.textContent = new Date(
segmentStartTime
segmentStartTime*1000
).toLocaleTimeString([], {
hour: "2-digit",
minute: "2-digit",

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

@ -7,14 +7,14 @@ export const useSegmentUtils = (
severityType: string,
) => {
const getSegmentStart = useCallback((time: number): number => {
return Math.floor(time / (segmentDuration * 1000)) * (segmentDuration * 1000);
return Math.floor(time / (segmentDuration)) * (segmentDuration);
}, [segmentDuration]);
const getSegmentEnd = useCallback((time: number | undefined): number => {
if (time) {
return Math.ceil(time / (segmentDuration * 1000)) * (segmentDuration * 1000);
return Math.ceil(time / (segmentDuration)) * (segmentDuration);
} else {
return Date.now()+(segmentDuration*1000);
return (Date.now()/1000)+(segmentDuration);
}
}, [segmentDuration]);
@ -61,8 +61,8 @@ export const useSegmentUtils = (
const shouldShowRoundedCorners = useCallback(
(segmentTime: number): boolean => {
const prevSegmentTime = segmentTime - segmentDuration * 1000;
const nextSegmentTime = segmentTime + segmentDuration * 1000;
const prevSegmentTime = segmentTime - segmentDuration;
const nextSegmentTime = segmentTime + segmentDuration;
const hasPrevEvent = events.some((e) => {
return (

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

@ -59,12 +59,12 @@ function eventsToScrubberItems(events: Event[]): ScrubberItem[] {
}
const generateRandomEvent = (): Event => {
const start_time = Date.now() - Math.random() * 3600000 * 3;
const end_time = start_time + Math.random() * 360000;
const start_time = Math.floor(Date.now() / 1000) - Math.random() * 60 * 60;
const end_time = Math.floor(start_time + Math.random() * 60 * 10);
const severities = ["motion", "detection", "alert"];
const severity = severities[Math.floor(Math.random() * severities.length)];
const has_been_reviewed = Math.random() < 0.2;
const id = new Date(start_time).toISOString(); // Date string as mock ID
const id = new Date(start_time * 1000).toISOString(); // Date string as mock ID
return { id, start_time, end_time, severity, has_been_reviewed };
};
@ -91,6 +91,7 @@ function UIPlayground() {
useMemo(() => {
const initialEvents = Array.from({ length: 50 }, generateRandomEvent);
setMockEvents(initialEvents);
console.log(initialEvents);
}, []);
return (
@ -161,13 +162,13 @@ function UIPlayground() {
<EventReviewTimeline
segmentDuration={60} // seconds per segment
timestampSpread={15} // minutes between each major timestamp
timelineStart={Date.now()} // start of the timeline - all times are numeric, not Date objects
timelineStart={Math.floor(Date.now() / 1000)} // start of the timeline - all times are numeric, not Date objects
timelineDuration={24 * 60 * 60} // in minutes, defaults to 24 hours
showHandlebar // show / hide the handlebar
handlebarTime={Date.now() - 27 * 60 * 1000} // set the time of the handlebar
handlebarTime={Math.floor(Date.now() / 1000) - 27 * 60} // set the time of the handlebar
showMinimap // show / hide the minimap
minimapStartTime={Date.now() - 35 * 60 * 1000} // start time of the minimap - the earlier time (eg 1:00pm)
minimapEndTime={Date.now() - 21 * 60 * 1000} // end of the minimap - the later time (eg 3:00pm)
minimapStartTime={Math.floor(Date.now() / 1000) - 35 * 60} // start time of the minimap - the earlier time (eg 1:00pm)
minimapEndTime={Math.floor(Date.now() / 1000) - 21 * 60} // end of the minimap - the later time (eg 3:00pm)
events={mockEvents} // events, including new has_been_reviewed and severity properties
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