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

More timezone fixes

Browse Source
This commit is contained in:
Nicolas Mowen 2024-11-04 06:32:53 -07:00
parent 59d240aa69
commit 26764501c8
2 changed files with 28 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -42,22 +42,22 @@ export function MinimapBounds({
className="pointer-events-none absolute inset-0 -bottom-7 z-20 flex w-full select-none scroll-mt-8 items-center justify-center text-center text-[10px] font-medium text-primary" className="pointer-events-none absolute inset-0 -bottom-7 z-20 flex w-full select-none scroll-mt-8 items-center justify-center text-center text-[10px] font-medium text-primary"
ref={firstMinimapSegmentRef} ref={firstMinimapSegmentRef}
> >
{new Date(alignedMinimapStartTime * 1000).toLocaleTimeString([], { {formatUnixTimestampToDateTime(alignedMinimapStartTime, {
hour12: config?.ui.time_format != "24hour", timezone: config?.ui.timezone,
hour: "2-digit", strftime_fmt: !dense
minute: "2-digit", ? `%b %d ${config?.ui.time_format == "24hour" ? "%H:%M" : "%I:%M %p"}`
...(!dense && { month: "short", day: "2-digit" }), : `${config?.ui.time_format == "24hour" ? "%H:%M" : "%I:%M %p"}`,
})} })}
</div> </div>
)} )}
{isLastSegmentInMinimap && ( {isLastSegmentInMinimap && (
<div className="pointer-events-none absolute inset-0 -top-3 z-20 flex w-full select-none items-center justify-center text-center text-[10px] font-medium text-primary"> <div className="pointer-events-none absolute inset-0 -top-3 z-20 flex w-full select-none items-center justify-center text-center text-[10px] font-medium text-primary">
{new Date(alignedMinimapEndTime * 1000).toLocaleTimeString([], { {formatUnixTimestampToDateTime(alignedMinimapEndTime, {
hour12: config?.ui.time_format != "24hour", timezone: config?.ui.timezone,
hour: "2-digit", strftime_fmt: !dense
minute: "2-digit", ? `%b %d ${config?.ui.time_format == "24hour" ? "%H:%M" : "%I:%M %p"}`
...(!dense && { month: "short", day: "2-digit" }), : `${config?.ui.time_format == "24hour" ? "%H:%M" : "%I:%M %p"}`,
})} })}
</div> </div>
)} )}
@ -106,8 +106,7 @@ export function Timestamp({
return formatUnixTimestampToDateTime(timestamp.getTime() / 1000, { return formatUnixTimestampToDateTime(timestamp.getTime() / 1000, {
timezone: config?.ui.timezone, timezone: config?.ui.timezone,
strftime_fmt: strftime_fmt: config?.ui.time_format == "24hour" ? "%H:%M" : "%I:%M %p",
config?.ui.time_format == "24hour" ? "%d %b %H:%M" : "%I:%M %p",
}); });
}, [config, timestamp, timestampSpread]); }, [config, timestamp, timestampSpread]);

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

@ -10,6 +10,7 @@ import scrollIntoView from "scroll-into-view-if-needed";
import { useTimelineUtils } from "./use-timeline-utils"; import { useTimelineUtils } from "./use-timeline-utils";
import { FrigateConfig } from "@/types/frigateConfig"; import { FrigateConfig } from "@/types/frigateConfig";
import useSWR from "swr"; import useSWR from "swr";
import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
type DraggableElementProps = { type DraggableElementProps = {
contentRef: React.RefObject<HTMLElement>; contentRef: React.RefObject<HTMLElement>;
@ -168,6 +169,19 @@ function useDraggableElement({
[segmentDuration, timelineStartAligned, segmentHeight], [segmentDuration, timelineStartAligned, segmentHeight],
); );
const getFormattedTimestamp = useCallback(
(segmentStartTime: number) => {
return formatUnixTimestampToDateTime(segmentStartTime, {
timezone: config?.ui.timezone,
strftime_fmt:
config?.ui.time_format == "24hour"
? `%H:%M${segmentDuration < 60 && !dense ? ":%S" : ""}`
: `%I:%M${segmentDuration < 60 && !dense ? ":%S" : ""} %p`,
});
},
[config, dense, segmentDuration],
);
const updateDraggableElementPosition = useCallback( const updateDraggableElementPosition = useCallback(
( (
newElementPosition: number, newElementPosition: number,
@ -184,14 +198,8 @@ function useDraggableElement({
} }
if (draggableElementTimeRef.current) { if (draggableElementTimeRef.current) {
draggableElementTimeRef.current.textContent = new Date( draggableElementTimeRef.current.textContent =
segmentStartTime * 1000, getFormattedTimestamp(segmentStartTime);
).toLocaleTimeString([], {
hour12: config?.ui.time_format != "24hour",
hour: "2-digit",
minute: "2-digit",
...(segmentDuration < 60 && !dense && { second: "2-digit" }),
});
if (scrollTimeline && !userInteracting) { if (scrollTimeline && !userInteracting) {
scrollIntoView(thumb, { scrollIntoView(thumb, {
block: "center", block: "center",
@ -208,13 +216,11 @@ function useDraggableElement({
} }
}, },
[ [
segmentDuration,
draggableElementTimeRef, draggableElementTimeRef,
draggableElementRef, draggableElementRef,
setDraggableElementTime, setDraggableElementTime,
setDraggableElementPosition, setDraggableElementPosition,
dense, getFormattedTimestamp,
config,
userInteracting, userInteracting,
], ],
); );