Refactor thumbnail sizing.

src/components/gallery.ts

@@ -11,7 +11,12 @@ import {
 } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import galleryStyle from '../scss/gallery.scss';
-import { CameraConfig, frigateCardConfigDefaults, GalleryConfig } from '../types.js';
+import {
+  CameraConfig,
+  frigateCardConfigDefaults,
+  GalleryConfig,
+  THUMBNAIL_WIDTH_MAX
+} from '../types.js';
 import { stopEventFromActivatingCardWideActions } from '../utils/action.js';
 import {
   fetchChildMediaAndDispatchViewChange,
@@ -135,20 +140,28 @@ export class FrigateCardGalleryCore extends LitElement {
   }
 
   /**
-   * Handle gallery resize.
+   * Set gallery columns.
    */
-  protected _resizeHandler(): void {
+  protected _setColumnCount(): void {
     const thumbnailSize =
       this.galleryConfig?.controls.thumbnails.size ??
       frigateCardConfigDefaults.event_gallery.controls.thumbnails.size;
-    this.style.setProperty(
-      '--frigate-card-gallery-columns',
-      String(
-        !this.galleryConfig?.controls.thumbnails.show_details
-          ? Math.round(this.clientWidth / thumbnailSize)
-          : Math.max(1, Math.floor(this.clientWidth / THUMBNAIL_DETAILS_WIDTH_MIN)),
-      ),
-    );
+    const columns = this.galleryConfig?.controls.thumbnails.show_details
+      ? Math.max(1, Math.floor(this.clientWidth / THUMBNAIL_DETAILS_WIDTH_MIN))
+      : Math.max(
+          1,
+          Math.ceil(this.clientWidth / THUMBNAIL_WIDTH_MAX),
+          Math.ceil(this.clientWidth / thumbnailSize),
+        );
+
+    this.style.setProperty('--frigate-card-gallery-columns', String(columns));
+  }
+
+  /**
+   * Handle gallery resize.
+   */
+  protected _resizeHandler(): void {
+    this._setColumnCount();
   }
 
   /**
@@ -174,6 +187,7 @@ export class FrigateCardGalleryCore extends LitElement {
       } else {
         this.removeAttribute('details');
       }
+      this._setColumnCount();
       if (this.galleryConfig?.controls.thumbnails.size) {
         this.style.setProperty(
           '--frigate-card-thumbnail-size',
@@ -230,7 +244,6 @@ export class FrigateCardGalleryCore extends LitElement {
                       stopEventFromActivatingCardWideActions(ev);
                     }}
                     outlined=""
-                    class="foo"
                   >
                     <div>${child.title}</div>
                   </ha-card>

src/components/thumbnail-carousel.ts

@@ -2,7 +2,6 @@ import { EmblaOptionsType } from 'embla-carousel';
 import { CSSResultGroup, html, PropertyValues, TemplateResult, unsafeCSS } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
 import thumbnailCarouselStyle from '../scss/thumbnail-carousel.scss';
 import type { FrigateBrowseMediaSource, ThumbnailsControlConfig } from '../types.js';
 import { stopEventFromActivatingCardWideActions } from '../utils/action.js';
@@ -120,6 +119,21 @@ export class FrigateCardThumbnailCarousel extends FrigateCardCarousel {
     return slides;
   }
 
+  /**
+   * Called when an update will occur.
+   * @param changedProps The changed properties
+   */
+  protected willUpdate(changedProps: PropertyValues): void {
+    if (changedProps.has('_config')) {
+      if (this._config?.size) {
+        this.style.setProperty(
+          '--frigate-card-thumbnail-size',
+          `${this._config.size}px`,
+        );
+      }
+    }
+  }
+
   /**
    * The updated lifecycle callback for this element.
    * @param changedProperties The properties that were changed in this render.
@@ -170,7 +184,6 @@ export class FrigateCardThumbnailCarousel extends FrigateCardCarousel {
       .childIndex=${childIndex}
       ?details=${this._config?.show_details}
       ?controls=${this._config?.show_controls}
-      thumbnail_size=${ifDefined(this._config?.size)}
       class="${classMap(classes)}"
       @click=${(ev) => {
         if (this._carousel && this._carousel.clickAllowed()) {

src/components/thumbnail.ts

@@ -128,11 +128,6 @@ export class FrigateCardThumbnail extends LitElement {
   @property({ attribute: true, type: Boolean })
   public controls = false;
 
-  @property({ attribute: true, type: Number })
-  set thumbnail_size(size: number) {
-    this.style.setProperty('--frigate-card-thumbnail-size', `${size}px`);
-  }
-
   // ============================
   // Data-binding based interface
   // ============================

src/components/timeline.ts

@@ -497,9 +497,6 @@ export class FrigateCardTimelineCore extends LitElement {
       return '';
     }
 
-    const thumbnailSizeAttr = this.timelineConfig
-      ? `thumbnail_size="${this.timelineConfig.controls.thumbnails.size}"`
-      : '';
     const eventAttr = source.frigate?.event
       ? `event='${JSON.stringify(source.frigate.event)}'`
       : '';
@@ -516,7 +513,6 @@ export class FrigateCardTimelineCore extends LitElement {
         thumbnail="${source.thumbnail}"
         label="${source.title}"
         ${eventAttr}
-        ${thumbnailSizeAttr}
       >
       </frigate-card-thumbnail>`;
   }
@@ -1022,7 +1018,6 @@ export class FrigateCardTimelineCore extends LitElement {
               'thumbnail',
               'label',
               'event',
-              'thumbnail_size',
             ],
             div: ['title'],
             span: ['style'],
@@ -1152,6 +1147,21 @@ export class FrigateCardTimelineCore extends LitElement {
     return newContext || null;
   }
 
+  /**
+   * Called when an update will occur.
+   * @param changedProps The changed properties
+   */
+   protected willUpdate(changedProps: PropertyValues): void {
+    if (changedProps.has('timelineConfig')) {
+      if (this.timelineConfig?.controls.thumbnails.size) {
+        this.style.setProperty(
+          '--frigate-card-thumbnail-size',
+          `${this.timelineConfig.controls.thumbnails.size}px`,
+        );
+      }
+    }
+  }
+
   /**
    * Called when the component is updated.
    * @param changedProperties The changed properties if any.