Refactor thumbnail sizing.

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.