Fix issue with using expired token for camera image view.

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<T> 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<string>;
 
+  /**
+   * 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) {