Use new UI (#8983)

* fixup build

* swap frontends

web/src/types/event.ts

@@ -0,0 +1,25 @@
+export interface Event {
+    id: string;
+    label: string;
+    sub_label?: string;
+    camera: string;
+    start_time: number;
+    end_time?: number;
+    false_positive: boolean;
+    zones: string[];
+    thumbnail: string;
+    has_clip: boolean;
+    has_snapshot: boolean;
+    retain_indefinitely: boolean;
+    plus_id?: string;
+    model_hash?: string;
+    data: {
+        top_score: number;
+        score: number;
+        region: number[];
+        box: number[];
+        area: number;
+        ratio: number;
+        type: "object" | "audio" | "manual";
+    }
+}

web/src/types/frigateConfig.ts

@@ -0,0 +1,404 @@
+export interface UiConfig {
+  timezone?: string;
+  time_format?: 'browser' | '12hour' | '24hour';
+  date_style?: 'full' | 'long' | 'medium' | 'short';
+  time_style?: 'full' | 'long' | 'medium' | 'short';
+  strftime_fmt?: string;
+  live_mode?: string;
+  use_experimental?: boolean;
+  dashboard: boolean;
+  order: number;
+}
+
+export interface CameraConfig {
+  audio: {
+    enabled: boolean;
+    enabled_in_config: boolean;
+    filters: string[] | null;
+    listen: string[];
+    max_not_heard: number;
+    min_volume: number;
+    num_threads: number;
+  };
+  best_image_timeout: number;
+  birdseye: {
+    enabled: boolean;
+    mode: "objects";
+    order: number;
+  };
+  detect: {
+    annotation_offset: number;
+    enabled: boolean;
+    fps: number;
+    height: number;
+    max_disappeared: number;
+    min_initialized: number;
+    stationary: {
+      interval: number;
+      max_frames: {
+        default: number | null;
+        objects: Record<string, unknown>;
+      };
+      threshold: number;
+    };
+    width: number;
+  };
+  enabled: boolean;
+  ffmpeg: {
+    global_args: string[];
+    hwaccel_args: string;
+    input_args: string;
+    inputs: {
+      global_args: string[];
+      hwaccel_args: string[];
+      input_args: string;
+      path: string;
+      roles: string[];
+    }[];
+    output_args: {
+      detect: string[];
+      record: string;
+      rtmp: string;
+    };
+    retry_interval: number;
+  };
+  ffmpeg_cmds: {
+    cmd: string;
+    roles: string[];
+  }[];
+  live: {
+    height: number;
+    quality: number;
+    stream_name: string;
+  };
+  motion: {
+    contour_area: number;
+    delta_alpha: number;
+    frame_alpha: number;
+    frame_height: number;
+    improve_contrast: boolean;
+    lightning_threshold: number;
+    mask: string[];
+    mqtt_off_delay: number;
+    threshold: number;
+  };
+  mqtt: {
+    bounding_box: boolean;
+    crop: boolean;
+    enabled: boolean;
+    height: number;
+    quality: number;
+    required_zones: string[];
+    timestamp: boolean;
+  };
+  name: string;
+  objects: {
+    filters: {
+      [objectName: string]: {
+        mask: string | null;
+        max_area: number;
+        max_ratio: number;
+        min_area: number;
+        min_ratio: number;
+        min_score: number;
+        threshold: number;
+      };
+    };
+    mask: string;
+    track: string[];
+  };
+  onvif: {
+    autotracking: {
+      calibrate_on_startup: boolean;
+      enabled: boolean;
+      enabled_in_config: boolean;
+      movement_weights: string[];
+      required_zones: string[];
+      return_preset: string;
+      timeout: number;
+      track: string[];
+      zoom_factor: number;
+      zooming: string;
+    };
+    host: string;
+    password: string | null;
+    port: number;
+    user: string | null;
+  };
+  record: {
+    enabled: boolean;
+    enabled_in_config: boolean;
+    events: {
+      objects: string[] | null;
+      post_capture: number;
+      pre_capture: number;
+      required_zones: string[];
+      retain: {
+        default: number;
+        mode: string;
+        objects: Record<string, unknown>;
+      };
+    };
+    expire_interval: number;
+    export: {
+      timelapse_args: string;
+    };
+    preview: {
+      quality: string;
+    };
+    retain: {
+      days: number;
+      mode: string;
+    };
+    sync_recordings: boolean;
+  };
+  rtmp: {
+    enabled: boolean;
+  };
+  snapshots: {
+    bounding_box: boolean;
+    clean_copy: boolean;
+    crop: boolean;
+    enabled: boolean;
+    height: number | null;
+    quality: number;
+    required_zones: string[];
+    retain: {
+      default: number;
+      mode: string;
+      objects: Record<string, unknown>;
+    };
+    timestamp: boolean;
+  };
+  timestamp_style: {
+    color: {
+      blue: number;
+      green: number;
+      red: number;
+    };
+    effect: string | null;
+    format: string;
+    position: string;
+    thickness: number;
+  };
+  ui: UiConfig;
+  webui_url: string | null;
+  zones: {
+    [zoneName: string]: {
+      coordinates: string;
+      filters: Record<string, unknown>;
+      inertia: number;
+      objects: any[];
+    };
+  };
+}
+
+export interface FrigateConfig {
+  audio: {
+    enabled: boolean;
+    enabled_in_config: boolean | null;
+    filters: string[] | null;
+    listen: string[];
+    max_not_heard: number;
+    min_volume: number;
+    num_threads: number;
+  };
+
+  birdseye: {
+    enabled: boolean;
+    height: number;
+    mode: "objects";
+    quality: number;
+    restream: boolean;
+    width: number;
+  };
+
+  cameras: {
+    [cameraName: string]: CameraConfig;
+  };
+
+  database: {
+    path: string;
+  };
+
+  detect: {
+    annotation_offset: number;
+    enabled: boolean;
+    fps: number;
+    height: number | null;
+    max_disappeared: number | null;
+    min_initialized: number | null;
+    stationary: {
+      interval: number | null;
+      max_frames: {
+        default: number | null;
+        objects: Record<string, unknown>;
+      };
+      threshold: number | null;
+    };
+    width: number | null;
+  };
+
+  detectors: {
+    coral: {
+      device: string;
+      model: {
+        height: number;
+        input_pixel_format: string;
+        input_tensor: string;
+        labelmap: Record<string, string>;
+        labelmap_path: string | null;
+        model_type: string;
+        path: string;
+        width: number;
+      };
+      type: string;
+    };
+  };
+
+  environment_vars: Record<string, unknown>;
+
+  ffmpeg: {
+    global_args: string[];
+    hwaccel_args: string;
+    input_args: string;
+    output_args: {
+      detect: string[];
+      record: string;
+      rtmp: string;
+    };
+    retry_interval: number;
+  };
+
+  go2rtc: Record<string, unknown>;
+
+  live: {
+    height: number;
+    quality: number;
+    stream_name: string;
+  };
+
+  logger: {
+    default: string;
+    logs: Record<string, string>;
+  };
+
+  model: {
+    height: number;
+    input_pixel_format: string;
+    input_tensor: string;
+    labelmap: Record<string, unknown>;
+    labelmap_path: string | null;
+    model_type: string;
+    path: string | null;
+    width: number;
+  };
+
+  motion: Record<string, unknown> | null;
+
+  mqtt: {
+    client_id: string;
+    enabled: boolean;
+    host: string;
+    port: number;
+    stats_interval: number;
+    tls_ca_certs: string | null;
+    tls_client_cert: string | null;
+    tls_client_key: string | null;
+    tls_insecure: boolean | null;
+    topic_prefix: string;
+    user: string | null;
+  };
+
+  objects: {
+    filters: {
+      [objectName: string]: {
+        mask: string | null;
+        max_area: number;
+        max_ratio: number;
+        min_area: number;
+        min_ratio: number;
+        min_score: number;
+        threshold: number;
+      };
+    };
+    mask: string;
+    track: string[];
+  };
+
+  plus: {
+    enabled: boolean;
+  };
+
+  record: {
+    enabled: boolean;
+    enabled_in_config: boolean | null;
+    events: {
+      objects: string[] | null;
+      post_capture: number;
+      pre_capture: number;
+      required_zones: string[];
+      retain: {
+        default: number;
+        mode: string;
+        objects: Record<string, unknown>;
+      };
+    };
+    expire_interval: number;
+    export: {
+      timelapse_args: string;
+    };
+    preview: {
+      quality: string;
+    };
+    retain: {
+      days: number;
+      mode: string;
+    };
+    sync_recordings: boolean;
+  };
+
+  rtmp: {
+    enabled: boolean;
+  };
+
+  snapshots: {
+    bounding_box: boolean;
+    clean_copy: boolean;
+    crop: boolean;
+    enabled: boolean;
+    height: number | null;
+    quality: number;
+    required_zones: string[];
+    retain: {
+      default: number;
+      mode: string;
+      objects: Record<string, unknown>;
+    };
+    timestamp: boolean;
+  };
+
+  telemetry: {
+    network_interfaces: any[];
+    stats: {
+      amd_gpu_stats: boolean;
+      intel_gpu_stats: boolean;
+      network_bandwidth: boolean;
+    };
+    version_check: boolean;
+  };
+
+  timestamp_style: {
+    color: {
+      blue: number;
+      green: number;
+      red: number;
+    };
+    effect: string | null;
+    format: string;
+    position: string;
+    thickness: number;
+  };
+
+  ui: UiConfig;
+}

web/src/types/history.ts

@@ -0,0 +1,39 @@
+type CardsData = {
+    [key: string]: {
+        [key: string]: {
+            [key: string]: Card
+        }
+    }
+}
+
+type Card = {
+    camera: string,
+    time: number,
+    entries: Timeline[],
+}
+
+type Preview = {
+    camera: string,
+    src: string,
+    type: string,
+    start: number,
+    end: number,
+}
+
+type Timeline = {
+    camera: string,
+    timestamp: number,
+    data: {
+        [key: string]: any
+    },
+    class_type: string,
+    source_id: string,
+    source: string,
+}
+
+type HourlyTimeline = {
+    start: number,
+    end: number,
+    count: number,
+    hours: { [key: string]: Timeline[] };
+}

web/src/types/record.ts

@@ -0,0 +1,11 @@
+type Recording = {
+    id: string,
+    camera: string,
+    start_time: number,
+    end_time: number,
+    path: string,
+    segment_size: number,
+    motion: number,
+    objects: number,
+    dBFS: number,
+}