Add controls to a submenu in the editor to make it less busy.

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` <div class="${classMap(submenuClasses)}">
@@ -749,9 +754,7 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
           : ``}
         <span>${localize(labelPath)}</span>
       </div>
-      ${this._expandedMenus[domain] === key
+      ${selected ? html`<div class="values">${template}</div>` : ''}
-        ? html`<div class="values">${template}</div>`
-        : ''}
     </div>`;
   }
 
@@ -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,
+                      },
+                    )}
+                  `,
+                )}
               </div>
             `
           : ''}
         ${this._renderOptionSetHeader('event_gallery')}
         ${this._expandedMenus[MENU_OPTIONS] === 'event_gallery'
           ? html` <div class="values">
-              ${this._renderNumberInput(CONF_EVENT_GALLERY_CONTROLS_THUMBNAILS_SIZE, {
+              ${this._putInSubmenu(
-                min: THUMBNAIL_WIDTH_MIN,
+                MENU_EVENT_GALLERY_CONTROLS,
-                max: THUMBNAIL_WIDTH_MAX,
+                true,
-              })}
+                'config.event_gallery.controls.options',
-              ${this._renderSwitch(
+                { name: 'mdi:gamepad' },
-                CONF_EVENT_GALLERY_CONTROLS_THUMBNAILS_SHOW_DETAILS,
+                html` ${this._renderNumberInput(
-                defaults.media_viewer.controls.thumbnails.show_details,
+                  CONF_EVENT_GALLERY_CONTROLS_THUMBNAILS_SIZE,
-              )}
+                  {
-              ${this._renderSwitch(
+                    min: THUMBNAIL_WIDTH_MIN,
-                CONF_EVENT_GALLERY_CONTROLS_THUMBNAILS_SHOW_CONTROLS,
+                    max: THUMBNAIL_WIDTH_MAX,
-                defaults.media_viewer.controls.thumbnails.show_controls,
+                  },
+                )}
+                ${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,
+                )}`,
               )}
             </div>`
           : ''}
@@ -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 },
+                )}`,
+              )}
             </div>`
           : ''}
         ${this._renderOptionSetHeader('image')}
@@ -1336,21 +1368,27 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
                 CONF_TIMELINE_SHOW_RECORDINGS,
                 defaults.timeline.show_recordings,
               )}
-              ${this._renderOptionSelector(
+              ${this._putInSubmenu(
-                CONF_TIMELINE_CONTROLS_THUMBNAILS_MODE,
+                MENU_TIMELINE_CONTROLS,
-                this._thumbnailModes,
+                true,
-              )}
+                'config.timeline.controls.options',
-              ${this._renderNumberInput(CONF_TIMELINE_CONTROLS_THUMBNAILS_SIZE, {
+                { name: 'mdi:gamepad' },
-                min: THUMBNAIL_WIDTH_MIN,
+                html` ${this._renderOptionSelector(
-                max: THUMBNAIL_WIDTH_MAX,
+                  CONF_TIMELINE_CONTROLS_THUMBNAILS_MODE,
-              })}
+                  this._thumbnailModes,
-              ${this._renderSwitch(
+                )}
-                CONF_TIMELINE_CONTROLS_THUMBNAILS_SHOW_DETAILS,
+                ${this._renderNumberInput(CONF_TIMELINE_CONTROLS_THUMBNAILS_SIZE, {
-                defaults.timeline.controls.thumbnails.show_details,
+                  min: THUMBNAIL_WIDTH_MIN,
-              )}
+                  max: THUMBNAIL_WIDTH_MAX,
-              ${this._renderSwitch(
+                })}
-                CONF_TIMELINE_CONTROLS_THUMBNAILS_SHOW_CONTROLS,
+                ${this._renderSwitch(
-                defaults.timeline.controls.thumbnails.show_controls,
+                  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,
+                )}`,
               )}
             </div>`
           : ''}

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",

src/scss/editor.scss

@@ -25,6 +25,7 @@
 .values {
   background: var(--secondary-background-color);
   display: grid;
+  margin-bottom: 10px;
 }
 div.upgrade {
   width: auto;