Skip to content

Commit 30f3ccd

Browse files
hawkeye217hawkeye217
committed
update frontend to use use24HourTime(config) or useTimeFormat(config) instead of directly comparing config.ui.time_format
1 parent 80d8d28 commit 30f3ccd

22 files changed

+153
-133
lines changed

‎web/src/components/audio/AudioLevelGraph.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
88
import useSWR from "swr";
99
import { FrigateConfig } from "@/types/frigateConfig";
1010
import { useTranslation } from "react-i18next";
11+
import { useTimeFormat } from "@/hooks/use-date-utils";
1112

1213
const GRAPH_COLORS = ["#3b82f6", "#ef4444"]; // RMS, dBFS
1314

@@ -72,7 +73,7 @@ export function AudioLevelGraph({ cameraName }: AudioLevelGraphProps) {
7273
return [last.rms, last.dBFS];
7374
}, [audioData]);
7475

75-
const timeFormat = config?.ui.time_format === "24hour" ? "24hour" : "12hour";
76+
const timeFormat = useTimeFormat(config);
7677
const formatString = useMemo(
7778
() =>
7879
t(`time.formattedTimestampHourMinuteSecond.${timeFormat}`, {

‎web/src/components/button/DownloadVideoButton.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { useTranslation } from "react-i18next";
77
import useSWR from "swr";
88
import { FrigateConfig } from "@/types/frigateConfig";
99
import { useDateLocale } from "@/hooks/use-date-locale";
10+
import { useTimeFormat } from "@/hooks/use-date-utils";
1011
import { useMemo } from "react";
1112

1213
type DownloadVideoButtonProps = {
@@ -26,7 +27,7 @@ export function DownloadVideoButton({
2627
const { data: config } = useSWR<FrigateConfig>("config");
2728
const locale = useDateLocale();
2829

29-
const timeFormat = config?.ui.time_format === "24hour" ? "24hour" : "12hour";
30+
const timeFormat = useTimeFormat(config);
3031
const format = useMemo(() => {
3132
return t(`time.formattedTimestampFilename.${timeFormat}`, { ns: "common" });
3233
}, [t, timeFormat]);

‎web/src/components/card/ReviewCard.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { baseUrl } from "@/api/baseUrl";
2-
import { useFormattedTimestamp } from "@/hooks/use-date-utils";
2+
import { useFormattedTimestamp, use24HourTime } from "@/hooks/use-date-utils";
33
import { FrigateConfig } from "@/types/frigateConfig";
44
import { REVIEW_PADDING, ReviewSegment } from "@/types/review";
55
import { getIconForLabel } from "@/utils/iconUtil";
@@ -55,9 +55,10 @@ export default function ReviewCard({
5555
const { t } = useTranslation(["components/dialog"]);
5656
const { data: config } = useSWR<FrigateConfig>("config");
5757
const [imgRef, imgLoaded, onImgLoad] = useImageLoaded();
58+
const is24Hour = use24HourTime(config);
5859
const formattedDate = useFormattedTimestamp(
5960
event.start_time,
60-
config?.ui.time_format == "24hour"
61+
is24Hour
6162
? t("time.formattedTimestampHourMinute.24hour", { ns: "common" })
6263
: t("time.formattedTimestampHourMinute.12hour", { ns: "common" }),
6364
config?.ui.timezone,

‎web/src/components/card/SearchThumbnailFooter.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import TimeAgo from "../dynamic/TimeAgo";
22
import useSWR from "swr";
33
import { FrigateConfig } from "@/types/frigateConfig";
4-
import { useFormattedTimestamp } from "@/hooks/use-date-utils";
4+
import { useFormattedTimestamp, use24HourTime } from "@/hooks/use-date-utils";
55
import { SearchResult } from "@/types/search";
66
import ActivityIndicator from "../indicators/activity-indicator";
77
import SearchResultActions from "../menu/SearchResultActions";
@@ -29,9 +29,10 @@ export default function SearchThumbnailFooter({
2929
const { data: config } = useSWR<FrigateConfig>("config");
3030

3131
// date
32+
const is24Hour = use24HourTime(config);
3233
const formattedDate = useFormattedTimestamp(
3334
searchResult.start_time,
34-
config?.ui.time_format == "24hour"
35+
is24Hour
3536
? t("time.formattedTimestampMonthDayHourMinute.24hour", { ns: "common" })
3637
: t("time.formattedTimestampMonthDayHourMinute.12hour", { ns: "common" }),
3738
config?.ui.timezone,

‎web/src/components/config-form/sectionExtras/NotificationsSettingsExtras.tsx‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ import {
4343
SelectItem,
4444
} from "@/components/ui/select";
4545
import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
46+
import { use24HourTime } from "@/hooks/use-date-utils";
4647
import FilterSwitch from "@/components/filter/FilterSwitch";
4748
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
4849
import { Trans, useTranslation } from "react-i18next";
@@ -752,6 +753,7 @@ export function CameraNotificationSwitch({
752753
};
753754

754755
const locale = useDateLocale();
756+
const is24Hour = use24HourTime(config);
755757

756758
const formatSuspendedUntil = (timestamp: string) => {
757759
if (timestamp === "0") return t("time.untilForRestart", { ns: "common" });
@@ -760,14 +762,13 @@ export function CameraNotificationSwitch({
760762
time_style: "medium",
761763
date_style: "medium",
762764
timezone: config?.ui.timezone,
763-
date_format:
764-
config?.ui.time_format == "24hour"
765-
? t("time.formattedTimestampMonthDayHourMinute.24hour", {
766-
ns: "common",
767-
})
768-
: t("time.formattedTimestampMonthDayHourMinute.12hour", {
769-
ns: "common",
770-
}),
765+
date_format: is24Hour
766+
? t("time.formattedTimestampMonthDayHourMinute.24hour", {
767+
ns: "common",
768+
})
769+
: t("time.formattedTimestampMonthDayHourMinute.12hour", {
770+
ns: "common",
771+
}),
771772
locale: locale,
772773
});
773774
return t("time.untilForTime", { ns: "common", time });

‎web/src/components/graph/LineGraph.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { isMobileOnly } from "react-device-detect";
88
import { useTranslation } from "react-i18next";
99
import { MdCircle } from "react-icons/md";
1010
import useSWR from "swr";
11+
import { useTimeFormat } from "@/hooks/use-date-utils";
1112

1213
const GRAPH_COLORS = ["#5C7CFA", "#ED5CFA", "#FAD75C"];
1314

@@ -48,7 +49,7 @@ export function CameraLineGraph({
4849

4950
const locale = useDateLocale();
5051

51-
const timeFormat = config?.ui.time_format === "24hour" ? "24hour" : "12hour";
52+
const timeFormat = useTimeFormat(config);
5253
const format = useMemo(() => {
5354
return t(`time.formattedTimestampHourMinute.${timeFormat}`, {
5455
ns: "common",
@@ -203,7 +204,7 @@ export function EventsPerSecondsLineGraph({
203204
const locale = useDateLocale();
204205
const { t } = useTranslation(["common"]);
205206

206-
const timeFormat = config?.ui.time_format === "24hour" ? "24hour" : "12hour";
207+
const timeFormat = useTimeFormat(config);
207208
const format = useMemo(() => {
208209
return t(`time.formattedTimestampHourMinute.${timeFormat}`, {
209210
ns: "common",

‎web/src/components/graph/SystemGraph.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import Chart from "react-apexcharts";
88
import { isMobileOnly } from "react-device-detect";
99
import { useTranslation } from "react-i18next";
1010
import useSWR from "swr";
11+
import { useTimeFormat } from "@/hooks/use-date-utils";
1112

1213
type ThresholdBarGraphProps = {
1314
graphId: string;
@@ -53,7 +54,7 @@ export function ThresholdBarGraph({
5354
const locale = useDateLocale();
5455
const { t } = useTranslation(["common"]);
5556

56-
const timeFormat = config?.ui.time_format === "24hour" ? "24hour" : "12hour";
57+
const timeFormat = useTimeFormat(config);
5758
const format = useMemo(() => {
5859
return t(`time.formattedTimestampHourMinute.${timeFormat}`, {
5960
ns: "common",

‎web/src/components/input/InputWithTags.tsx‎

Lines changed: 11 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ import {
5050
import { toast } from "sonner";
5151
import useSWR from "swr";
5252
import { FrigateConfig } from "@/types/frigateConfig";
53+
import { use24HourTime } from "@/hooks/use-date-utils";
5354
import { MdImageSearch } from "react-icons/md";
5455
import { useTranslation } from "react-i18next";
5556
import { getTranslatedLabel } from "@/utils/i18n";
@@ -80,6 +81,8 @@ export default function InputWithTags({
8081
const { data: config } = useSWR<FrigateConfig>("config", {
8182
revalidateOnFocus: false,
8283
});
84+
const is24Hour = use24HourTime(config);
85+
const resolvedTimeFormat = is24Hour ? "24hour" : ("12hour" as const);
8386

8487
const allAudioListenLabels = useMemo<Set<string>>(() => {
8588
if (!config) {
@@ -431,12 +434,8 @@ export default function InputWithTags({
431434
const [startTime, endTime] = (filterValues as string)
432435
.replace("-", ",")
433436
.split(",");
434-
return `${
435-
config?.ui.time_format === "24hour"
436-
? startTime
437-
: convertTo12Hour(startTime)
438-
} - ${
439-
config?.ui.time_format === "24hour" ? endTime : convertTo12Hour(endTime)
437+
return `${is24Hour ? startTime : convertTo12Hour(startTime)} - ${
438+
is24Hour ? endTime : convertTo12Hour(endTime)
440439
}`;
441440
} else if (filterType === "min_score" || filterType === "max_score") {
442441
return Math.round(Number(filterValues) * 100).toString() + "%";
@@ -478,7 +477,7 @@ export default function InputWithTags({
478477
(filterType === "time_range" &&
479478
isValidTimeRange(
480479
trimmedValue.replace("-", ","),
481-
config?.ui.time_format,
480+
resolvedTimeFormat,
482481
)) ||
483482
((filterType === "min_score" || filterType === "max_score") &&
484483
!isNaN(Number(trimmedValue)) &&
@@ -495,7 +494,7 @@ export default function InputWithTags({
495494
? trimmedValue
496495
.replace("-", ",")
497496
.split(",")
498-
.map((time) => to24Hour(time.trim(), config?.ui.time_format))
497+
.map((time) => to24Hour(time.trim(), resolvedTimeFormat))
499498
.join(",")
500499
: trimmedValue,
501500
);
@@ -511,7 +510,7 @@ export default function InputWithTags({
511510
setCurrentFilterType(null);
512511
}
513512
},
514-
[allSuggestions, createFilter, config],
513+
[allSuggestions, createFilter, resolvedTimeFormat],
515514
);
516515

517516
const handleInputChange = useCallback(
@@ -598,7 +597,7 @@ export default function InputWithTags({
598597
suggestion = suggestion
599598
.replace("-", ",")
600599
.split(",")
601-
.map((time) => to24Hour(time.trim(), config?.ui.time_format))
600+
.map((time) => to24Hour(time.trim(), resolvedTimeFormat))
602601
.join(",");
603602
}
604603
createFilter(currentFilterType, suggestion);
@@ -627,7 +626,7 @@ export default function InputWithTags({
627626

628627
inputRef.current?.focus();
629628
},
630-
[createFilter, currentFilterType, allSuggestions, config],
629+
[createFilter, currentFilterType, allSuggestions, resolvedTimeFormat],
631630
);
632631

633632
const handleSearch = useCallback(
@@ -779,10 +778,7 @@ export default function InputWithTags({
779778
</li>
780779
<li>
781780
{t("filter.tips.desc.step5", {
782-
exampleTime:
783-
config?.ui.time_format == "24hour"
784-
? "15:00-16:00"
785-
: "3:00PM-4:00PM",
781+
exampleTime: is24Hour ? "15:00-16:00" : "3:00PM-4:00PM",
786782
})}
787783
</li>
788784
<li>{t("filter.tips.desc.step6")}</li>

‎web/src/components/menu/LiveContextMenu.tsx‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ import {
4646
} from "@/api/ws";
4747
import { useTranslation } from "react-i18next";
4848
import { useDateLocale } from "@/hooks/use-date-locale";
49+
import { use24HourTime } from "@/hooks/use-date-utils";
4950
import { useIsAdmin } from "@/hooks/use-is-admin";
5051
import { CameraNameLabel } from "../camera/FriendlyNameLabel";
5152
import { LiveStreamMetadata } from "@/types/live";
@@ -247,6 +248,8 @@ export default function LiveContextMenu({
247248

248249
const locale = useDateLocale();
249250

251+
const is24Hour = use24HourTime(config);
252+
250253
const formatSuspendedUntil = (timestamp: string) => {
251254
// Some languages require a change in word order
252255
if (timestamp === "0") return t("time.untilForRestart", { ns: "common" });
@@ -255,14 +258,13 @@ export default function LiveContextMenu({
255258
time_style: "medium",
256259
date_style: "medium",
257260
timezone: config?.ui.timezone,
258-
date_format:
259-
config?.ui.time_format == "24hour"
260-
? t("time.formattedTimestampMonthDayHourMinute.24hour", {
261-
ns: "common",
262-
})
263-
: t("time.formattedTimestampMonthDayHourMinute.12hour", {
264-
ns: "common",
265-
}),
261+
date_format: is24Hour
262+
? t("time.formattedTimestampMonthDayHourMinute.24hour", {
263+
ns: "common",
264+
})
265+
: t("time.formattedTimestampMonthDayHourMinute.12hour", {
266+
ns: "common",
267+
}),
266268
locale: locale,
267269
});
268270
return t("time.untilForTime", { ns: "common", time });

‎web/src/components/overlay/CustomTimeSelector.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Button } from "../ui/button";
33
import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
44
import { SelectSeparator } from "../ui/select";
55
import { TimeRange } from "@/types/timeline";
6-
import { useFormattedTimestamp } from "@/hooks/use-date-utils";
6+
import { useFormattedTimestamp, use24HourTime } from "@/hooks/use-date-utils";
77
import { getUTCOffset } from "@/utils/dateUtil";
88
import { TimezoneAwareCalendar } from "./ReviewActivityCalendar";
99
import { FaArrowRight, FaCalendarAlt } from "react-icons/fa";
@@ -69,16 +69,18 @@ export function CustomTimeSelector({
6969
return time;
7070
}, [range, latestTime, timezoneOffset, localTimeOffset]);
7171

72+
const is24Hour = use24HourTime(config);
73+
7274
const formattedStart = useFormattedTimestamp(
7375
startTime,
74-
config?.ui.time_format == "24hour"
76+
is24Hour
7577
? t("time.formattedTimestamp.24hour")
7678
: t("time.formattedTimestamp.12hour"),
7779
);
7880

7981
const formattedEnd = useFormattedTimestamp(
8082
endTime,
81-
config?.ui.time_format == "24hour"
83+
is24Hour
8284
? t("time.formattedTimestamp.24hour")
8385
: t("time.formattedTimestamp.12hour"),
8486
);

0 commit comments

Comments
 (0)