diff --git a/src/editor.ts b/src/editor.ts
index 029139df..6fd591ca 100644
--- a/src/editor.ts
+++ b/src/editor.ts
@@ -119,6 +119,10 @@ const MENU_CAMERAS_DEPENDENCIES = 'cameras.dependencies';
const MENU_CAMERAS_FRIGATE = 'cameras.frigate';
const MENU_CAMERAS_TRIGGERS = 'cameras.triggers';
const MENU_CAMERAS_WEBRTC = 'cameras.webrtc';
+const MENU_EVENT_GALLERY_CONTROLS = 'event_gallery.controls';
+const MENU_LIVE_CONTROLS = 'live.controls';
+const MENU_MEDIA_VIEWER_CONTROLS = 'media_viewer.controls';
+const MENU_TIMELINE_CONTROLS = 'timeline.controls';
const MENU_OPTIONS = 'options';
const MENU_VIEW_SCAN = 'scan';
@@ -730,9 +734,10 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
},
template: TemplateResult,
): TemplateResult {
+ const selected = this._expandedMenus[domain] === key;
const submenuClasses = {
submenu: true,
- selected: this._expandedMenus[domain] === key,
+ selected: selected,
};
return html`
- ${this._expandedMenus[domain] === key
- ? html`${template}
`
- : ''}
+ ${selected ? html`${template}
` : ''}
`;
}
@@ -1192,62 +1195,82 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
CONF_LIVE_AUTO_UNMUTE,
this._mediaActionPositiveConditions,
)}
- ${this._renderOptionSelector(
- CONF_LIVE_CONTROLS_NEXT_PREVIOUS_STYLE,
- this._liveNextPreviousControlStyles,
- )}
- ${this._renderNumberInput(CONF_LIVE_CONTROLS_NEXT_PREVIOUS_SIZE, {
- min: BUTTON_SIZE_MIN,
- })}
- ${this._renderOptionSelector(
- CONF_LIVE_CONTROLS_THUMBNAILS_MODE,
- this._thumbnailModes,
- )}
- ${this._renderOptionSelector(
- CONF_LIVE_CONTROLS_THUMBNAILS_MEDIA,
- this._thumbnailMedias,
- )}
- ${this._renderNumberInput(CONF_LIVE_CONTROLS_THUMBNAILS_SIZE, {
- min: THUMBNAIL_WIDTH_MIN,
- max: THUMBNAIL_WIDTH_MAX,
- })}
- ${this._renderOptionSelector(
- CONF_LIVE_CONTROLS_TITLE_MODE,
- this._titleModes,
- )}
- ${this._renderSwitch(
- CONF_LIVE_CONTROLS_THUMBNAILS_SHOW_DETAILS,
- defaults.live.controls.thumbnails.show_details,
- )}
- ${this._renderSwitch(
- CONF_LIVE_CONTROLS_THUMBNAILS_SHOW_CONTROLS,
- defaults.live.controls.thumbnails.show_controls,
- )}
- ${this._renderNumberInput(CONF_LIVE_CONTROLS_TITLE_DURATION_SECONDS, {
- min: 0,
- max: 60,
- })}
${this._renderOptionSelector(
CONF_LIVE_TRANSITION_EFFECT,
this._transitionEffects,
)}
+ ${this._putInSubmenu(
+ MENU_LIVE_CONTROLS,
+ true,
+ 'config.live.controls.options',
+ { name: 'mdi:gamepad' },
+ html`
+ ${this._renderOptionSelector(
+ CONF_LIVE_CONTROLS_NEXT_PREVIOUS_STYLE,
+ this._liveNextPreviousControlStyles,
+ )}
+ ${this._renderNumberInput(CONF_LIVE_CONTROLS_NEXT_PREVIOUS_SIZE, {
+ min: BUTTON_SIZE_MIN,
+ })}
+ ${this._renderOptionSelector(
+ CONF_LIVE_CONTROLS_THUMBNAILS_MODE,
+ this._thumbnailModes,
+ )}
+ ${this._renderOptionSelector(
+ CONF_LIVE_CONTROLS_THUMBNAILS_MEDIA,
+ this._thumbnailMedias,
+ )}
+ ${this._renderNumberInput(CONF_LIVE_CONTROLS_THUMBNAILS_SIZE, {
+ min: THUMBNAIL_WIDTH_MIN,
+ max: THUMBNAIL_WIDTH_MAX,
+ })}
+ ${this._renderOptionSelector(
+ CONF_LIVE_CONTROLS_TITLE_MODE,
+ this._titleModes,
+ )}
+ ${this._renderSwitch(
+ CONF_LIVE_CONTROLS_THUMBNAILS_SHOW_DETAILS,
+ defaults.live.controls.thumbnails.show_details,
+ )}
+ ${this._renderSwitch(
+ CONF_LIVE_CONTROLS_THUMBNAILS_SHOW_CONTROLS,
+ defaults.live.controls.thumbnails.show_controls,
+ )}
+ ${this._renderNumberInput(
+ CONF_LIVE_CONTROLS_TITLE_DURATION_SECONDS,
+ {
+ min: 0,
+ max: 60,
+ },
+ )}
+ `,
+ )}
`
: ''}
${this._renderOptionSetHeader('event_gallery')}
${this._expandedMenus[MENU_OPTIONS] === 'event_gallery'
? html`
- ${this._renderNumberInput(CONF_EVENT_GALLERY_CONTROLS_THUMBNAILS_SIZE, {
- min: THUMBNAIL_WIDTH_MIN,
- max: THUMBNAIL_WIDTH_MAX,
- })}
- ${this._renderSwitch(
- CONF_EVENT_GALLERY_CONTROLS_THUMBNAILS_SHOW_DETAILS,
- defaults.media_viewer.controls.thumbnails.show_details,
- )}
- ${this._renderSwitch(
- CONF_EVENT_GALLERY_CONTROLS_THUMBNAILS_SHOW_CONTROLS,
- defaults.media_viewer.controls.thumbnails.show_controls,
+ ${this._putInSubmenu(
+ MENU_EVENT_GALLERY_CONTROLS,
+ true,
+ 'config.event_gallery.controls.options',
+ { name: 'mdi:gamepad' },
+ html` ${this._renderNumberInput(
+ CONF_EVENT_GALLERY_CONTROLS_THUMBNAILS_SIZE,
+ {
+ min: THUMBNAIL_WIDTH_MIN,
+ max: THUMBNAIL_WIDTH_MAX,
+ },
+ )}
+ ${this._renderSwitch(
+ CONF_EVENT_GALLERY_CONTROLS_THUMBNAILS_SHOW_DETAILS,
+ defaults.media_viewer.controls.thumbnails.show_details,
+ )}
+ ${this._renderSwitch(
+ CONF_EVENT_GALLERY_CONTROLS_THUMBNAILS_SHOW_CONTROLS,
+ defaults.media_viewer.controls.thumbnails.show_controls,
+ )}`,
)}
`
: ''}
@@ -1278,41 +1301,50 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
CONF_MEDIA_VIEWER_LAZY_LOAD,
defaults.media_viewer.lazy_load,
)}
- ${this._renderOptionSelector(
- CONF_MEDIA_VIEWER_CONTROLS_NEXT_PREVIOUS_STYLE,
- this._eventViewerNextPreviousControlStyles,
- )}
- ${this._renderNumberInput(CONF_MEDIA_VIEWER_CONTROLS_NEXT_PREVIOUS_SIZE, {
- min: BUTTON_SIZE_MIN,
- })}
- ${this._renderOptionSelector(
- CONF_MEDIA_VIEWER_CONTROLS_THUMBNAILS_MODE,
- this._thumbnailModes,
- )}
- ${this._renderNumberInput(CONF_MEDIA_VIEWER_CONTROLS_THUMBNAILS_SIZE, {
- min: THUMBNAIL_WIDTH_MIN,
- max: THUMBNAIL_WIDTH_MAX,
- })}
- ${this._renderSwitch(
- CONF_MEDIA_VIEWER_CONTROLS_THUMBNAILS_SHOW_DETAILS,
- defaults.media_viewer.controls.thumbnails.show_details,
- )}
- ${this._renderSwitch(
- CONF_MEDIA_VIEWER_CONTROLS_THUMBNAILS_SHOW_CONTROLS,
- defaults.media_viewer.controls.thumbnails.show_controls,
- )}
- ${this._renderOptionSelector(
- CONF_MEDIA_VIEWER_CONTROLS_TITLE_MODE,
- this._titleModes,
- )}
- ${this._renderNumberInput(
- CONF_MEDIA_VIEWER_CONTROLS_TITLE_DURATION_SECONDS,
- { min: 0, max: 60 },
- )}
${this._renderOptionSelector(
CONF_MEDIA_VIEWER_TRANSITION_EFFECT,
this._transitionEffects,
)}
+ ${this._putInSubmenu(
+ MENU_MEDIA_VIEWER_CONTROLS,
+ true,
+ 'config.media_viewer.controls.options',
+ { name: 'mdi:gamepad' },
+ html` ${this._renderOptionSelector(
+ CONF_MEDIA_VIEWER_CONTROLS_NEXT_PREVIOUS_STYLE,
+ this._eventViewerNextPreviousControlStyles,
+ )}
+ ${this._renderNumberInput(
+ CONF_MEDIA_VIEWER_CONTROLS_NEXT_PREVIOUS_SIZE,
+ {
+ min: BUTTON_SIZE_MIN,
+ },
+ )}
+ ${this._renderOptionSelector(
+ CONF_MEDIA_VIEWER_CONTROLS_THUMBNAILS_MODE,
+ this._thumbnailModes,
+ )}
+ ${this._renderNumberInput(CONF_MEDIA_VIEWER_CONTROLS_THUMBNAILS_SIZE, {
+ min: THUMBNAIL_WIDTH_MIN,
+ max: THUMBNAIL_WIDTH_MAX,
+ })}
+ ${this._renderSwitch(
+ CONF_MEDIA_VIEWER_CONTROLS_THUMBNAILS_SHOW_DETAILS,
+ defaults.media_viewer.controls.thumbnails.show_details,
+ )}
+ ${this._renderSwitch(
+ CONF_MEDIA_VIEWER_CONTROLS_THUMBNAILS_SHOW_CONTROLS,
+ defaults.media_viewer.controls.thumbnails.show_controls,
+ )}
+ ${this._renderOptionSelector(
+ CONF_MEDIA_VIEWER_CONTROLS_TITLE_MODE,
+ this._titleModes,
+ )}
+ ${this._renderNumberInput(
+ CONF_MEDIA_VIEWER_CONTROLS_TITLE_DURATION_SECONDS,
+ { min: 0, max: 60 },
+ )}`,
+ )}
`
: ''}
${this._renderOptionSetHeader('image')}
@@ -1336,21 +1368,27 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
CONF_TIMELINE_SHOW_RECORDINGS,
defaults.timeline.show_recordings,
)}
- ${this._renderOptionSelector(
- CONF_TIMELINE_CONTROLS_THUMBNAILS_MODE,
- this._thumbnailModes,
- )}
- ${this._renderNumberInput(CONF_TIMELINE_CONTROLS_THUMBNAILS_SIZE, {
- min: THUMBNAIL_WIDTH_MIN,
- max: THUMBNAIL_WIDTH_MAX,
- })}
- ${this._renderSwitch(
- CONF_TIMELINE_CONTROLS_THUMBNAILS_SHOW_DETAILS,
- defaults.timeline.controls.thumbnails.show_details,
- )}
- ${this._renderSwitch(
- CONF_TIMELINE_CONTROLS_THUMBNAILS_SHOW_CONTROLS,
- defaults.timeline.controls.thumbnails.show_controls,
+ ${this._putInSubmenu(
+ MENU_TIMELINE_CONTROLS,
+ true,
+ 'config.timeline.controls.options',
+ { name: 'mdi:gamepad' },
+ html` ${this._renderOptionSelector(
+ CONF_TIMELINE_CONTROLS_THUMBNAILS_MODE,
+ this._thumbnailModes,
+ )}
+ ${this._renderNumberInput(CONF_TIMELINE_CONTROLS_THUMBNAILS_SIZE, {
+ min: THUMBNAIL_WIDTH_MIN,
+ max: THUMBNAIL_WIDTH_MAX,
+ })}
+ ${this._renderSwitch(
+ CONF_TIMELINE_CONTROLS_THUMBNAILS_SHOW_DETAILS,
+ defaults.timeline.controls.thumbnails.show_details,
+ )}
+ ${this._renderSwitch(
+ CONF_TIMELINE_CONTROLS_THUMBNAILS_SHOW_CONTROLS,
+ defaults.timeline.controls.thumbnails.show_controls,
+ )}`,
)}
`
: ''}
diff --git a/src/localize/languages/en.json b/src/localize/languages/en.json
index d935ba2c..a7b03508 100644
--- a/src/localize/languages/en.json
+++ b/src/localize/languages/en.json
@@ -91,6 +91,7 @@
},
"event_gallery": {
"controls": {
+ "options":"Event Gallery Controls",
"thumbnails": {
"size": "Event Gallery thumbnails size in pixels",
"show_details": "Show event details with thumbnails",
@@ -111,6 +112,7 @@
"slide": "Slide transition"
},
"controls": {
+ "options":"Media Viewer Controls",
"next_previous": {
"style": "Media Viewer next & previous control style",
"size": "Media Viewer next & previous control size in pixels",
@@ -157,6 +159,7 @@
"auto_unmute": "Automatically unmute live cameras",
"transition_effect": "Live camera transition effect",
"controls": {
+ "options":"Live Controls",
"next_previous": {
"style": "Live view next & previous control style",
"size": "Live view next & previous control size in pixels",
@@ -250,6 +253,7 @@
"snapshots": "Snapshots"
},
"controls": {
+ "options":"Timeline Controls",
"thumbnails": {
"mode": "Timeline thumbnails mode",
"size": "Timeline thumbnails size in pixels",
diff --git a/src/scss/editor.scss b/src/scss/editor.scss
index f861950d..feac944d 100644
--- a/src/scss/editor.scss
+++ b/src/scss/editor.scss
@@ -25,6 +25,7 @@
.values {
background: var(--secondary-background-color);
display: grid;
+ margin-bottom: 10px;
}
div.upgrade {
width: auto;