Support media type in core filter.

src/components/media-filter-core.ts

@@ -10,7 +10,7 @@ import { customElement, property } from 'lit/decorators.js';
 import { createRef, ref, Ref } from 'lit/directives/ref.js';
 import { DateRange } from '../camera/range';
 import { localize } from '../localize/localize';
-import mediaFilterStyle from '../scss/media-filter.scss';
+import mediaFilterCoreStyle from '../scss/media-filter-core.scss';
 import { ExtendedHomeAssistant } from '../types';
 import { dispatchFrigateCardEvent } from '../utils/basic';
 
@@ -20,6 +20,7 @@ export interface ValueLabel<T> {
 }
 
 export interface MediaFilterCoreSelection {
+  mediaType?: MediaFilterMediaType;
   cameraIDs?: Set<string>;
   what?: Set<string>;
   where?: Set<string>;
@@ -44,11 +45,26 @@ export enum MediaFilterCoreWhen {
   Custom = 'custom',
 }
 
+export enum MediaFilterMediaType {
+  Clips = 'clips',
+  Snapshots = 'snapshots',
+  Recordings = 'recordings',
+}
+
 export interface MediaFilterCoreWhenSelection {
   selection: MediaFilterCoreWhen;
   custom?: DateRange;
 }
 
+export enum MediaFilterControl {
+  mediaType = 'mediaType',
+  when = 'when',
+  camera = 'camera',
+  what = 'what',
+  where = 'where',
+  favorite = 'favorite',
+}
+
 @customElement('frigate-card-media-filter-core')
 export class FrigateCardMediaFilterCore extends LitElement {
   @property({ attribute: false })
@@ -69,12 +85,17 @@ export class FrigateCardMediaFilterCore extends LitElement {
   @property({ attribute: false })
   public defaults?: MediaFilterCoreSelection;
 
+  @property({ attribute: false })
+  public controls?: Record<MediaFilterControl, boolean>;
+
   protected _cameraOptions?: ValueLabel<string>[];
   protected _whenOptions?: ValueLabel<MediaFilterCoreWhenSelection>[];
   protected _whatOptions?: ValueLabel<string>[];
   protected _whereOptions?: ValueLabel<string>[];
   protected _favoriteOptions: ValueLabel<MediaFilterCoreFavoriteSelection>[];
+  protected _mediaTypeOptions: ValueLabel<MediaFilterMediaType>[];
 
+  protected _refMediaType: Ref<FilterElement<MediaFilterMediaType>> = createRef();
   protected _refCamera: Ref<FilterElement<string>> = createRef();
   protected _refWhen: Ref<FilterElement<MediaFilterCoreWhenSelection>> = createRef();
   protected _refWhat: Ref<FilterElement<string>> = createRef();
@@ -98,6 +119,20 @@ export class FrigateCardMediaFilterCore extends LitElement {
         label: localize('media_filter.not_favorite'),
       },
     ];
+    this._mediaTypeOptions = [
+      {
+        value: MediaFilterMediaType.Clips,
+        label: localize('media_filter.media_types.clips'),
+      },
+      {
+        value: MediaFilterMediaType.Snapshots,
+        label: localize('media_filter.media_types.snapshots'),
+      },
+      {
+        value: MediaFilterMediaType.Recordings,
+        label: localize('media_filter.media_types.recordings'),
+      },
+    ];
   }
 
   protected _valueChangedHandler(ev: CustomEvent<{ value: unknown }>): void {
@@ -106,6 +141,10 @@ export class FrigateCardMediaFilterCore extends LitElement {
       return;
     }
     const values: MediaFilterCoreSelection = {
+      ...(this._refMediaType.value &&
+        this._refMediaType.value.selectedItem?.value && {
+          mediaType: this._refMediaType.value.selectedItem?.value,
+        }),
       ...(this._refCamera.value &&
         this._refCamera.value.selectedItem?.value && {
           cameraIDs: new Set([this._refCamera.value.selectedItem.value]),
@@ -150,19 +189,19 @@ export class FrigateCardMediaFilterCore extends LitElement {
         },
         {
           value: { selection: MediaFilterCoreWhen.Today },
-          label: localize('media_filter.today'),
+          label: localize('media_filter.whens.today'),
         },
         {
           value: { selection: MediaFilterCoreWhen.Yesterday },
-          label: localize('media_filter.yesterday'),
+          label: localize('media_filter.whens.yesterday'),
         },
         {
           value: { selection: MediaFilterCoreWhen.PastWeek },
-          label: localize('media_filter.past_week'),
+          label: localize('media_filter.whens.past_week'),
         },
         {
           value: { selection: MediaFilterCoreWhen.PastMonth },
-          label: localize('media_filter.past_month'),
+          label: localize('media_filter.whens.past_month'),
         },
         ...(this.whenOptions ?? []),
       ];
@@ -186,58 +225,72 @@ export class FrigateCardMediaFilterCore extends LitElement {
    * @returns A rendered template.
    */
   protected render(): TemplateResult | void {
-    return html`
+    return html` ${this.controls?.mediaType ?? true
-      <ha-combo-box
+      ? html` <ha-combo-box
-        ${ref(this._refWhen)}
+          ${ref(this._refMediaType)}
-        .hass=${this.hass}
+          .hass=${this.hass}
-        .label=${localize('media_filter.when')}
+          .label=${localize('media_filter.media_type')}
-        .items=${this._whenOptions}
+          .items=${this._mediaTypeOptions}
-        .allowCustomValue=${false}
+          .allowCustomValue=${false}
-        @value-changed=${this._valueChangedHandler.bind(this)}
+          @value-changed=${this._valueChangedHandler.bind(this)}
-      ></ha-combo-box>
+        ></ha-combo-box>`
-      ${this.cameraOptions
+      : ''}
-        ? html` <ha-combo-box
+    ${this.controls?.when ?? true
-            ${ref(this._refCamera)}
+      ? html`<ha-combo-box
+          ${ref(this._refWhen)}
+          .hass=${this.hass}
+          .label=${localize('media_filter.when')}
+          .items=${this._whenOptions}
+          .allowCustomValue=${false}
+          @value-changed=${this._valueChangedHandler.bind(this)}
+        ></ha-combo-box>`
+      : ''}
+    ${(this.controls?.camera ?? true) && this.cameraOptions
+      ? html` <ha-combo-box
+          ${ref(this._refCamera)}
+          .hass=${this.hass}
+          .label=${localize('media_filter.camera')}
+          .items=${this._cameraOptions}
+          .allowCustomValue=${false}
+          @value-changed=${this._valueChangedHandler.bind(this)}
+        ></ha-combo-box>`
+      : ''}
+    ${(this.controls?.what ?? true) && this.whatOptions
+      ? html` <ha-combo-box
+          ${ref(this._refWhat)}
+          .hass=${this.hass}
+          .label=${localize('media_filter.what')}
+          .items="${this._whatOptions}"
+          .allowCustomValue=${false}
+          @value-changed=${this._valueChangedHandler.bind(this)}
+        ></ha-combo-box>`
+      : ''}
+    ${(this.controls?.where ?? true) && this.whereOptions
+      ? html`<ha-combo-box
+          ${ref(this._refWhere)}
+          .hass=${this.hass}
+          .label=${localize('media_filter.where')}
+          .items=${this._whereOptions}
+          .allowCustomValue=${false}
+          @value-changed=${this._valueChangedHandler.bind(this)}
+        ></ha-combo-box>`
+      : ''}
+    ${this.controls?.favorite ?? true
+      ? html`
+          <ha-combo-box
+            ${ref(this._refFavorite)}
             .hass=${this.hass}
-            .label=${localize('media_filter.camera')}
+            .label=${localize('media_filter.favorite')}
-            .items=${this._cameraOptions}
+            .items=${this._favoriteOptions}
             .allowCustomValue=${false}
             @value-changed=${this._valueChangedHandler.bind(this)}
-          ></ha-combo-box>`
+          ></ha-combo-box>
-        : ''}
+        `
-      ${this.whatOptions
+      : ''}`;
-        ? html` <ha-combo-box
-            ${ref(this._refWhat)}
-            .hass=${this.hass}
-            .label=${localize('media_filter.what')}
-            .items="${this._whatOptions}"
-            .allowCustomValue=${false}
-            @value-changed=${this._valueChangedHandler.bind(this)}
-          ></ha-combo-box>`
-        : ''}
-      ${this.whereOptions
-        ? html`<ha-combo-box
-            ${ref(this._refWhere)}
-            .hass=${this.hass}
-            .label=${localize('media_filter.where')}
-            .items=${this._whereOptions}
-            .allowCustomValue=${false}
-            @value-changed=${this._valueChangedHandler.bind(this)}
-          ></ha-combo-box>`
-        : ''}
-      <ha-combo-box
-        ${ref(this._refFavorite)}
-        .hass=${this.hass}
-        .label=${localize('media_filter.favorite')}
-        .items=${this._favoriteOptions}
-        .allowCustomValue=${false}
-        @value-changed=${this._valueChangedHandler.bind(this)}
-      ></ha-combo-box>
-    `;
   }
 
   static get styles(): CSSResultGroup {
-    return unsafeCSS(mediaFilterStyle);
+    return unsafeCSS(mediaFilterCoreStyle);
   }
 }
 

src/components/media-filter.ts

@@ -6,7 +6,6 @@ import startOfToday from 'date-fns/esm/startOfToday';
 import startOfDay from 'date-fns/startOfDay';
 import startOfYesterday from 'date-fns/startOfYesterday';
 import {
-  css,
   CSSResultGroup,
   html,
   LitElement,
@@ -14,6 +13,7 @@ import {
   ReactiveController,
   ReactiveControllerHost,
   TemplateResult,
+  unsafeCSS,
 } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { CameraManager } from '../camera/manager';
@@ -38,6 +38,7 @@ import { prettifyTitle } from '../utils/basic';
 import format from 'date-fns/format';
 import parse from 'date-fns/parse';
 import endOfMonth from 'date-fns/endOfMonth';
+import mediaFilterStyle from '../scss/media-filter.scss';
 
 @customElement('frigate-card-media-filter')
 export class FrigateCardMediaFilter extends LitElement {
@@ -158,11 +159,7 @@ export class FrigateCardMediaFilter extends LitElement {
   }
 
   static get styles(): CSSResultGroup {
-    return css`
+    return unsafeCSS(mediaFilterStyle);
-      :host {
-        display: block;
-      }
-    `;
   }
 }
 

src/localize/languages/en.json

@@ -368,14 +368,22 @@
     "all": "All",
     "camera": "Camera",
     "favorite": "Favorite",
+    "media_type": "Media Type",
+    "media_types": {
+      "clips": "Clips",
+      "snapshots": "Snapshots",
+      "recordings": "Recordings"
+    },
     "not_favorite": "Not Favorite",
-    "past_month": "Past Month",
-    "past_week": "Past Week",
-    "today": "Today",
     "what": "What",
     "when": "When",
-    "where": "Where",
+    "whens": {
-    "yesterday": "Yesterday"
+      "past_month": "Past Month",
+      "past_week": "Past Week",
+      "today": "Today",  
+      "yesterday": "Yesterday"      
+    },
+    "where": "Where"
   },
   "recording": {
     "events": "Events",

src/localize/languages/it.json

@@ -339,14 +339,22 @@
     "all": "",
     "camera": "",
     "favorite": "",
+    "media_type": "",
+    "media_types": {
+      "clips": "",
+      "snapshots": "",
+      "recordings": ""
+    },
     "not_favorite": "",
-    "past_month": "",
-    "past_week": "",
-    "today": "",
     "what": "",
     "when": "",
-    "where": "",
+    "whens": {
-    "yesterday": ""
+      "past_month": "",
+      "past_week": "",
+      "today": "",
+      "yesterday": ""
+    },
+    "where": ""
   },
   "recording": {
     "events": "Eventi",

src/localize/languages/pt-BR.json

@@ -339,14 +339,22 @@
     "all": "",
     "camera": "",
     "favorite": "",
+    "media_type": "",
+    "media_types": {
+      "clips": "",
+      "snapshots": "",
+      "recordings": ""
+    },
     "not_favorite": "",
-    "past_month": "",
-    "past_week": "",
-    "today": "",
     "what": "",
     "when": "",
-    "where": "",
+    "whens": {
-    "yesterday": ""
+      "past_month": "",
+      "past_week": "",
+      "today": "",
+      "yesterday": ""
+    },
+    "where": ""
   },
   "recording": {
     "events": "Eventos",

src/scss/media-filter-core.scss

@@ -0,0 +1,16 @@
+:host {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+
+  // Hide scrollbar: Firefox
+  scrollbar-width: none;
+  // Hide scrollbar: IE and Edge
+  -ms-overflow-style: none;
+}
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+:host::-webkit-scrollbar {
+  display: none;
+}

src/scss/media-filter.scss

@@ -1,5 +1,4 @@
 :host {
-  display: flex;
+  display: block;
-  flex-direction: column;
+  height: 100%;
-  overflow: auto;
 }