flan/advanced-camera-card
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make filter mode configurable.

Browse Source
This commit is contained in:
Dermot Duffy
2023-01-29 14:26:49 -08:00
parent 17c4a5a85f
commit 0caf64ba82
9 changed files with 142 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+33 -3
View File
@@ -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
src/components/gallery.ts
+14 -8
View File
@@ -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: {
closed: 'mdi:filter-cog-outline',
open: 'mdi:filter-cog',
},
...(this.galleryConfig &&
this.galleryConfig.controls.filter.mode !== 'none' && {
[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
+2
View File
@@ -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
+49 -6
View File
@@ -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(
configPathShowDetails,
defaults.show_details,
{
${this._renderSwitch(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
+9
View File
@@ -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
+9
View File
@@ -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
+9
View File
@@ -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
+10
View File
@@ -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
-2
View File
@@ -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: