feat: Add support for Frigate reviews / detections [initial PR] (#2315)

- Add support for Frigate reviews / detections.
 - Add support for GenAI metadata.
- Significant internal refactor to more flexible "UnifiedQuery" to allow
mixing cameras with simple metadata and review metadata (e.g. a timeline
view of a Frigate camera with reviews, and a Reolink camera with simple
metadata).
 - Add support for folder media as camera media.

There are a few more PRs to commit prior to this going live, but
commiting this for now due to the scale of the change.

BREAKING CHANGE: `media_type` and `events_type` are retired under
`live`, `viewer` and `timeline` configuration sections, instead media
type is associated (once) with the camera under `media`.

src/components/thumbnail/details.ts

@@ -7,10 +7,12 @@ import {
   unsafeCSS,
 } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { CameraManager } from '../../camera-manager/manager';
-import { ThumbnailDetailsController } from '../../components-lib/thumbnail/details-controller';
+import { MediaDetailsController } from '../../components-lib/media/details-controller';
 import { HomeAssistant } from '../../ha/types';
 import thumbnailDetailsStyle from '../../scss/thumbnail-details.scss';
+import { MetadataField } from '../../types';
 import { ViewItem } from '../../view/item';
 import '../icon';
 
@@ -28,7 +30,7 @@ export class AdvancedCameraCardThumbnailDetails extends LitElement {
   @property({ attribute: false })
   public seek?: Date;
 
-  private _controller = new ThumbnailDetailsController();
+  private _controller = new MediaDetailsController();
 
   protected willUpdate(changedProperties: PropertyValues): void {
     if (['item', 'seek', 'cameraManager'].some((prop) => changedProperties.has(prop))) {
@@ -40,28 +42,26 @@ export class AdvancedCameraCardThumbnailDetails extends LitElement {
     const heading = this._controller.getHeading();
     const details = this._controller.getDetails();
 
+    const renderDetail = (detail: MetadataField, heading = false): TemplateResult => {
+      return html`<div
+        class=${classMap({
+          heading,
+        })}
+      >
+        ${detail.icon
+          ? html` <advanced-camera-card-icon
+              severity=${detail.emphasis}
+              title=${detail.hint ?? ''}
+              .icon=${detail.icon}
+            ></advanced-camera-card-icon>`
+          : ''}
+        <span title=${detail.title}>${detail.title}</span>
+      </div>`;
+    };
+
     return html`
-      ${heading
-        ? html` <div class="heading">
-            <span title=${heading}>${heading}</span>
-          </div>`
-        : ``}
-      ${details
-        ? html` <div class="details">
-            ${details.map(
-              (detail) =>
-                html`<div>
-                  ${detail.icon
-                    ? html` <advanced-camera-card-icon
-                        title=${detail.hint ?? ''}
-                        .icon=${detail.icon}
-                      ></advanced-camera-card-icon>`
-                    : ''}
-                  <span>${detail.title}</span>
-                </div>`,
-            )}
-          </div>`
-        : ''}
+      ${heading ? renderDetail(heading, true) : ``}
+      ${details.length ? details.map((detail) => renderDetail(detail)) : ``}
     `;
   }