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

Add editor support.

Browse Source
This commit is contained in:
Dermot Duffy
2021-11-26 10:04:59 -08:00
parent 862838b82b
commit 7aa3259c66
3 changed files with 153 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/const.ts
+11
View File
@@ -19,12 +19,23 @@ 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_EVENT_VIEWER_CONTROLS_THUMBNAILS_MODE =
'event_viewer.controls.thumbnails.mode';
export const CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_SIZE =
'event_viewer.controls.thumbnails.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_LIVE_CONTROLS_THUMBNAILS_MODE =
'live.controls.thumbnails.mode';
export const CONF_LIVE_CONTROLS_THUMBNAILS_SIZE =
'live.controls.thumbnails.size';
export const CONF_LIVE_CONTROLS_THUMBNAILS_MEDIA =
'live.controls.thumbnails.media';
export const CONF_IMAGE_SRC = 'image.src';
export const CONF_MENU_BUTTONS_FRIGATE = 'menu.buttons.frigate';
src/editor.ts
+122
View File
@@ -23,6 +23,8 @@ import {
CONF_EVENT_VIEWER_AUTOPLAY_CLIP,
CONF_EVENT_VIEWER_CONTROLS_NEXT_PREVIOUS_SIZE,
CONF_EVENT_VIEWER_CONTROLS_NEXT_PREVIOUS_STYLE,
CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_MODE,
CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_SIZE,
CONF_EVENT_VIEWER_DRAGGABLE,
CONF_EVENT_VIEWER_LAZY_LOAD,
CONF_FRIGATE_CAMERA_NAME,
@@ -31,6 +33,9 @@ import {
CONF_FRIGATE_URL,
CONF_FRIGATE_ZONE,
CONF_IMAGE_SRC,
CONF_LIVE_CONTROLS_THUMBNAILS_MEDIA,
CONF_LIVE_CONTROLS_THUMBNAILS_MODE,
CONF_LIVE_CONTROLS_THUMBNAILS_SIZE,
CONF_LIVE_PRELOAD,
CONF_LIVE_PROVIDER,
CONF_LIVE_WEBRTC_ENTITY,
@@ -223,6 +228,19 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
unconstrained: localize('config.dimensions.aspect_ratio_modes.unconstrained'),
};
const thumbnailModes = {
'': '',
none: localize('config.event_viewer.controls.thumbnails.modes.none'),
above: localize('config.event_viewer.controls.thumbnails.modes.above'),
below: localize('config.event_viewer.controls.thumbnails.modes.below'),
}
const thumbnailMedias = {
'': '',
clips: localize('config.live.controls.thumbnails.medias.clips'),
snapshots: localize('config.live.controls.thumbnails.medias.snapshots'),
}
const defaults = frigateCardConfigDefaults;
return html`
@@ -588,6 +606,72 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
.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}
.configValue=${CONF_LIVE_CONTROLS_THUMBNAILS_MODE}
>
<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}
.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>
`
: ''}
@@ -678,6 +762,44 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
.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
src/localize/languages/en.json
+20
View File
@@ -42,6 +42,15 @@
"chevrons": "Chevrons",
"none": "None"
}
},
"thumbnails": {
"mode": "Event Viewer thumbnails mode",
"size": "Event Viewer thumbnails size (e.g. '100px')",
"modes": {
"below": "Thumbnails below the media",
"above": "Thumbnails above the media",
"none": "No thumbnails"
}
}
}
},
@@ -56,6 +65,17 @@
"webrtc": {
"entity": "WebRTC Camera Entity (Not a Frigate camera)",
"url": "WebRTC Camera URL"
},
"controls": {
"thumbnails": {
"mode": "Live thumbnails mode",
"size": "Live thumbnails size (e.g. '100px')",
"media": "Whether to show thumbnails of clips or snapshots",
"medias": {
"clips": "Clip thumbnails",
"snapshots": "Snapshot thumbnails"
}
}
}
},
"image": {