Add gallery thumbnail editing support.

README.md

@@ -374,7 +374,9 @@ event_gallery:
 
 | Option | Default | Overridable | Description |
 | - | - | - | - |
-| `min_columns` | `5` | :heavy_multiplication_x: | The minimum number of columns to show in the gallery -- smaller values will render fewer but larger thumbnail columns. Thumbnails will never be stretched beyond their intrinsic size (typically `175px`). All available space (in normal mode, or fullscreen mode) will be occupied by the gallery, so more columns than `min_columns` will often be rendered if space allows for more full-sized thumbnails. For normal sized Lovelace cards (`492px` wide), this typically means there'll never be fewer than 3 columns rendered (as otherwise the thumbnails would need to stretch beyond their actual size). Must be `1 <= x <= 10`. |
+| `size` | 100 | :heavy_multiplication_x: | The size of the thumbnails in the event gallery in pixels.|
+| `show_details` | `false` | :heavy_multiplication_x: | Whether to show event details (e.g. duration, start time, object detected, etc) alongside the thumbnail.|
+| `show_controls` | `true` | :heavy_multiplication_x: | Whether to show event controls (e.g. timeline icon, favorite icon) alongside the thumbnail.|
 | `actions` | | :heavy_multiplication_x: | Actions to use for all views that use the `event_gallery` (e.g. `clips`, `snapshots`). See [actions](#actions) below.|
 
 ### Image Options

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