From 0caf64ba82ab0ffdf7c6bdcad60f4a234a2b6b4f Mon Sep 17 00:00:00 2001 From: Dermot Duffy Date: Sun, 29 Jan 2023 14:26:49 -0800 Subject: [PATCH] Make filter mode configurable. --- README.md | 36 +++++++++++++++++-- src/components/gallery.ts | 34 ++++++++++-------- src/const.ts | 2 ++ src/editor.ts | 57 +++++++++++++++++++++++++++---- src/localize/languages/en.json | 9 +++++ src/localize/languages/it.json | 9 +++++ src/localize/languages/pt-BR.json | 9 +++++ src/types.ts | 10 ++++++ src/view/view.ts | 2 -- 9 files changed, 142 insertions(+), 26 deletions(-) diff --git a/README.md b/README.md index 54a4f106..6898a9ac 100644 --- a/README.md +++ b/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`.| -| `show_details` | `false` | :heavy_multiplication_x: | Whether to show event details (e.g. duration, start time, object detected, etc) alongside the thumbnail.| +| `controls` | | :heavy_multiplication_x: | Configuration for the Media viewer controls. See below. | +| `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 diff --git a/src/components/gallery.ts b/src/components/gallery.ts index b283b3a3..217667b3 100644 --- a/src/components/gallery.ts +++ b/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` - - + ${this.galleryConfig && this.galleryConfig.controls.filter.mode !== 'none' + ? html` + ` + : ''} ` : ''} ${this._renderOptionSetHeader('media_viewer')} diff --git a/src/localize/languages/en.json b/src/localize/languages/en.json index bd50e0d4..3820cfd5 100644 --- a/src/localize/languages/en.json +++ b/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", diff --git a/src/localize/languages/it.json b/src/localize/languages/it.json index 86833976..cd3b2146 100644 --- a/src/localize/languages/it.json +++ b/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", diff --git a/src/localize/languages/pt-BR.json b/src/localize/languages/pt-BR.json index f934ff8a..6eeda043 100644 --- a/src/localize/languages/pt-BR.json +++ b/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", diff --git a/src/types.ts b/src/types.ts index 99dfd490..17ab774d 100644 --- a/src/types.ts +++ b/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), }) diff --git a/src/view/view.ts b/src/view/view.ts index a67508fe..f9e99f0f 100644 --- a/src/view/view.ts +++ b/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: