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/hooks/use-keyboard-listener.tsx

@@ -0,0 +1,43 @@
+import { useCallback, useEffect } from "react";
+
+export default function useKeyboardListener(
+  keys: string[],
+  listener: (key: string, down: boolean, repeat: boolean) => void
+) {
+  const keyDownListener = useCallback(
+    (e: KeyboardEvent) => {
+      if (!e) {
+        return;
+      }
+
+      if (keys.includes(e.key)) {
+        e.preventDefault();
+        listener(e.key, true, e.repeat);
+      }
+    },
+    [listener]
+  );
+
+  const keyUpListener = useCallback(
+    (e: KeyboardEvent) => {
+      if (!e) {
+        return;
+      }
+
+      if (keys.includes(e.key)) {
+        e.preventDefault();
+        listener(e.key, false, false);
+      }
+    },
+    [listener]
+  );
+
+  useEffect(() => {
+    document.addEventListener("keydown", keyDownListener);
+    document.addEventListener("keyup", keyUpListener);
+    return () => {
+      document.removeEventListener("keydown", keyDownListener);
+      document.removeEventListener("keyup", keyUpListener);
+    };
+  }, [listener]);
+}