Break out controls into different menu sections.

README.md

@@ -2941,7 +2941,8 @@ You must be using a version of the [Frigate integration](https://github.com/blak
 
 ### `Forbidden media source identifier`
 
-You must have the `Enable the media browser` option enabled for the Frigate integration, in order for media fetches to work for the card. Media fetches are used to fetch events / clips / snapshots, etc. If you just wish to use live streams without media fetches, you can use the following configuration:
+* If you are using a custom `client_id` setting in your `frigate.yml` file (the configuration file for the Frigate backend itself), you must tell the card about it. See [camera configuration](#camera-frigate-configuration").
+* You must have the `Enable the media browser` option enabled for the Frigate integration, in order for media fetches to work for the card. Media fetches are used to fetch events / clips / snapshots, etc. If you just wish to use live streams without media fetches, you can use the following configuration:
 
 ```yaml
 live:

src/editor.ts

@@ -1,3 +1,5 @@
+// TODO: simplify submenu CSS for nested submenus (use .values for cameras)
+
 import { fireEvent, HomeAssistant, LovelaceCardEditor } from 'custom-card-helpers';
 import { CSSResultGroup, html, LitElement, TemplateResult, unsafeCSS } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
@@ -143,15 +145,21 @@ 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_EVENT_GALLERY_CONTROLS_THUMBNAILS = 'event_gallery.controls.thumbnails';
 const MENU_IMAGE_LAYOUT = 'image.layout';
 const MENU_LIVE_CONTROLS = 'live.controls';
+const MENU_LIVE_CONTROLS_NEXT_PREVIOUS = 'live.controls.next_previous';
+const MENU_LIVE_CONTROLS_THUMBNAILS = 'live.controls.thumbnails';
 const MENU_LIVE_CONTROLS_TIMELINE = 'live.controls.timeline';
+const MENU_LIVE_CONTROLS_TITLE = 'live.controls.title';
 const MENU_LIVE_LAYOUT = 'live.layout';
 const MENU_MEDIA_VIEWER_CONTROLS = 'media_viewer.controls';
+const MENU_MEDIA_VIEWER_CONTROLS_NEXT_PREVIOUS = 'media_viewer.controls.next_previous';
+const MENU_MEDIA_VIEWER_CONTROLS_THUMBNAILS = 'media_viewer.controls.thumbnails';
 const MENU_MEDIA_VIEWER_CONTROLS_TIMELINE = 'media_viewer.controls.timeline';
+const MENU_MEDIA_VIEWER_CONTROLS_TITLE = 'media_viewer.controls.title';
 const MENU_MEDIA_VIEWER_LAYOUT = 'media_viewer.layout';
-const MENU_TIMELINE_CONTROLS = 'timeline.controls';
+const MENU_TIMELINE_CONTROLS_THUMBNAILS = 'timeline.controls.thumbnails';
 const MENU_OPTIONS = 'options';
 const MENU_VIEW_SCAN = 'scan';
 
@@ -278,33 +286,17 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
     { value: 'bottom', label: localize('config.menu.alignments.bottom') },
   ];
 
-  protected _eventViewerNextPreviousControlStyles: EditorSelectOption[] = [
+  protected _nextPreviousControlStyles: EditorSelectOption[] = [
-    { value: '', label: '' },
-    {
-      value: 'thumbnails',
-      label: localize('config.media_viewer.controls.next_previous.styles.thumbnails'),
-    },
-    {
-      value: 'chevrons',
-      label: localize('config.media_viewer.controls.next_previous.styles.chevrons'),
-    },
-    {
-      value: 'none',
-      label: localize('config.media_viewer.controls.next_previous.styles.none'),
-    },
-  ];
-
-  protected _liveNextPreviousControlStyles: EditorSelectOption[] = [
     { value: '', label: '' },
     {
       value: 'chevrons',
-      label: localize('config.live.controls.next_previous.styles.chevrons'),
+      label: localize('config.common.controls.next_previous.styles.chevrons'),
     },
     {
       value: 'icons',
-      label: localize('config.live.controls.next_previous.styles.icons'),
+      label: localize('config.common.controls.next_previous.styles.icons'),
     },
-    { value: 'none', label: localize('config.live.controls.next_previous.styles.none') },
+    { value: 'none', label: localize('config.common.controls.next_previous.styles.none') },
   ];
 
   protected _aspectRatioModes: EditorSelectOption[] = [
@@ -324,53 +316,53 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
     { value: '', label: '' },
     {
       value: 'none',
-      label: localize('config.media_viewer.controls.thumbnails.modes.none'),
+      label: localize('config.common.controls.thumbnails.modes.none'),
     },
     {
       value: 'above',
-      label: localize('config.media_viewer.controls.thumbnails.modes.above'),
+      label: localize('config.common.controls.thumbnails.modes.above'),
     },
     {
       value: 'below',
-      label: localize('config.media_viewer.controls.thumbnails.modes.below'),
+      label: localize('config.common.controls.thumbnails.modes.below'),
     },
     {
       value: 'left',
-      label: localize('config.media_viewer.controls.thumbnails.modes.left'),
+      label: localize('config.common.controls.thumbnails.modes.left'),
     },
     {
       value: 'right',
-      label: localize('config.media_viewer.controls.thumbnails.modes.right'),
+      label: localize('config.common.controls.thumbnails.modes.right'),
     },
   ];
 
   protected _thumbnailMedias: EditorSelectOption[] = [
     { value: '', label: '' },
-    { value: 'clips', label: localize('config.live.controls.thumbnails.medias.clips') },
+    { value: 'clips', label: localize('config.common.controls.thumbnails.medias.clips') },
     {
       value: 'snapshots',
-      label: localize('config.live.controls.thumbnails.medias.snapshots'),
+      label: localize('config.common.controls.thumbnails.medias.snapshots'),
     },
   ];
 
   protected _titleModes: EditorSelectOption[] = [
     { value: '', label: '' },
-    { value: 'none', label: localize('config.media_viewer.controls.title.modes.none') },
+    { value: 'none', label: localize('config.common.controls.title.modes.none') },
     {
       value: 'popup-top-left',
-      label: localize('config.media_viewer.controls.title.modes.popup-top-left'),
+      label: localize('config.common.controls.title.modes.popup-top-left'),
     },
     {
       value: 'popup-top-right',
-      label: localize('config.media_viewer.controls.title.modes.popup-top-right'),
+      label: localize('config.common.controls.title.modes.popup-top-right'),
     },
     {
       value: 'popup-bottom-left',
-      label: localize('config.media_viewer.controls.title.modes.popup-bottom-left'),
+      label: localize('config.common.controls.title.modes.popup-bottom-left'),
     },
     {
       value: 'popup-bottom-right',
-      label: localize('config.media_viewer.controls.title.modes.popup-bottom-right'),
+      label: localize('config.common.controls.title.modes.popup-bottom-right'),
     },
   ];
 
@@ -389,9 +381,9 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
 
   protected _timelineMediaTypes: EditorSelectOption[] = [
     { value: '', label: '' },
-    { value: 'all', label: localize('config.timeline.medias.all') },
+    { value: 'all', label: localize('config.common.timeline.medias.all') },
-    { value: 'clips', label: localize('config.timeline.medias.clips') },
+    { value: 'clips', label: localize('config.common.timeline.medias.clips') },
-    { value: 'snapshots', label: localize('config.timeline.medias.snapshots') },
+    { value: 'snapshots', label: localize('config.common.timeline.medias.snapshots') },
   ];
 
   protected _darkModes: EditorSelectOption[] = [
@@ -435,9 +427,9 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
 
   protected _miniTimelineModes: EditorSelectOption[] = [
     { value: '', label: '' },
-    { value: 'none', label: localize('config.timeline.mini.modes.none') },
+    { value: 'none', label: localize('config.common.controls.timeline.modes.none') },
-    { value: 'above', label: localize('config.timeline.mini.modes.above') },
+    { value: 'above', label: localize('config.common.controls.timeline.modes.above') },
-    { value: 'below', label: localize('config.timeline.mini.modes.below') },
+    { value: 'below', label: localize('config.common.controls.timeline.modes.below') },
   ];
 
   public setConfig(config: RawFrigateCardConfig): void {
@@ -855,16 +847,16 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
     defaultShowRecordings: boolean,
   ): TemplateResult {
     return html` ${this._renderNumberInput(configPathWindowSeconds, {
-      label: localize(`config.${CONF_TIMELINE_WINDOW_SECONDS}`),
+      label: localize(`config.common.${CONF_TIMELINE_WINDOW_SECONDS}`),
     })}
     ${this._renderNumberInput(configPathClusteringThreshold, {
-      label: localize(`config.${CONF_TIMELINE_CLUSTERING_THRESHOLD}`),
+      label: localize(`config.common.${CONF_TIMELINE_CLUSTERING_THRESHOLD}`),
     })}
     ${this._renderOptionSelector(configPathTimelineMedia, this._timelineMediaTypes, {
-      label: localize(`config.${CONF_TIMELINE_MEDIA}`),
+      label: localize(`config.common.${CONF_TIMELINE_MEDIA}`),
     })}
     ${this._renderSwitch(configPathShowRecordings, defaultShowRecordings, {
-      label: localize(`config.${CONF_TIMELINE_SHOW_RECORDINGS}`),
+      label: localize(`config.common.${CONF_TIMELINE_SHOW_RECORDINGS}`),
     })}`;
   }
 
@@ -888,10 +880,10 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
     return this._putInSubmenu(
       domain,
       true,
-      'config.timeline.mini.options',
+      'config.common.controls.timeline.editor_label',
       { name: 'mdi:chart-gantt' },
       html` ${this._renderOptionSelector(configPathMode, this._miniTimelineModes, {
-        label: localize('config.timeline.mini.mode'),
+        label: localize('config.common.controls.timeline.mode'),
       })}
       ${this._renderTimelineCoreControls(
         configPathWindowSeconds,
@@ -903,6 +895,139 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
     );
   }
 
+  /**
+   * Render the next & previous controls.
+   * @param domain The submenu domain.
+   * @param configPathStyle Next previous style config path.
+   * @param configPathSize Next previous size config path.
+   * @returns A rendered template.
+   */
+  protected _renderNextPreviousControls(
+    domain: string,
+    configPathStyle: string,
+    configPathSize: string,
+  ): TemplateResult | void {
+    return this._putInSubmenu(
+      domain,
+      true,
+      'config.common.controls.next_previous.editor_label',
+      { name: 'mdi:arrow-right-bold-circle' },
+      html`
+        ${this._renderOptionSelector(configPathStyle, this._nextPreviousControlStyles, {
+          label: localize('config.common.controls.next_previous.style'),
+        })}
+        ${this._renderNumberInput(configPathSize, {
+          min: BUTTON_SIZE_MIN,
+          label: localize('config.common.controls.next_previous.size'),
+        })}
+      `,
+    );
+  }
+
+  /**
+   * Render the thumbnails controls.
+   * @param domain The submenu domain.
+   * @param configPathMode Thumbnails mode config path.
+   * @param configPathSize Thumbnails size config path.
+   * @param configPathShowDetails Thumbnails show details config path.
+   * @param configPathShowFavoriteControl Thumbnails show favorite control config path.
+   * @param configPathShowTimelineControl Thumbnails show timeline control config path,
+   * @param configPathMedia Thumbnails media config path.
+   * @returns A rendered template.
+   */
+  protected _renderThumbnailsControls(
+    domain: string,
+    configPathSize: string,
+    configPathShowDetails: string,
+    configPathShowFavoriteControl: string,
+    configPathShowTimelineControl: string,
+    options?: {
+      configPathMedia?: string;
+      configPathMode?: string;
+    },
+  ): TemplateResult | void {
+    return this._putInSubmenu(
+      domain,
+      true,
+      'config.common.controls.thumbnails.editor_label',
+      { name: 'mdi:image-text' },
+      html`
+        ${options?.configPathMode
+          ? html`${this._renderOptionSelector(
+              options.configPathMode,
+              this._thumbnailModes,
+              {
+                label: localize('config.common.controls.thumbnails.mode'),
+              },
+            )}`
+          : html``}
+        ${options?.configPathMedia
+          ? html`${this._renderOptionSelector(
+              options.configPathMedia,
+              this._thumbnailMedias,
+              {
+                label: localize('config.common.controls.thumbnails.media'),
+              },
+            )}`
+          : html``}
+        ${this._renderNumberInput(configPathSize, {
+          min: THUMBNAIL_WIDTH_MIN,
+          max: THUMBNAIL_WIDTH_MAX,
+          label: localize('config.common.controls.thumbnails.size'),
+        })}
+        ${this._renderSwitch(
+          configPathShowDetails,
+          frigateCardConfigDefaults.live.controls.thumbnails.show_details,
+          {
+            label: localize('config.common.controls.thumbnails.show_details'),
+          },
+        )}
+        ${this._renderSwitch(
+          configPathShowFavoriteControl,
+          frigateCardConfigDefaults.live.controls.thumbnails.show_favorite_control,
+          {
+            label: localize('config.common.controls.thumbnails.show_favorite_control'),
+          },
+        )}
+        ${this._renderSwitch(
+          configPathShowTimelineControl,
+          frigateCardConfigDefaults.live.controls.thumbnails.show_timeline_control,
+          {
+            label: localize('config.common.controls.thumbnails.show_timeline_control'),
+          },
+        )}
+      `,
+    );
+  }
+
+  /**
+   * Render the titles controls.
+   * @param domain The submenu domain.
+   * @param configPathMode Title mode config path.
+   * @param configPathDurationSeconds Title duration seconds config path.
+   * @returns A rendered template.
+   */
+  protected _renderTitleControls(
+    domain: string,
+    configPathMode: string,
+    configPathDurationSeconds: string,
+  ): TemplateResult | void {
+    return this._putInSubmenu(
+      domain,
+      true,
+      'config.common.controls.title.editor_label',
+      { name: 'mdi:subtitles' },
+      html` ${this._renderOptionSelector(configPathMode, this._titleModes, {
+        label: localize('config.common.controls.title.mode'),
+      })}
+      ${this._renderNumberInput(configPathDurationSeconds, {
+        min: 0,
+        max: 60,
+        label: localize('config.common.controls.title.duration_seconds'),
+      })}`,
+    );
+  }
+
   /**
    * Render a camera section.
    * @param cameras The full array of cameras.
@@ -1064,7 +1189,7 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
               ${this._putInSubmenu(
                 MENU_CAMERAS_FRIGATE,
                 cameraIndex,
-                'config.cameras.frigate.options',
+                'config.cameras.frigate.editor_label',
                 { path: FRIGATE_ICON_SVG_PATH },
                 html`
                   ${this._renderStringInput(
@@ -1093,7 +1218,7 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
               ${this._putInSubmenu(
                 MENU_CAMERAS_DEPENDENCIES,
                 cameraIndex,
-                'config.cameras.dependencies.options',
+                'config.cameras.dependencies.editor_label',
                 { name: 'mdi:graph' },
                 html` ${this._renderSwitch(
                   getArrayConfigPath(
@@ -1116,7 +1241,7 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
               ${this._putInSubmenu(
                 MENU_CAMERAS_TRIGGERS,
                 cameraIndex,
-                'config.cameras.triggers.options',
+                'config.cameras.triggers.editor_label',
                 { name: 'mdi:magnify-scan' },
                 html` ${this._renderSwitch(
                   getArrayConfigPath(CONF_CAMERAS_ARRAY_TRIGGERS_OCCUPANCY, cameraIndex),
@@ -1137,7 +1262,7 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
               ${this._putInSubmenu(
                 MENU_CAMERAS_WEBRTC,
                 cameraIndex,
-                'config.cameras.webrtc_card.options',
+                'config.cameras.webrtc_card.editor_label',
                 { name: 'mdi:webrtc' },
                 html`${this._renderEntitySelector(
                   getArrayConfigPath(CONF_CAMERAS_ARRAY_WEBRTC_CARD_ENTITY, cameraIndex),
@@ -1351,50 +1476,29 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
                 ${this._putInSubmenu(
                   MENU_LIVE_CONTROLS,
                   true,
-                  'config.live.controls.options',
+                  'config.live.controls.editor_label',
                   { name: 'mdi:gamepad' },
                   html`
-                    ${this._renderOptionSelector(
+                    ${this._renderNextPreviousControls(
+                      MENU_LIVE_CONTROLS_NEXT_PREVIOUS,
                       CONF_LIVE_CONTROLS_NEXT_PREVIOUS_STYLE,
-                      this._liveNextPreviousControlStyles,
+                      CONF_LIVE_CONTROLS_NEXT_PREVIOUS_SIZE,
                     )}
-                    ${this._renderNumberInput(CONF_LIVE_CONTROLS_NEXT_PREVIOUS_SIZE, {
+                    ${this._renderThumbnailsControls(
-                      min: BUTTON_SIZE_MIN,
+                      MENU_LIVE_CONTROLS_THUMBNAILS,
-                    })}
+                      CONF_LIVE_CONTROLS_THUMBNAILS_SIZE,
-                    ${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_FAVORITE_CONTROL,
-                      defaults.live.controls.thumbnails.show_favorite_control,
-                    )}
-                    ${this._renderSwitch(
                       CONF_LIVE_CONTROLS_THUMBNAILS_SHOW_TIMELINE_CONTROL,
-                      defaults.live.controls.thumbnails.show_timeline_control,
-                    )}
-                    ${this._renderNumberInput(
-                      CONF_LIVE_CONTROLS_TITLE_DURATION_SECONDS,
                       {
-                        min: 0,
+                        configPathMedia: CONF_LIVE_CONTROLS_THUMBNAILS_MEDIA,
-                        max: 60,
+                        configPathMode: CONF_LIVE_CONTROLS_THUMBNAILS_MODE,
-                      },
+                      }
+                    )}
+                    ${this._renderTitleControls(
+                      MENU_LIVE_CONTROLS_TITLE,
+                      CONF_LIVE_CONTROLS_TITLE_MODE,
+                      CONF_LIVE_CONTROLS_TITLE_DURATION_SECONDS,
                     )}
                     ${this._renderMiniTimeline(
                       MENU_LIVE_CONTROLS_TIMELINE,
@@ -1419,30 +1523,12 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
         ${this._renderOptionSetHeader('event_gallery')}
         ${this._expandedMenus[MENU_OPTIONS] === 'event_gallery'
           ? html` <div class="values">
-              ${this._putInSubmenu(
+              ${this._renderThumbnailsControls(
-                MENU_EVENT_GALLERY_CONTROLS,
+                MENU_EVENT_GALLERY_CONTROLS_THUMBNAILS,
-                true,
+                CONF_EVENT_GALLERY_CONTROLS_THUMBNAILS_SIZE,
-                'config.event_gallery.controls.options',
+                CONF_EVENT_GALLERY_CONTROLS_THUMBNAILS_SHOW_DETAILS,
-                { name: 'mdi:gamepad' },
+                CONF_EVENT_GALLERY_CONTROLS_THUMBNAILS_SHOW_FAVORITE_CONTROL,
-                html` ${this._renderNumberInput(
+                CONF_EVENT_GALLERY_CONTROLS_THUMBNAILS_SHOW_TIMELINE_CONTROL,
-                  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_FAVORITE_CONTROL,
-                  defaults.media_viewer.controls.thumbnails.show_favorite_control,
-                )}
-                ${this._renderSwitch(
-                  CONF_EVENT_GALLERY_CONTROLS_THUMBNAILS_SHOW_TIMELINE_CONTROL,
-                  defaults.media_viewer.controls.thumbnails.show_timeline_control,
-                )}`,
               )}
             </div>`
           : ''}
@@ -1480,46 +1566,28 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
               ${this._putInSubmenu(
                 MENU_MEDIA_VIEWER_CONTROLS,
                 true,
-                'config.media_viewer.controls.options',
+                'config.media_viewer.controls.editor_label',
                 { name: 'mdi:gamepad' },
                 html`
-                  ${this._renderOptionSelector(
+                  ${this._renderNextPreviousControls(
+                    MENU_MEDIA_VIEWER_CONTROLS_NEXT_PREVIOUS,
                     CONF_MEDIA_VIEWER_CONTROLS_NEXT_PREVIOUS_STYLE,
-                    this._eventViewerNextPreviousControlStyles,
-                  )}
-                  ${this._renderNumberInput(
                     CONF_MEDIA_VIEWER_CONTROLS_NEXT_PREVIOUS_SIZE,
-                    {
-                      min: BUTTON_SIZE_MIN,
-                    },
                   )}
-                  ${this._renderOptionSelector(
+                  ${this._renderThumbnailsControls(
-                    CONF_MEDIA_VIEWER_CONTROLS_THUMBNAILS_MODE,
+                    MENU_MEDIA_VIEWER_CONTROLS_THUMBNAILS,
-                    this._thumbnailModes,
+                    CONF_MEDIA_VIEWER_CONTROLS_THUMBNAILS_SIZE,
-                  )}
-                  ${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_FAVORITE_CONTROL,
-                    defaults.media_viewer.controls.thumbnails.show_favorite_control,
-                  )}
-                  ${this._renderSwitch(
                     CONF_MEDIA_VIEWER_CONTROLS_THUMBNAILS_SHOW_TIMELINE_CONTROL,
-                    defaults.media_viewer.controls.thumbnails.show_timeline_control,
+                    {
+                      configPathMode: CONF_MEDIA_VIEWER_CONTROLS_THUMBNAILS_MODE,
+                    }
                   )}
-                  ${this._renderOptionSelector(
+                  ${this._renderTitleControls(
+                    MENU_MEDIA_VIEWER_CONTROLS_TITLE,
                     CONF_MEDIA_VIEWER_CONTROLS_TITLE_MODE,
-                    this._titleModes,
-                  )}
-                  ${this._renderNumberInput(
                     CONF_MEDIA_VIEWER_CONTROLS_TITLE_DURATION_SECONDS,
-                    { min: 0, max: 60 },
                   )}
                   ${this._renderMiniTimeline(
                     MENU_MEDIA_VIEWER_CONTROLS_TIMELINE,
@@ -1565,31 +1633,15 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
                 CONF_TIMELINE_SHOW_RECORDINGS,
                 defaults.timeline.show_recordings,
               )}
-              ${this._putInSubmenu(
+              ${this._renderThumbnailsControls(
-                MENU_TIMELINE_CONTROLS,
+                MENU_TIMELINE_CONTROLS_THUMBNAILS,
-                true,
+                CONF_TIMELINE_CONTROLS_THUMBNAILS_SIZE,
-                'config.timeline.controls.options',
+                CONF_TIMELINE_CONTROLS_THUMBNAILS_SHOW_DETAILS,
-                { name: 'mdi:gamepad' },
+                CONF_TIMELINE_CONTROLS_THUMBNAILS_SHOW_FAVORITE_CONTROL,
-                html` ${this._renderOptionSelector(
+                CONF_TIMELINE_CONTROLS_THUMBNAILS_SHOW_TIMELINE_CONTROL,
-                  CONF_TIMELINE_CONTROLS_THUMBNAILS_MODE,
+                {
-                  this._thumbnailModes,
+                  configPathMode: CONF_TIMELINE_CONTROLS_THUMBNAILS_MODE,
-                )}
+                }
-                ${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_FAVORITE_CONTROL,
-                  defaults.timeline.controls.thumbnails.show_favorite_control,
-                )}
-                ${this._renderSwitch(
-                  CONF_TIMELINE_CONTROLS_THUMBNAILS_SHOW_TIMELINE_CONTROL,
-                  defaults.timeline.controls.thumbnails.show_timeline_control,
-                )}`,
               )}
             </div>`
           : ''}

src/localize/languages/en.json

@@ -16,13 +16,13 @@
       "dependencies": {
         "all_cameras": "Show events for all cameras with this camera",
         "cameras": "Show events for specific cameras with this camera",
-        "options": "Dependency Options"
+        "editor_label": "Dependency Options"
       },
       "frigate": {
         "camera_name": "Frigate camera name (Autodetected from entity)",
         "client_id": "Frigate client id (For >1 Frigate server)",
         "label": "Frigate label/object filter",
-        "options": "Frigate Options",
+        "editor_label": "Frigate Options",
         "url": "Frigate server URL",
         "zone": "Frigate zone"
       },
@@ -40,11 +40,11 @@
         "entities": "Trigger from other entities",
         "motion": "Trigger by auto-detecting the motion sensor",
         "occupancy": "Trigger by auto-detecting the occupancy sensor",
-        "options": "Trigger Options"
+        "editor_label": "Trigger Options"
       },
       "webrtc_card": {
         "entity": "WebRTC Card Camera Entity (Not a Frigate camera)",
-        "options": "WebRTC Card Options",
+        "editor_label": "WebRTC Card Options",
         "url": "WebRTC Card Camera URL"
       }
     },
@@ -68,6 +68,70 @@
           "x": "Horizontal placement percentage",
           "y": "Vertical placement percentage"
         }
+      },
+      "timeline": {
+        "clustering_threshold": "The count of events at which they are clustered (0=no clustering)",
+        "media": "The media the timeline displays",
+        "medias": {
+          "all": "All media types",
+          "clips": "Clips",
+          "snapshots": "Snapshots"
+        },
+        "show_recordings": "Show recordings",
+        "window_seconds": "The default length of the timeline view in seconds"
+      },
+      "controls": {
+        "next_previous": {
+          "editor_label": "Next & Previous",
+          "size": "Next & previous control size in pixels",
+          "style": "Next & previous control style",
+          "styles": {
+            "chevrons": "Chevrons",
+            "icons": "Icons",
+            "none": "None"
+          }
+        },
+        "timeline": {
+          "editor_label": "Mini Timeline",
+          "mode": "Mode",
+          "modes": {
+            "none": "None",
+            "above": "Above",
+            "below": "Below"
+          }
+        },
+        "thumbnails": {
+          "editor_label": "Thumbnails",
+          "media": "Whether to show thumbnails of clips or snapshots",
+          "medias": {
+            "clips": "Clip thumbnails",
+            "snapshots": "Snapshot thumbnails"
+          },
+          "mode": "Thumbnails mode",
+          "modes": {
+            "above": "Thumbnails above",
+            "below": "Thumbnails below",
+            "left": "Thumbnails in a drawer to the left",
+            "none": "No thumbnails",
+            "right": "Thumbnails in a drawer to the right"
+          },
+          "show_details": "Show event details with thumbnails",
+          "show_favorite_control": "Show favorite control on thumbnails",
+          "show_timeline_control": "Show timeline control on thumbnails",
+          "size": "Thumbnails size in pixels"
+        },
+        "title": {
+          "editor_label": "Popup Title Controls",
+          "duration_seconds": "Seconds to display popup title (0=forever)",
+          "mode": "Popup title display mode",
+          "modes": {
+            "none": "No title display",
+            "popup-bottom-left": "Popup on the bottom left",
+            "popup-bottom-right": "Popup on the bottom right",
+            "popup-top-left": "Popup on the top left",
+            "popup-top-right": "Popup on the top right"
+          }
+        }
       }
     },
     "dimensions": {
@@ -79,17 +143,6 @@
         "unconstrained": "Unconstrained aspect ratio"
       }
     },
-    "event_gallery": {
-      "controls": {
-        "options": "Event Gallery Controls",
-        "thumbnails": {
-          "show_details": "Show event details with thumbnails",
-          "show_favorite_control": "Show favorite control on thumbnails",
-          "show_timeline_control": "Show timeline control on thumbnails",
-          "size": "Event Gallery thumbnails size in pixels"
-        }
-      }
-    },
     "image": {
       "layout": "Image Layout",
       "mode": "Image view mode",
@@ -107,32 +160,7 @@
       "auto_play": "Automatically play live cameras",
       "auto_unmute": "Automatically unmute live cameras",
       "controls": {
-        "next_previous": {
+        "editor_label": "Live Controls"
-          "size": "Live view next & previous control size in pixels",
-          "style": "Live view next & previous control style",
-          "styles": {
-            "chevrons": "Chevrons",
-            "icons": "Icons",
-            "none": "None"
-          }
-        },
-        "options": "Live Controls",
-        "thumbnails": {
-          "media": "Whether to show thumbnails of clips or snapshots",
-          "medias": {
-            "clips": "Clip thumbnails",
-            "snapshots": "Snapshot thumbnails"
-          },
-          "mode": "Live thumbnails mode",
-          "show_details": "Show event details with thumbnails",
-          "show_favorite_control": "Show favorite control on thumbnails",
-          "show_timeline_control": "Show timeline control on thumbnails",
-          "size": "Live thumbnails size in pixels"
-        },
-        "title": {
-          "duration_seconds": "Seconds to display popup title (0=forever)",
-          "mode": "Live media title display mode"
-        }
       },
       "draggable": "Live cameras view can be dragged/swiped",
       "layout": "Live Layout",
@@ -148,41 +176,7 @@
       "auto_play": "Automatically play media",
       "auto_unmute": "Automatically unmute media",
       "controls": {
-        "next_previous": {
+        "editor_label": "Media Viewer Controls"
-          "size": "Media Viewer next & previous control size in pixels",
-          "style": "Media Viewer next & previous control style",
-          "styles": {
-            "chevrons": "Chevrons",
-            "none": "None",
-            "thumbnails": "Thumbnails"
-          }
-        },
-        "options": "Media Viewer Controls",
-        "thumbnails": {
-          "mode": "Media Viewer thumbnails mode",
-          "modes": {
-            "above": "Thumbnails above",
-            "below": "Thumbnails below",
-            "left": "Thumbnails in a drawer to the left",
-            "none": "No thumbnails",
-            "right": "Thumbnails in a drawer to the right"
-          },
-          "show_details": "Show details with thumbnails",
-          "show_favorite_control": "Show favorite control on thumbnails",
-          "show_timeline_control": "Show timeline control on thumbnails",
-          "size": "Media Viewer thumbnails size in pixels"
-        },
-        "title": {
-          "duration_seconds": "Seconds to display popup title (0=forever)",
-          "mode": "Media Viewer media title display mode",
-          "modes": {
-            "none": "No title display",
-            "popup-bottom-left": "Popup on the bottom left",
-            "popup-bottom-right": "Popup on the bottom right",
-            "popup-top-left": "Popup on the top left",
-            "popup-top-right": "Popup on the top right"
-          }
-        }
       },
       "draggable": "Media Viewer can be dragged/swiped",
       "lazy_load": "Media Viewer media is lazily loaded in carousel",
@@ -242,36 +236,6 @@
     "overrides": {
       "info": "This card configuration has manually specified overrides configured which may override values shown in the visual editor, please consult the code editor to view/modify these overrides"
     },
-    "timeline": {
-      "clustering_threshold": "The count of events at which they are clustered (0=no clustering)",
-      "controls": {
-        "options": "Timeline Controls",
-        "thumbnails": {
-          "mode": "Timeline thumbnails mode",
-          "show_details": "Show event details with thumbnails",
-          "show_favorite_control": "Show favorite control on thumbnails",
-          "show_timeline_control": "Show timeline control on thumbnails",
-          "size": "Timeline thumbnails size in pixels"
-        }
-      },
-      "mini": {
-        "options": "Mini Timeline",
-        "mode": "Mode",
-        "modes": {
-          "none": "None",
-          "above": "Above",
-          "below": "Below"
-        }
-      },
-      "media": "The media the timeline displays",
-      "medias": {
-        "all": "All media types",
-        "clips": "Clips",
-        "snapshots": "Snapshots"
-      },
-      "show_recordings": "Show recordings",
-      "window_seconds": "The default length of the timeline view in seconds"
-    },
     "view": {
       "camera_select": "View for newly selected cameras",
       "dark_mode": "Dark mode",

src/localize/languages/it.json

@@ -16,13 +16,13 @@
       "dependencies": {
         "all_cameras": "Mostra eventi per tutte le telecamere con questa telecamera",
         "cameras": "Mostra eventi per telecamere specifiche con questa telecamera",
-        "options": "Opzioni di dipendenza"
+        "editor_label": "Opzioni di dipendenza"
       },
       "frigate": {
         "camera_name": "Nome della telecamera frigate (autodificato dall'entità)",
         "client_id": "ID client Frigate (per > 1 Frigate server)",
         "label": "Filtro etichetta/oggetto Frigate",
-        "options": "Frigate Opzione",
+        "editor_label": "Frigate Opzione",
         "url": "Frigate URL del server",
         "zone": "Frigate zona"
       },
@@ -40,11 +40,11 @@
         "entities": "Trigger da altre entità",
         "motion": "Trigger rilevando automaticamente dal sensore di movimento",
         "occupancy": "Attivare rilevando automatico tramite il sensore di presenza",
-        "options": "Trigger Opzioni"
+        "editor_label": "Trigger Opzioni"
       },
       "webrtc_card": {
         "entity": "Entità della telecamera della scheda WebRTC (non una telecamera Frigate)",
-        "options": "Opzioni della scheda WebRTC",
+        "editor_label": "Opzioni della scheda WebRTC",
         "url": "URL della telecamera della scheda WebRTC"
       }
     },
@@ -56,6 +56,82 @@
         "selected": "Sulla selezione",
         "unselected": "Sulla non selezione",
         "visible": "Sul browser/visibilità della scheda"
+      },
+      "layout": {
+        "fit": "",
+        "fits": {
+          "cover": "",
+          "contain": "",
+          "fill": ""
+        },
+        "position": {
+          "x": "",
+          "y": ""
+        }
+      },
+      "timeline": {
+        "clustering_threshold": "Il conteggio degli eventi in cui sono raggruppati (0 = nessun clustering)",
+        "media": "I media vengono visualizzati la sequenza temporale",
+        "medias": {
+          "all": "Tutti i tipi di media",
+          "clips": "Clip",
+          "snapshots": "Istantanee"
+        },
+        "show_recordings": "Mostra registrazioni",
+        "window_seconds": "La lunghezza predefinita della vista della sequenza temporale in secondi"
+      },
+      "controls": {
+        "next_previous": {
+          "editor_label": "",
+          "size": "Successiva e Precedenti dimensioni di controllo nei pixel",
+          "style": "Stile di controllo successivo e precedente",
+          "styles": {
+            "chevrons": "Chevrons",
+            "icons": "Icone",
+            "none": "Icone"
+          }
+        },
+        "timeline": {
+          "editor_label": "",
+          "mode": "",
+          "modes": {
+            "none": "",
+            "above": "",
+            "below": ""
+          }
+        },
+        "thumbnails": {
+          "editor_label": "",
+          "media": "Se mostrare miniature di clip o istantanee",
+          "medias": {
+            "clips": "Miniature di clip",
+            "snapshots": "Miniature istantanee"
+          },
+          "mode": "Modalità miniatura",
+          "modes": {
+            "above": "Miniature sopra",
+            "below": "Miniature sotto",
+            "left": "Miniature in un cassetto a sinistra",
+            "none": "Nessuna miniatura",
+            "right": "Miniature in un cassetto a destra"
+          },
+          "show_details": "Mostra i dettagli dell'evento con le miniature",
+          "show_favorite_control": "Mostra il controllo preferito sulle miniature",
+          "show_timeline_control": "Mostra il controllo della sequenza temporale sulle miniature",
+          "size": "Dimensione delle miniature in pixel"
+        },
+        "title": {
+          "editor_label": "",
+          "duration_seconds": "Secondi per visualizzare il titolo popup (0 = per sempre)",
+          "mode": "Modalità di visualizzazione del titolo",
+          "modes": {
+            "none": "Nessuna visualizzazione del titolo",
+            "popup-bottom-left": "Popup in basso a sinistra",
+            "popup-bottom-right": "Popup in basso a destra",
+            "popup-top-left": "Popup in alto a sinistra",
+            "popup-top-right": "Popup in alto a destra"
+          }
+        }
       }
     },
     "dimensions": {
@@ -67,18 +143,8 @@
         "unconstrained": "Proporzioni non vincolate"
       }
     },
-    "event_gallery": {
-      "controls": {
-        "options": "Controlli della galleria degli eventi",
-        "thumbnails": {
-          "show_details": "Mostra i dettagli dell'evento con le miniature",
-          "show_favorite_control": "Mostra il controllo preferito sulle miniature",
-          "show_timeline_control": "Mostra il controllo della sequenza temporale sulle miniature",
-          "size": "Dimensione delle miniature della galleria di eventi nei pixel"
-        }
-      }
-    },
     "image": {
+      "layout": "",
       "mode": "Modalità Visualizza immagine",
       "modes": {
         "camera": "Istantanea della telecamera di Home Assistant dell'entità telecamera",
@@ -94,34 +160,10 @@
       "auto_play": "Gioca automaticamente le telecamere dal vivo",
       "auto_unmute": "Riattiva automaticamente l'audio delle telecamere live",
       "controls": {
-        "next_previous": {
+        "editor_label": "Controlli dal vivo"
-          "size": "Vista live Successiva e Precedenti dimensioni di controllo nei pixel",
-          "style": "Stile di controllo successivo e precedente della vista dal vivo",
-          "styles": {
-            "chevrons": "Chevrons",
-            "icons": "Icone",
-            "none": "Icone"
-          }
-        },
-        "options": "Controlli dal vivo",
-        "thumbnails": {
-          "media": "Se mostrare miniature di clip o istantanee",
-          "medias": {
-            "clips": "Miniature di clip",
-            "snapshots": "Miniature istantanee"
-          },
-          "mode": "Modalità di miniatura dal vivo",
-          "show_details": "Mostra i dettagli dell'evento con le miniature",
-          "show_favorite_control": "Mostra il controllo preferito sulle miniature",
-          "show_timeline_control": "Mostra il controllo della sequenza temporale sulle miniature",
-          "size": "Dimensione delle miniature dal vivo nei pixel"
-        },
-        "title": {
-          "duration_seconds": "Secondi per visualizzare il titolo popup (0 = per sempre)",
-          "mode": "Modalità di visualizzazione del titolo multimediale dal vivo"
-        }
       },
       "draggable": "Il Visualizzatore eventi può essere trascinato oppure puoi scorrere",
+      "layout": "",
       "lazy_load": "Le telecamere dal vivo sono pigramente cariche",
       "lazy_unload": "Le telecamere dal vivo sono pigramente non caricate",
       "preload": "Precarica Live View in background",
@@ -134,44 +176,11 @@
       "auto_play": "Riproduci automaticamente i contenuti multimediali",
       "auto_unmute": "Riattiva automaticamente i contenuti multimediali",
       "controls": {
-        "next_previous": {
+        "editor_label": "Controlli di visualizzatore multimediale"
-          "size": "Media Viewer successivo e precedente controllo dimensione in pixel",
-          "style": "Visualizzatore multimediale successivo e stile di controllo precedente",
-          "styles": {
-            "chevrons": "chevrons",
-            "none": "Nessuno",
-            "thumbnails": "Miniature"
-          }
-        },
-        "options": "Controlli di visualizzatore multimediale",
-        "thumbnails": {
-          "mode": "Modalità miniature del visualizzatore multimediale",
-          "modes": {
-            "above": "Miniature sopra i media",
-            "below": "Miniature sotto i media",
-            "left": "Miniature in un cassetto a sinistra del supporto",
-            "none": "Nessuna miniatura",
-            "right": "Miniature in un cassetto a destra dei media"
-          },
-          "show_details": "Mostra i dettagli con le miniature",
-          "show_favorite_control": "Mostra il controllo preferito sulle miniature",
-          "show_timeline_control": "Mostra il controllo della sequenza temporale sulle miniature",
-          "size": "Dimensioni delle miniature di Media Viewer in pixel"
-        },
-        "title": {
-          "duration_seconds": "Secondi per visualizzare il titolo popup (0 = per sempre)",
-          "mode": "Media Viewer modalità di visualizzazione del titolo multimediale",
-          "modes": {
-            "none": "Nessuna visualizzazione del titolo",
-            "popup-bottom-left": "Popup in basso a sinistra",
-            "popup-bottom-right": "Popup in basso a destra",
-            "popup-top-left": "Popup in alto a sinistra",
-            "popup-top-right": "Popup in alto a destra"
-          }
-        }
       },
       "draggable": "Il visualizzatore multimediale può essere trascinato oppure può scorrere",
       "lazy_load": "Il media Viewer viene caricato pigramente nel carosello",
+      "layout": "",
       "transition_effect": "Effetto di transizione del visualizzatore multimediale",
       "transition_effects": {
         "none": "Nessuna transizione",
@@ -227,27 +236,6 @@
     "overrides": {
       "info": "Questa configurazione della scheda ha specificato manualmente le sostituzioni configurate che possono sostituire i valori mostrati nell'editor visivo, consultare l'editor di codice per visualizzare/modificare queste sostituzioni"
     },
-    "timeline": {
-      "clustering_threshold": "Il conteggio degli eventi in cui sono raggruppati (0 = nessun clustering)",
-      "controls": {
-        "options": "Controlli della sequenza temporale",
-        "thumbnails": {
-          "mode": "Modalità miniatura della sequenza temporale",
-          "show_details": "Mostra i dettagli dell'evento con le miniature",
-          "show_favorite_control": "Mostra il controllo preferito sulle miniature",
-          "show_timeline_control": "Mostra il controllo della sequenza temporale sulle miniature",
-          "size": "Dimensione delle miniature della sequenza temporale in pixel"
-        }
-      },
-      "media": "I media vengono visualizzati la sequenza temporale",
-      "medias": {
-        "all": "Tutti i tipi di media",
-        "clips": "Clip",
-        "snapshots": "Istantanee"
-      },
-      "show_recordings": "Mostra registrazioni",
-      "window_seconds": "La lunghezza predefinita della vista della sequenza temporale in secondi"
-    },
     "view": {
       "camera_select": "Visualizza per le telecamere appena selezionate",
       "dark_mode": "Tema scuro",
@@ -347,7 +335,8 @@
     "duration": "Durata",
     "in_progress": "In corso",
     "score": "Punteggio",
-    "start": "Avvia"
+    "start": "Avvia",
+    "seek": "Cercare"
   },
   "recording": {
     "events": "Eventi",
@@ -357,5 +346,20 @@
     "no_thumbnail": "Nessuna miniatura disponibile",
     "retain_indefinitely": "L'evento sarà mantenuto indefinitamente",
     "timeline": "Vedi evento nella timeline"
+  },
+  "timeline": {
+    "lock": "",
+    "unlock": ""
+  },
+  "elements": {
+    "ptz": {
+      "up": "",
+      "down": "",
+      "left": "",
+      "right": "",
+      "zoom_in": "",
+      "zoom_out": "",
+      "home": ""
+    }
   }
 }

src/localize/languages/pt-BR.json

@@ -16,13 +16,13 @@
       "dependencies": {
         "all_cameras": "Mostrar eventos para todas as câmeras nesta câmera",
         "cameras": "Mostrar eventos para câmeras específicas nesta câmera",
-        "options": "Opções de dependência"
+        "editor_label": "Opções de dependência"
       },
       "frigate": {
         "camera_name": "Nome da câmera do Frigate (detectado automaticamente pela entidade)",
         "client_id": "ID do cliente do Frigate (para >1 servidor Frigate)",
         "label": "Filtro de rótulo/objeto do Frigate",
-        "options": "Opções do Frigate",
+        "editor_label": "Opções do Frigate",
         "url": "URL do servidor Frigate",
         "zone": "Zona do Frigate"
       },
@@ -40,11 +40,11 @@
         "entities": "Acionar a partir de outras entidades",
         "motion": "Acionar detectando automaticamente o sensor de movimento",
         "occupancy": "Acionar detectando automaticamente o sensor de ocupação",
-        "options": "Opções de acionamento"
+        "editor_label": "Opções de acionamento"
       },
       "webrtc_card": {
         "entity": "Entidade de câmera de cartão WebRTC (não é uma câmera Frigate)",
-        "options": "Opções do cartão WebRTC",
+        "editor_label": "Opções do cartão WebRTC",
         "url": "URL da câmera do cartão WebRTC"
       }
     },
@@ -56,6 +56,82 @@
         "selected": "Ao selecionar",
         "unselected": "Ao desselecionar",
         "visible": "Ao mostrar o navegador/aba"
+      },
+      "layout": {
+        "fit": "",
+        "fits": {
+          "cover": "",
+          "contain": "",
+          "fill": ""
+        },
+        "position": {
+          "x": "",
+          "y": ""
+        }
+      },
+      "timeline": {
+        "clustering_threshold": "A contagem de eventos nos quais eles são agrupados (0 = sem agrupamento)",
+        "media": "A mídia que a linha do tempo exibe",
+        "medias": {
+          "all": "Todos os tipos de mídia",
+          "clips": "Clipes",
+          "snapshots": "Instantâneos"
+        },
+        "show_recordings": "Mostrar gravações",
+        "window_seconds": "A duração padrão da visualização da linha do tempo em segundos"
+      },
+      "controls": {
+        "next_previous": {
+          "editor_label": "",
+          "size": "Tamanho de controle próximo e anterior",
+          "style": "Estilo do controle próximo e anterior",
+          "styles": {
+            "chevrons": "Setas",
+            "icons": "Ícones",
+            "none": "Nenhum"
+          }
+        },
+        "timeline": {
+          "editor_label": "Controles de linha do tempo",
+          "mode": "",
+          "modes": {
+            "none": "",
+            "above": "",
+            "below": ""
+          }
+        },
+        "thumbnails": {
+          "editor_label": "",
+          "media": "Se deve mostrar miniaturas de clipes ou snapshots",
+          "medias": {
+            "clips": "Miniaturas de clipes",
+            "snapshots": "Miniaturas de Snapshots"
+          },
+          "mode": "",
+          "modes": {
+            "above": "Miniaturas acima da mídia",
+            "below": "Miniaturas abaixo da mídia",
+            "left": "Miniaturas em uma gaveta à esquerda",
+            "none": "Sem miniaturas",
+            "right": "Miniaturas em uma gaveta à direita"
+          },
+          "show_details": "Mostrar detalhes do evento com miniaturas",
+          "show_favorite_control": "Mostrar controle de favorito nas miniaturas",
+          "show_timeline_control": "Mostrar controle da linha do tempo nas miniaturas",
+          "size": "Tamanho das miniaturas em pixels"
+        },
+        "title": {
+          "editor_label": "",
+          "duration_seconds": "Segundos para exibir o pop-up (0 = para sempre)",
+          "mode": "Modo de exibição de título de mídia",
+          "modes": {
+            "none": "Sem exibição de título",
+            "popup-bottom-left": "Pop-up no canto inferior esquerdo",
+            "popup-bottom-right": "Pop-up no canto inferior direito",
+            "popup-top-left": "Pop-up no canto superior esquerdo",
+            "popup-top-right": "Pop-up no canto superior direito"
+          }
+        }
       }
     },
     "dimensions": {
@@ -67,18 +143,8 @@
         "unconstrained": "Proporção irrestrita"
       }
     },
-    "event_gallery": {
-      "controls": {
-        "options": "Controles da Galeria de Eventos",
-        "thumbnails": {
-          "show_details": "Mostrar detalhes do evento com miniaturas",
-          "show_favorite_control": "Mostrar controle de favorito nas miniaturas",
-          "show_timeline_control": "Mostrar controle da linha do tempo nas miniaturas",
-          "size": "Tamanho das miniaturas da Galeria de eventos em pixels"
-        }
-      }
-    },
     "image": {
+      "layout": "",
       "mode": "Modo de visualização de imagem",
       "modes": {
         "camera": "Instantâneo da câmera do Home Assistant, da entidade de câmera",
@@ -94,34 +160,10 @@
       "auto_play": "Reproduzir câmeras ao vivo automaticamente",
       "auto_unmute": "Ativar automaticamente o som das câmeras ao vivo",
       "controls": {
-        "next_previous": {
+        "editor_label": "Controles da visualização ao vivo"
-          "size": "Tamanho de controle próximo e anterior na visualização ao vivo (por exemplo, '48px')",
-          "style": "Estilo do controle próximo e anterior na visualização ao vivo",
-          "styles": {
-            "chevrons": "Setas",
-            "icons": "Ícones",
-            "none": "Nenhum"
-          }
-        },
-        "options": "Controles da visualização ao vivo",
-        "thumbnails": {
-          "media": "Se deve mostrar miniaturas de clipes ou snapshots",
-          "medias": {
-            "clips": "Miniaturas de clipes",
-            "snapshots": "Miniaturas de Snapshots"
-          },
-          "mode": "Miniaturas do modo ao vivo",
-          "show_details": "Mostrar detalhes do evento com miniaturas",
-          "show_favorite_control": "Mostrar controle de favorito nas miniaturas",
-          "show_timeline_control": "Mostrar controle da linha do tempo nas miniaturas",
-          "size": "Tamanho das miniaturas ao vivo (e.g. '100px')"
-        },
-        "title": {
-          "duration_seconds": "Segundos para exibir o pop-up na visualização ao vivo (0 = para sempre)",
-          "mode": "Modo de exibição de título de mídia ao vivo"
-        }
       },
       "draggable": "A visualização ao vivo das câmeras pode ser arrastada/deslizada",
+      "layout": "",
       "lazy_load": "As câmeras ao vivo são carregadas lentamente",
       "lazy_unload": "As câmeras ao vivo são descarregadas preguiçosamente",
       "preload": "Pré-carregar a visualização ao vivo em segundo plano",
@@ -134,44 +176,11 @@
       "auto_play": "Reproduzir mídia automaticamente",
       "auto_unmute": "Ativar mídia automaticamente",
       "controls": {
-        "next_previous": {
+        "editor_label": "Controles do visualizador de mídia"
-          "size": "Tamanho do controle próximo e anterior do Visualizador de eventos (por exemplo, '48px')",
-          "style": "Estilo do controle próximo e anterior do Visualizador de eventos",
-          "styles": {
-            "chevrons": "Setas",
-            "none": "Nenhum",
-            "thumbnails": "Miniaturas"
-          }
-        },
-        "options": "Controles do visualizador de mídia",
-        "thumbnails": {
-          "mode": "Modo de miniaturas do Visualizador de eventos",
-          "modes": {
-            "above": "Miniaturas acima da mídia",
-            "below": "Miniaturas abaixo da mídia",
-            "left": "Miniaturas em uma gaveta à esquerda da mídia",
-            "none": "Sem miniaturas",
-            "right": "Miniaturas em uma gaveta à direita da mídia"
-          },
-          "show_details": "Mostrar detalhes com miniaturas",
-          "show_favorite_control": "Mostrar controle de favorito nas miniaturas",
-          "show_timeline_control": "Mostrar controle da linha do tempo nas miniaturas",
-          "size": "Tamanho das miniaturas do Visualizador de eventos (por exemplo, '100px')"
-        },
-        "title": {
-          "duration_seconds": "Segundos de exibição do pop-up no Visualizador de Eventos (0 = para sempre)",
-          "mode": "Modo de exibição de título de mídia do Visualizador de eventos",
-          "modes": {
-            "none": "Sem exibição de título",
-            "popup-bottom-left": "Pop-up no canto inferior esquerdo",
-            "popup-bottom-right": "Pop-up no canto inferior direito",
-            "popup-top-left": "Pop-up no canto superior esquerdo",
-            "popup-top-right": "Pop-up no canto superior direito"
-          }
-        }
       },
       "draggable": "Visualizador de eventos pode ser arrastado/deslizado",
       "lazy_load": "A mídia do Visualizador de eventos é carregada lentamente no carrossel",
+      "layout": "",
       "transition_effect": "Efeito de transição do Visualizador de eventos",
       "transition_effects": {
         "none": "Sem transição",
@@ -227,27 +236,6 @@
     "overrides": {
       "info": "Esta configuração do cartão especificou manualmente as substituições configuradas que podem substituir os valores mostrados no editor visual, consulte o editor de código para visualizar/modificar essas substituições"
     },
-    "timeline": {
-      "clustering_threshold": "A contagem de eventos nos quais eles são agrupados (0 = sem agrupamento)",
-      "controls": {
-        "options": "Controles de linha do tempo",
-        "thumbnails": {
-          "mode": "Modo de miniaturas da linha do tempo",
-          "show_details": "Mostrar detalhes do evento com miniaturas",
-          "show_favorite_control": "Mostrar controle de favorito nas miniaturas",
-          "show_timeline_control": "Mostrar controle da linha do tempo nas miniaturas",
-          "size": "Tamanho das miniaturas da linha do tempo em pixels"
-        }
-      },
-      "media": "A mídia que a linha do tempo exibe",
-      "medias": {
-        "all": "Todos os tipos de mídia",
-        "clips": "Clipes",
-        "snapshots": "Instantâneos"
-      },
-      "show_recordings": "Mostrar gravações",
-      "window_seconds": "A duração padrão da visualização da linha do tempo em segundos"
-    },
     "view": {
       "camera_select": "Visualização de câmeras recém-selecionadas",
       "dark_mode": "Modo escuro",
@@ -347,7 +335,8 @@
     "duration": "Duração",
     "in_progress": "Em andamento",
     "score": "Pontuação",
-    "start": "Início"
+    "start": "Início",
+    "seek": "Procurar"
   },
   "recording": {
     "events": "Eventos",
@@ -357,5 +346,20 @@
     "no_thumbnail": "Nenhuma miniatura disponível",
     "retain_indefinitely": "Evento será retido por tempo indeterminado",
     "timeline": "Ver evento na linha do tempo"
+  },
+  "timeline": {
+    "lock": "",
+    "unlock": ""
+  },
+  "elements": {
+    "ptz": {
+      "up": "",
+      "down": "",
+      "left": "",
+      "right": "",
+      "zoom_in": "",
+      "zoom_out": "",
+      "home": ""
+    }
   }
 }

src/localize/localize.ts

@@ -3,7 +3,7 @@ import * as pt_BR from './languages/pt-BR.json';
 import * as it from './languages/it.json';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const languages: any = {
+const languages: Record<string, any> = {
   en: en,
   pt_BR: pt_BR,
   it: it,

src/scss/editor.scss

@@ -86,6 +86,11 @@ div.upgrade span {
   margin-right: auto;
   margin-bottom: 10px;
 }
+
+.submenu .submenu:first-child {
+  margin-top: 10px;
+}
+
 .submenu :not(.submenu.selected) {
   border: none;
 }