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`
-
-
${slides}
-
-
`; - } - /** * 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`
+
+
${slides}
+
+
`; + } + /** * 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();