Allow finer grained selection of thumbnail controls.

src/components/gallery.ts

@@ -7,7 +7,7 @@ import {
   LitElement,
   PropertyValues,
   TemplateResult,
-  unsafeCSS
+  unsafeCSS,
 } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import galleryStyle from '../scss/gallery.scss';
@@ -15,13 +15,13 @@ import {
   CameraConfig,
   frigateCardConfigDefaults,
   GalleryConfig,
-  THUMBNAIL_WIDTH_MAX
+  THUMBNAIL_WIDTH_MAX,
 } from '../types.js';
 import { stopEventFromActivatingCardWideActions } from '../utils/action.js';
 import {
   fetchChildMediaAndDispatchViewChange,
   fetchLatestMediaAndDispatchViewChange,
-  getFullDependentBrowseMediaQueryParametersOrDispatchError
+  getFullDependentBrowseMediaQueryParametersOrDispatchError,
 } from '../utils/ha/browse-media';
 import { View } from '../view.js';
 import { renderProgressIndicator } from './message.js';
@@ -262,7 +262,10 @@ export class FrigateCardGalleryCore extends LitElement {
                   .hass=${this.hass}
                   .clientID=${cameraConfig?.frigate.client_id}
                   ?details=${!!this.galleryConfig?.controls.thumbnails.show_details}
-                  ?controls=${!!this.galleryConfig?.controls.thumbnails.show_controls}
+                  ?show_favorite_control=${!!this.galleryConfig?.controls.thumbnails
+                    .show_favorite_control}
+                  ?show_timeline_control=${!!this.galleryConfig?.controls.thumbnails
+                    .show_timeline_control}
                   @click=${(ev: Event) => {
                     if (this.view) {
                       this.view
@@ -291,8 +294,8 @@ export class FrigateCardGalleryCore extends LitElement {
 }
 
 declare global {
-	interface HTMLElementTagNameMap {
-		"frigate-card-gallery-core": FrigateCardGalleryCore
-		"frigate-card-gallery": FrigateCardGallery
-	}
+  interface HTMLElementTagNameMap {
+    'frigate-card-gallery-core': FrigateCardGalleryCore;
+    'frigate-card-gallery': FrigateCardGallery;
+  }
 }

src/components/thumbnail-carousel.ts

@@ -210,7 +210,8 @@ export class FrigateCardThumbnailCarousel extends FrigateCardCarousel {
       .childIndex=${childIndex}
       .clientID=${cameraConfig?.frigate.client_id}
       ?details=${this._config?.show_details}
-      ?controls=${this._config?.show_controls}
+      ?show_favorite_control=${this._config?.show_favorite_control}
+      ?show_timeline_control=${this._config?.show_timeline_control}
       class="${classMap(classes)}"
       @click=${(ev) => {
         if (this._carousel && this._carousel.clickAllowed()) {

src/components/thumbnail.ts

@@ -129,7 +129,10 @@ export class FrigateCardThumbnail extends LitElement {
   public details = false;
 
   @property({ attribute: true, type: Boolean })
-  public controls = false;
+  public show_favorite_control = false;
+
+  @property({ attribute: true, type: Boolean })
+  public show_timeline_control = false;
 
   // ============================
   // Data-binding based interface
@@ -211,7 +214,7 @@ export class FrigateCardThumbnail extends LitElement {
           title="${label ?? ''}"
           .date=${recording ? fromUnixTime(recording.start_time) : undefined}
         ></frigate-card-thumbnail-feature-recording>`}
-    ${this.controls && event && this.hass && this.clientID
+    ${this.show_favorite_control && event && this.hass && this.clientID
       ? html` <ha-icon
             class="${classMap(starClasses)}"
             icon=${event?.retain_indefinitely ? 'mdi:star' : 'mdi:star-outline'}
@@ -247,7 +250,7 @@ export class FrigateCardThumbnail extends LitElement {
           .recording=${recording ?? undefined}
         ></frigate-card-thumbnail-details-recording>`
       : html``}
-    ${this.controls
+    ${this.show_timeline_control
       ? html`<ha-icon
           class="timeline"
           icon="mdi:target"