Performance improvements.

README.md

@@ -566,6 +566,11 @@ timeline:
 
 ### Dimensions Options
 
+These options control the aspect-ratio of the entire card to make placement in
+Home Assistant dashboards more stable. Aspect ratio configuration applies once
+to the entire card (including the menu, thumbnails, etc), not just to displayed
+media.
+
 All configuration is under:
 
 ```yaml

src/components/carousel.ts

@@ -87,7 +87,7 @@ export class FrigateCardCarousel extends LitElement {
     const destroyProperties = [
       'direction',
       'carouselOptions',
-      'carouselOptions',
+      'carouselPlugins',
     ] as const;
     if (destroyProperties.some((prop) => changedProps.has(prop))) {
       this._destroyCarousel();
@@ -255,11 +255,20 @@ export class FrigateCardCarousel extends LitElement {
         this._scrolling = true;
       });
       this._carousel.on('settle', () => {
+        // Reinitialize the carousel if a request to reinitialize was made
+        // during scrolling (instead the request is handled after the scrolling
+        // has settled).
         this._scrolling = false;
         if (this._reInitOnSettle) {
           this._reInitOnSettle = false;
           this._carouselReInitInPlace();
         }
+      })
+      this._carousel.on('settle', () => {
+        const selected = this.getCarouselSelected();
+        if (selected) {
+          dispatchFrigateCardEvent<CarouselSelect>(this, 'carousel:settle', selected);
+        }
       });
     }
   }

src/components/live.ts

@@ -489,8 +489,15 @@ export class FrigateCardLiveCarousel extends LitElement {
     const [prev, next] = this._getCameraNeighbors();
     const title = getCameraTitle(this.hass, this.cameras.get(this.view.camera));
 
-    // guard() is used below to avoid reseting the carousel unless the
+    // Notes on the below:
-    // options/plugins actually change.
+    // - guard() is used to avoid reseting the carousel unless the
+    //   options/plugins actually change.
+    // - the 'carousel:settle' event is listened for (instead of
+    //   'carousel:select') to only trigger the view change (which subsequently
+    //   fetches thumbnails) after the carousel has stopped moving. This gives a
+    //   much smoother carousel experience since network fetches are not at the
+    //   same time as carousel movement (at a cost of fetching thumbnails a
+    //   little later).
 
     return html`
       <frigate-card-media-carousel
@@ -506,8 +513,8 @@ export class FrigateCardLiveCarousel extends LitElement {
         .label="${title ? `${localize('common.live')}: ${title}` : ''}"
         .titlePopupConfig=${config.controls.title}
         transitionEffect=${this._getTransitionEffect()}
-        @frigate-card:carousel:select=${this._setViewHandler.bind(this)}
+        @frigate-card:carousel:settle=${this._setViewHandler.bind(this)}
-      >
+      > 
         <frigate-card-next-previous-control
           slot="previous"
           .direction=${'previous'}

src/components/thumbnail-carousel.ts

@@ -62,6 +62,15 @@ export class FrigateCardThumbnailCarousel extends LitElement {
   @state()
   protected _selected: number | null = null;
 
+  protected _carouselOptions?: EmblaOptionsType;
+  protected _carouselPlugins: EmblaPluginType[] = [
+    WheelGesturesPlugin({
+      // Whether the carousel is vertical or horizontal, interpret y-axis wheel
+      // gestures as scrolling for the carousel.
+      forceWheelAxis: 'y',
+    }),
+  ];
+
   constructor() {
     super();
     this._resizeObserver = new ResizeObserver(this._resizeHandler.bind(this));
@@ -110,22 +119,6 @@ export class FrigateCardThumbnailCarousel extends LitElement {
       startIndex: this._selected ?? 0,
     };
   }
-
-  /**
-   * Get the Embla plugins to use.
-   * @returns A list of EmblaOptionsTypes.
-   */
-  protected _getPlugins(): EmblaPluginType[] {
-    return [
-      // Only enable wheel plugin if there is more than one camera.
-      WheelGesturesPlugin({
-        // Whether the carousel is vertical or horizontal, interpret y-axis wheel
-        // gestures as scrolling for the carousel.
-        forceWheelAxis: 'y',
-      }),
-    ];
-  }
-
   /**
    * Get slides to include in the render.
    * @returns The slides to include in the render.
@@ -161,6 +154,14 @@ export class FrigateCardThumbnailCarousel extends LitElement {
         this.removeAttribute('direction');
       }
     }
+
+    if (!this._carouselOptions) {
+      // Want to set the initial carousel options just before the first render
+      // in order to get the startIndex correct in the options. It is not safe
+      // to rely on carouselScrollTo() post update, since the nested carousel
+      // may not yet be actual rendered/created.
+      this._carouselOptions = this._getOptions();
+    }
   }
 
   /**
@@ -257,8 +258,8 @@ export class FrigateCardThumbnailCarousel extends LitElement {
     return html`<frigate-card-carousel
       ${ref(this._refCarousel)}
       direction=${ifDefined(this._getDirection())}
-      .carouselOptions=${this._getOptions()}
+      .carouselOptions=${this._carouselOptions}
-      .carouselPlugins=${this._getPlugins()}
+      .carouselPlugins=${this._carouselPlugins}
     >
       ${slides}
     </frigate-card-carousel>`;

src/components/viewer.ts

@@ -608,8 +608,9 @@ export class FrigateCardViewerCarousel extends LitElement {
     const neighbors = this._getMediaNeighbors();
     const [prev, next] = [neighbors?.previous, neighbors?.next];
 
-    // guard() is used below to avoid reseting the carousel unless the
+    // Notes on the below:
-    // options/plugins actually change.
+    // - guard() is used to avoid reseting the carousel unless the
+    //   options/plugins actually change.
 
     return html` <frigate-card-media-carousel
       ${ref(this._refMediaCarousel)}