diff --git a/src/components/carousel.ts b/src/components/carousel.ts
index 955efcac..00ff0b1b 100644
--- a/src/components/carousel.ts
+++ b/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`
`;
- }
-
/**
* Get element styles.
*/
diff --git a/src/components/menu.ts b/src/components/menu.ts
index 5aacc472..0b8bd3ef 100644
--- a/src/components/menu.ts
+++ b/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;
diff --git a/src/components/thumbnail-carousel.ts b/src/components/thumbnail-carousel.ts
index 9ba3b2e7..c7f43e08 100644
--- a/src/components/thumbnail-carousel.ts
+++ b/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 {
`;
}
+ /**
+ * 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` `;
+ }
+
/**
* Get element styles.
*/
diff --git a/src/components/viewer.ts b/src/components/viewer.ts
index a4b63658..cd2fa7c8 100644
--- a/src/components/viewer.ts
+++ b/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();