Add 'show_details' open to show details next to thumbnails.

README.md

@@ -259,6 +259,7 @@ live:
 | - | - | - | - |
 | `mode` | `none` | :white_check_mark: | Whether to show the thumbnail carousel `below` the media, `above` the media or to hide it entirely (`none`).|
 | `size` | `100px` | :white_check_mark: | The size of the thumbnails in the thumbnail carousel [in CSS Units](https://www.w3schools.com/cssref/css_units.asp).|
+| `show_details` | `false` | :white_check_mark: | Whether to show event details (e.g. duration, start time, object detected, etc) alongside the thumbnail.|
 | `media` | `clips` | :white_check_mark: | Whether to show `clips` or `snapshots` in the thumbnail carousel in the `live` view.|
 
 #### Live Controls: Next / Previous
@@ -342,6 +343,7 @@ event_viewer:
 | - | - | - | - |
 | `mode` | `none` | :heavy_multiplication_x: | Whether to show the thumbnail carousel `below` the media, `above` the media or to hide it entirely (`none`).|
 | `size` | `100px` | :heavy_multiplication_x: | The size of the thumbnails in the thumbnail carousel [in CSS Units](https://www.w3schools.com/cssref/css_units.asp).|
+| `show_details` | `false` | :heavy_multiplication_x: | Whether to show event details (e.g. duration, start time, object detected, etc) alongside the thumbnail.|
 
 #### Event Viewer Controls: Title
 

src/components/thumbnail-carousel.ts

@@ -120,7 +120,7 @@ export class FrigateCardThumbnailCarousel extends FrigateCardCarousel {
     return html`
       <frigate-card-thumbnail
         .media=${mediaToRender}
-        details
+        ?details=${this.config?.show_details}
         thumbnail_size=${ifDefined(this.config?.size)}
         class="${classMap(classes)}"
         @click=${(ev) => {

src/components/timeline.ts

@@ -265,6 +265,7 @@ export class FrigateCardTimeline extends LitElement {
 
     const config: ThumbnailsControlConfig = {
       mode: 'above',
+      show_details: true,
     };
 
     // TODO move to configuration later.

src/const.ts

@@ -45,6 +45,8 @@ export const CONF_EVENT_VIEWER_CONTROLS_NEXT_PREVIOUS_SIZE =
   `${CONF_EVENT_VIEWER}.controls.next_previous.size` as const;
 export const CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_MODE =
   `${CONF_EVENT_VIEWER}.controls.thumbnails.mode` as const;
+export const CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_SHOW_DETAILS =
+`${CONF_EVENT_VIEWER}.controls.thumbnails.show_details` as const;
 export const CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_SIZE =
   `${CONF_EVENT_VIEWER}.controls.thumbnails.size` as const;
 export const CONF_EVENT_VIEWER_CONTROLS_TITLE_MODE =
@@ -64,6 +66,8 @@ export const CONF_LIVE_CONTROLS_THUMBNAILS_MODE =
   `${CONF_LIVE}.controls.thumbnails.mode` as const;
 export const CONF_LIVE_CONTROLS_THUMBNAILS_SIZE =
   `${CONF_LIVE}.controls.thumbnails.size` as const;
+export const CONF_LIVE_CONTROLS_THUMBNAILS_SHOW_DETAILS =
+`${CONF_LIVE}.controls.thumbnails.show_details` as const;
 export const CONF_LIVE_CONTROLS_TITLE_MODE = `${CONF_LIVE}.controls.title.mode` as const;
 export const CONF_LIVE_CONTROLS_TITLE_DURATION_SECONDS =
   `${CONF_LIVE}.controls.title.duration_seconds` as const;

src/editor.ts

@@ -32,6 +32,7 @@ import {
   CONF_EVENT_VIEWER_CONTROLS_NEXT_PREVIOUS_SIZE,
   CONF_EVENT_VIEWER_CONTROLS_NEXT_PREVIOUS_STYLE,
   CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_MODE,
+  CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_SHOW_DETAILS,
   CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_SIZE,
   CONF_EVENT_VIEWER_CONTROLS_TITLE_DURATION_SECONDS,
   CONF_EVENT_VIEWER_CONTROLS_TITLE_MODE,
@@ -46,6 +47,7 @@ import {
   CONF_LIVE_CONTROLS_NEXT_PREVIOUS_STYLE,
   CONF_LIVE_CONTROLS_THUMBNAILS_MEDIA,
   CONF_LIVE_CONTROLS_THUMBNAILS_MODE,
+  CONF_LIVE_CONTROLS_THUMBNAILS_SHOW_DETAILS,
   CONF_LIVE_CONTROLS_THUMBNAILS_SIZE,
   CONF_LIVE_CONTROLS_TITLE_DURATION_SECONDS,
   CONF_LIVE_CONTROLS_TITLE_MODE,
@@ -881,6 +883,10 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
                   CONF_LIVE_CONTROLS_TITLE_MODE,
                   this._titleModes,
                 )}
+                ${this._renderSwitch(
+                  CONF_LIVE_CONTROLS_THUMBNAILS_SHOW_DETAILS,
+                  defaults.live.controls.thumbnails.show_details,
+                )}
                 ${this._renderNumberInput(
                   CONF_LIVE_CONTROLS_TITLE_DURATION_SECONDS,
                   0,
@@ -928,6 +934,10 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
                 this._thumbnailModes,
               )}
               ${this._renderStringInput(CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_SIZE)}
+              ${this._renderSwitch(
+                CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_SHOW_DETAILS,
+                defaults.event_viewer.controls.thumbnails.show_details,
+              )}
               ${this._renderOptionSelector(
                 CONF_EVENT_VIEWER_CONTROLS_TITLE_MODE,
                 this._titleModes,

src/localize/languages/en.json

@@ -76,6 +76,7 @@
         "thumbnails": {
           "mode": "Event Viewer thumbnails mode",
           "size": "Event Viewer thumbnails size (e.g. '100px')",
+          "show_details": "Show event details with thumbnails",
           "modes": {
             "below": "Thumbnails below the media",
             "above": "Thumbnails above the media",
@@ -115,6 +116,7 @@
         "thumbnails": {
           "mode": "Live thumbnails mode",
           "size": "Live thumbnails size (e.g. '100px')",
+          "show_details": "Show event details with thumbnails",
           "media": "Whether to show thumbnails of clips or snapshots",
           "medias": {
             "clips": "Clip thumbnails",

src/types.ts

@@ -436,6 +436,7 @@ export type ImageViewConfig = z.infer<typeof imageConfigSchema>;
 const thumbnailsControlSchema = z.object({
   mode: z.enum(['none', 'above', 'below']),
   size: z.string().optional(),
+  show_details: z.boolean().optional(),
 });
 export type ThumbnailsControlConfig = z.infer<typeof thumbnailsControlSchema>;
 
@@ -488,6 +489,7 @@ const liveConfigDefault = {
     thumbnails: {
       media: 'clips' as const,
       size: '100px',
+      show_details: false,
       mode: 'none' as const,
     },
     title: {
@@ -548,6 +550,9 @@ const liveOverridableConfigSchema = z
             size: thumbnailsControlSchema.shape.size.default(
               liveConfigDefault.controls.thumbnails.size,
             ),
+            show_details: thumbnailsControlSchema.shape.show_details.default(
+              liveConfigDefault.controls.thumbnails.show_details,
+            ),
             media: z
               .enum(['clips', 'snapshots'])
               .default(liveConfigDefault.controls.thumbnails.media),
@@ -642,6 +647,7 @@ const viewerConfigDefault = {
     thumbnails: {
       size: '100px',
       mode: 'none' as const,
+      show_details: false,
     },
     title: {
       mode: 'popup-bottom-right' as const,
@@ -654,6 +660,7 @@ const viewerNextPreviousControlConfigSchema = nextPreviousControlConfigSchema.ex
     .enum(['none', 'thumbnails', 'chevrons'])
     .default(viewerConfigDefault.controls.next_previous.style),
   size: z.string().default(viewerConfigDefault.controls.next_previous.size),
+
 });
 export type ViewerNextPreviousControlConfig = z.infer<
   typeof viewerNextPreviousControlConfigSchema
@@ -681,6 +688,9 @@ const viewerConfigSchema = z
             size: thumbnailsControlSchema.shape.size.default(
               viewerConfigDefault.controls.thumbnails.size,
             ),
+            show_details: thumbnailsControlSchema.shape.show_details.default(
+              viewerConfigDefault.controls.thumbnails.show_details,
+            ),
           })
           .default(viewerConfigDefault.controls.thumbnails),
         title: titleControlConfigSchema