Prevent old HA state from using an old image access token.

src/cached-value-controller.ts

@@ -1,8 +1,7 @@
 import { ReactiveController, ReactiveControllerHost } from 'lit';
 
 export class CachedValueController<T> implements ReactiveController {
-  public value?: T;
+  protected _value?: T;
-
   protected _host: ReactiveControllerHost;
   protected _timerSeconds: number;
   protected _callback: () => T;
@@ -21,38 +20,44 @@ export class CachedValueController<T> implements ReactiveController {
     this._host.removeController(this);
   }
 
+  /**
+   * Get the value.
+   */
+  get value(): T | undefined {
+    return this._value;
+  }
+
   /**
    * Update the cached value (and reset the timer).
    */
   public updateValue(): void {
-    this.value = this._callback();
+    this._value = this._callback();
-    this._setTimer();
   }
 
   /**
-   * Update the value and render it.
+   * Clear the cached value.
    */
-  protected _updateValueAndRender(): void {
+  public clearValue(): void {
-    this.updateValue();
+    this._value = undefined;
-    this._host.requestUpdate();
   }
 
   /**
-   * Remove the timer.
+   * Disable the timer.
    */
-  protected _removeTimer(): void {
+  public stopTimer(): void {
     clearInterval(this._timerID);
     this._timerID = undefined;
   }
 
   /**
-   * Set the timer.
+   * Enable the timer. Repeated calls will have no effect.
    */
-   protected _setTimer(): void {
+  public startTimer(): void {
-    clearInterval(this._timerID);
+    this.stopTimer();
     if (this._timerSeconds > 0) {
       this._timerID = window.setInterval(() => {
-          this._updateValueAndRender();
+        this.updateValue();
+        this._host.requestUpdate();
       }, this._timerSeconds * 1000);
     }
   }
@@ -61,13 +66,15 @@ export class CachedValueController<T> implements ReactiveController {
    * Host has connected to the cache.
    */
   hostConnected(): void {
-    this._updateValueAndRender();
+    this.updateValue();
+    this.startTimer();
+    this._host.requestUpdate();
   }
 
   /**
    * Host has disconnected from the cache.
    */
   hostDisconnected(): void {
-    this._removeTimer();
+    this.stopTimer();
   }
 }

src/common.ts

@@ -233,18 +233,15 @@ export function shouldUpdateBasedOnHass(
   if (!newHass || !entities || !entities.length) {
     return false;
   }
-
+  if (!oldHass) {
-  if (oldHass) {
-    for (let i = 0; i < entities.length; i++) {
-      const entity = entities[i];
-      if (!entity) {
-        continue;
-      }
-      if (oldHass.states[entity] !== newHass.states[entity]) {
     return true;
   }
+
+  for (let i = 0; i < entities.length; i++) {
+    const entity = entities[i];
+    if (entity && oldHass.states[entity] !== newHass.states[entity]) {
+      return true;
     }
-    return false;
   }
   return false;
 }
@@ -591,4 +588,4 @@ export const frigateCardHasAction = (
  */
 export const stopEventFromActivatingCardWideActions = (ev: Event): void => {
   ev.stopPropagation();
-}
+};

src/components/image.ts

@@ -7,7 +7,7 @@ import {
   unsafeCSS,
 } from 'lit';
 import { HomeAssistant } from 'custom-card-helpers';
-import { customElement, property, state } from 'lit/decorators.js';
+import { customElement, property, query, state } from 'lit/decorators.js';
 
 import { CachedValueController } from '../cached-value-controller.js';
 import { CameraConfig, ImageViewConfig } from '../types.js';
@@ -17,6 +17,9 @@ import defaultImage from '../images/frigate-bird-in-sky.jpg';
 
 import imageStyle from '../scss/image.scss';
 
+// See: https://github.com/home-assistant/core/blob/dev/homeassistant/components/camera/__init__.py#L101
+const HASS_REJECTION_CUTOFF_MS = 5 * 60 * 1000;
+
 @customElement('frigate-card-image')
 export class FrigateCardImage extends LitElement {
   @property({ attribute: false })
@@ -31,6 +34,9 @@ export class FrigateCardImage extends LitElement {
   @state()
   protected _imageConfig?: ImageViewConfig;
 
+  @query('img')
+  protected _image?: HTMLImageElement;
+
   protected _cachedValueController?: CachedValueController<string>;
 
   /**
@@ -46,6 +52,7 @@ export class FrigateCardImage extends LitElement {
       this._imageConfig.refresh_seconds,
       this._getImageSource.bind(this),
     );
+    this._cachedValueController.startTimer();
   }
 
   /**
@@ -62,21 +69,41 @@ export class FrigateCardImage extends LitElement {
    * @returns `true` if the element should be updated.
    */
   protected shouldUpdate(changedProps: PropertyValues): boolean {
-    const oldHass = changedProps.get('hass') as HomeAssistant | undefined;
+    if (!this.hass) {
-    let shouldUpdate = !oldHass || changedProps.size != 1;
+      return false;
+    }
 
+    // If camera mode is enabled, reject all updates if hass is older than
+    // HASS_REJECTION_CUTOFF_MS. By using an older hass (even if it is not the
+    // property being updated), we run the risk that the JS has an old access
+    // token for the camera, and that results in a notification on the HA UI
+    // about a failed login. See
+    // https://github.com/dermotduffy/frigate-hass-card/issues/398 .
+    const cameraEntity = this._getCameraEntity();
+    const state = cameraEntity ? this.hass.states[cameraEntity] : undefined;
+    if (
+      this._imageConfig?.mode === 'camera' &&
+      state &&
+      Date.now() - Date.parse(state.last_updated) >=
+      HASS_REJECTION_CUTOFF_MS
+    ) {
+      return false;
+    }
+
+    if (changedProps.has('hass') &&
+        changedProps.size == 1 &&
+        this._imageConfig?.mode === 'camera' &&
+        cameraEntity) {
+      if (shouldUpdateBasedOnHass(this.hass, changedProps.get('hass'), [cameraEntity])) {
         // 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();
+        this._cachedValueController?.startTimer();
+        return true;
       }
+      return false;
     }
-    return shouldUpdate;
+    return true;
   }
 
   /**

src/editor.ts

@@ -1,7 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { CSSResultGroup, LitElement, TemplateResult, html, unsafeCSS } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
 
 import { HomeAssistant, LovelaceCardEditor, fireEvent } from 'custom-card-helpers';
 import { localize } from './localize/localize.js';
@@ -95,12 +94,6 @@ interface EditorOptions {
   [setName: string]: EditorOptionsSet;
 }
 
-interface ConfigValueTarget {
-  configValue: string;
-  checked?: boolean;
-  value?: string;
-}
-
 interface EditorCameraTarget {
   cameraIndex: number;
 }