Improve graph using pandas (#9234)

* Ensure viewport is always full screen

* Protect against hour with no cards and ensure data is consistent

* Reduce grouped up image refreshes

* Include current hour and fix scrubbing bugginess

* Scroll initially selected timeline in to view

* Expand timelne class type

* Use poster image for preview on video player instead of using separate image view

* Fix available streaming modes

* Incrase timing for grouping timline items

* Fix audio activity listener

* Fix player not switching views correctly

* Use player time to convert to timeline time

* Update sub labels for previous timeline items

* Show mini timeline bar for non selected items

* Rewrite desktop timeline to use separate dynamic video player component

* Extend improvements to mobile as well

* Improve time formatting

* Fix scroll

* Fix no preview case

* Mobile fixes

* Audio toggle fixes

* More fixes for mobile

* Improve scaling of graph motion activity

* Add keyboard shortcut hook and support shortcuts for playback page

* Fix sizing of dialog

* Improve height scaling of dialog

* simplify and fix layout system for timeline

* Fix timeilne items not working

* Implement basic Frigate+ submitting from timeline

web/src/components/scrubber/ActivityScrubber.tsx

@@ -9,6 +9,8 @@ import {
 } from "vis-timeline";
 import type { DataGroup, DataItem, TimelineEvents } from "vis-timeline/types";
 import "./scrubber.css";
+import useSWR from "swr";
+import { FrigateConfig } from "@/types/frigateConfig";
 
 export type TimelineEventsWithMissing =
   | TimelineEvents
@@ -89,14 +91,13 @@ function ActivityScrubber({
   options,
   ...eventHandlers
 }: ActivityScrubberProps) {
+  const { data: config } = useSWR<FrigateConfig>("config");
   const containerRef = useRef<HTMLDivElement>(null);
   const timelineRef = useRef<{ timeline: VisTimeline | null }>({
     timeline: null,
   });
   const [currentTime, setCurrentTime] = useState(Date.now());
-  const [_, setCustomTimes] = useState<
-    { id: IdType; time: DateType }[]
-  >([]);
+  const [_, setCustomTimes] = useState<{ id: IdType; time: DateType }[]>([]);
 
   const defaultOptions: TimelineOptions = {
     width: "100%",
@@ -110,8 +111,11 @@ function ActivityScrubber({
     max: currentTime,
     format: {
       minorLabels: {
-        minute: "h:mma",
-        hour: "ha",
+        minute: config?.ui.time_format == "24hour" ? "HH:mm" : "hh:mma",
+      },
+      majorLabels: {
+        minute:
+          config?.ui.time_format == "24hour" ? "MM/DD HH:mm" : "MM/DD hh:mma",
       },
     },
   };
@@ -139,8 +143,8 @@ function ActivityScrubber({
 
     const timelineInstance = new VisTimeline(
       divElement,
-      items as DataItem[],
-      groups as DataGroup[],
+      (items || []) as DataItem[],
+      (groups || []) as DataGroup[],
       timelineOptions
     );