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

Use configuration consts.

Browse Source
This commit is contained in:
Dermot Duffy
2021-11-07 16:26:52 -08:00
parent 2d568376ba
commit 9c027ca447
3 changed files with 206 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/config-mgmt.ts
+38 -17
View File
@@ -1,5 +1,22 @@
import delve from 'dlv'; import delve from 'dlv';
import { dset } from 'dset'; import { dset } from 'dset';
import {
CONF_EVENT_VIEWER_AUTOPLAY_CLIP,
CONF_EVENT_VIEWER_CONTROLS_NEXT_PREVIOUS_SIZE,
CONF_EVENT_VIEWER_CONTROLS_NEXT_PREVIOUS_STYLE,
CONF_FRIGATE_CAMERA_NAME,
CONF_FRIGATE_CLIENT_ID,
CONF_FRIGATE_LABEL,
CONF_FRIGATE_URL,
CONF_FRIGATE_ZONE,
CONF_IMAGE_SRC,
CONF_LIVE_PRELOAD,
CONF_LIVE_PROVIDER,
CONF_MENU_BUTTON_SIZE,
CONF_MENU_MODE,
CONF_VIEW_DEFAULT,
CONF_VIEW_TIMEOUT,
} from './const';
import { RawFrigateCardConfig } from './types'; import { RawFrigateCardConfig } from './types';
/** /**
@@ -22,7 +39,11 @@ export const setConfigValue = (
* @param key The key to the property to retrieve. * @param key The key to the property to retrieve.
* @returns The property or undefined if not found. * @returns The property or undefined if not found.
*/ */
export const getConfigValue = (obj: RawFrigateCardConfig, key: string, def?: unknown): unknown => { export const getConfigValue = (
obj: RawFrigateCardConfig,
key: string,
def?: unknown,
): unknown => {
return delve(obj, key, def); return delve(obj, key, def);
}; };
@@ -93,7 +114,7 @@ export const trimConfig = function (obj: RawFrigateCardConfig): void {
*/ */
export const copyConfig = function (obj: RawFrigateCardConfig): RawFrigateCardConfig { export const copyConfig = function (obj: RawFrigateCardConfig): RawFrigateCardConfig {
return JSON.parse(JSON.stringify(obj)); return JSON.parse(JSON.stringify(obj));
} };
/** /**
* Determines if a property is not an object. * Determines if a property is not an object.
@@ -132,21 +153,21 @@ const upgradeMoveTo = function (
const UPGRADES = [ const UPGRADES = [
// v1.2.1 -> v2.0.0 // v1.2.1 -> v2.0.0
upgradeMoveTo('frigate_url', 'frigate.url'), upgradeMoveTo('frigate_url', CONF_FRIGATE_URL),
upgradeMoveTo('frigate_client_id', 'frigate.client_id'), upgradeMoveTo('frigate_client_id', CONF_FRIGATE_CLIENT_ID),
upgradeMoveTo('frigate_camera_name', 'frigate.camera_name'), upgradeMoveTo('frigate_camera_name', CONF_FRIGATE_CAMERA_NAME),
upgradeMoveTo('label', 'frigate.label'), upgradeMoveTo('label', CONF_FRIGATE_LABEL),
upgradeMoveTo('zone', 'frigate.zone'), upgradeMoveTo('zone', CONF_FRIGATE_ZONE),
upgradeMoveTo('view_default', 'view.default'), upgradeMoveTo('view_default', CONF_VIEW_DEFAULT),
upgradeMoveTo('view_timeout', 'view.timeout'), upgradeMoveTo('view_timeout', CONF_VIEW_TIMEOUT),
upgradeMoveTo('live_provider', 'live.provider'), upgradeMoveTo('live_provider', CONF_LIVE_PROVIDER),
upgradeMoveTo('live_preload', 'live.preload'), upgradeMoveTo('live_preload', CONF_LIVE_PRELOAD),
upgradeMoveTo('webrtc', 'live.webrtc'), upgradeMoveTo('webrtc', 'live.webrtc'),
upgradeMoveTo('autoplay_clip', 'event_viewer.autoplay_clip'), upgradeMoveTo('autoplay_clip', CONF_EVENT_VIEWER_AUTOPLAY_CLIP),
upgradeMoveTo('controls.nextprev', 'event_viewer.controls.next_previous.style'), upgradeMoveTo('controls.nextprev', CONF_EVENT_VIEWER_CONTROLS_NEXT_PREVIOUS_STYLE),
upgradeMoveTo('controls.nextprev_size', 'event_viewer.controls.next_previous.size'), upgradeMoveTo('controls.nextprev_size', CONF_EVENT_VIEWER_CONTROLS_NEXT_PREVIOUS_SIZE),
upgradeMoveTo('menu_mode', 'menu.mode'), upgradeMoveTo('menu_mode', CONF_MENU_MODE),
upgradeMoveTo('menu_buttons', 'menu.buttons'), upgradeMoveTo('menu_buttons', 'menu.buttons'),
upgradeMoveTo('menu_button_size', 'menu.button_size'), upgradeMoveTo('menu_button_size', CONF_MENU_BUTTON_SIZE),
upgradeMoveTo('image', 'image.src', isNotObject), upgradeMoveTo('image', CONF_IMAGE_SRC, isNotObject),
]; ];
src/const.ts
+40 -1
View File
@@ -1,3 +1,42 @@
export const CARD_VERSION = '2.0.0'; export const CARD_VERSION = '2.0.0';
export const REPO_URL = "https://github.com/dermotduffy/frigate-hass-card"; export const REPO_URL = 'https://github.com/dermotduffy/frigate-hass-card';
export const TROUBLESHOOTING_URL = `${REPO_URL}#troubleshooting`; export const TROUBLESHOOTING_URL = `${REPO_URL}#troubleshooting`;
export const CONF_CAMERA_ENTITY = 'camera_entity';
export const CONF_FRIGATE_CAMERA_NAME = 'frigate.camera_name';
export const CONF_FRIGATE_CLIENT_ID = 'frigate.client_id';
export const CONF_FRIGATE_LABEL = 'frigate.label';
export const CONF_FRIGATE_URL = 'frigate.url';
export const CONF_FRIGATE_ZONE = 'frigate.zone';
export const CONF_VIEW_DEFAULT = 'view.default';
export const CONF_VIEW_TIMEOUT = 'view.timeout';
export const CONF_EVENT_VIEWER_AUTOPLAY_CLIP = 'event_viewer.autoplay_clip';
export const CONF_EVENT_VIEWER_DRAGGABLE = 'event_viewer.draggable';
export const CONF_EVENT_VIEWER_LAZY_LOAD = 'event_viewer.lazy_load';
export const CONF_EVENT_VIEWER_CONTROLS_NEXT_PREVIOUS_STYLE =
'event_viewer.controls.next_previous.style';
export const CONF_EVENT_VIEWER_CONTROLS_NEXT_PREVIOUS_SIZE =
'event_viewer.controls.next_previous.size';
export const CONF_LIVE_PRELOAD = 'live.preload';
export const CONF_LIVE_PROVIDER = 'live.provider';
export const CONF_LIVE_WEBRTC_ENTITY = 'live.webrtc.entity';
export const CONF_LIVE_WEBRTC_URL = 'live.webrtc.url';
export const CONF_IMAGE_SRC = 'image.src';
export const CONF_MENU_BUTTONS_FRIGATE = 'menu.buttons.frigate';
export const CONF_MENU_BUTTONS_FRIGATE_UI = 'menu.buttons.frigate_ui';
export const CONF_MENU_BUTTONS_FRIGATE_FULLSCREEN = 'menu.buttons.fullscreen';
export const CONF_MENU_BUTTONS_FRIGATE_DOWNLOAD = 'menu.buttons.download';
export const CONF_MENU_BUTTONS_LIVE = 'menu.buttons.live';
export const CONF_MENU_BUTTONS_CLIPS = 'menu.buttons.clips';
export const CONF_MENU_BUTTONS_SNAPSHOTS = 'menu.buttons.snapshots';
export const CONF_MENU_BUTTONS_IMAGE = 'menu.buttons.image';
export const CONF_MENU_BUTTON_SIZE = 'menu.button_size';
export const CONF_MENU_MODE = 'menu.mode';
export const CONF_DIMENSIONS_ASPECT_RATIO = 'dimensions.aspect_ratio';
export const CONF_DIMENSIONS_ASPECT_RATIO_MODE = 'dimensions.aspect_ratio_mode';
src/editor.ts
+128 -90
View File
@@ -16,6 +16,38 @@ import {
trimConfig, trimConfig,
upgradeConfig, upgradeConfig,
} from './config-mgmt.js'; } from './config-mgmt.js';
import {
CONF_CAMERA_ENTITY,
CONF_DIMENSIONS_ASPECT_RATIO,
CONF_DIMENSIONS_ASPECT_RATIO_MODE,
CONF_EVENT_VIEWER_AUTOPLAY_CLIP,
CONF_EVENT_VIEWER_CONTROLS_NEXT_PREVIOUS_SIZE,
CONF_EVENT_VIEWER_CONTROLS_NEXT_PREVIOUS_STYLE,
CONF_EVENT_VIEWER_DRAGGABLE,
CONF_EVENT_VIEWER_LAZY_LOAD,
CONF_FRIGATE_CAMERA_NAME,
CONF_FRIGATE_CLIENT_ID,
CONF_FRIGATE_LABEL,
CONF_FRIGATE_URL,
CONF_FRIGATE_ZONE,
CONF_IMAGE_SRC,
CONF_LIVE_PRELOAD,
CONF_LIVE_PROVIDER,
CONF_LIVE_WEBRTC_ENTITY,
CONF_LIVE_WEBRTC_URL,
CONF_MENU_BUTTONS_CLIPS,
CONF_MENU_BUTTONS_FRIGATE,
CONF_MENU_BUTTONS_FRIGATE_DOWNLOAD,
CONF_MENU_BUTTONS_FRIGATE_FULLSCREEN,
CONF_MENU_BUTTONS_FRIGATE_UI,
CONF_MENU_BUTTONS_IMAGE,
CONF_MENU_BUTTONS_LIVE,
CONF_MENU_BUTTONS_SNAPSHOTS,
CONF_MENU_BUTTON_SIZE,
CONF_MENU_MODE,
CONF_VIEW_DEFAULT,
CONF_VIEW_TIMEOUT,
} from './const.js';
interface EditorOptionsSet { interface EditorOptionsSet {
icon: string; icon: string;
@@ -138,9 +170,6 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
this._helpers.importMoreInfoControl('climate'); this._helpers.importMoreInfoControl('climate');
const cameraEntities = this._getEntities('camera'); const cameraEntities = this._getEntities('camera');
const webrtcCameraEntity = String(
getConfigValue(this._config, 'live.webrtc.entity', ''),
);
const viewModes = { const viewModes = {
'': '', '': '',
@@ -236,14 +265,14 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
? html` ? html`
<div class="values"> <div class="values">
<paper-dropdown-menu <paper-dropdown-menu
label=${localize('config.camera_entity')} label=${localize(`config.${CONF_CAMERA_ENTITY}`)}
@value-changed=${this._valueChangedHandler} @value-changed=${this._valueChangedHandler}
.configValue=${'camera_entity'} .configValue=${CONF_CAMERA_ENTITY}
> >
<paper-listbox <paper-listbox
slot="dropdown-content" slot="dropdown-content"
.selected=${cameraEntities.indexOf( .selected=${cameraEntities.indexOf(
String(getConfigValue(this._config, 'camera_entity', '')), String(getConfigValue(this._config, CONF_CAMERA_ENTITY, '')),
)} )}
> >
${cameraEntities.map((entity) => { ${cameraEntities.map((entity) => {
@@ -269,33 +298,33 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
? html` ? html`
<div class="values"> <div class="values">
<paper-input <paper-input
label=${localize('config.frigate.camera_name')} label=${localize(`config.${CONF_FRIGATE_CAMERA_NAME}`)}
.value=${getConfigValue(this._config, 'frigate.camera_name', '')} .value=${getConfigValue(this._config, CONF_FRIGATE_CAMERA_NAME, '')}
.configValue=${'frigate.camera_name'} .configValue=${CONF_FRIGATE_CAMERA_NAME}
@value-changed=${this._valueChangedHandler} @value-changed=${this._valueChangedHandler}
></paper-input> ></paper-input>
<paper-input <paper-input
label=${localize('config.frigate.url')} label=${localize(`config.${CONF_FRIGATE_URL}`)}
.value=${getConfigValue(this._config, 'frigate.url', '')} .value=${getConfigValue(this._config, CONF_FRIGATE_URL, '')}
.configValue=${'frigate.url'} .configValue=${CONF_FRIGATE_URL}
@value-changed=${this._valueChangedHandler} @value-changed=${this._valueChangedHandler}
></paper-input> ></paper-input>
<paper-input <paper-input
.label=${localize('config.frigate.label')} .label=${localize(`config.${CONF_FRIGATE_LABEL}`)}
.value=${getConfigValue(this._config, 'frigate.label', '')} .value=${getConfigValue(this._config, CONF_FRIGATE_LABEL, '')}
.configValue=${'frigate.label'} .configValue=${CONF_FRIGATE_LABEL}
@value-changed=${this._valueChangedHandler} @value-changed=${this._valueChangedHandler}
></paper-input> ></paper-input>
<paper-input <paper-input
.label=${localize('config.frigate.zone')} .label=${localize(`config.${CONF_FRIGATE_ZONE}`)}
.value=${getConfigValue(this._config, 'frigate.zone', '')} .value=${getConfigValue(this._config, CONF_FRIGATE_ZONE, '')}
.configValue=${'frigate.zone'} .configValue=${CONF_FRIGATE_ZONE}
@value-changed=${this._valueChangedHandler} @value-changed=${this._valueChangedHandler}
></paper-input> ></paper-input>
<paper-input <paper-input
label=${localize('config.frigate.client_id')} label=${localize(`config.${CONF_FRIGATE_CLIENT_ID}`)}
.value=${getConfigValue(this._config, 'frigate.client_id', '')} .value=${getConfigValue(this._config, CONF_FRIGATE_CLIENT_ID, '')}
.configValue=${'frigate.client_id'} .configValue=${CONF_FRIGATE_CLIENT_ID}
@value-changed=${this._valueChangedHandler} @value-changed=${this._valueChangedHandler}
></paper-input> ></paper-input>
</div> </div>
@@ -312,14 +341,14 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
? html` ? html`
<div class="values"> <div class="values">
<paper-dropdown-menu <paper-dropdown-menu
label=${localize('config.view.default')} label=${localize(`config.${CONF_VIEW_DEFAULT}`)}
@value-changed=${this._valueChangedHandler} @value-changed=${this._valueChangedHandler}
.configValue=${'view.default'} .configValue=${CONF_VIEW_DEFAULT}
> >
<paper-listbox <paper-listbox
slot="dropdown-content" slot="dropdown-content"
.selected=${Object.keys(viewModes).indexOf( .selected=${Object.keys(viewModes).indexOf(
String(getConfigValue(this._config, 'view.default', '')), String(getConfigValue(this._config, CONF_VIEW_DEFAULT, '')),
)} )}
> >
${Object.keys(viewModes).map((key) => { ${Object.keys(viewModes).map((key) => {
@@ -330,11 +359,11 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
</paper-listbox> </paper-listbox>
</paper-dropdown-menu> </paper-dropdown-menu>
<paper-input <paper-input
label=${localize('config.view.timeout')} label=${localize(`config.${CONF_VIEW_TIMEOUT}`)}
prevent-invalid-input prevent-invalid-input
allowed-pattern="[0-9]" allowed-pattern="[0-9]"
.value=${getConfigValue(this._config, 'view.timeout', '')} .value=${getConfigValue(this._config, CONF_VIEW_TIMEOUT, '')}
.configValue=${'view.timeout'} .configValue=${CONF_VIEW_TIMEOUT}
@value-changed=${this._valueChangedHandler} @value-changed=${this._valueChangedHandler}
></paper-input> ></paper-input>
</div> </div>
@@ -351,14 +380,14 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
? html` ? html`
<div class="values"> <div class="values">
<paper-dropdown-menu <paper-dropdown-menu
.label=${localize('config.menu.mode')} .label=${localize(`config.${CONF_MENU_MODE}`)}
@value-changed=${this._valueChangedHandler} @value-changed=${this._valueChangedHandler}
.configValue=${'menu.mode'} .configValue=${CONF_MENU_MODE}
> >
<paper-listbox <paper-listbox
slot="dropdown-content" slot="dropdown-content"
.selected=${Object.keys(menuModes).indexOf( .selected=${Object.keys(menuModes).indexOf(
String(getConfigValue(this._config, 'menu.mode', '')), String(getConfigValue(this._config, CONF_MENU_MODE, '')),
)} )}
> >
${Object.keys(menuModes).map((key) => { ${Object.keys(menuModes).map((key) => {
@@ -369,23 +398,23 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
</paper-listbox> </paper-listbox>
</paper-dropdown-menu> </paper-dropdown-menu>
<paper-input <paper-input
label=${localize('config.menu.button_size')} label=${localize(`config.${CONF_MENU_BUTTON_SIZE}`)}
.value=${getConfigValue(this._config, 'menu.button_size', '')} .value=${getConfigValue(this._config, CONF_MENU_BUTTON_SIZE, '')}
.configValue=${'menu.button_size'} .configValue=${CONF_MENU_BUTTON_SIZE}
@value-changed=${this._valueChangedHandler} @value-changed=${this._valueChangedHandler}
></paper-input> ></paper-input>
<ha-formfield <ha-formfield
.label=${localize('editor.show_button') + .label=${localize('editor.show_button') +
': ' + ': ' +
localize('config.menu.buttons.frigate')} localize(`config.${CONF_MENU_BUTTONS_FRIGATE}`)}
> >
<ha-switch <ha-switch
.checked="${getConfigValue( .checked="${getConfigValue(
this._config, this._config,
'menu.buttons.frigate', CONF_MENU_BUTTONS_FRIGATE,
defaults.menu.buttons.frigate, defaults.menu.buttons.frigate,
)}," )},"
.configValue=${'menu.buttons.frigate'} .configValue=${CONF_MENU_BUTTONS_FRIGATE}
@change=${this._valueChangedHandler} @change=${this._valueChangedHandler}
></ha-switch> ></ha-switch>
</ha-formfield> </ha-formfield>
@@ -397,10 +426,10 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
<ha-switch <ha-switch
.checked=${getConfigValue( .checked=${getConfigValue(
this._config, this._config,
'menu.buttons.live', CONF_MENU_BUTTONS_LIVE,
defaults.menu.buttons.live, defaults.menu.buttons.live,
)} )}
.configValue=${'menu.buttons.live'} .configValue=${CONF_MENU_BUTTONS_LIVE}
@change=${this._valueChangedHandler} @change=${this._valueChangedHandler}
></ha-switch> ></ha-switch>
</ha-formfield> </ha-formfield>
@@ -412,10 +441,10 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
<ha-switch <ha-switch
.checked=${getConfigValue( .checked=${getConfigValue(
this._config, this._config,
'menu.buttons.clips', CONF_MENU_BUTTONS_CLIPS,
defaults.menu.buttons.clips, defaults.menu.buttons.clips,
)} )}
.configValue=${'menu.buttons.clips'} .configValue=${CONF_MENU_BUTTONS_CLIPS}
@change=${this._valueChangedHandler} @change=${this._valueChangedHandler}
></ha-switch> ></ha-switch>
</ha-formfield> </ha-formfield>
@@ -427,10 +456,10 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
<ha-switch <ha-switch
.checked=${getConfigValue( .checked=${getConfigValue(
this._config, this._config,
'menu.buttons.snapshots', CONF_MENU_BUTTONS_SNAPSHOTS,
defaults.menu.buttons.snapshots, defaults.menu.buttons.snapshots,
)} )}
.configValue=${'menu.buttons.snapshots'} .configValue=${CONF_MENU_BUTTONS_SNAPSHOTS}
@change=${this._valueChangedHandler} @change=${this._valueChangedHandler}
></ha-switch> ></ha-switch>
</ha-formfield> </ha-formfield>
@@ -442,55 +471,55 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
<ha-switch <ha-switch
.checked=${getConfigValue( .checked=${getConfigValue(
this._config, this._config,
'menu.buttons.image', CONF_MENU_BUTTONS_IMAGE,
defaults.menu.buttons.image, defaults.menu.buttons.image,
)} )}
.configValue=${'menu.buttons.image'} .configValue=${CONF_MENU_BUTTONS_IMAGE}
@change=${this._valueChangedHandler} @change=${this._valueChangedHandler}
></ha-switch> ></ha-switch>
</ha-formfield> </ha-formfield>
<ha-formfield <ha-formfield
.label=${localize('editor.show_button') + .label=${localize('editor.show_button') +
': ' + ': ' +
localize('config.menu.buttons.download')} localize(`config.${CONF_MENU_BUTTONS_FRIGATE_DOWNLOAD}`)}
> >
<ha-switch <ha-switch
.checked=${getConfigValue( .checked=${getConfigValue(
this._config, this._config,
'menu.buttons.download', CONF_MENU_BUTTONS_FRIGATE_DOWNLOAD,
defaults.menu.buttons.download, defaults.menu.buttons.download,
)} )}
.configValue=${'menu.buttons.download'} .configValue=${CONF_MENU_BUTTONS_FRIGATE_DOWNLOAD}
@change=${this._valueChangedHandler} @change=${this._valueChangedHandler}
></ha-switch> ></ha-switch>
</ha-formfield> </ha-formfield>
<ha-formfield <ha-formfield
.label=${localize('editor.show_button') + .label=${localize('editor.show_button') +
': ' + ': ' +
localize('config.menu.buttons.frigate_ui')} localize(`config.${CONF_MENU_BUTTONS_FRIGATE_UI}`)}
> >
<ha-switch <ha-switch
.checked=${getConfigValue( .checked=${getConfigValue(
this._config, this._config,
'menu.buttons.frigate_ui', CONF_MENU_BUTTONS_FRIGATE_UI,
defaults.menu.buttons.frigate_ui, defaults.menu.buttons.frigate_ui,
)} )}
.configValue=${'menu.buttons.frigate_ui'} .configValue=${CONF_MENU_BUTTONS_FRIGATE_UI}
@change=${this._valueChangedHandler} @change=${this._valueChangedHandler}
></ha-switch> ></ha-switch>
</ha-formfield> </ha-formfield>
<ha-formfield <ha-formfield
.label=${localize('editor.show_button') + .label=${localize('editor.show_button') +
': ' + ': ' +
localize('config.menu.buttons.fullscreen')} localize(`config.${CONF_MENU_BUTTONS_FRIGATE_FULLSCREEN}`)}
> >
<ha-switch <ha-switch
.checked=${getConfigValue( .checked=${getConfigValue(
this._config, this._config,
'menu.buttons.fullscreen', CONF_MENU_BUTTONS_FRIGATE_FULLSCREEN,
defaults.menu.buttons.fullscreen, defaults.menu.buttons.fullscreen,
)} )}
.configValue=${'menu.buttons.fullscreen'} .configValue=${CONF_MENU_BUTTONS_FRIGATE_FULLSCREEN}
@change=${this._valueChangedHandler} @change=${this._valueChangedHandler}
></ha-switch> ></ha-switch>
</ha-formfield> </ha-formfield>
@@ -508,26 +537,26 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
? html` ? html`
<div class="values"> <div class="values">
<br /> <br />
<ha-formfield .label=${localize('config.live.preload')}> <ha-formfield .label=${localize(`config.${CONF_LIVE_PRELOAD}`)}>
<ha-switch <ha-switch
.checked=${getConfigValue( .checked=${getConfigValue(
this._config, this._config,
'live.preload', CONF_LIVE_PRELOAD,
defaults.live.preload, defaults.live.preload,
)} )}
.configValue=${'live.preload'} .configValue=${CONF_LIVE_PRELOAD}
@change=${this._valueChangedHandler} @change=${this._valueChangedHandler}
></ha-switch> ></ha-switch>
</ha-formfield> </ha-formfield>
<paper-dropdown-menu <paper-dropdown-menu
.label=${localize('config.live.provider')} .label=${localize(`config.${CONF_LIVE_PROVIDER}`)}
@value-changed=${this._valueChangedHandler} @value-changed=${this._valueChangedHandler}
.configValue=${'live.provider'} .configValue=${CONF_LIVE_PROVIDER}
> >
<paper-listbox <paper-listbox
slot="dropdown-content" slot="dropdown-content"
.selected=${Object.keys(liveProviders).indexOf( .selected=${Object.keys(liveProviders).indexOf(
String(getConfigValue(this._config, 'live.provider', '')), String(getConfigValue(this._config, CONF_LIVE_PROVIDER, '')),
)} )}
> >
${Object.keys(liveProviders).map((key) => { ${Object.keys(liveProviders).map((key) => {
@@ -538,13 +567,15 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
</paper-listbox> </paper-listbox>
</paper-dropdown-menu> </paper-dropdown-menu>
<paper-dropdown-menu <paper-dropdown-menu
.label=${localize('config.live.webrtc.entity')} .label=${localize(`config.${CONF_LIVE_WEBRTC_ENTITY}`)}
@value-changed=${this._valueChangedHandler} @value-changed=${this._valueChangedHandler}
.configValue=${'live.webrtc.entity'} .configValue=${CONF_LIVE_WEBRTC_ENTITY}
> >
<paper-listbox <paper-listbox
slot="dropdown-content" slot="dropdown-content"
.selected=${cameraEntities.indexOf(webrtcCameraEntity)} .selected=${cameraEntities.indexOf(
String(getConfigValue(this._config, CONF_LIVE_WEBRTC_ENTITY, '')),
)}
> >
${cameraEntities.map((entity) => { ${cameraEntities.map((entity) => {
return html` <paper-item>${entity}</paper-item> `; return html` <paper-item>${entity}</paper-item> `;
@@ -552,9 +583,9 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
</paper-listbox> </paper-listbox>
</paper-dropdown-menu> </paper-dropdown-menu>
<paper-input <paper-input
label=${localize('config.live.webrtc.url')} label=${localize(`config.${CONF_LIVE_WEBRTC_URL}`)}
.value=${getConfigValue(this._config, 'live.webrtc.url', '')} .value=${getConfigValue(this._config, CONF_LIVE_WEBRTC_URL, '')}
.configValue=${'live.webrtc.url'} .configValue=${CONF_LIVE_WEBRTC_URL}
@value-changed=${this._valueChangedHandler} @value-changed=${this._valueChangedHandler}
></paper-input> ></paper-input>
</div> </div>
@@ -574,43 +605,47 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
${options.event_viewer.show ${options.event_viewer.show
? html` <div class="values"> ? html` <div class="values">
<br /> <br />
<ha-formfield .label=${localize('config.event_viewer.autoplay_clip')}> <ha-formfield
.label=${localize(`config.${CONF_EVENT_VIEWER_AUTOPLAY_CLIP}`)}
>
<ha-switch <ha-switch
.checked=${getConfigValue( .checked=${getConfigValue(
this._config, this._config,
'event_viewer.autoplay_clip', CONF_EVENT_VIEWER_AUTOPLAY_CLIP,
defaults.event_viewer.autoplay_clip, defaults.event_viewer.autoplay_clip,
)} )}
.configValue=${'event_viewer.autoplay_clip'} .configValue=${CONF_EVENT_VIEWER_AUTOPLAY_CLIP}
@change=${this._valueChangedHandler} @change=${this._valueChangedHandler}
></ha-switch> ></ha-switch>
</ha-formfield> </ha-formfield>
<ha-formfield .label=${localize('config.event_viewer.draggable')}> <ha-formfield .label=${localize(`config.${CONF_EVENT_VIEWER_DRAGGABLE}`)}>
<ha-switch <ha-switch
.checked=${getConfigValue( .checked=${getConfigValue(
this._config, this._config,
'event_viewer.draggable', CONF_EVENT_VIEWER_DRAGGABLE,
defaults.event_viewer.draggable, defaults.event_viewer.draggable,
)} )}
.configValue=${'event_viewer.draggable'} .configValue=${CONF_EVENT_VIEWER_DRAGGABLE}
@change=${this._valueChangedHandler} @change=${this._valueChangedHandler}
></ha-switch> ></ha-switch>
</ha-formfield> </ha-formfield>
<ha-formfield .label=${localize('config.event_viewer.lazy_load')}> <ha-formfield .label=${localize(`config.${CONF_EVENT_VIEWER_LAZY_LOAD}`)}>
<ha-switch <ha-switch
.checked=${getConfigValue( .checked=${getConfigValue(
this._config, this._config,
'event_viewer.lazy_load', CONF_EVENT_VIEWER_LAZY_LOAD,
defaults.event_viewer.lazy_load, defaults.event_viewer.lazy_load,
)} )}
.configValue=${'event_viewer.lazy_load'} .configValue=${CONF_EVENT_VIEWER_LAZY_LOAD}
@change=${this._valueChangedHandler} @change=${this._valueChangedHandler}
></ha-switch> ></ha-switch>
</ha-formfield> </ha-formfield>
<paper-dropdown-menu <paper-dropdown-menu
.label=${localize('config.event_viewer.controls.next_previous.style')} .label=${localize(
`config.${CONF_EVENT_VIEWER_CONTROLS_NEXT_PREVIOUS_STYLE}`,
)}
@value-changed=${this._valueChangedHandler} @value-changed=${this._valueChangedHandler}
.configValue=${'event_viewer.controls.next_previous.style'} .configValue=${CONF_EVENT_VIEWER_CONTROLS_NEXT_PREVIOUS_STYLE}
> >
<paper-listbox <paper-listbox
slot="dropdown-content" slot="dropdown-content"
@@ -618,7 +653,7 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
String( String(
getConfigValue( getConfigValue(
this._config, this._config,
'event_viewer.controls.next_previous.style', CONF_EVENT_VIEWER_CONTROLS_NEXT_PREVIOUS_STYLE,
'', '',
), ),
), ),
@@ -634,13 +669,13 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
</paper-listbox> </paper-listbox>
</paper-dropdown-menu> </paper-dropdown-menu>
<paper-input <paper-input
label=${localize('config.event_viewer.controls.next_previous.size')} label=${localize(`config.${CONF_EVENT_VIEWER_CONTROLS_NEXT_PREVIOUS_SIZE}`)}
.value=${getConfigValue( .value=${getConfigValue(
this._config, this._config,
'event_viewer.controls.next_previous.size', CONF_EVENT_VIEWER_CONTROLS_NEXT_PREVIOUS_SIZE,
'', '',
)} )}
.configValue=${'event_viewer.controls.next_previous.size'} .configValue=${CONF_EVENT_VIEWER_CONTROLS_NEXT_PREVIOUS_SIZE}
@value-changed=${this._valueChangedHandler} @value-changed=${this._valueChangedHandler}
></paper-input> ></paper-input>
</div>` </div>`
@@ -659,10 +694,10 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
${options.image.show ${options.image.show
? html` <div class="values"> ? html` <div class="values">
<paper-input <paper-input
label=${localize('config.image.src')} label=${localize(`config.${CONF_IMAGE_SRC}`)}
prevent-invalid-input prevent-invalid-input
.value=${getConfigValue(this._config, 'image.src', '')} .value=${getConfigValue(this._config, CONF_IMAGE_SRC, '')}
.configValue=${'image.src'} .configValue=${CONF_IMAGE_SRC}
@value-changed=${this._valueChangedHandler} @value-changed=${this._valueChangedHandler}
></paper-input> ></paper-input>
</div>` </div>`
@@ -681,15 +716,19 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
${options.dimensions.show ${options.dimensions.show
? html` <div class="values"> ? html` <div class="values">
<paper-dropdown-menu <paper-dropdown-menu
.label=${localize('config.dimensions.aspect_ratio_mode')} .label=${localize(`config.${CONF_DIMENSIONS_ASPECT_RATIO_MODE}`)}
@value-changed=${this._valueChangedHandler} @value-changed=${this._valueChangedHandler}
.configValue=${'dimensions.aspect_ratio_mode'} .configValue=${CONF_DIMENSIONS_ASPECT_RATIO_MODE}
> >
<paper-listbox <paper-listbox
slot="dropdown-content" slot="dropdown-content"
.selected=${Object.keys(aspectRatioModes).indexOf( .selected=${Object.keys(aspectRatioModes).indexOf(
String( String(
getConfigValue(this._config, 'dimensions.aspect_ratio_mode', ''), getConfigValue(
this._config,
CONF_DIMENSIONS_ASPECT_RATIO_MODE,
'',
),
), ),
)} )}
> >
@@ -701,10 +740,10 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
</paper-listbox> </paper-listbox>
</paper-dropdown-menu> </paper-dropdown-menu>
<paper-input <paper-input
label=${localize('config.dimensions.aspect_ratio')} label=${localize(`config.${CONF_DIMENSIONS_ASPECT_RATIO}`)}
prevent-invalid-input prevent-invalid-input
.value=${getConfigValue(this._config, 'dimensions.aspect_ratio', '')} .value=${getConfigValue(this._config, CONF_DIMENSIONS_ASPECT_RATIO, '')}
.configValue=${'dimensions.aspect_ratio'} .configValue=${CONF_DIMENSIONS_ASPECT_RATIO}
@value-changed=${this._valueChangedHandler} @value-changed=${this._valueChangedHandler}
></paper-input> ></paper-input>
</div>` </div>`
@@ -760,7 +799,6 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
/** /**
* Handle a changed option value. * Handle a changed option value.
* @param ev Event triggering the change. * @param ev Event triggering the change.
* @returns
*/ */
protected _valueChangedHandler(ev: { protected _valueChangedHandler(ev: {
target: (EditorOptionTarget & HTMLElement) | null; target: (EditorOptionTarget & HTMLElement) | null;