frigate/web/src/hooks/use-date-utils.ts
Nicolas Mowen 25819584bd
Add ability to filter search by time range (#13946)
* Add ability to filter by time range

* Cleanup

* Handle input with tags

* fix input for time_range filter

* fix before and after filters

* clean up

* Ensure the default value works as expected

* Handle time range in am/pm based on browser

* Fix arrow

* Fix text

* Handle midnight case

* fix width

* Fix bg

* Fix bg

* Fix mobile spacing

* y spacing

* remove left padding

---------

Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
2024-09-25 10:05:40 -06:00

96 lines
2.3 KiB
TypeScript

import { FrigateConfig } from "@/types/frigateConfig";
import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
import { useMemo } from "react";
export function useFormattedTimestamp(
timestamp: number,
format: string,
timezone?: string,
) {
const formattedTimestamp = useMemo(() => {
return formatUnixTimestampToDateTime(timestamp, {
timezone,
strftime_fmt: format,
});
}, [format, timestamp, timezone]);
return formattedTimestamp;
}
export function useFormattedRange(start: number, end: number, format: string) {
const formattedStart = useMemo(() => {
return formatUnixTimestampToDateTime(start, {
strftime_fmt: format,
});
}, [format, start]);
const formattedEnd = useMemo(() => {
return formatUnixTimestampToDateTime(end, {
strftime_fmt: format,
});
}, [format, end]);
return `${formattedStart} - ${formattedEnd}`;
}
export function useTimezone(config: FrigateConfig | undefined) {
return useMemo(() => {
if (!config) {
return undefined;
}
return (
config.ui?.timezone || Intl.DateTimeFormat().resolvedOptions().timeZone
);
}, [config]);
}
function use24HourTime(config: FrigateConfig | undefined) {
const localeUses24HourTime = useMemo(
() =>
new Intl.DateTimeFormat(undefined, {
hour: "numeric",
})
?.formatToParts(new Date(2020, 0, 1, 13))
?.find((part) => part.type === "hour")?.value?.length === 2,
[],
);
return useMemo(() => {
if (!config) {
return false;
}
if (config.ui.time_format != "browser") {
return config.ui.time_format == "24hour";
}
return localeUses24HourTime;
}, [config, localeUses24HourTime]);
}
export function useFormattedHour(
config: FrigateConfig | undefined,
time: string, // hour is assumed to be in 24 hour format per the Date object
) {
const hour24 = use24HourTime(config);
return useMemo(() => {
if (hour24) {
return time;
}
const [hour, minute] = time.includes(":") ? time.split(":") : [time, "00"];
const hourNum = parseInt(hour);
if (hourNum < 12) {
if (hourNum == 0) {
return `12:${minute} AM`;
}
return `${hourNum}:${minute} AM`;
} else {
return `${hourNum - 12}:${minute} PM`;
}
}, [hour24, time]);
}