UI Fixes (#13703)

* Respect ui configured timezone

* Non alert videos are always 16:9

web/src/components/card/AnimatedEventCard.tsx

@@ -91,13 +91,17 @@ export function AnimatedEventCard({
   const [alertVideos] = usePersistence("alertVideos", true);
 
   const aspectRatio = useMemo(() => {
-    if (!config || !Object.keys(config.cameras).includes(event.camera)) {
+    if (
+      !config ||
+      !alertVideos ||
+      !Object.keys(config.cameras).includes(event.camera)
+    ) {
       return 16 / 9;
     }
 
     const detect = config.cameras[event.camera].detect;
     return detect.width / detect.height;
-  }, [config, event]);
+  }, [alertVideos, config, event]);
 
   return (
     <Tooltip>

web/src/components/card/ReviewCard.tsx

@@ -50,6 +50,7 @@ export default function ReviewCard({
   const formattedDate = useFormattedTimestamp(
     event.start_time,
     config?.ui.time_format == "24hour" ? "%H:%M" : "%I:%M %p",
+    config?.ui.timezone,
   );
   const isSelected = useMemo(
     () =>

web/src/components/card/SearchThumbnail.tsx

@@ -42,6 +42,7 @@ export default function SearchThumbnail({
   const formattedDate = useFormattedTimestamp(
     searchResult.start_time,
     config?.ui.time_format == "24hour" ? "%b %-d, %H:%M" : "%b %-d, %I:%M %p",
+    config?.ui.timezone,
   );
 
   return (

web/src/components/overlay/detail/ReviewDetailDialog.tsx

@@ -73,6 +73,7 @@ export default function ReviewDetailDialog({
     config?.ui.time_format == "24hour"
       ? "%b %-d %Y, %H:%M"
       : "%b %-d %Y, %I:%M %p",
+    config?.ui.timezone,
   );
 
   // content

web/src/components/overlay/detail/SearchDetailDialog.tsx

@@ -227,6 +227,7 @@ function ObjectDetailsTab({
     config?.ui.time_format == "24hour"
       ? "%b %-d %Y, %H:%M"
       : "%b %-d %Y, %I:%M %p",
+    config?.ui.timezone,
   );
 
   const score = useMemo(() => {

web/src/components/player/PreviewThumbnailPlayer.tsx

@@ -168,6 +168,7 @@ export default function PreviewThumbnailPlayer({
   const formattedDate = useFormattedTimestamp(
     review.start_time,
     config?.ui.time_format == "24hour" ? "%b %-d, %H:%M" : "%b %-d, %I:%M %p",
+    config?.ui?.timezone,
   );
 
   return (

web/src/hooks/use-date-utils.ts

@@ -2,12 +2,17 @@ import { FrigateConfig } from "@/types/frigateConfig";
 import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
 import { useMemo } from "react";
 
-export function useFormattedTimestamp(timestamp: number, format: string) {
+export function useFormattedTimestamp(
+  timestamp: number,
+  format: string,
+  timezone?: string,
+) {
   const formattedTimestamp = useMemo(() => {
     return formatUnixTimestampToDateTime(timestamp, {
+      timezone,
       strftime_fmt: format,
     });
-  }, [format, timestamp]);
+  }, [format, timestamp, timezone]);
 
   return formattedTimestamp;
 }