Add show_controls to editor support.

src/components/thumbnail-carousel.ts

@@ -179,7 +179,7 @@ export class FrigateCardThumbnailCarousel extends FrigateCardCarousel {
       .target=${parent}
       .childIndex=${childIndex}
       ?details=${this._config?.show_details}
-      ?controls=${true}
+      ?controls=${this._config?.show_controls}
       thumbnail_size=${ifDefined(this._config?.size)}
       class="${classMap(classes)}"
       @click=${(ev) => {

src/components/timeline.ts

@@ -1,5 +1,3 @@
-// TODO: Editor support for timeline (incl. in views).
-// TODO: Make thumbnail controls optional (in all places that use thumbnails).
 // TODO: Search for TODOs and logging statements.
 
 import {
@@ -66,9 +64,7 @@ interface TimelineViewContext extends ViewContext {
 
 type TimelineMediaType = 'all' | 'clips' | 'snapshots';
 
-const isHoverableDevice = window.matchMedia(
+const isHoverableDevice = window.matchMedia('(hover: hover) and (pointer: fine)');
-  '(hover: hover) and (pointer: fine)'
-)
 
 /**
  * A manager to maintain/fetch timeline events.
@@ -391,13 +387,16 @@ export class FrigateCardTimelineCore extends LitElement {
     const eventAttr = source.frigate?.event
       ? `event='${JSON.stringify(source.frigate.event)}'`
       : '';
+    const detailsAttr = this.timelineConfig?.controls.thumbnails.show_details
+      ? 'details'
+      : '';
 
     // Cannot use Lit data-bindings as visjs requires a string for tooltips.
     // Note that changes to attributes here must be mirrored in the xss
     // whitelist in `_getOptions()` .
     return `
       <frigate-card-thumbnail
-        details
+        ${detailsAttr}
         thumbnail="${source.thumbnail}"
         label="${source.title}"
         ${eventAttr}
@@ -731,7 +730,7 @@ export class FrigateCardTimelineCore extends LitElement {
       this.timelineConfig.media,
       windowStart,
       windowEnd,
-    )
+    );
     this._generateThumbnails();
 
     this._timeline.setSelection(event ? [event.id] : [], {

src/const.ts

@@ -47,6 +47,8 @@ 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_SHOW_CONTROLS =
+`${CONF_EVENT_VIEWER}.controls.thumbnails.show_controls` 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 =
@@ -68,6 +70,8 @@ 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_THUMBNAILS_SHOW_CONTROLS =
+`${CONF_LIVE}.controls.thumbnails.show_controls` 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;
@@ -90,6 +94,8 @@ export const CONF_TIMELINE_MEDIA = `${CONF_TIMELINE}.media` as const;
 export const CONF_TIMELINE_CONTROLS_THUMBNAILS_MODE = `${CONF_TIMELINE}.controls.thumbnails.mode` as const;
 export const CONF_TIMELINE_CONTROLS_THUMBNAILS_SIZE = `${CONF_TIMELINE}.controls.thumbnails.size` as const;
 export const CONF_TIMELINE_CONTROLS_THUMBNAILS_SHOW_DETAILS = `${CONF_TIMELINE}.controls.thumbnails.show_details` as const;
+export const CONF_TIMELINE_CONTROLS_THUMBNAILS_SHOW_CONTROLS =
+`${CONF_TIMELINE}.controls.thumbnails.show_controls` as const;
 
 export const CONF_MENU = 'menu' as const;
 export const CONF_MENU_BUTTONS_FRIGATE = `${CONF_MENU}.buttons.frigate` 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_CONTROLS,
   CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_SHOW_DETAILS,
   CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_SIZE,
   CONF_EVENT_VIEWER_CONTROLS_TITLE_DURATION_SECONDS,
@@ -47,6 +48,7 @@ import {
   CONF_LIVE_CONTROLS_NEXT_PREVIOUS_STYLE,
   CONF_LIVE_CONTROLS_THUMBNAILS_MEDIA,
   CONF_LIVE_CONTROLS_THUMBNAILS_MODE,
+  CONF_LIVE_CONTROLS_THUMBNAILS_SHOW_CONTROLS,
   CONF_LIVE_CONTROLS_THUMBNAILS_SHOW_DETAILS,
   CONF_LIVE_CONTROLS_THUMBNAILS_SIZE,
   CONF_LIVE_CONTROLS_TITLE_DURATION_SECONDS,
@@ -68,6 +70,7 @@ import {
   CONF_MENU_MODE,
   CONF_TIMELINE_CLUSTERING_THRESHOLD,
   CONF_TIMELINE_CONTROLS_THUMBNAILS_MODE,
+  CONF_TIMELINE_CONTROLS_THUMBNAILS_SHOW_CONTROLS,
   CONF_TIMELINE_CONTROLS_THUMBNAILS_SHOW_DETAILS,
   CONF_TIMELINE_CONTROLS_THUMBNAILS_SIZE,
   CONF_TIMELINE_MEDIA,
@@ -191,6 +194,7 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
     { value: 'clip', label: localize('config.view.views.clip') },
     { value: 'snapshot', label: localize('config.view.views.snapshot') },
     { value: 'image', label: localize('config.view.views.image') },
+    { value: 'timeline', label: localize('config.view.views.timeline') },
   ];
 
   protected _cameraSelectViewModes = [
@@ -913,6 +917,10 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
                   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,
                   0,
@@ -964,6 +972,10 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
                 CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_SHOW_DETAILS,
                 defaults.event_viewer.controls.thumbnails.show_details,
               )}
+              ${this._renderSwitch(
+                CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_SHOW_CONTROLS,
+                defaults.event_viewer.controls.thumbnails.show_controls,
+              )}
               ${this._renderOptionSelector(
                 CONF_EVENT_VIEWER_CONTROLS_TITLE_MODE,
                 this._titleModes,
@@ -999,7 +1011,11 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
               ${this._renderStringInput(CONF_TIMELINE_CONTROLS_THUMBNAILS_SIZE)}
               ${this._renderSwitch(
                 CONF_TIMELINE_CONTROLS_THUMBNAILS_SHOW_DETAILS,
-                defaults.event_viewer.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

@@ -77,6 +77,7 @@
           "mode": "Event Viewer thumbnails mode",
           "size": "Event Viewer thumbnails size (e.g. '100px')",
           "show_details": "Show event details with thumbnails",
+          "show_controls": "Show event controls with thumbnails",
           "modes": {
             "below": "Thumbnails below the media",
             "above": "Thumbnails above the media",
@@ -119,6 +120,7 @@
           "mode": "Live thumbnails mode",
           "size": "Live thumbnails size (e.g. '100px')",
           "show_details": "Show event details with thumbnails",
+          "show_controls": "Show event controls with thumbnails",
           "media": "Whether to show thumbnails of clips or snapshots",
           "medias": {
             "clips": "Clip thumbnails",
@@ -181,7 +183,8 @@
         "thumbnails": {
           "mode": "Timeline thumbnails mode",
           "size": "Timeline thumbnails size (e.g. '100px')",
-          "show_details": "Show event details with thumbnails"
+          "show_details": "Show event details with thumbnails",
+          "show_controls": "Show event controls with thumbnails"
         }
       }
     },

src/scss/favorite.scss

@@ -1,12 +1,14 @@
 ha-icon.favorite {
   position: absolute;
-  color: var(--primary-color);
+  color: gold;
-  padding: 2px;
+  background: rgba(0,0,0,0.2);
+  border-radius: 50%;
 }
 
 ha-icon.timeline {
   position: absolute;
   color: var(--primary-color);
-  padding: 2px;
   right: 0px;
+  background: rgba(0,0,0,0.2);
+  border-radius: 50%;
 }

src/types.ts

@@ -444,6 +444,7 @@ const thumbnailsControlSchema = z.object({
   mode: z.enum(['none', 'above', 'below', 'left', 'right']),
   size: z.string().optional(),
   show_details: z.boolean().optional(),
+  show_controls: z.boolean().optional(),
 });
 export type ThumbnailsControlConfig = z.infer<typeof thumbnailsControlSchema>;
 
@@ -497,6 +498,7 @@ const liveConfigDefault = {
       media: 'clips' as const,
       size: '100px',
       show_details: false,
+      show_controls: true,
       mode: 'none' as const,
     },
     title: {
@@ -560,6 +562,9 @@ const liveOverridableConfigSchema = z
             show_details: thumbnailsControlSchema.shape.show_details.default(
               liveConfigDefault.controls.thumbnails.show_details,
             ),
+            show_controls: thumbnailsControlSchema.shape.show_controls.default(
+              liveConfigDefault.controls.thumbnails.show_controls,
+            ),
             media: z
               .enum(['clips', 'snapshots'])
               .default(liveConfigDefault.controls.thumbnails.media),
@@ -655,6 +660,7 @@ const viewerConfigDefault = {
       size: '100px',
       mode: 'none' as const,
       show_details: false,
+      show_controls: true,
     },
     title: {
       mode: 'popup-bottom-right' as const,
@@ -697,6 +703,9 @@ const viewerConfigSchema = z
             show_details: thumbnailsControlSchema.shape.show_details.default(
               viewerConfigDefault.controls.thumbnails.show_details,
             ),
+            show_controls: thumbnailsControlSchema.shape.show_controls.default(
+              viewerConfigDefault.controls.thumbnails.show_controls,
+            ),
           })
           .default(viewerConfigDefault.controls.thumbnails),
         title: titleControlConfigSchema
@@ -768,6 +777,7 @@ const timelineConfigDefault = {
       mode: 'left' as const,
       size: '100px' as const,
       show_details: true,
+      show_controls: true,
     },
   },
 };
@@ -788,6 +798,9 @@ const timelineConfigSchema = z
             show_details: thumbnailsControlSchema.shape.show_details.default(
               timelineConfigDefault.controls.thumbnails.show_details,
             ),
+            show_controls: thumbnailsControlSchema.shape.show_controls.default(
+              timelineConfigDefault.controls.thumbnails.show_controls,
+            ),
           })
           .default(timelineConfigDefault.controls.thumbnails),
       })