Make filter mode configurable.

README.md

@@ -548,11 +548,39 @@ See the [fully expanded event gallery configuration example](#config-expanded-ev
 
 | Option | Default | Overridable | Description |
 | - | - | - | - |
-| `size` | 100 | :heavy_multiplication_x: | The size of the thumbnails in the event gallery in pixels. Must be >= `75` and <= `175`.|
+| `controls` | | :heavy_multiplication_x: | Configuration for the Media viewer controls. See below. |
-| `show_details` | `false` | :heavy_multiplication_x: | Whether to show event details (e.g. duration, start time, object detected, etc) alongside the thumbnail.|
+| `actions` | | :heavy_multiplication_x: | Actions to use for all views that use the `event_gallery` (e.g. `clips`, `snapshots`, `recordings`). See [actions](#actions) below.|
+
+#### Event Gallery Controls: Filter
+
+All configuration is under:
+
+```yaml
+event_gallery:
+  controls:
+    filter:
+```
+
+| Option | Default | Overridable | Description |
+| - | - | - | - |
+| `mode` | `right` | :heavy_multiplication_x: | Whether to show the gallery media filter to the `left`, to the `right` or `none` for no media filter. |
+
+#### Event Gallery Controls: Thumbnails
+
+All configuration is under:
+
+```yaml
+event_gallery:
+  controls:
+    thumbnails:
+```
+
+| Option | Default | Overridable | Description |
+| - | - | - | - |
+| `size` | 100 | :heavy_multiplication_x: | The size of the thumbnails in the gallery. Must be >= `75` and <= `175`.|
+| `show_details` | `false` | :heavy_multiplication_x: | Whether to show media details (e.g. duration, start time, object detected, etc) alongside the thumbnail.|
 | `show_favorite_control` | `true` | :heavy_multiplication_x: | Whether to show the favorite ('star') control on each thumbnail.|
 | `show_timeline_control` | `true` | :heavy_multiplication_x: | Whether to show the timeline ('target') control on each thumbnail.|
-| `actions` | | :heavy_multiplication_x: | Actions to use for all views that use the `event_gallery` (e.g. `clips`, `snapshots`, `recordings`). See [actions](#actions) below.|
 
 ### Image Options
 
@@ -1575,6 +1603,8 @@ Reference: [Event Gallery Options](#event-gallery-options).
 ```yaml
 event_gallery:
   controls:
+    filter:
+      mode: 'right'
     thumbnails:
       size: 100
       show_details: false

src/components/gallery.ts

@@ -37,6 +37,11 @@ import './media-filter';
 
 const GALLERY_MEDIA_CHUNK_SIZE = 100;
 
+const GALLERY_MEDIA_FILTER_MENU_ICONS = {
+  closed: 'mdi:filter-cog-outline',
+  open: 'mdi:filter-cog',
+};
+
 @customElement('frigate-card-gallery')
 export class FrigateCardGallery extends LitElement {
   @property({ attribute: false })
@@ -101,25 +106,26 @@ export class FrigateCardGallery extends LitElement {
       return renderProgressIndicator({ cardWideConfig: this.cardWideConfig });
     }
 
-    // TODO Make this slot choice configuration left/right.
     return html`
       <frigate-card-surround-basic
         .drawerIcons=${{
-          right: {
+          ...(this.galleryConfig &&
-            closed: 'mdi:filter-cog-outline',
+            this.galleryConfig.controls.filter.mode !== 'none' && {
-            open: 'mdi:filter-cog',
+              [this.galleryConfig.controls.filter.mode]: GALLERY_MEDIA_FILTER_MENU_ICONS,
-          },
+            }),
         }}
       >
-        <frigate-card-media-filter
+        ${this.galleryConfig && this.galleryConfig.controls.filter.mode !== 'none'
+          ? html` <frigate-card-media-filter
               .hass=${this.hass}
               .cameras=${this.cameras}
               .cameraManager=${this.cameraManager}
               .view=${this.view}
               .mediaLimit=${GALLERY_MEDIA_CHUNK_SIZE}
-          slot="right"
+              slot=${this.galleryConfig.controls.filter.mode}
             >
-        </frigate-card-media-filter>
+            </frigate-card-media-filter>`
+          : ''}
         <frigate-card-gallery-core
           .hass=${this.hass}
           .view=${this.view}

src/const.ts

@@ -54,6 +54,8 @@ export const CONF_VIEW_SCAN_UNTRIGGER_SECONDS =
   `${CONF_VIEW_SCAN}.untrigger_seconds` as const;
 
 export const CONF_EVENT_GALLERY = 'event_gallery' as const;
+export const CONF_EVENT_GALLERY_CONTROLS_FILTER_MODE =
+  `${CONF_EVENT_GALLERY}.controls.filter.mode` as const;
 export const CONF_EVENT_GALLERY_CONTROLS_THUMBNAILS_SHOW_DETAILS =
   `${CONF_EVENT_GALLERY}.controls.thumbnails.show_details` as const;
 export const CONF_EVENT_GALLERY_CONTROLS_THUMBNAILS_SHOW_FAVORITE_CONTROL =

src/editor.ts

@@ -32,6 +32,7 @@ import {
   CONF_CAMERAS_ARRAY_WEBRTC_CARD_URL,
   CONF_DIMENSIONS_ASPECT_RATIO,
   CONF_DIMENSIONS_ASPECT_RATIO_MODE,
+  CONF_EVENT_GALLERY_CONTROLS_FILTER_MODE,
   CONF_EVENT_GALLERY_CONTROLS_THUMBNAILS_SHOW_DETAILS,
   CONF_EVENT_GALLERY_CONTROLS_THUMBNAILS_SHOW_FAVORITE_CONTROL,
   CONF_EVENT_GALLERY_CONTROLS_THUMBNAILS_SHOW_TIMELINE_CONTROL,
@@ -152,6 +153,7 @@ const MENU_CAMERAS_FRIGATE = 'cameras.frigate';
 const MENU_CAMERAS_TRIGGERS = 'cameras.triggers';
 const MENU_CAMERAS_WEBRTC = 'cameras.webrtc';
 const MENU_EVENT_GALLERY_CONTROLS_THUMBNAILS = 'event_gallery.controls.thumbnails';
+const MENU_EVENT_GALLERY_CONTROLS_FILTER = 'event_gallery.controls.filter';
 const MENU_IMAGE_LAYOUT = 'image.layout';
 const MENU_LIVE_CONTROLS = 'live.controls';
 const MENU_LIVE_CONTROLS_NEXT_PREVIOUS = 'live.controls.next_previous';
@@ -279,6 +281,22 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
     { value: 'current', label: localize('config.view.views.current') },
   ];
 
+  protected _filterModes: EditorSelectOption[] = [
+    { value: '', label: '' },
+    {
+      value: 'none',
+      label: localize('config.common.controls.filter.modes.none'),
+    },
+    {
+      value: 'left',
+      label: localize('config.common.controls.filter.modes.left'),
+    },
+    {
+      value: 'right',
+      label: localize('config.common.controls.filter.modes.right'),
+    },
+  ];
+
   protected _menuStyles: EditorSelectOption[] = [
     { value: '', label: '' },
     { value: 'none', label: localize('config.menu.styles.none') },
@@ -1046,13 +1064,9 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
           max: THUMBNAIL_WIDTH_MAX,
           label: localize('config.common.controls.thumbnails.size'),
         })}
-        ${this._renderSwitch(
+        ${this._renderSwitch(configPathShowDetails, defaults.show_details, {
-          configPathShowDetails,
-          defaults.show_details,
-          {
           label: localize('config.common.controls.thumbnails.show_details'),
-          },
+        })}
-        )}
         ${this._renderSwitch(
           configPathShowFavoriteControl,
           defaults.show_favorite_control,
@@ -1071,6 +1085,31 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
     );
   }
 
+  /**
+   * Render the thumbnails controls.
+   * @param domain The submenu domain.
+   * @param configPathMode Filter mode config path.
+   * @returns A rendered template.
+   */
+  protected _renderFilterControls(
+    domain: string,
+    configPathMode: string,
+  ): TemplateResult | void {
+    return this._putInSubmenu(
+      domain,
+      true,
+      'config.common.controls.filter.editor_label',
+      { name: 'mdi:filter-cog' },
+      html`
+        ${configPathMode
+          ? html`${this._renderOptionSelector(configPathMode, this._filterModes, {
+              label: localize('config.common.controls.filter.mode'),
+            })}`
+          : html``}
+      `,
+    );
+  }
+
   /**
    * Render the titles controls.
    * @param domain The submenu domain.
@@ -1625,6 +1664,10 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
                 CONF_EVENT_GALLERY_CONTROLS_THUMBNAILS_SHOW_TIMELINE_CONTROL,
                 this._defaults.event_gallery.controls.thumbnails,
               )}
+              ${this._renderFilterControls(
+                MENU_EVENT_GALLERY_CONTROLS_FILTER,
+                CONF_EVENT_GALLERY_CONTROLS_FILTER_MODE,
+              )}
             </div>`
           : ''}
         ${this._renderOptionSetHeader('media_viewer')}

src/localize/languages/en.json

@@ -79,6 +79,15 @@
         "window_seconds": "The default length of the timeline view in seconds"
       },
       "controls": {
+        "filter": {
+          "editor_label": "Media Filter",
+          "mode": "Filter mode",
+          "modes": {
+            "none": "No media filter",
+            "left": "Media filter in a drawer to the left",
+            "right": "Media filter in a drawer to the right"
+          }
+        },
         "next_previous": {
           "editor_label": "Next & Previous",
           "size": "Next & previous control size in pixels",

src/localize/languages/it.json

@@ -78,6 +78,15 @@
         "window_seconds": "La lunghezza predefinita della vista della sequenza temporale in secondi"
       },
       "controls": {
+        "filter": {
+          "editor_label": "",
+          "mode": "",
+          "modes": {
+            "none": "",
+            "left": "",
+            "right": ""
+          }
+        },
         "next_previous": {
           "editor_label": "",
           "size": "Successiva e Precedenti dimensioni di controllo nei pixel",

src/localize/languages/pt-BR.json

@@ -78,6 +78,15 @@
         "window_seconds": "A duração padrão da visualização da linha do tempo em segundos"
       },
       "controls": {
+        "filter": {
+          "editor_label": "",
+          "mode": "",
+          "modes": {
+            "none": "",
+            "left": "",
+            "right": ""
+          }
+        },
         "next_previous": {
           "editor_label": "",
           "size": "Tamanho de controle próximo e anterior",

src/types.ts

@@ -1078,6 +1078,9 @@ const galleryThumbnailControlsDefaults = {
 const galleryConfigDefault = {
   controls: {
     thumbnails: galleryThumbnailControlsDefaults,
+    filter: {
+      mode: 'right' as const,
+    },
   },
 };
 
@@ -1092,6 +1095,13 @@ const galleryConfigSchema = z
         thumbnails: gallerythumbnailsControlSchema.default(
           galleryConfigDefault.controls.thumbnails,
         ),
+        filter: z
+          .object({
+            mode: z
+              .enum(['none', 'left', 'right'])
+              .default(galleryConfigDefault.controls.filter.mode),
+          })
+          .default(galleryConfigDefault.controls.filter),
       })
       .default(galleryConfigDefault.controls),
   })

src/view/view.ts

@@ -6,8 +6,6 @@
 //  - TODO: Debug statement in card wide config.
 
 // Gallery:
-//  - TODO: Handle all TODOs in media filter and media filter core.
-//  - TODO: Make media filter slot choice configurable (gallery.ts).
 //  - TODO: Filter panel expands from right can occasionally 'stick' open.
 
 // Hard: