Add initial media filtering for the gallery.

src/components/media-filter.ts

@@ -1,8 +1,9 @@
-import { sub } from 'date-fns';
+import sub from 'date-fns/sub';
 import endOfDay from 'date-fns/endOfDay';
 import endOfYesterday from 'date-fns/endOfYesterday';
 import endOfToday from 'date-fns/esm/endOfToday';
 import startOfToday from 'date-fns/esm/startOfToday';
+import startOfDay from 'date-fns/startOfDay';
 import startOfYesterday from 'date-fns/startOfYesterday';
 import {
   css,
@@ -17,6 +18,7 @@ import { CameraManager } from '../camera/manager';
 import { DateRange } from '../camera/range';
 import { CameraConfig, ExtendedHomeAssistant } from '../types';
 import { getCameraTitle } from '../utils/camera';
+import { View } from '../view/view';
 import {
   MediaFilterCoreFavoriteSelection,
   MediaFilterCoreSelection,
@@ -26,6 +28,9 @@ import {
 } from './media-filter-core';
 import './surround.js';
 import './timeline-core.js';
+import { EventQuery, QueryType } from '../camera/types';
+import { EventMediaQueries } from '../view/media-queries';
+import { createViewForEvents } from '../utils/media-to-view.js';
 
 @customElement('frigate-card-media-filter')
 export class FrigateCardMediaFilter extends LitElement {
@@ -38,6 +43,12 @@ export class FrigateCardMediaFilter extends LitElement {
   @property({ attribute: false })
   public cameraManager?: CameraManager;
 
+  @property({ attribute: false })
+  public view?: View;
+
+  @property({ attribute: false })
+  public mediaLimit?: number;
+
   protected _cameraOptions: ValueLabel<string>[] = [];
 
   protected _convertWhenToDateRange(
@@ -46,9 +57,6 @@ export class FrigateCardMediaFilter extends LitElement {
     if (!value) {
       return null;
     }
-    if (value.selection === MediaFilterCoreWhen.Custom && value.custom) {
-      return value.custom;
-    }
     const now = new Date();
     switch (value.selection) {
       case MediaFilterCoreWhen.Today:
@@ -56,9 +64,13 @@ export class FrigateCardMediaFilter extends LitElement {
       case MediaFilterCoreWhen.Yesterday:
         return { start: startOfYesterday(), end: endOfYesterday() };
       case MediaFilterCoreWhen.PastWeek:
-        return { start: sub(now, { days: 7 }), end: endOfDay(now) };
+        return { start: startOfDay(sub(now, { days: 7 })), end: endOfDay(now) };
       case MediaFilterCoreWhen.PastMonth:
-        return { start: sub(now, { months: 1 }), end: endOfDay(now) };
+        return { start: startOfDay(sub(now, { months: 1 })), end: endOfDay(now) };
+      case MediaFilterCoreWhen.Custom:
+        if (value.custom) {
+          return value.custom;
+        }
     }
     return null;
   }
@@ -66,22 +78,44 @@ export class FrigateCardMediaFilter extends LitElement {
   protected _convertFavoriteToBoolean(
     value?: MediaFilterCoreFavoriteSelection,
   ): boolean | null {
-    if (!value || value === MediaFilterCoreFavoriteSelection.All) {
+    if (!value) {
       return null;
     }
     return value === MediaFilterCoreFavoriteSelection.Favorite;
   }
 
-  protected _mediaFilterHandler(ev: CustomEvent<MediaFilterCoreSelection>): void {
-    const convertedTime = this._convertWhenToDateRange(ev.detail.when);
-    const convertedFavorite = this._convertFavoriteToBoolean(ev.detail.favorite);
-    const details = {
-      ...ev.detail,
-      ...(convertedTime && { when: convertedTime }),
-      ...(convertedFavorite && { favorite: convertedFavorite }),
+  protected async _mediaFilterHandler(
+    ev: CustomEvent<MediaFilterCoreSelection>,
+  ): Promise<void> {
+    if (!this.cameras || !this.cameraManager || !this.hass || !this.view) {
+      return;
+    }
+    const mediaFilter = ev.detail;
+    const convertedTime = this._convertWhenToDateRange(mediaFilter.when);
+    const convertedFavorite = this._convertFavoriteToBoolean(mediaFilter.favorite);
+
+    const query: EventQuery = {
+      type: QueryType.Event,
+      cameraIDs: mediaFilter.cameraIDs ?? new Set(this.cameras.keys()),
+      ...(mediaFilter.what && { what: mediaFilter.what }),
+      ...(mediaFilter.where && { where: mediaFilter.where }),
+      ...(convertedFavorite !== null && { favorite: convertedFavorite }),
+      ...(convertedTime && { start: convertedTime.start, end: convertedTime.end }),
+      ...(this.mediaLimit && { limit: this.mediaLimit }),
     };
-    // TODO: remove.
-    console.debug('Received media filter choices:', details);
+
+    (
+      await createViewForEvents(
+        this,
+        this.hass,
+        this.cameraManager,
+        this.cameras,
+        this.view,
+        {
+          query: new EventMediaQueries([query]),
+        },
+      )
+    )?.dispatchChangeEvent(this);
   }
 
   protected willUpdate(changedProps: PropertyValues): void {