From 19d17c8c81228cb8c197322e6a8d0136acdf66e5 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Sat, 14 Jan 2023 10:03:29 -0700
Subject: [PATCH] Use memo for recordings timezone (#5086)

---
 web/src/routes/Events.jsx    | 5 +++--
 web/src/routes/Recording.jsx | 6 +-----
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/web/src/routes/Events.jsx b/web/src/routes/Events.jsx
index 2f8fd8a9d..2b79efe90 100644
--- a/web/src/routes/Events.jsx
+++ b/web/src/routes/Events.jsx
@@ -296,6 +296,7 @@ export default function Events({ path, ...props }) {
   }
 
   const timezone = config.ui?.timezone || Intl.DateTimeFormat().resolvedOptions().timeZone;
+  const locale = window.navigator?.language || 'en-US';
 
   return (
     <div className="space-y-4 p-2 px-4 w-full">
@@ -514,8 +515,8 @@ export default function Events({ path, ...props }) {
                           ({(event.top_score * 100).toFixed(0)}%)
                         </div>
                         <div className="text-sm">
-                          {new Date(event.start_time * 1000).toLocaleDateString({ timeZone: timezone })}{' '}
-                          {new Date(event.start_time * 1000).toLocaleTimeString({ timeZone: timezone })} (
+                          {new Date(event.start_time * 1000).toLocaleDateString(locale, { timeZone: timezone })}{' '}
+                          {new Date(event.start_time * 1000).toLocaleTimeString(locale, { timeZone: timezone })} (
                           {clipDuration(event.start_time, event.end_time)})
                         </div>
                         <div className="capitalize text-sm flex align-center mt-1">
diff --git a/web/src/routes/Recording.jsx b/web/src/routes/Recording.jsx
index f8fcd5e54..d36049342 100644
--- a/web/src/routes/Recording.jsx
+++ b/web/src/routes/Recording.jsx
@@ -10,11 +10,11 @@ import useSWR from 'swr';
 
 export default function Recording({ camera, date, hour = '00', minute = '00', second = '00' }) {
   const { data: config } = useSWR('config');
-  let timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
   const currentDate = useMemo(
     () => (date ? parseISO(`${date}T${hour || '00'}:${minute || '00'}:${second || '00'}`) : new Date()),
     [date, hour, minute, second]
   );
+  const timezone = useMemo(() => config.ui?.timezone || Intl.DateTimeFormat().resolvedOptions().timeZone, [config]);
 
   const apiHost = useApiHost();
   const { data: recordingsSummary } = useSWR([`${camera}/recordings/summary`, { timezone }], {
@@ -118,10 +118,6 @@ export default function Recording({ camera, date, hour = '00', minute = '00', se
     return <ActivityIndicator />;
   }
 
-  if (config.ui.timezone) {
-    timezone = config.ui.timezone;
-  }
-
   if (recordingsSummary.length === 0) {
     return (
       <div className="space-y-4">