Minor refactor for consistency.

src/components/carousel.ts

@@ -1,8 +1,6 @@
 import {
   CSSResultGroup,
   LitElement,
-  TemplateResult,
-  html,
   unsafeCSS,
   PropertyValues,
 } from 'lit';
@@ -53,14 +51,6 @@ export class FrigateCardCarousel extends LitElement {
     }
   }
 
-  /**
-   * Get slides to include in the render.
-   * @returns The slides to include in the render.
-   */
-  protected _getSlides(): TemplateResult[] {
-    return [];
-  }
-
   /**
    * Load the carousel with "slides".
    */
@@ -83,23 +73,6 @@ export class FrigateCardCarousel extends LitElement {
     }
   }
 
-  /**
-   * Render the element.
-   * @returns A template to display to the user.
-   */
-  protected render(): TemplateResult | void {
-    const slides = this._getSlides();
-    if (!slides) {
-      return;
-    }
-
-    return html` <div class="embla">
-      <div class="embla__viewport">
-        <div class="embla__container">${slides}</div>
-      </div>
-    </div>`;
-  }
-
   /**
    * Get element styles.
    */

src/components/menu.ts

@@ -45,7 +45,7 @@ export class FrigateCardMenu extends LitElement {
       this.style.setProperty('--frigate-card-menu-button-size', menuConfig.button_size);
     }
   }
-  public _menuConfig?: MenuConfig;
+  protected _menuConfig?: MenuConfig;
 
   @property({ attribute: false })
   protected expand = false;

src/components/thumbnail-carousel.ts

@@ -23,7 +23,7 @@ export class FrigateCardThumbnailCarousel extends FrigateCardCarousel {
       this.style.setProperty('--frigate-card-viewer-thumbnail-size', config.size);
     }
   }
-  public _config?: ThumbnailsControlConfig;
+  protected _config?: ThumbnailsControlConfig;
 
   constructor() {
     super();
@@ -102,6 +102,23 @@ export class FrigateCardThumbnailCarousel extends FrigateCardCarousel {
     </div>`;
   }
 
+  /**
+   * Render the element.
+   * @returns A template to display to the user.
+   */
+  protected render(): TemplateResult | void {
+    const slides = this._getSlides();
+    if (!slides || !this._config || this._config.mode == 'none') {
+      return;
+    }
+
+    return html` <div class="embla">
+      <div class="embla__viewport">
+        <div class="embla__container">${slides}</div>
+      </div>
+    </div>`;
+  }
+
   /**
    * Get element styles.
    */

src/components/viewer.ts

@@ -510,24 +510,21 @@ export class FrigateCardMediaCarousel extends FrigateCardCarousel {
   }
 
   /**
-   * Render the element.
-   * @returns A template to display to the user.
+   * Get slides to include in the render.
+   * @returns The slides to include in the render.
    */
-  protected render(): TemplateResult | void {
+  protected _getSlides(): TemplateResult[] {
     if (
       !this.view ||
       !this.view.target ||
       !this.view.target.children ||
-      !this.view.target.children.length ||
-      this.view.childIndex === undefined ||
-      !this.resolvedMediaCache
+      !this.view.target.children.length
     ) {
-      return html``;
+      return [];
     }
 
-    const slides: TemplateResult[] = [];
     this._slideToChild = {};
-
+    const slides: TemplateResult[] = [];
     for (let i = 0; i < this.view.target.children?.length; ++i) {
       const slide = this._renderMediaItem(this.view.target.children[i], slides.length);
 
@@ -536,6 +533,18 @@ export class FrigateCardMediaCarousel extends FrigateCardCarousel {
         slides.push(slide);
       }
     }
+    return slides;
+  }
+
+  /**
+   * Render the element.
+   * @returns A template to display to the user.
+   */
+  protected render(): TemplateResult | void {
+    const slides = this._getSlides();
+    if (!slides) {
+      return;
+    }
 
     const neighbors = this._getMediaNeighbors();