diff --git a/README.md b/README.md index aa0017b5..df42745b 100644 --- a/README.md +++ b/README.md @@ -384,7 +384,7 @@ image: | - | - | - | - | | `mode` | `url` | :white_check_mark: | Mode of the the `image` [view](#views). Value must be one of `url` (to fetch an arbitrary image URL), `camera` (to show a still of the currently selected camera using either `camera_entity` or `webrtc_card.entity` in that order of precedence), or `screensaver` (to show an [embedded stock Frigate card logo](https://github.com/dermotduffy/frigate-hass-card/blob/main/src/images/frigate-bird-in-sky.jpg)). In either `url` or `camera` mode, the `screensaver` content is used as a fallback if a URL is not specified or cannot be derived. | | `url` | | :white_check_mark: | A static image URL to be used when the `mode` is set to `url`. Note that a `_t=[timestsamp]` query parameter will be automatically added to all URLs such that the image will not be cached by the browser.| -| `refresh_seconds` | 0 | :white_check_mark: | The number of seconds after which to refresh the image. `0` implies no refreshing. | +| `refresh_seconds` | 0 | :white_check_mark: | The image will be refreshed at least every `refresh_seconds` (it may refresh more frequently, e.g. whenever Home Assistant updates its camera security token). `0` implies no refreshing. | | `actions` | | :white_check_mark: | Actions to use for the `image` view. See [actions](#actions) below.| ### Dimension Options diff --git a/src/cached-value-controller.ts b/src/cached-value-controller.ts new file mode 100644 index 00000000..b5d7902d --- /dev/null +++ b/src/cached-value-controller.ts @@ -0,0 +1,73 @@ +import { ReactiveController, ReactiveControllerHost } from 'lit'; + +export class CachedValueController implements ReactiveController { + public value?: T; + + protected _host: ReactiveControllerHost; + protected _timerSeconds: number; + protected _callback: () => T; + protected _timerID?: number; + + constructor(host: ReactiveControllerHost, timerSeconds: number, callback: () => T) { + this._timerSeconds = timerSeconds; + this._callback = callback; + (this._host = host).addController(this); + } + + /** + * Remove the controller for the host. + */ + public removeController(): void { + this._host.removeController(this); + } + + /** + * Update the cached value (and reset the timer). + */ + public updateValue(): void { + this.value = this._callback(); + this._setTimer(); + } + + /** + * Update the value and render it. + */ + protected _updateValueAndRender(): void { + this.updateValue(); + this._host.requestUpdate(); + } + + /** + * Remove the timer. + */ + protected _removeTimer(): void { + clearInterval(this._timerID); + this._timerID = undefined; + } + + /** + * Set the timer. + */ + protected _setTimer(): void { + clearInterval(this._timerID); + if (this._timerSeconds > 0) { + this._timerID = window.setInterval(() => { + this._updateValueAndRender(); + }, this._timerSeconds * 1000); + } + } + + /** + * Host has connected to the cache. + */ + hostConnected(): void { + this._updateValueAndRender(); + } + + /** + * Host has disconnected from the cache. + */ + hostDisconnected(): void { + this._removeTimer(); + } +} diff --git a/src/card.ts b/src/card.ts index fe0b9069..51c78969 100644 --- a/src/card.ts +++ b/src/card.ts @@ -324,7 +324,11 @@ export class FrigateCard extends LitElement { // Don't show `clips` button if there's no `camera_name` (e.g. non-Frigate // cameras), or is birdseye. - if (this._getConfig().menu.buttons.clips && cameraConfig?.camera_name && cameraConfig?.camera_name !== 'birdseye') { + if ( + this._getConfig().menu.buttons.clips && + cameraConfig?.camera_name && + cameraConfig?.camera_name !== 'birdseye' + ) { buttons.push({ type: 'custom:frigate-card-menu-icon', title: localize('config.view.views.clips'), @@ -337,7 +341,11 @@ export class FrigateCard extends LitElement { // Don't show `snapshots` button if there's no `camera_name` (e.g. non-Frigate // cameras), or is birdseye. - if (this._getConfig().menu.buttons.snapshots && cameraConfig?.camera_name && cameraConfig?.camera_name !== 'birdseye') { + if ( + this._getConfig().menu.buttons.snapshots && + cameraConfig?.camera_name && + cameraConfig?.camera_name !== 'birdseye' + ) { buttons.push({ type: 'custom:frigate-card-menu-icon', title: localize('config.view.views.snapshots'), @@ -436,7 +444,7 @@ export class FrigateCard extends LitElement { } const id = - config.id || + config.id || config.camera_entity || config.webrtc_card?.entity || config.camera_name; @@ -678,12 +686,14 @@ export class FrigateCard extends LitElement { } /** - * Determine whether the card should be updated. + * Determine whether the element should be updated. * @param changedProps The changed properties if any. - * @returns True if the card should be updated. + * @returns `true` if the element should be updated. */ protected shouldUpdate(changedProps: PropertyValues): boolean { const oldHass = changedProps.get('_hass') as HomeAssistant | undefined; + let shouldUpdate = !oldHass || changedProps.size != 1; + if (oldHass) { // Home Assistant pumps a lot of updates through. Re-rendering the card is // necessary at times (e.g. to update the 'clip' view as new clips @@ -703,19 +713,16 @@ export class FrigateCard extends LitElement { // default. Note that as per the Lit lifecycle, the setting of the view // itself will not trigger an *additional* re-render here. this._changeView(); - return true; - } else if ( - shouldUpdateBasedOnHass( + shouldUpdate ||= true; + } else { + shouldUpdate ||= shouldUpdateBasedOnHass( this._hass, oldHass, this._getConfig().view.render_entities || [], - ) - ) { - return true; + ); } - return false; } - return true; + return shouldUpdate; } /** diff --git a/src/components/image.ts b/src/components/image.ts index 81d10925..da0eb9f4 100644 --- a/src/components/image.ts +++ b/src/components/image.ts @@ -1,62 +1,22 @@ import { CSSResultGroup, LitElement, + PropertyValues, TemplateResult, html, unsafeCSS, - ReactiveController, - ReactiveControllerHost, } from 'lit'; import { HomeAssistant } from 'custom-card-helpers'; import { customElement, property, state } from 'lit/decorators.js'; +import { CachedValueController } from '../cached-value-controller.js'; import { CameraConfig, ImageViewConfig } from '../types.js'; import { View } from '../view.js'; -import { dispatchMediaShowEvent } from '../common.js'; +import { dispatchMediaShowEvent, shouldUpdateBasedOnHass } from '../common.js'; import defaultImage from '../images/frigate-bird-in-sky.jpg'; import imageStyle from '../scss/image.scss'; -export class CachedValueController implements ReactiveController { - public value?: T; - - protected _host: ReactiveControllerHost; - protected _timerSeconds: number; - protected _callback: () => T; - protected _timerID?: number; - - constructor(host: ReactiveControllerHost, timerSeconds: number, callback: () => T) { - this._timerSeconds = timerSeconds; - this._callback = callback; - (this._host = host).addController(this); - } - - public removeController(): void { - this._host.removeController(this); - } - - protected _updateValue(): void { - this.value = this._callback(); - this._host.requestUpdate(); - } - - hostConnected(): void { - this._updateValue(); - - // Start a timer when the host is connected - if (this._timerSeconds > 0) { - this._timerID = window.setInterval(() => { - this._updateValue(); - }, this._timerSeconds * 1000); - } - } - hostDisconnected(): void { - // Clear the timer when the host is disconnected - clearInterval(this._timerID); - this._timerID = undefined; - } -} - @customElement('frigate-card-image') export class FrigateCardImage extends LitElement { @property({ attribute: false }) @@ -73,6 +33,9 @@ export class FrigateCardImage extends LitElement { protected _cachedValueController?: CachedValueController; + /** + * Set the image configuration. + */ set imageConfig(imageConfig: ImageViewConfig) { this._imageConfig = imageConfig; if (this._cachedValueController) { @@ -85,6 +48,37 @@ export class FrigateCardImage extends LitElement { ); } + /** + * Get the camera entity for the current camera configuration. + * @returns The entity or undefined if no camera entity is available. + */ + protected _getCameraEntity(): string | undefined { + return this.cameraConfig?.camera_entity || this.cameraConfig?.webrtc_card?.entity; + } + + /** + * Determine whether the element should be updated. + * @param changedProps The changed properties if any. + * @returns `true` if the element should be updated. + */ + protected shouldUpdate(changedProps: PropertyValues): boolean { + const oldHass = changedProps.get('hass') as HomeAssistant | undefined; + let shouldUpdate = !oldHass || changedProps.size != 1; + + // Image needs to update if the image view is in camera mode and the camera + // entity changes, as this could be a security token change. + if (oldHass && this._imageConfig?.mode === 'camera') { + const cameraEntity = this._getCameraEntity(); + if ( + shouldUpdateBasedOnHass(this.hass, oldHass, cameraEntity ? [cameraEntity] : []) + ) { + shouldUpdate ||= true; + this._cachedValueController?.updateValue(); + } + } + return shouldUpdate; + } + /** * Build a working absolute image URL that the browser will not cache. * @param url An input URL (may be relative to document origin) @@ -100,8 +94,7 @@ export class FrigateCardImage extends LitElement { if (this._imageConfig?.mode === 'url' && this._imageConfig?.url) { return this._buildImageURL(this._imageConfig.url); } else if (this.hass && this._imageConfig?.mode === 'camera') { - const entity = - this.cameraConfig?.camera_entity || this.cameraConfig?.webrtc_card?.entity; + const entity = this._getCameraEntity(); if (entity) { const state = this.hass.states[entity]; if (state && state.attributes.entity_picture) {