Refactor editor.
This commit is contained in:
Dermot Duffy
@@ -4,7 +4,7 @@ import { EmblaCarouselType } from 'embla-carousel';
|
|||||||
import { HomeAssistant } from 'custom-card-helpers';
|
import { HomeAssistant } from 'custom-card-helpers';
|
||||||
import { createRef, Ref, ref } from 'lit/directives/ref.js';
|
import { createRef, Ref, ref } from 'lit/directives/ref.js';
|
||||||
import { customElement, property } from 'lit/decorators.js';
|
import { customElement, property } from 'lit/decorators.js';
|
||||||
import { ifDefined } from 'lit-html/directives/if-defined.js';
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
||||||
import { until } from 'lit/directives/until.js';
|
import { until } from 'lit/directives/until.js';
|
||||||
|
|
||||||
import type {
|
import type {
|
||||||
|
|||||||
+182
-491
@@ -1,6 +1,7 @@
|
|||||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||||
import { CSSResultGroup, LitElement, TemplateResult, html, unsafeCSS } from 'lit';
|
import { CSSResultGroup, LitElement, TemplateResult, html, unsafeCSS } from 'lit';
|
||||||
import { customElement, property, state } from 'lit/decorators.js';
|
import { customElement, property, state } from 'lit/decorators.js';
|
||||||
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
||||||
|
|
||||||
import { HomeAssistant, LovelaceCardEditor, fireEvent } from 'custom-card-helpers';
|
import { HomeAssistant, LovelaceCardEditor, fireEvent } from 'custom-card-helpers';
|
||||||
import { localize } from './localize/localize.js';
|
import { localize } from './localize/localize.js';
|
||||||
@@ -179,15 +180,97 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
|
|||||||
@click=${this._toggleOptionHandler}
|
@click=${this._toggleOptionHandler}
|
||||||
.optionSetName=${optionSetName}
|
.optionSetName=${optionSetName}
|
||||||
>
|
>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<ha-icon .icon=${`mdi:${optionSet.icon}`}></ha-icon>
|
<ha-icon .icon=${`mdi:${optionSet.icon}`}></ha-icon>
|
||||||
<div class="title">${optionSet.name}</div>
|
<div class="title">${optionSet.name}</div>
|
||||||
</div>
|
|
||||||
<div class="secondary">${optionSet.secondary}</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="secondary">${optionSet.secondary}</div>
|
||||||
|
</div>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Render a dropdown menu.
|
||||||
|
* @param configPath The configuration path to set/read.
|
||||||
|
* @param dropdown The downdown in an array or key/value dictionary.
|
||||||
|
* @returns A rendered template.
|
||||||
|
*/
|
||||||
|
protected _renderDropdown(
|
||||||
|
configPath: string,
|
||||||
|
dropdown: string[] | Record<string, string>,
|
||||||
|
): TemplateResult | void {
|
||||||
|
if (!this._config) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const keys = Array.isArray(dropdown) ? dropdown : Object.keys(dropdown);
|
||||||
|
|
||||||
|
return html`
|
||||||
|
<paper-dropdown-menu
|
||||||
|
.label=${localize(`config.${configPath}`)}
|
||||||
|
@value-changed=${this._valueChangedHandler}
|
||||||
|
.configValue=${configPath}
|
||||||
|
>
|
||||||
|
<paper-listbox
|
||||||
|
slot="dropdown-content"
|
||||||
|
.selected=${keys.indexOf(String(getConfigValue(this._config, configPath, '')))}
|
||||||
|
>
|
||||||
|
${keys.map(
|
||||||
|
(key) => html` <paper-item .label="${key}">
|
||||||
|
${Array.isArray(dropdown) ? key : dropdown[key]}
|
||||||
|
</paper-item>`,
|
||||||
|
)}
|
||||||
|
</paper-listbox>
|
||||||
|
</paper-dropdown-menu>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Render a string input field.
|
||||||
|
* @param configPath The configuration path to set/read.
|
||||||
|
* @param allowedPattern An allowed input pattern.
|
||||||
|
* @returns A rendered template.
|
||||||
|
*/
|
||||||
|
protected _renderStringInput(
|
||||||
|
configPath: string,
|
||||||
|
allowedPattern?: string,
|
||||||
|
): TemplateResult | void {
|
||||||
|
if (!this._config) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
return html` <paper-input
|
||||||
|
label=${localize(`config.${configPath}`)}
|
||||||
|
.value=${getConfigValue(this._config, configPath, '')}
|
||||||
|
.configValue=${configPath}
|
||||||
|
allowed-pattern=${ifDefined(allowedPattern ? allowedPattern : undefined)}
|
||||||
|
prevent-invalid-input=${ifDefined(allowedPattern)}
|
||||||
|
@value-changed=${this._valueChangedHandler}
|
||||||
|
></paper-input>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Render a switch.
|
||||||
|
* @param configPath The configuration path to set/read.
|
||||||
|
* @param valueDefault The default switch value if unset.
|
||||||
|
* @param label An optional switch label.
|
||||||
|
* @returns A rendered template.
|
||||||
|
*/
|
||||||
|
protected _renderSwitch(
|
||||||
|
configPath: string,
|
||||||
|
valueDefault: boolean,
|
||||||
|
label?: string,
|
||||||
|
): TemplateResult | void {
|
||||||
|
if (!this._config) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
return html` <ha-formfield .label=${label || localize(`config.${configPath}`)}>
|
||||||
|
<ha-switch
|
||||||
|
.checked="${getConfigValue(this._config, configPath, valueDefault)}"
|
||||||
|
.configValue=${configPath}
|
||||||
|
@change=${this._valueChangedHandler}
|
||||||
|
></ha-switch>
|
||||||
|
</ha-formfield>`;
|
||||||
|
}
|
||||||
|
|
||||||
protected render(): TemplateResult | void {
|
protected render(): TemplateResult | void {
|
||||||
if (!this.hass || !this._helpers || !this._config) {
|
if (!this.hass || !this._helpers || !this._config) {
|
||||||
return html``;
|
return html``;
|
||||||
@@ -256,16 +339,19 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
|
|||||||
none: localize('config.event_viewer.controls.thumbnails.modes.none'),
|
none: localize('config.event_viewer.controls.thumbnails.modes.none'),
|
||||||
above: localize('config.event_viewer.controls.thumbnails.modes.above'),
|
above: localize('config.event_viewer.controls.thumbnails.modes.above'),
|
||||||
below: localize('config.event_viewer.controls.thumbnails.modes.below'),
|
below: localize('config.event_viewer.controls.thumbnails.modes.below'),
|
||||||
}
|
};
|
||||||
|
|
||||||
const thumbnailMedias = {
|
const thumbnailMedias = {
|
||||||
'': '',
|
'': '',
|
||||||
clips: localize('config.live.controls.thumbnails.medias.clips'),
|
clips: localize('config.live.controls.thumbnails.medias.clips'),
|
||||||
snapshots: localize('config.live.controls.thumbnails.medias.snapshots'),
|
snapshots: localize('config.live.controls.thumbnails.medias.snapshots'),
|
||||||
}
|
};
|
||||||
|
|
||||||
const defaults = frigateCardConfigDefaults;
|
const defaults = frigateCardConfigDefaults;
|
||||||
|
|
||||||
|
const getShowButtonLabel = (configPath: string) =>
|
||||||
|
localize('editor.show_button') + ': ' + localize(`config.${configPath}`);
|
||||||
|
|
||||||
return html`
|
return html`
|
||||||
${this._configUpgradeable
|
${this._configUpgradeable
|
||||||
? html` <div class="upgrade">
|
? html` <div class="upgrade">
|
||||||
@@ -295,22 +381,7 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
|
|||||||
${options.basic.show
|
${options.basic.show
|
||||||
? html`
|
? html`
|
||||||
<div class="values">
|
<div class="values">
|
||||||
<paper-dropdown-menu
|
${this._renderDropdown(CONF_CAMERA_ENTITY, cameraEntities)}
|
||||||
label=${localize(`config.${CONF_CAMERA_ENTITY}`)}
|
|
||||||
@value-changed=${this._valueChangedHandler}
|
|
||||||
.configValue=${CONF_CAMERA_ENTITY}
|
|
||||||
>
|
|
||||||
<paper-listbox
|
|
||||||
slot="dropdown-content"
|
|
||||||
.selected=${cameraEntities.indexOf(
|
|
||||||
String(getConfigValue(this._config, CONF_CAMERA_ENTITY, '')),
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
${cameraEntities.map((entity) => {
|
|
||||||
return html` <paper-item>${entity}</paper-item> `;
|
|
||||||
})}
|
|
||||||
</paper-listbox>
|
|
||||||
</paper-dropdown-menu>
|
|
||||||
</div>
|
</div>
|
||||||
`
|
`
|
||||||
: ''}
|
: ''}
|
||||||
@@ -318,36 +389,11 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
|
|||||||
${options.frigate.show
|
${options.frigate.show
|
||||||
? html`
|
? html`
|
||||||
<div class="values">
|
<div class="values">
|
||||||
<paper-input
|
${this._renderStringInput(CONF_FRIGATE_CAMERA_NAME)}
|
||||||
label=${localize(`config.${CONF_FRIGATE_CAMERA_NAME}`)}
|
${this._renderStringInput(CONF_FRIGATE_URL)}
|
||||||
.value=${getConfigValue(this._config, CONF_FRIGATE_CAMERA_NAME, '')}
|
${this._renderStringInput(CONF_FRIGATE_LABEL)}
|
||||||
.configValue=${CONF_FRIGATE_CAMERA_NAME}
|
${this._renderStringInput(CONF_FRIGATE_ZONE)}
|
||||||
@value-changed=${this._valueChangedHandler}
|
${this._renderStringInput(CONF_FRIGATE_CLIENT_ID)}
|
||||||
></paper-input>
|
|
||||||
<paper-input
|
|
||||||
label=${localize(`config.${CONF_FRIGATE_URL}`)}
|
|
||||||
.value=${getConfigValue(this._config, CONF_FRIGATE_URL, '')}
|
|
||||||
.configValue=${CONF_FRIGATE_URL}
|
|
||||||
@value-changed=${this._valueChangedHandler}
|
|
||||||
></paper-input>
|
|
||||||
<paper-input
|
|
||||||
.label=${localize(`config.${CONF_FRIGATE_LABEL}`)}
|
|
||||||
.value=${getConfigValue(this._config, CONF_FRIGATE_LABEL, '')}
|
|
||||||
.configValue=${CONF_FRIGATE_LABEL}
|
|
||||||
@value-changed=${this._valueChangedHandler}
|
|
||||||
></paper-input>
|
|
||||||
<paper-input
|
|
||||||
.label=${localize(`config.${CONF_FRIGATE_ZONE}`)}
|
|
||||||
.value=${getConfigValue(this._config, CONF_FRIGATE_ZONE, '')}
|
|
||||||
.configValue=${CONF_FRIGATE_ZONE}
|
|
||||||
@value-changed=${this._valueChangedHandler}
|
|
||||||
></paper-input>
|
|
||||||
<paper-input
|
|
||||||
label=${localize(`config.${CONF_FRIGATE_CLIENT_ID}`)}
|
|
||||||
.value=${getConfigValue(this._config, CONF_FRIGATE_CLIENT_ID, '')}
|
|
||||||
.configValue=${CONF_FRIGATE_CLIENT_ID}
|
|
||||||
@value-changed=${this._valueChangedHandler}
|
|
||||||
></paper-input>
|
|
||||||
</div>
|
</div>
|
||||||
`
|
`
|
||||||
: ''}
|
: ''}
|
||||||
@@ -355,32 +401,8 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
|
|||||||
${options.view.show
|
${options.view.show
|
||||||
? html`
|
? html`
|
||||||
<div class="values">
|
<div class="values">
|
||||||
<paper-dropdown-menu
|
${this._renderDropdown(CONF_VIEW_DEFAULT, viewModes)}
|
||||||
label=${localize(`config.${CONF_VIEW_DEFAULT}`)}
|
${this._renderStringInput(CONF_VIEW_TIMEOUT, '[0-9]')}
|
||||||
@value-changed=${this._valueChangedHandler}
|
|
||||||
.configValue=${CONF_VIEW_DEFAULT}
|
|
||||||
>
|
|
||||||
<paper-listbox
|
|
||||||
slot="dropdown-content"
|
|
||||||
.selected=${Object.keys(viewModes).indexOf(
|
|
||||||
String(getConfigValue(this._config, CONF_VIEW_DEFAULT, '')),
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
${Object.keys(viewModes).map((key) => {
|
|
||||||
return html`
|
|
||||||
<paper-item .label="${key}"> ${viewModes[key]} </paper-item>
|
|
||||||
`;
|
|
||||||
})}
|
|
||||||
</paper-listbox>
|
|
||||||
</paper-dropdown-menu>
|
|
||||||
<paper-input
|
|
||||||
label=${localize(`config.${CONF_VIEW_TIMEOUT}`)}
|
|
||||||
prevent-invalid-input
|
|
||||||
allowed-pattern="[0-9]"
|
|
||||||
.value=${getConfigValue(this._config, CONF_VIEW_TIMEOUT, '')}
|
|
||||||
.configValue=${CONF_VIEW_TIMEOUT}
|
|
||||||
@value-changed=${this._valueChangedHandler}
|
|
||||||
></paper-input>
|
|
||||||
</div>
|
</div>
|
||||||
`
|
`
|
||||||
: ''}
|
: ''}
|
||||||
@@ -388,150 +410,48 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
|
|||||||
${options.menu.show
|
${options.menu.show
|
||||||
? html`
|
? html`
|
||||||
<div class="values">
|
<div class="values">
|
||||||
<paper-dropdown-menu
|
${this._renderDropdown(CONF_MENU_MODE, menuModes)}
|
||||||
.label=${localize(`config.${CONF_MENU_MODE}`)}
|
${this._renderStringInput(CONF_MENU_BUTTON_SIZE)}
|
||||||
@value-changed=${this._valueChangedHandler}
|
${this._renderSwitch(
|
||||||
.configValue=${CONF_MENU_MODE}
|
CONF_MENU_BUTTONS_FRIGATE,
|
||||||
>
|
defaults.menu.buttons.frigate,
|
||||||
<paper-listbox
|
getShowButtonLabel(CONF_MENU_BUTTONS_FRIGATE),
|
||||||
slot="dropdown-content"
|
)}
|
||||||
.selected=${Object.keys(menuModes).indexOf(
|
${this._renderSwitch(
|
||||||
String(getConfigValue(this._config, CONF_MENU_MODE, '')),
|
CONF_MENU_BUTTONS_LIVE,
|
||||||
)}
|
defaults.menu.buttons.live,
|
||||||
>
|
getShowButtonLabel('view.views.live'),
|
||||||
${Object.keys(menuModes).map((key) => {
|
)}
|
||||||
return html`
|
${this._renderSwitch(
|
||||||
<paper-item .label="${key}"> ${menuModes[key]} </paper-item>
|
CONF_MENU_BUTTONS_CLIPS,
|
||||||
`;
|
defaults.menu.buttons.clips,
|
||||||
})}
|
getShowButtonLabel('view.views.clips'),
|
||||||
</paper-listbox>
|
)}
|
||||||
</paper-dropdown-menu>
|
${this._renderSwitch(
|
||||||
<paper-input
|
CONF_MENU_BUTTONS_SNAPSHOTS,
|
||||||
label=${localize(`config.${CONF_MENU_BUTTON_SIZE}`)}
|
defaults.menu.buttons.snapshots,
|
||||||
.value=${getConfigValue(this._config, CONF_MENU_BUTTON_SIZE, '')}
|
getShowButtonLabel('view.views.snapshots'),
|
||||||
.configValue=${CONF_MENU_BUTTON_SIZE}
|
)}
|
||||||
@value-changed=${this._valueChangedHandler}
|
${this._renderSwitch(
|
||||||
></paper-input>
|
CONF_MENU_BUTTONS_IMAGE,
|
||||||
<ha-formfield
|
defaults.menu.buttons.image,
|
||||||
.label=${localize('editor.show_button') +
|
getShowButtonLabel('view.views.image'),
|
||||||
': ' +
|
)}
|
||||||
localize(`config.${CONF_MENU_BUTTONS_FRIGATE}`)}
|
${this._renderSwitch(
|
||||||
>
|
CONF_MENU_BUTTONS_FRIGATE_DOWNLOAD,
|
||||||
<ha-switch
|
defaults.menu.buttons.download,
|
||||||
.checked="${getConfigValue(
|
getShowButtonLabel(CONF_MENU_BUTTONS_FRIGATE_DOWNLOAD),
|
||||||
this._config,
|
)}
|
||||||
CONF_MENU_BUTTONS_FRIGATE,
|
${this._renderSwitch(
|
||||||
defaults.menu.buttons.frigate,
|
CONF_MENU_BUTTONS_FRIGATE_UI,
|
||||||
)},"
|
defaults.menu.buttons.frigate_ui,
|
||||||
.configValue=${CONF_MENU_BUTTONS_FRIGATE}
|
getShowButtonLabel(CONF_MENU_BUTTONS_FRIGATE_UI),
|
||||||
@change=${this._valueChangedHandler}
|
)}
|
||||||
></ha-switch>
|
${this._renderSwitch(
|
||||||
</ha-formfield>
|
CONF_MENU_BUTTONS_FRIGATE_FULLSCREEN,
|
||||||
<ha-formfield
|
defaults.menu.buttons.fullscreen,
|
||||||
.label=${localize('editor.show_button') +
|
getShowButtonLabel(CONF_MENU_BUTTONS_FRIGATE_FULLSCREEN),
|
||||||
': ' +
|
)}
|
||||||
localize('config.view.views.live')}
|
|
||||||
>
|
|
||||||
<ha-switch
|
|
||||||
.checked=${getConfigValue(
|
|
||||||
this._config,
|
|
||||||
CONF_MENU_BUTTONS_LIVE,
|
|
||||||
defaults.menu.buttons.live,
|
|
||||||
)}
|
|
||||||
.configValue=${CONF_MENU_BUTTONS_LIVE}
|
|
||||||
@change=${this._valueChangedHandler}
|
|
||||||
></ha-switch>
|
|
||||||
</ha-formfield>
|
|
||||||
<ha-formfield
|
|
||||||
.label=${localize('editor.show_button') +
|
|
||||||
': ' +
|
|
||||||
localize('config.view.views.clips')}
|
|
||||||
>
|
|
||||||
<ha-switch
|
|
||||||
.checked=${getConfigValue(
|
|
||||||
this._config,
|
|
||||||
CONF_MENU_BUTTONS_CLIPS,
|
|
||||||
defaults.menu.buttons.clips,
|
|
||||||
)}
|
|
||||||
.configValue=${CONF_MENU_BUTTONS_CLIPS}
|
|
||||||
@change=${this._valueChangedHandler}
|
|
||||||
></ha-switch>
|
|
||||||
</ha-formfield>
|
|
||||||
<ha-formfield
|
|
||||||
.label=${localize('editor.show_button') +
|
|
||||||
': ' +
|
|
||||||
localize('config.view.views.snapshots')}
|
|
||||||
>
|
|
||||||
<ha-switch
|
|
||||||
.checked=${getConfigValue(
|
|
||||||
this._config,
|
|
||||||
CONF_MENU_BUTTONS_SNAPSHOTS,
|
|
||||||
defaults.menu.buttons.snapshots,
|
|
||||||
)}
|
|
||||||
.configValue=${CONF_MENU_BUTTONS_SNAPSHOTS}
|
|
||||||
@change=${this._valueChangedHandler}
|
|
||||||
></ha-switch>
|
|
||||||
</ha-formfield>
|
|
||||||
<ha-formfield
|
|
||||||
.label=${localize('editor.show_button') +
|
|
||||||
': ' +
|
|
||||||
localize('config.view.views.image')}
|
|
||||||
>
|
|
||||||
<ha-switch
|
|
||||||
.checked=${getConfigValue(
|
|
||||||
this._config,
|
|
||||||
CONF_MENU_BUTTONS_IMAGE,
|
|
||||||
defaults.menu.buttons.image,
|
|
||||||
)}
|
|
||||||
.configValue=${CONF_MENU_BUTTONS_IMAGE}
|
|
||||||
@change=${this._valueChangedHandler}
|
|
||||||
></ha-switch>
|
|
||||||
</ha-formfield>
|
|
||||||
<ha-formfield
|
|
||||||
.label=${localize('editor.show_button') +
|
|
||||||
': ' +
|
|
||||||
localize(`config.${CONF_MENU_BUTTONS_FRIGATE_DOWNLOAD}`)}
|
|
||||||
>
|
|
||||||
<ha-switch
|
|
||||||
.checked=${getConfigValue(
|
|
||||||
this._config,
|
|
||||||
CONF_MENU_BUTTONS_FRIGATE_DOWNLOAD,
|
|
||||||
defaults.menu.buttons.download,
|
|
||||||
)}
|
|
||||||
.configValue=${CONF_MENU_BUTTONS_FRIGATE_DOWNLOAD}
|
|
||||||
@change=${this._valueChangedHandler}
|
|
||||||
></ha-switch>
|
|
||||||
</ha-formfield>
|
|
||||||
<ha-formfield
|
|
||||||
.label=${localize('editor.show_button') +
|
|
||||||
': ' +
|
|
||||||
localize(`config.${CONF_MENU_BUTTONS_FRIGATE_UI}`)}
|
|
||||||
>
|
|
||||||
<ha-switch
|
|
||||||
.checked=${getConfigValue(
|
|
||||||
this._config,
|
|
||||||
CONF_MENU_BUTTONS_FRIGATE_UI,
|
|
||||||
defaults.menu.buttons.frigate_ui,
|
|
||||||
)}
|
|
||||||
.configValue=${CONF_MENU_BUTTONS_FRIGATE_UI}
|
|
||||||
@change=${this._valueChangedHandler}
|
|
||||||
></ha-switch>
|
|
||||||
</ha-formfield>
|
|
||||||
<ha-formfield
|
|
||||||
.label=${localize('editor.show_button') +
|
|
||||||
': ' +
|
|
||||||
localize(`config.${CONF_MENU_BUTTONS_FRIGATE_FULLSCREEN}`)}
|
|
||||||
>
|
|
||||||
<ha-switch
|
|
||||||
.checked=${getConfigValue(
|
|
||||||
this._config,
|
|
||||||
CONF_MENU_BUTTONS_FRIGATE_FULLSCREEN,
|
|
||||||
defaults.menu.buttons.fullscreen,
|
|
||||||
)}
|
|
||||||
.configValue=${CONF_MENU_BUTTONS_FRIGATE_FULLSCREEN}
|
|
||||||
@change=${this._valueChangedHandler}
|
|
||||||
></ha-switch>
|
|
||||||
</ha-formfield>
|
|
||||||
</div>
|
</div>
|
||||||
`
|
`
|
||||||
: ''}
|
: ''}
|
||||||
@@ -539,290 +459,61 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
|
|||||||
${options.live.show
|
${options.live.show
|
||||||
? html`
|
? html`
|
||||||
<div class="values">
|
<div class="values">
|
||||||
<br />
|
${this._renderSwitch(CONF_LIVE_PRELOAD, defaults.live.preload)}
|
||||||
<ha-formfield .label=${localize(`config.${CONF_LIVE_PRELOAD}`)}>
|
${this._renderDropdown(CONF_LIVE_PROVIDER, liveProviders)}
|
||||||
<ha-switch
|
${this._renderDropdown(CONF_LIVE_WEBRTC_ENTITY, cameraEntities)}
|
||||||
.checked=${getConfigValue(
|
${this._renderStringInput(CONF_LIVE_WEBRTC_URL)}
|
||||||
this._config,
|
${this._renderDropdown(
|
||||||
CONF_LIVE_PRELOAD,
|
CONF_LIVE_CONTROLS_THUMBNAILS_MODE,
|
||||||
defaults.live.preload,
|
thumbnailModes,
|
||||||
)}
|
|
||||||
.configValue=${CONF_LIVE_PRELOAD}
|
|
||||||
@change=${this._valueChangedHandler}
|
|
||||||
></ha-switch>
|
|
||||||
</ha-formfield>
|
|
||||||
<paper-dropdown-menu
|
|
||||||
.label=${localize(`config.${CONF_LIVE_PROVIDER}`)}
|
|
||||||
@value-changed=${this._valueChangedHandler}
|
|
||||||
.configValue=${CONF_LIVE_PROVIDER}
|
|
||||||
>
|
|
||||||
<paper-listbox
|
|
||||||
slot="dropdown-content"
|
|
||||||
.selected=${Object.keys(liveProviders).indexOf(
|
|
||||||
String(getConfigValue(this._config, CONF_LIVE_PROVIDER, '')),
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
${Object.keys(liveProviders).map((key) => {
|
|
||||||
return html`
|
|
||||||
<paper-item .label="${key}">${liveProviders[key]} </paper-item>
|
|
||||||
`;
|
|
||||||
})}
|
|
||||||
</paper-listbox>
|
|
||||||
</paper-dropdown-menu>
|
|
||||||
<paper-dropdown-menu
|
|
||||||
.label=${localize(`config.${CONF_LIVE_WEBRTC_ENTITY}`)}
|
|
||||||
@value-changed=${this._valueChangedHandler}
|
|
||||||
.configValue=${CONF_LIVE_WEBRTC_ENTITY}
|
|
||||||
>
|
|
||||||
<paper-listbox
|
|
||||||
slot="dropdown-content"
|
|
||||||
.selected=${cameraEntities.indexOf(
|
|
||||||
String(getConfigValue(this._config, CONF_LIVE_WEBRTC_ENTITY, '')),
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
${cameraEntities.map((entity) => {
|
|
||||||
return html` <paper-item>${entity}</paper-item> `;
|
|
||||||
})}
|
|
||||||
</paper-listbox>
|
|
||||||
</paper-dropdown-menu>
|
|
||||||
<paper-input
|
|
||||||
label=${localize(`config.${CONF_LIVE_WEBRTC_URL}`)}
|
|
||||||
.value=${getConfigValue(this._config, CONF_LIVE_WEBRTC_URL, '')}
|
|
||||||
.configValue=${CONF_LIVE_WEBRTC_URL}
|
|
||||||
@value-changed=${this._valueChangedHandler}
|
|
||||||
></paper-input>
|
|
||||||
<paper-dropdown-menu
|
|
||||||
.label=${localize(
|
|
||||||
`config.${CONF_LIVE_CONTROLS_THUMBNAILS_MODE}`,
|
|
||||||
)}
|
)}
|
||||||
@value-changed=${this._valueChangedHandler}
|
${this._renderDropdown(
|
||||||
.configValue=${CONF_LIVE_CONTROLS_THUMBNAILS_MODE}
|
CONF_LIVE_CONTROLS_THUMBNAILS_MEDIA,
|
||||||
>
|
thumbnailMedias,
|
||||||
<paper-listbox
|
|
||||||
slot="dropdown-content"
|
|
||||||
.selected=${Object.keys(thumbnailModes).indexOf(
|
|
||||||
String(
|
|
||||||
getConfigValue(
|
|
||||||
this._config,
|
|
||||||
CONF_LIVE_CONTROLS_THUMBNAILS_MODE,
|
|
||||||
'',
|
|
||||||
),
|
|
||||||
),
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
${Object.keys(thumbnailModes).map((key) => {
|
|
||||||
return html`
|
|
||||||
<paper-item .label="${key}">
|
|
||||||
${thumbnailModes[key]}
|
|
||||||
</paper-item>
|
|
||||||
`;
|
|
||||||
})}
|
|
||||||
</paper-listbox>
|
|
||||||
</paper-dropdown-menu>
|
|
||||||
<paper-dropdown-menu
|
|
||||||
.label=${localize(
|
|
||||||
`config.${CONF_LIVE_CONTROLS_THUMBNAILS_MEDIA}`,
|
|
||||||
)}
|
)}
|
||||||
@value-changed=${this._valueChangedHandler}
|
${this._renderStringInput(CONF_LIVE_CONTROLS_THUMBNAILS_SIZE)}
|
||||||
.configValue=${CONF_LIVE_CONTROLS_THUMBNAILS_MEDIA}
|
|
||||||
>
|
|
||||||
<paper-listbox
|
|
||||||
slot="dropdown-content"
|
|
||||||
.selected=${Object.keys(thumbnailMedias).indexOf(
|
|
||||||
String(
|
|
||||||
getConfigValue(
|
|
||||||
this._config,
|
|
||||||
CONF_LIVE_CONTROLS_THUMBNAILS_MEDIA,
|
|
||||||
'',
|
|
||||||
),
|
|
||||||
),
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
${Object.keys(thumbnailMedias).map((key) => {
|
|
||||||
return html`
|
|
||||||
<paper-item .label="${key}">
|
|
||||||
${thumbnailMedias[key]}
|
|
||||||
</paper-item>
|
|
||||||
`;
|
|
||||||
})}
|
|
||||||
</paper-listbox>
|
|
||||||
</paper-dropdown-menu>
|
|
||||||
<paper-input
|
|
||||||
label=${localize(`config.${CONF_LIVE_CONTROLS_THUMBNAILS_SIZE}`)}
|
|
||||||
.value=${getConfigValue(
|
|
||||||
this._config,
|
|
||||||
CONF_LIVE_CONTROLS_THUMBNAILS_SIZE,
|
|
||||||
'',
|
|
||||||
)}
|
|
||||||
.configValue=${CONF_LIVE_CONTROLS_THUMBNAILS_SIZE}
|
|
||||||
@value-changed=${this._valueChangedHandler}
|
|
||||||
></paper-input>
|
|
||||||
</div>
|
</div>
|
||||||
`
|
`
|
||||||
: ''}
|
: ''}
|
||||||
${this._renderOptionSetHeader('event_viewer')}
|
${this._renderOptionSetHeader('event_viewer')}
|
||||||
${options.event_viewer.show
|
${options.event_viewer.show
|
||||||
? html` <div class="values">
|
? html` <div class="values">
|
||||||
<br />
|
${this._renderSwitch(
|
||||||
<ha-formfield
|
CONF_EVENT_VIEWER_AUTOPLAY_CLIP,
|
||||||
.label=${localize(`config.${CONF_EVENT_VIEWER_AUTOPLAY_CLIP}`)}
|
defaults.event_viewer.autoplay_clip,
|
||||||
>
|
)}
|
||||||
<ha-switch
|
${this._renderSwitch(
|
||||||
.checked=${getConfigValue(
|
CONF_EVENT_VIEWER_DRAGGABLE,
|
||||||
this._config,
|
defaults.event_viewer.draggable,
|
||||||
CONF_EVENT_VIEWER_AUTOPLAY_CLIP,
|
)}
|
||||||
defaults.event_viewer.autoplay_clip,
|
${this._renderSwitch(
|
||||||
)}
|
CONF_EVENT_VIEWER_LAZY_LOAD,
|
||||||
.configValue=${CONF_EVENT_VIEWER_AUTOPLAY_CLIP}
|
defaults.event_viewer.lazy_load,
|
||||||
@change=${this._valueChangedHandler}
|
)}
|
||||||
></ha-switch>
|
${this._renderDropdown(
|
||||||
</ha-formfield>
|
CONF_EVENT_VIEWER_CONTROLS_NEXT_PREVIOUS_STYLE,
|
||||||
<ha-formfield .label=${localize(`config.${CONF_EVENT_VIEWER_DRAGGABLE}`)}>
|
eventViewerNextPreviousControlStyles,
|
||||||
<ha-switch
|
)}
|
||||||
.checked=${getConfigValue(
|
${this._renderStringInput(CONF_EVENT_VIEWER_CONTROLS_NEXT_PREVIOUS_SIZE)}
|
||||||
this._config,
|
${this._renderDropdown(
|
||||||
CONF_EVENT_VIEWER_DRAGGABLE,
|
CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_MODE,
|
||||||
defaults.event_viewer.draggable,
|
thumbnailModes,
|
||||||
)}
|
)}
|
||||||
.configValue=${CONF_EVENT_VIEWER_DRAGGABLE}
|
${this._renderStringInput(CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_SIZE)}
|
||||||
@change=${this._valueChangedHandler}
|
|
||||||
></ha-switch>
|
|
||||||
</ha-formfield>
|
|
||||||
<ha-formfield .label=${localize(`config.${CONF_EVENT_VIEWER_LAZY_LOAD}`)}>
|
|
||||||
<ha-switch
|
|
||||||
.checked=${getConfigValue(
|
|
||||||
this._config,
|
|
||||||
CONF_EVENT_VIEWER_LAZY_LOAD,
|
|
||||||
defaults.event_viewer.lazy_load,
|
|
||||||
)}
|
|
||||||
.configValue=${CONF_EVENT_VIEWER_LAZY_LOAD}
|
|
||||||
@change=${this._valueChangedHandler}
|
|
||||||
></ha-switch>
|
|
||||||
</ha-formfield>
|
|
||||||
<paper-dropdown-menu
|
|
||||||
.label=${localize(
|
|
||||||
`config.${CONF_EVENT_VIEWER_CONTROLS_NEXT_PREVIOUS_STYLE}`,
|
|
||||||
)}
|
|
||||||
@value-changed=${this._valueChangedHandler}
|
|
||||||
.configValue=${CONF_EVENT_VIEWER_CONTROLS_NEXT_PREVIOUS_STYLE}
|
|
||||||
>
|
|
||||||
<paper-listbox
|
|
||||||
slot="dropdown-content"
|
|
||||||
.selected=${Object.keys(eventViewerNextPreviousControlStyles).indexOf(
|
|
||||||
String(
|
|
||||||
getConfigValue(
|
|
||||||
this._config,
|
|
||||||
CONF_EVENT_VIEWER_CONTROLS_NEXT_PREVIOUS_STYLE,
|
|
||||||
'',
|
|
||||||
),
|
|
||||||
),
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
${Object.keys(eventViewerNextPreviousControlStyles).map((key) => {
|
|
||||||
return html`
|
|
||||||
<paper-item .label="${key}">
|
|
||||||
${eventViewerNextPreviousControlStyles[key]}
|
|
||||||
</paper-item>
|
|
||||||
`;
|
|
||||||
})}
|
|
||||||
</paper-listbox>
|
|
||||||
</paper-dropdown-menu>
|
|
||||||
<paper-input
|
|
||||||
label=${localize(`config.${CONF_EVENT_VIEWER_CONTROLS_NEXT_PREVIOUS_SIZE}`)}
|
|
||||||
.value=${getConfigValue(
|
|
||||||
this._config,
|
|
||||||
CONF_EVENT_VIEWER_CONTROLS_NEXT_PREVIOUS_SIZE,
|
|
||||||
'',
|
|
||||||
)}
|
|
||||||
.configValue=${CONF_EVENT_VIEWER_CONTROLS_NEXT_PREVIOUS_SIZE}
|
|
||||||
@value-changed=${this._valueChangedHandler}
|
|
||||||
></paper-input>
|
|
||||||
<paper-dropdown-menu
|
|
||||||
.label=${localize(
|
|
||||||
`config.${CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_MODE}`,
|
|
||||||
)}
|
|
||||||
@value-changed=${this._valueChangedHandler}
|
|
||||||
.configValue=${CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_MODE}
|
|
||||||
>
|
|
||||||
<paper-listbox
|
|
||||||
slot="dropdown-content"
|
|
||||||
.selected=${Object.keys(thumbnailModes).indexOf(
|
|
||||||
String(
|
|
||||||
getConfigValue(
|
|
||||||
this._config,
|
|
||||||
CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_MODE,
|
|
||||||
'',
|
|
||||||
),
|
|
||||||
),
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
${Object.keys(thumbnailModes).map((key) => {
|
|
||||||
return html`
|
|
||||||
<paper-item .label="${key}">
|
|
||||||
${thumbnailModes[key]}
|
|
||||||
</paper-item>
|
|
||||||
`;
|
|
||||||
})}
|
|
||||||
</paper-listbox>
|
|
||||||
</paper-dropdown-menu>
|
|
||||||
<paper-input
|
|
||||||
label=${localize(`config.${CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_SIZE}`)}
|
|
||||||
.value=${getConfigValue(
|
|
||||||
this._config,
|
|
||||||
CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_SIZE,
|
|
||||||
'',
|
|
||||||
)}
|
|
||||||
.configValue=${CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_SIZE}
|
|
||||||
@value-changed=${this._valueChangedHandler}
|
|
||||||
></paper-input>
|
|
||||||
</div>`
|
</div>`
|
||||||
: ''}
|
: ''}
|
||||||
${this._renderOptionSetHeader('image')}
|
${this._renderOptionSetHeader('image')}
|
||||||
${options.image.show
|
${options.image.show
|
||||||
? html` <div class="values">
|
? html` <div class="values">${this._renderStringInput(CONF_IMAGE_SRC)}</div>`
|
||||||
<paper-input
|
|
||||||
label=${localize(`config.${CONF_IMAGE_SRC}`)}
|
|
||||||
prevent-invalid-input
|
|
||||||
.value=${getConfigValue(this._config, CONF_IMAGE_SRC, '')}
|
|
||||||
.configValue=${CONF_IMAGE_SRC}
|
|
||||||
@value-changed=${this._valueChangedHandler}
|
|
||||||
></paper-input>
|
|
||||||
</div>`
|
|
||||||
: ''}
|
: ''}
|
||||||
${this._renderOptionSetHeader('dimensions')}
|
${this._renderOptionSetHeader('dimensions')}
|
||||||
${options.dimensions.show
|
${options.dimensions.show
|
||||||
? html` <div class="values">
|
? html` <div class="values">
|
||||||
<paper-dropdown-menu
|
${this._renderDropdown(
|
||||||
.label=${localize(`config.${CONF_DIMENSIONS_ASPECT_RATIO_MODE}`)}
|
CONF_DIMENSIONS_ASPECT_RATIO_MODE,
|
||||||
@value-changed=${this._valueChangedHandler}
|
aspectRatioModes,
|
||||||
.configValue=${CONF_DIMENSIONS_ASPECT_RATIO_MODE}
|
)}
|
||||||
>
|
${this._renderStringInput(CONF_DIMENSIONS_ASPECT_RATIO)}
|
||||||
<paper-listbox
|
|
||||||
slot="dropdown-content"
|
|
||||||
.selected=${Object.keys(aspectRatioModes).indexOf(
|
|
||||||
String(
|
|
||||||
getConfigValue(
|
|
||||||
this._config,
|
|
||||||
CONF_DIMENSIONS_ASPECT_RATIO_MODE,
|
|
||||||
'',
|
|
||||||
),
|
|
||||||
),
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
${Object.keys(aspectRatioModes).map((key) => {
|
|
||||||
return html`
|
|
||||||
<paper-item .label="${key}"> ${aspectRatioModes[key]} </paper-item>
|
|
||||||
`;
|
|
||||||
})}
|
|
||||||
</paper-listbox>
|
|
||||||
</paper-dropdown-menu>
|
|
||||||
<paper-input
|
|
||||||
label=${localize(`config.${CONF_DIMENSIONS_ASPECT_RATIO}`)}
|
|
||||||
prevent-invalid-input
|
|
||||||
.value=${getConfigValue(this._config, CONF_DIMENSIONS_ASPECT_RATIO, '')}
|
|
||||||
.configValue=${CONF_DIMENSIONS_ASPECT_RATIO}
|
|
||||||
@value-changed=${this._valueChangedHandler}
|
|
||||||
></paper-input>
|
|
||||||
</div>`
|
</div>`
|
||||||
: ''}
|
: ''}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -18,7 +18,8 @@
|
|||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
.values {
|
.values {
|
||||||
padding-left: 16px;
|
padding-left: 32px;
|
||||||
|
padding-top: 10px;
|
||||||
background: var(--secondary-background-color);
|
background: var(--secondary-background-color);
|
||||||
display: grid;
|
display: grid;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user