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/types/history.ts

@@ -21,33 +21,6 @@ type Preview = {
   end: number;
 };
 
-type Timeline = {
-  camera: string;
-  timestamp: number;
-  data: {
-    [key: string]: any;
-  };
-  class_type:
-    | "visible"
-    | "gone"
-    | "sub_label"
-    | "entered_zone"
-    | "attribute"
-    | "active"
-    | "stationary"
-    | "heard"
-    | "external";
-  source_id: string;
-  source: string;
-};
-
-type HourlyTimeline = {
-  start: number;
-  end: number;
-  count: number;
-  hours: { [key: string]: Timeline[] };
-};
-
 interface HistoryFilter extends FilterType {
   cameras: string[];
   labels: string[];

web/src/types/playback.ts

@@ -0,0 +1,5 @@
+type DynamicPlayback = {
+  recordings: Recording[];
+  playbackUri: string;
+  preview: Preview | undefined;
+};

web/src/types/record.ts

@@ -5,6 +5,7 @@ type Recording = {
   end_time: number;
   path: string;
   segment_size: number;
+  duration: number;
   motion: number;
   objects: number;
   dBFS: number;
@@ -17,6 +18,7 @@ type RecordingSegment = {
   motion: number;
   objects: number;
   segment_size: number;
+  duration: number;
 };
 
 type RecordingActivity = {
@@ -26,5 +28,5 @@ type RecordingActivity = {
 type RecordingSegmentActivity = {
   date: number;
   count: number;
-  type: "motion" | "objects";
+  hasObjects: boolean;
 };

web/src/types/timeline.ts

@@ -0,0 +1,31 @@
+type Timeline = {
+    camera: string;
+    timestamp: number;
+    data: {
+      camera: string;
+      label: string;
+      sub_label: string;
+      box?: [number, number, number, number];
+      region: [number, number, number, number];
+      attribute: string;
+      zones: string[];
+    };
+    class_type:
+      | "visible"
+      | "gone"
+      | "entered_zone"
+      | "attribute"
+      | "active"
+      | "stationary"
+      | "heard"
+      | "external";
+    source_id: string;
+    source: string;
+  };
+
+  type HourlyTimeline = {
+    start: number;
+    end: number;
+    count: number;
+    hours: { [key: string]: Timeline[] };
+  };