Webui cleanups (#8991)

* Fix mobile event timeago

* Reduce preview playback rate for safari browser

* Fix dashboard buttons

* Update recent events correctly

* Fix opening page on icon toggle

* Fix video player remote playback check

* fix history image

* Add sticky headers to history page

* Fix iOS empty frame

* reduce duplicate items and improve time format

* Organize data more effictively and ensure data is not overwritten

* Use icon to indicate preview

web/src/pages/History.tsx

@@ -7,9 +7,10 @@ import ActivityIndicator from "@/components/ui/activity-indicator";
 import HistoryCard from "@/components/card/HistoryCard";
 import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
 import axios from "axios";
-import TimelinePlayerCard from "@/components/card/TimelineCardPlayer";
+import TimelinePlayerCard from "@/components/card/TimelinePlayerCard";
+import { getHourlyTimelineData } from "@/utils/historyUtil";
 
-const API_LIMIT = 120;
+const API_LIMIT = 200;
 
 function History() {
   const { data: config } = useSWR<FrigateConfig>("config");
@@ -59,83 +60,7 @@ function History() {
       return [];
     }
 
-    const cards: CardsData = {};
-    timelinePages.forEach((hourlyTimeline) => {
-      Object.keys(hourlyTimeline["hours"])
-        .reverse()
-        .forEach((hour) => {
-          const day = new Date(parseInt(hour) * 1000);
-          day.setHours(0, 0, 0, 0);
-          const dayKey = (day.getTime() / 1000).toString();
-          const source_to_types: { [key: string]: string[] } = {};
-          Object.values(hourlyTimeline["hours"][hour]).forEach((i) => {
-            const time = new Date(i.timestamp * 1000);
-            time.setSeconds(0);
-            time.setMilliseconds(0);
-            const key = `${i.source_id}-${time.getMinutes()}`;
-            if (key in source_to_types) {
-              source_to_types[key].push(i.class_type);
-            } else {
-              source_to_types[key] = [i.class_type];
-            }
-          });
-
-          if (!Object.keys(cards).includes(dayKey)) {
-            cards[dayKey] = {};
-          }
-          cards[dayKey][hour] = {};
-          Object.values(hourlyTimeline["hours"][hour]).forEach((i) => {
-            const time = new Date(i.timestamp * 1000);
-            const key = `${i.camera}-${time.getMinutes()}`;
-
-            // detail level for saving items
-            // detail level determines which timeline items for each moment is returned
-            // values can be normal, extra, or full
-            // normal: return all items except active / attribute / gone / stationary / visible unless that is the only item.
-            // extra: return all items except attribute / gone / visible unless that is the only item
-            // full: return all items
-
-            let add = true;
-            if (detailLevel == "normal") {
-              if (
-                source_to_types[`${i.source_id}-${time.getMinutes()}`].length >
-                  1 &&
-                [
-                  "active",
-                  "attribute",
-                  "gone",
-                  "stationary",
-                  "visible",
-                ].includes(i.class_type)
-              ) {
-                add = false;
-              }
-            } else if (detailLevel == "extra") {
-              if (
-                source_to_types[`${i.source_id}-${time.getMinutes()}`].length >
-                  1 &&
-                i.class_type in ["attribute", "gone", "visible"]
-              ) {
-                add = false;
-              }
-            }
-
-            if (add) {
-              if (key in cards[dayKey][hour]) {
-                cards[dayKey][hour][key].entries.push(i);
-              } else {
-                cards[dayKey][hour][key] = {
-                  camera: i.camera,
-                  time: time.getTime() / 1000,
-                  entries: [i],
-                };
-              }
-            }
-          });
-        });
-    });
-
-    return cards;
+    return getHourlyTimelineData(timelinePages, detailLevel);
   }, [detailLevel, timelinePages]);
 
   const isDone =
@@ -168,9 +93,6 @@ function History() {
   return (
     <>
       <Heading as="h2">Review</Heading>
-      <div className="text-xs mb-4">
-        Dates and times are based on the timezone {timezone}
-      </div>
 
       <TimelinePlayerCard
         timeline={playback}
@@ -183,7 +105,10 @@ function History() {
           .map(([day, timelineDay], dayIdx) => {
             return (
               <div key={day}>
-                <Heading as="h3">
+                <Heading
+                  className="sticky py-2 -top-4 left-0 bg-background w-full z-10"
+                  as="h3"
+                >
                   {formatUnixTimestampToDateTime(parseInt(day), {
                     strftime_fmt: "%A %b %d",
                     time_style: "medium",
@@ -206,7 +131,10 @@ function History() {
                       <div key={hour} ref={lastRow ? lastTimelineRef : null}>
                         <Heading as="h4">
                           {formatUnixTimestampToDateTime(parseInt(hour), {
-                            strftime_fmt: "%I:00",
+                            strftime_fmt:
+                              config.ui.time_format == "24hour"
+                                ? "%H:00"
+                                : "%I:00 %p",
                             time_style: "medium",
                             date_style: "medium",
                           })}
@@ -229,6 +157,7 @@ function History() {
                                       preview.end > startTs
                                   );
                               }
+
                               return (
                                 <HistoryCard
                                   key={key}