From d14bd1b29f40d2cb564637e6c8657b9e7f3d512a Mon Sep 17 00:00:00 2001
From: Nick Mowen <nickmowen213@gmail.com>
Date: Fri, 26 Jan 2024 06:32:04 -0700
Subject: [PATCH] Improve time formatting

---
 web/src/components/bar/TimelineBar.tsx        |  8 +++++++-
 web/src/views/history/DesktopTimelineView.tsx | 10 +++++++++-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/web/src/components/bar/TimelineBar.tsx b/web/src/components/bar/TimelineBar.tsx
index 9039c2f3c..6b1b87ce3 100644
--- a/web/src/components/bar/TimelineBar.tsx
+++ b/web/src/components/bar/TimelineBar.tsx
@@ -2,6 +2,7 @@ import { FrigateConfig } from "@/types/frigateConfig";
 import { GraphDataPoint } from "@/types/graph";
 import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
 import useSWR from "swr";
+import ActivityIndicator from "../ui/activity-indicator";
 
 type TimelineBarProps = {
   startTime: number;
@@ -20,6 +21,10 @@ export default function TimelineBar({
 }: TimelineBarProps) {
   const { data: config } = useSWR<FrigateConfig>("config");
 
+  if (!config) {
+    return <ActivityIndicator />;
+  }
+
   return (
     <div
       className="my-1 p-1 w-full h-18 border rounded cursor-pointer hover:bg-secondary hover:bg-opacity-30"
@@ -165,7 +170,8 @@ export default function TimelineBar({
       )}
       <div className="text-gray-500">
         {formatUnixTimestampToDateTime(startTime, {
-          strftime_fmt: "%a %d %B",
+          strftime_fmt:
+            config.ui.time_format == "24hour" ? "%m/%d %H:%M" : "%m/%d %I:%M%P",
           time_style: "medium",
           date_style: "medium",
         })}
diff --git a/web/src/views/history/DesktopTimelineView.tsx b/web/src/views/history/DesktopTimelineView.tsx
index 559ac9928..697e824a5 100644
--- a/web/src/views/history/DesktopTimelineView.tsx
+++ b/web/src/views/history/DesktopTimelineView.tsx
@@ -72,7 +72,7 @@ export default function DesktopTimelineView({
     ],
     { revalidateOnFocus: false }
   );
-  
+
   const timelineGraphData = useMemo(() => {
     if (!activity) {
       return {};
@@ -181,6 +181,14 @@ export default function DesktopTimelineView({
                       min: new Date(timeline.range.start * 1000),
                       max: new Date(timeline.range.end * 1000),
                       zoomable: false,
+                      format: {
+                        majorLabels: {
+                          minute:
+                            config.ui.time_format == "24hour"
+                              ? "MM/DD HH:mm"
+                              : "MM/DD hh:mma",
+                        },
+                      },
                     }}
                     timechangeHandler={(data) => {
                       controllerRef.current?.scrubToTimestamp(