Add gallery thumbnail editing support.

src/const.ts

@@ -29,8 +29,12 @@ export const CONF_VIEW_UPDATE_ENTITIES = `${CONF_VIEW}.update_entities` as const
 export const CONF_VIEW_UPDATE_SECONDS = `${CONF_VIEW}.update_seconds` as const;
 
 export const CONF_EVENT_GALLERY = 'event_gallery' as const;
-export const CONF_EVENT_GALLERY_MIN_COLUMNS =
-  `${CONF_EVENT_GALLERY}.min_columns` as const;
+export const CONF_EVENT_GALLERY_CONTROLS_THUMBNAILS_SHOW_DETAILS =
+`${CONF_EVENT_GALLERY}.controls.thumbnails.show_details` as const;
+export const CONF_EVENT_GALLERY_CONTROLS_THUMBNAILS_SHOW_CONTROLS =
+`${CONF_EVENT_GALLERY}.controls.thumbnails.show_controls` as const;
+export const CONF_EVENT_GALLERY_CONTROLS_THUMBNAILS_SIZE =
+  `${CONF_EVENT_GALLERY}.controls.thumbnails.size` as const;
 
 export const CONF_EVENT_VIEWER = 'event_viewer' as const;
 export const CONF_EVENT_VIEWER_AUTO_PLAY = `${CONF_EVENT_VIEWER}.auto_play` as const;

src/editor.ts

@@ -28,7 +28,9 @@ import {
   CONF_CAMERAS_ARRAY_ZONE,
   CONF_DIMENSIONS_ASPECT_RATIO,
   CONF_DIMENSIONS_ASPECT_RATIO_MODE,
-  CONF_EVENT_GALLERY_MIN_COLUMNS,
+  CONF_EVENT_GALLERY_CONTROLS_THUMBNAILS_SHOW_CONTROLS,
+  CONF_EVENT_GALLERY_CONTROLS_THUMBNAILS_SHOW_DETAILS,
+  CONF_EVENT_GALLERY_CONTROLS_THUMBNAILS_SIZE,
   CONF_EVENT_VIEWER_AUTO_PLAY,
   CONF_EVENT_VIEWER_AUTO_UNMUTE,
   CONF_EVENT_VIEWER_CONTROLS_NEXT_PREVIOUS_SIZE,
@@ -943,7 +945,19 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
         ${this._renderOptionSetHeader('event_gallery')}
         ${options.event_gallery.show
           ? html` <div class="values">
-              ${this._renderNumberInput(CONF_EVENT_GALLERY_MIN_COLUMNS, 1, 10)}
+              ${this._renderNumberInput(
+                CONF_EVENT_GALLERY_CONTROLS_THUMBNAILS_SIZE,
+                THUMBNAIL_WIDTH_MIN,
+                THUMBNAIL_WIDTH_MAX,
+              )}
+              ${this._renderSwitch(
+                CONF_EVENT_GALLERY_CONTROLS_THUMBNAILS_SHOW_DETAILS,
+                defaults.event_viewer.controls.thumbnails.show_details,
+              )}
+              ${this._renderSwitch(
+                CONF_EVENT_GALLERY_CONTROLS_THUMBNAILS_SHOW_CONTROLS,
+                defaults.event_viewer.controls.thumbnails.show_controls,
+              )}
             </div>`
           : ''}
         ${this._renderOptionSetHeader('event_viewer')}

src/localize/languages/en.json

@@ -51,7 +51,13 @@
       "update_seconds": "Refresh default view every X seconds (0=never)"
     },
     "event_gallery": {
-      "min_columns": "Minimum number of columns"
+      "controls": {
+        "thumbnails": {
+          "size": "Event Gallery thumbnails size in pixels",
+          "show_details": "Show event details with thumbnails",
+          "show_controls": "Show event controls with thumbnails"
+        }
+      }
     },
     "event_viewer": {
       "auto_play": "Automatically play media",