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 (