Merge pull request #753 from dermotduffy/finer-grained-controls

Allow finer grained selection of thumbnail controls

.vscode/i18n-ally-reviews.yml

@@ -8,3 +8,59 @@ reviews:
           source: en
           text: Não foi possível reter o evento
           time: '2022-06-28T05:18:48.431Z'
+  config.event_gallery.controls.thumbnails.show_favorite_control:
+    locales:
+      pt-BR:
+        translation_candidate:
+          source: en
+          text: Mostrar controle favorito em miniaturas
+          time: '2022-07-03T15:12:24.848Z'
+  config.event_gallery.controls.thumbnails.show_timeline_control:
+    locales:
+      pt-BR:
+        translation_candidate:
+          source: en
+          text: Mostrar controle da linha do tempo nas miniaturas
+          time: '2022-07-03T15:12:32.656Z'
+  config.live.controls.thumbnails.show_favorite_control:
+    locales:
+      pt-BR:
+        translation_candidate:
+          source: en
+          text: Mostrar controle favorito em miniaturas
+          time: '2022-07-03T15:13:49.466Z'
+  config.live.controls.thumbnails.show_timeline_control:
+    locales:
+      pt-BR:
+        translation_candidate:
+          source: en
+          text: Mostrar controle da linha do tempo nas miniaturas
+          time: '2022-07-03T15:13:52.295Z'
+  config.media_viewer.controls.thumbnails.show_favorite_control:
+    locales:
+      pt-BR:
+        translation_candidate:
+          source: en
+          text: Mostrar controle favorito em miniaturas
+          time: '2022-07-03T15:13:54.711Z'
+  config.media_viewer.controls.thumbnails.show_timeline_control:
+    locales:
+      pt-BR:
+        translation_candidate:
+          source: en
+          text: Mostrar controle da linha do tempo nas miniaturas
+          time: '2022-07-03T15:13:57.530Z'
+  config.timeline.controls.thumbnails.show_favorite_control:
+    locales:
+      pt-BR:
+        translation_candidate:
+          source: en
+          text: Mostrar controle favorito em miniaturas
+          time: '2022-07-03T15:13:59.666Z'
+  config.timeline.controls.thumbnails.show_timeline_control:
+    locales:
+      pt-BR:
+        translation_candidate:
+          source: en
+          text: Mostrar controle da linha do tempo nas miniaturas
+          time: '2022-07-03T15:14:01.927Z'

README.md

@@ -377,7 +377,8 @@ live:
 | `mode` | `none` | :white_check_mark: | Whether to show the thumbnail carousel `below` the media, `above` the media, in a drawer to the `left` or `right` of the media or to hide it entirely (`none`).|
 | `size` | 100 | :white_check_mark: | The size of the thumbnails in the thumbnail carousel in pixels. Must be >= `75` and <= `175`. |
 | `show_details` | `false` | :white_check_mark: | Whether to show event details (e.g. duration, start time, object detected, etc) alongside the thumbnail.|
-| `show_controls` | `true` | :white_check_mark: | Whether to show event controls (e.g. timeline icon, favorite icon) alongside the thumbnail.|
+| `show_favorite_control` | `true` | :white_check_mark: | Whether to show the favorite ('star') control on each thumbnail.|
+| `show_timeline_control` | `true` | :white_check_mark: | Whether to show the timeline ('target') control on each thumbnail.|
 | `media` | `clips` | :white_check_mark: | Whether to show `clips` or `snapshots` in the thumbnail carousel in the `live` view.|
 
 #### Live Controls: Next / Previous
@@ -466,7 +467,8 @@ media_viewer:
 | `mode` | `none` | :heavy_multiplication_x: | Whether to show the thumbnail carousel `below` the media, `above` the media, in a drawer to the `left` or `right` of the media or to hide it entirely (`none`).|
 | `size` | 100 | :heavy_multiplication_x: | The size of the thumbnails in the thumbnail carousel pixels. Must be >= `75` and <= `175`.|
 | `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.|
+| `show_favorite_control` | `true` | :white_check_mark: | Whether to show the favorite ('star') control on each thumbnail.|
+| `show_timeline_control` | `true` | :white_check_mark: | Whether to show the timeline ('target') control on each thumbnail.|
 
 #### Media Viewer Controls: Title
 
@@ -499,7 +501,8 @@ See the [fully expanded event gallery configuration example](#config-expanded-ev
 | - | - | - | - |
 | `size` | 100 | :heavy_multiplication_x: | The size of the thumbnails in the event gallery in pixels. Must be >= `75` and <= `175`.|
 | `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.|
+| `show_favorite_control` | `true` | :white_check_mark: | Whether to show the favorite ('star') control on each thumbnail.|
+| `show_timeline_control` | `true` | :white_check_mark: | Whether to show the timeline ('target') control on each 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
@@ -558,7 +561,8 @@ timeline:
 | `mode` | `none` | :heavy_multiplication_x: | Whether to show the thumbnail carousel `below` the media, `above` the media, in a drawer to the `left` or `right` of the media or to hide it entirely (`none`).|
 | `size` | 100 | :heavy_multiplication_x: | The size of the thumbnails in the thumbnail carousel in pixels. Must be >= `75` and <= `175`.|
 | `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.|
+| `show_favorite_control` | `true` | :white_check_mark: | Whether to show the favorite ('star') control on each thumbnail.|
+| `show_timeline_control` | `true` | :white_check_mark: | Whether to show the timeline ('target') control on each thumbnail.|
 
 ### Dimensions Options
 
@@ -1264,7 +1268,8 @@ live:
       media: clips
       size: 100
       show_details: false
-      show_controls: false
+      show_favorite_control: true
+      show_timeline_control: true
       mode: none
     title:
       mode: popup-bottom-right
@@ -1309,7 +1314,8 @@ media_viewer:
       size: 100
       mode: none
       show_details: false
-      show_controls: true
+      show_favorite_control: true
+      show_timeline_control: true
     title:
       mode: popup-bottom-right
       duration_seconds: 2
@@ -1341,7 +1347,8 @@ event_gallery:
     thumbnails:
       size: 100
       show_details: false
-      show_controls: false
+      show_favorite_control: true
+      show_timeline_control: true
   actions:
     entity: light.office_main_lights
     tap_action:
@@ -1724,7 +1731,8 @@ timeline:
       mode: left
       size: 100
       show_details: true
-      show_controls: true
+      show_favorite_control: true
+      show_timeline_control: true
 ```
 </details>
 
@@ -1779,7 +1787,8 @@ overrides:
             media: clips
             size: 100
             show_details: false
-            show_controls: false
+            show_favorite_control: true
+            show_timeline_control: true
             mode: none
           title:
             mode: popup-bottom-right

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
@@ -292,7 +295,7 @@ export class FrigateCardGalleryCore extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-		"frigate-card-gallery-core": FrigateCardGalleryCore
+    'frigate-card-gallery-core': FrigateCardGalleryCore;
-		"frigate-card-gallery": FrigateCardGallery
+    '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"

src/config-mgmt.ts

@@ -27,14 +27,14 @@ import {
   CONF_OVERRIDES,
   CONF_VIEW_DEFAULT,
   CONF_VIEW_TIMEOUT_SECONDS,
-  CONF_VIEW_UPDATE_ENTITIES
+  CONF_VIEW_UPDATE_ENTITIES,
 } from './const';
 import {
   BUTTON_SIZE_MIN,
   RawFrigateCardConfig,
   RawFrigateCardConfigArray,
   THUMBNAIL_WIDTH_MAX,
-  THUMBNAIL_WIDTH_MIN
+  THUMBNAIL_WIDTH_MIN,
 } from './types';
 
 /**
@@ -221,26 +221,28 @@ export const moveConfigValue = (
   obj: RawFrigateCardConfig,
   oldPath: string,
   newPath: string,
-  transform?: (valueIn: unknown) => unknown,
+  options?: {
-  keepOriginal?: boolean,
+    transform?: (valueIn: unknown) => unknown;
+    keepOriginal?: boolean;
+  },
 ): boolean => {
   const inValue = getConfigValue(obj, oldPath);
   if (inValue === undefined) {
     return false;
   }
-  const outValue = transform ? transform(inValue) : inValue;
+  const outValue = options?.transform ? options.transform(inValue) : inValue;
   if (oldPath === newPath && isEqual(inValue, outValue)) {
     return false;
   }
   if (outValue === null) {
-    if (!keepOriginal) {
+    if (!options?.keepOriginal) {
       deleteConfigValue(obj, oldPath);
       return true;
     }
     return false;
   }
   if (outValue !== undefined) {
-    if (!keepOriginal) {
+    if (!options?.keepOriginal) {
       deleteConfigValue(obj, oldPath);
     }
     setConfigValue(obj, newPath, outValue);
@@ -269,11 +271,13 @@ export const getArrayConfigPath = (path: string, index: number): string => {
 const upgradeMoveTo = function (
   oldPath: string,
   newPath: string,
-  transform?: (valueIn: unknown) => unknown,
+  options?: {
-  keepOriginal?: boolean,
+    transform?: (valueIn: unknown) => unknown;
+    keepOriginal?: boolean;
+  },
 ): (obj: RawFrigateCardConfig) => boolean {
   return function (obj: RawFrigateCardConfig): boolean {
-    return moveConfigValue(obj, oldPath, newPath, transform, keepOriginal);
+    return moveConfigValue(obj, oldPath, newPath, options);
   };
 };
 
@@ -288,15 +292,17 @@ const upgradeMoveTo = function (
 const upgradeMoveToWithOverrides = function (
   oldPath: string,
   newPath: string,
-  transform?: (valueIn: unknown) => unknown,
+  options?: {
-  keepOriginal?: boolean,
+    transform?: (valueIn: unknown) => unknown;
+    keepOriginal?: boolean;
+  },
 ): (obj: RawFrigateCardConfig) => boolean {
   return function (obj: RawFrigateCardConfig): boolean {
-    let modified = upgradeMoveTo(oldPath, newPath, transform, keepOriginal)(obj);
+    let modified = upgradeMoveTo(oldPath, newPath, options)(obj);
     modified =
       upgradeArrayValue(
         CONF_OVERRIDES,
-        upgradeMoveTo(oldPath, newPath, transform, keepOriginal),
+        upgradeMoveTo(oldPath, newPath, options),
         (obj) => obj.overrides as RawFrigateCardConfig | undefined,
       )(obj) || modified;
     return modified;
@@ -311,9 +317,9 @@ const upgradeMoveToWithOverrides = function (
  */
 const upgradeWithOverrides = function (
   path: string,
-  transform?: (valueIn: unknown) => unknown,
+  transform: (valueIn: unknown) => unknown,
 ): (obj: RawFrigateCardConfig) => boolean {
-  return upgradeMoveToWithOverrides(path, path, transform);
+  return upgradeMoveToWithOverrides(path, path, { transform: transform });
 };
 
 /**
@@ -324,9 +330,9 @@ const upgradeWithOverrides = function (
  */
 const upgrade = function (
   path: string,
-  transform?: (valueIn: unknown) => unknown,
+  transform: (valueIn: unknown) => unknown,
 ): (obj: RawFrigateCardConfig) => boolean {
-  return upgradeMoveTo(path, path, transform);
+  return upgradeMoveTo(path, path, { transform: transform });
 };
 
 /**
@@ -402,10 +408,8 @@ const upgradeMenuModeToStyleAndPosition = (): ((
 
     // Change the 'start' of the mode into a style.
     modified =
-      upgradeMoveToWithOverrides(
+      upgradeMoveToWithOverrides('menu.mode', CONF_MENU_STYLE, {
-        'menu.mode',
+        transform: (mode: unknown): string | undefined => {
-        CONF_MENU_STYLE,
-        (mode: unknown): string | undefined => {
           if (typeof mode === 'string') {
             const result = mode.match(/^(hover|hidden|overlay|above|below|none)/);
             if (result) {
@@ -423,15 +427,13 @@ const upgradeMenuModeToStyleAndPosition = (): ((
           }
           return undefined;
         },
-        true,
+        keepOriginal: true,
-      )(obj) || modified;
+      })(obj) || modified;
 
     // Change the 'end' of the mode into a position.
     modified =
-      upgradeMoveToWithOverrides(
+      upgradeMoveToWithOverrides('menu.mode', CONF_MENU_POSITION, {
-        'menu.mode',
+        transform: (mode: unknown): string | undefined => {
-        CONF_MENU_POSITION,
-        (mode: unknown): string | undefined => {
           if (typeof mode === 'string') {
             const result = mode.match(/(above|below|left|right|top|bottom)$/);
             if (result) {
@@ -450,8 +452,8 @@ const upgradeMenuModeToStyleAndPosition = (): ((
           }
           return undefined;
         },
-        true,
+        keepOriginal: true,
-      )(obj) || modified;
+      })(obj) || modified;
 
     // Delete the old `menu.mode` .
     return upgradeWithOverrides('menu.mode', deleteProperty)(obj) || modified;
@@ -510,6 +512,38 @@ const menuButtonBooleanToObject = function (
   return { enabled: value };
 };
 
+/**
+ * Upgrade from a show_controls key to individual favorite/timeline keys.
+ * @returns An upgrade function.
+ */
+const upgradeThumbnailShowControlsToIndividualControls = (
+  thumbnailsBasePath: string,
+): ((obj: RawFrigateCardConfig) => boolean) => {
+  const thumbnailsShowControlsPath = `${thumbnailsBasePath}.show_controls`;
+
+  return function (obj: RawFrigateCardConfig): boolean {
+    let modified = false;
+    modified =
+      upgradeMoveToWithOverrides(
+        thumbnailsShowControlsPath,
+        `${thumbnailsBasePath}.show_favorite_control`,
+        { keepOriginal: true },
+      )(obj) || modified;
+
+    modified =
+      upgradeMoveToWithOverrides(
+        thumbnailsShowControlsPath,
+        `${thumbnailsBasePath}.show_timeline_control`,
+        { keepOriginal: true },
+      )(obj) || modified;
+
+    // Delete the old `show_controls`.
+    return (
+      upgradeWithOverrides(thumbnailsShowControlsPath, deleteProperty)(obj) || modified
+    );
+  };
+};
+
 const UPGRADES = [
   // v1.2.1 -> v2.0.0
   upgradeMoveTo('frigate_url', 'frigate.url'),
@@ -528,7 +562,7 @@ const UPGRADES = [
   upgradeMoveTo('menu_mode', 'menu.mode'),
   upgradeMoveTo('menu_buttons', 'menu.buttons'),
   upgradeMoveTo('menu_button_size', CONF_MENU_BUTTON_SIZE),
-  upgradeMoveTo('image', 'image.src', isNotObject),
+  upgradeMoveTo('image', 'image.src', { transform: isNotObject }),
 
   // v2.0.0 -> v2.1.0
   upgradeMoveTo('update_entities', CONF_VIEW_UPDATE_ENTITIES),
@@ -536,7 +570,9 @@ const UPGRADES = [
   // v2.1.0 -> v3.0.0-rc.1
   upgradeToMultipleCameras(),
   upgradeMenuConditionToMenuOverride(),
-  upgradeMoveTo('view.timeout', CONF_VIEW_TIMEOUT_SECONDS, toNumberOrIgnore),
+  upgradeMoveTo('view.timeout', CONF_VIEW_TIMEOUT_SECONDS, {
+    transform: toNumberOrIgnore,
+  }),
   upgradeMoveTo('event_viewer.autoplay_clip', 'event_viewer.auto_play'),
 
   // v3.0.0-rc.1 -> v3.0.0-rc.2
@@ -600,4 +636,10 @@ const UPGRADES = [
   upgradeArrayValue(CONF_CAMERAS, upgradeMoveTo('label', 'frigate.label')),
   upgradeArrayValue(CONF_CAMERAS, upgradeMoveTo('frigate_url', 'frigate.url')),
   upgradeArrayValue(CONF_CAMERAS, upgradeMoveTo('zone', 'frigate.zone')),
+
+  // v4.0.0-rc.1 -> v4.0.0-rc.3
+  upgradeThumbnailShowControlsToIndividualControls('event_gallery.controls.thumbnails'),
+  upgradeThumbnailShowControlsToIndividualControls('media_viewer.controls.thumbnails'),
+  upgradeThumbnailShowControlsToIndividualControls('live.controls.thumbnails'),
+  upgradeThumbnailShowControlsToIndividualControls('timeline.controls.thumbnails'),
 ];

src/const.ts

@@ -54,8 +54,10 @@ export const CONF_VIEW_SCAN_UNTRIGGER_SECONDS =
 export const CONF_EVENT_GALLERY = 'event_gallery' 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 =
+export const CONF_EVENT_GALLERY_CONTROLS_THUMBNAILS_SHOW_FAVORITE_CONTROL =
-  `${CONF_EVENT_GALLERY}.controls.thumbnails.show_controls` as const;
+  `${CONF_EVENT_GALLERY}.controls.thumbnails.show_favorite_control` as const;
+export const CONF_EVENT_GALLERY_CONTROLS_THUMBNAILS_SHOW_TIMELINE_CONTROL =
+  `${CONF_EVENT_GALLERY}.controls.thumbnails.show_timeline_control` as const;
 export const CONF_EVENT_GALLERY_CONTROLS_THUMBNAILS_SIZE =
   `${CONF_EVENT_GALLERY}.controls.thumbnails.size` as const;
 
@@ -76,8 +78,10 @@ export const CONF_MEDIA_VIEWER_CONTROLS_THUMBNAILS_MODE =
   `${CONF_MEDIA_VIEWER}.controls.thumbnails.mode` as const;
 export const CONF_MEDIA_VIEWER_CONTROLS_THUMBNAILS_SHOW_DETAILS =
   `${CONF_MEDIA_VIEWER}.controls.thumbnails.show_details` as const;
-export const CONF_MEDIA_VIEWER_CONTROLS_THUMBNAILS_SHOW_CONTROLS =
+export const CONF_MEDIA_VIEWER_CONTROLS_THUMBNAILS_SHOW_FAVORITE_CONTROL =
-  `${CONF_MEDIA_VIEWER}.controls.thumbnails.show_controls` as const;
+  `${CONF_MEDIA_VIEWER}.controls.thumbnails.show_favorite_control` as const;
+export const CONF_MEDIA_VIEWER_CONTROLS_THUMBNAILS_SHOW_TIMELINE_CONTROL =
+  `${CONF_MEDIA_VIEWER}.controls.thumbnails.show_timeline_control` as const;
 export const CONF_MEDIA_VIEWER_CONTROLS_THUMBNAILS_SIZE =
   `${CONF_MEDIA_VIEWER}.controls.thumbnails.size` as const;
 export const CONF_MEDIA_VIEWER_CONTROLS_TITLE_MODE =
@@ -102,8 +106,10 @@ 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 =
+export const CONF_LIVE_CONTROLS_THUMBNAILS_SHOW_FAVORITE_CONTROL =
-  `${CONF_LIVE}.controls.thumbnails.show_controls` as const;
+  `${CONF_LIVE}.controls.thumbnails.show_favorite_control` as const;
+export const CONF_LIVE_CONTROLS_THUMBNAILS_SHOW_TIMELINE_CONTROL =
+  `${CONF_LIVE}.controls.thumbnails.show_timeline_control` 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;
@@ -132,8 +138,10 @@ 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 =
+export const CONF_TIMELINE_CONTROLS_THUMBNAILS_SHOW_FAVORITE_CONTROL =
-  `${CONF_TIMELINE}.controls.thumbnails.show_controls` as const;
+  `${CONF_TIMELINE}.controls.thumbnails.show_favorite_control` as const;
+export const CONF_TIMELINE_CONTROLS_THUMBNAILS_SHOW_TIMELINE_CONTROL =
+  `${CONF_TIMELINE}.controls.thumbnails.show_timeline_control` as const;
 
 export const CONF_MENU = 'menu' as const;
 export const CONF_MENU_ALIGNMENT = `${CONF_MENU}.alignment` as const;

src/editor.ts

@@ -32,8 +32,9 @@ import {
   CONF_CAMERAS_ARRAY_WEBRTC_CARD_URL,
   CONF_DIMENSIONS_ASPECT_RATIO,
   CONF_DIMENSIONS_ASPECT_RATIO_MODE,
-  CONF_EVENT_GALLERY_CONTROLS_THUMBNAILS_SHOW_CONTROLS,
   CONF_EVENT_GALLERY_CONTROLS_THUMBNAILS_SHOW_DETAILS,
+  CONF_EVENT_GALLERY_CONTROLS_THUMBNAILS_SHOW_FAVORITE_CONTROL,
+  CONF_EVENT_GALLERY_CONTROLS_THUMBNAILS_SHOW_TIMELINE_CONTROL,
   CONF_EVENT_GALLERY_CONTROLS_THUMBNAILS_SIZE,
   CONF_IMAGE_MODE,
   CONF_IMAGE_REFRESH_SECONDS,
@@ -46,8 +47,9 @@ 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_SHOW_FAVORITE_CONTROL,
+  CONF_LIVE_CONTROLS_THUMBNAILS_SHOW_TIMELINE_CONTROL,
   CONF_LIVE_CONTROLS_THUMBNAILS_SIZE,
   CONF_LIVE_CONTROLS_TITLE_DURATION_SECONDS,
   CONF_LIVE_CONTROLS_TITLE_MODE,
@@ -63,8 +65,9 @@ import {
   CONF_MEDIA_VIEWER_CONTROLS_NEXT_PREVIOUS_SIZE,
   CONF_MEDIA_VIEWER_CONTROLS_NEXT_PREVIOUS_STYLE,
   CONF_MEDIA_VIEWER_CONTROLS_THUMBNAILS_MODE,
-  CONF_MEDIA_VIEWER_CONTROLS_THUMBNAILS_SHOW_CONTROLS,
   CONF_MEDIA_VIEWER_CONTROLS_THUMBNAILS_SHOW_DETAILS,
+  CONF_MEDIA_VIEWER_CONTROLS_THUMBNAILS_SHOW_FAVORITE_CONTROL,
+  CONF_MEDIA_VIEWER_CONTROLS_THUMBNAILS_SHOW_TIMELINE_CONTROL,
   CONF_MEDIA_VIEWER_CONTROLS_THUMBNAILS_SIZE,
   CONF_MEDIA_VIEWER_CONTROLS_TITLE_DURATION_SECONDS,
   CONF_MEDIA_VIEWER_CONTROLS_TITLE_MODE,
@@ -78,8 +81,9 @@ import {
   CONF_MENU_STYLE,
   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_SHOW_FAVORITE_CONTROL,
+  CONF_TIMELINE_CONTROLS_THUMBNAILS_SHOW_TIMELINE_CONTROL,
   CONF_TIMELINE_CONTROLS_THUMBNAILS_SIZE,
   CONF_TIMELINE_MEDIA,
   CONF_TIMELINE_SHOW_RECORDINGS,
@@ -1233,8 +1237,12 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
                       defaults.live.controls.thumbnails.show_details,
                     )}
                     ${this._renderSwitch(
-                      CONF_LIVE_CONTROLS_THUMBNAILS_SHOW_CONTROLS,
+                      CONF_LIVE_CONTROLS_THUMBNAILS_SHOW_FAVORITE_CONTROL,
-                      defaults.live.controls.thumbnails.show_controls,
+                      defaults.live.controls.thumbnails.show_favorite_control,
+                    )}
+                    ${this._renderSwitch(
+                      CONF_LIVE_CONTROLS_THUMBNAILS_SHOW_TIMELINE_CONTROL,
+                      defaults.live.controls.thumbnails.show_timeline_control,
                     )}
                     ${this._renderNumberInput(
                       CONF_LIVE_CONTROLS_TITLE_DURATION_SECONDS,
@@ -1268,8 +1276,12 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
                   defaults.media_viewer.controls.thumbnails.show_details,
                 )}
                 ${this._renderSwitch(
-                  CONF_EVENT_GALLERY_CONTROLS_THUMBNAILS_SHOW_CONTROLS,
+                  CONF_EVENT_GALLERY_CONTROLS_THUMBNAILS_SHOW_FAVORITE_CONTROL,
-                  defaults.media_viewer.controls.thumbnails.show_controls,
+                  defaults.media_viewer.controls.thumbnails.show_favorite_control,
+                )}
+                ${this._renderSwitch(
+                  CONF_EVENT_GALLERY_CONTROLS_THUMBNAILS_SHOW_TIMELINE_CONTROL,
+                  defaults.media_viewer.controls.thumbnails.show_timeline_control,
                 )}`,
               )}
             </div>`
@@ -1333,8 +1345,12 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
                   defaults.media_viewer.controls.thumbnails.show_details,
                 )}
                 ${this._renderSwitch(
-                  CONF_MEDIA_VIEWER_CONTROLS_THUMBNAILS_SHOW_CONTROLS,
+                  CONF_MEDIA_VIEWER_CONTROLS_THUMBNAILS_SHOW_FAVORITE_CONTROL,
-                  defaults.media_viewer.controls.thumbnails.show_controls,
+                  defaults.media_viewer.controls.thumbnails.show_favorite_control,
+                )}
+                ${this._renderSwitch(
+                  CONF_MEDIA_VIEWER_CONTROLS_THUMBNAILS_SHOW_TIMELINE_CONTROL,
+                  defaults.media_viewer.controls.thumbnails.show_timeline_control,
                 )}
                 ${this._renderOptionSelector(
                   CONF_MEDIA_VIEWER_CONTROLS_TITLE_MODE,
@@ -1386,8 +1402,12 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
                   defaults.timeline.controls.thumbnails.show_details,
                 )}
                 ${this._renderSwitch(
-                  CONF_TIMELINE_CONTROLS_THUMBNAILS_SHOW_CONTROLS,
+                  CONF_TIMELINE_CONTROLS_THUMBNAILS_SHOW_FAVORITE_CONTROL,
-                  defaults.timeline.controls.thumbnails.show_controls,
+                  defaults.timeline.controls.thumbnails.show_favorite_control,
+                )}
+                ${this._renderSwitch(
+                  CONF_TIMELINE_CONTROLS_THUMBNAILS_SHOW_TIMELINE_CONTROL,
+                  defaults.timeline.controls.thumbnails.show_timeline_control,
                 )}`,
               )}
             </div>`

src/localize/languages/en.json

@@ -71,7 +71,8 @@
       "controls": {
         "options": "Event Gallery Controls",
         "thumbnails": {
-          "show_controls": "Show event controls with thumbnails",
+          "show_favorite_control": "Show favorite control on thumbnails",
+          "show_timeline_control": "Show timeline control on thumbnails",
           "show_details": "Show event details with thumbnails",
           "size": "Event Gallery thumbnails size in pixels"
         }
@@ -110,7 +111,8 @@
             "snapshots": "Snapshot thumbnails"
           },
           "mode": "Live thumbnails mode",
-          "show_controls": "Show event controls with thumbnails",
+          "show_favorite_control": "Show favorite control on thumbnails",
+          "show_timeline_control": "Show timeline control on thumbnails",
           "show_details": "Show event details with thumbnails",
           "size": "Live thumbnails size in pixels"
         },
@@ -150,7 +152,8 @@
             "none": "No thumbnails",
             "right": "Thumbnails in a drawer right of the media"
           },
-          "show_controls": "Show controls with thumbnails",
+          "show_favorite_control": "Show favorite control on thumbnails",
+          "show_timeline_control": "Show timeline control on thumbnails",
           "show_details": "Show details with thumbnails",
           "size": "Media Viewer thumbnails size in pixels"
         },
@@ -229,7 +232,8 @@
         "options": "Timeline Controls",
         "thumbnails": {
           "mode": "Timeline thumbnails mode",
-          "show_controls": "Show event controls with thumbnails",
+          "show_favorite_control": "Show favorite control on thumbnails",
+          "show_timeline_control": "Show timeline control on thumbnails",
           "show_details": "Show event details with thumbnails",
           "size": "Timeline thumbnails size in pixels"
         }

src/localize/languages/pt-BR.json

@@ -71,7 +71,8 @@
       "controls": {
         "options": "Controles da Galeria de Eventos",
         "thumbnails": {
-          "show_controls": "Mostrar controles de eventos com miniaturas",
+          "show_favorite_control": "",
+          "show_timeline_control": "",
           "show_details": "Mostrar detalhes do evento com miniaturas",
           "size": "Tamanho das miniaturas da Galeria de eventos em pixels"
         }
@@ -110,7 +111,8 @@
             "snapshots": "Miniaturas de Snapshots"
           },
           "mode": "Miniaturas do modo ao vivo",
-          "show_controls": "Mostrar controles de eventos com miniaturas",
+          "show_favorite_control": "",
+          "show_timeline_control": "",
           "show_details": "Mostrar detalhes do evento com miniaturas",
           "size": "Tamanho das miniaturas ao vivo (e.g. '100px')"
         },
@@ -150,7 +152,8 @@
             "none": "Sem miniaturas",
             "right": "Miniaturas em uma gaveta à direita da mídia"
           },
-          "show_controls": "Mostrar controles com miniaturas",
+          "show_favorite_control": "",
+          "show_timeline_control": "",
           "show_details": "Mostrar detalhes com miniaturas",
           "size": "Tamanho das miniaturas do Visualizador de eventos (por exemplo, '100px')"
         },
@@ -231,7 +234,8 @@
         "options": "Controles de linha do tempo",
         "thumbnails": {
           "mode": "Modo de miniaturas da linha do tempo",
-          "show_controls": "Mostrar controles de eventos com miniaturas",
+          "show_favorite_control": "",
+          "show_timeline_control": "",
           "show_details": "Mostrar detalhes do evento com miniaturas",
           "size": "Tamanho das miniaturas da linha do tempo em pixels"
         }

src/types.ts

@@ -591,7 +591,8 @@ const thumbnailsControlSchema = z.object({
   mode: z.enum(['none', 'above', 'below', 'left', 'right']),
   size: z.number().min(THUMBNAIL_WIDTH_MIN).max(THUMBNAIL_WIDTH_MAX).optional(),
   show_details: z.boolean().optional(),
-  show_controls: z.boolean().optional(),
+  show_favorite_control: z.boolean().optional(),
+  show_timeline_control: z.boolean().optional(),
 });
 export type ThumbnailsControlConfig = z.infer<typeof thumbnailsControlSchema>;
 
@@ -648,7 +649,8 @@ const liveConfigDefault = {
       media: 'clips' as const,
       size: 100,
       show_details: true,
-      show_controls: true,
+      show_favorite_control: true,
+      show_timeline_control: true,
       mode: 'left' as const,
     },
     title: {
@@ -712,8 +714,11 @@ const liveOverridableConfigSchema = z
             show_details: thumbnailsControlSchema.shape.show_details.default(
               liveConfigDefault.controls.thumbnails.show_details,
             ),
-            show_controls: thumbnailsControlSchema.shape.show_controls.default(
+            show_favorite_control: thumbnailsControlSchema.shape.show_favorite_control.default(
-              liveConfigDefault.controls.thumbnails.show_controls,
+              liveConfigDefault.controls.thumbnails.show_favorite_control,
+            ),
+            show_timeline_control: thumbnailsControlSchema.shape.show_timeline_control.default(
+              liveConfigDefault.controls.thumbnails.show_timeline_control,
             ),
             media: z
               .enum(['clips', 'snapshots'])
@@ -851,7 +856,8 @@ const viewerConfigDefault = {
     thumbnails: {
       size: 100,
       show_details: true,
-      show_controls: true,
+      show_favorite_control: true,
+      show_timeline_control: true,
       mode: 'left' as const,
     },
     title: {
@@ -907,8 +913,11 @@ const viewerConfigSchema = z
             show_details: thumbnailsControlSchema.shape.show_details.default(
               viewerConfigDefault.controls.thumbnails.show_details,
             ),
-            show_controls: thumbnailsControlSchema.shape.show_controls.default(
+            show_favorite_control: thumbnailsControlSchema.shape.show_favorite_control.default(
-              viewerConfigDefault.controls.thumbnails.show_controls,
+              viewerConfigDefault.controls.thumbnails.show_favorite_control,
+            ),
+            show_timeline_control: thumbnailsControlSchema.shape.show_timeline_control.default(
+              viewerConfigDefault.controls.thumbnails.show_timeline_control,
             ),
           })
           .default(viewerConfigDefault.controls.thumbnails),
@@ -937,7 +946,8 @@ const galleryConfigDefault = {
     thumbnails: {
       size: 100,
       show_details: false,
-      show_controls: false,
+      show_favorite_control: true,
+      show_timeline_control: true,
     },
   },
 };
@@ -956,8 +966,11 @@ const galleryConfigSchema = z
             show_details: thumbnailsControlSchema.shape.show_details.default(
               galleryConfigDefault.controls.thumbnails.show_details,
             ),
-            show_controls: thumbnailsControlSchema.shape.show_controls.default(
+            show_favorite_control: thumbnailsControlSchema.shape.show_favorite_control.default(
-              galleryConfigDefault.controls.thumbnails.show_controls,
+              galleryConfigDefault.controls.thumbnails.show_favorite_control,
+            ),
+            show_timeline_control: thumbnailsControlSchema.shape.show_timeline_control.default(
+              galleryConfigDefault.controls.thumbnails.show_timeline_control,
             ),
           })
           .default(galleryConfigDefault.controls.thumbnails),
@@ -1007,7 +1020,8 @@ const timelineConfigDefault = {
       mode: 'left' as const,
       size: 100,
       show_details: true,
-      show_controls: true,
+      show_favorite_control: true,
+      show_timeline_control: true,
     },
   },
 };
@@ -1044,8 +1058,11 @@ const timelineConfigSchema = z
             show_details: thumbnailsControlSchema.shape.show_details.default(
               timelineConfigDefault.controls.thumbnails.show_details,
             ),
-            show_controls: thumbnailsControlSchema.shape.show_controls.default(
+            show_favorite_control: thumbnailsControlSchema.shape.show_favorite_control.default(
-              timelineConfigDefault.controls.thumbnails.show_controls,
+              timelineConfigDefault.controls.thumbnails.show_favorite_control,
+            ),
+            show_timeline_control: thumbnailsControlSchema.shape.show_timeline_control.default(
+              timelineConfigDefault.controls.thumbnails.show_timeline_control,
             ),
           })
           .default(timelineConfigDefault.controls.thumbnails),