Merge pull request #795 from dermotduffy/image-going-crazy

Fix issue with image timers being created recursively

src/cached-value-controller.ts

@@ -28,11 +28,10 @@ export class CachedValueController<T> implements ReactiveController {
   }
 
   /**
-   * Update the cached value (and reset the timer).
+   * Update the cached value.
    */
   public updateValue(): void {
     this._value = this._callback();
-    this._startTimer();
   }
 
   /**
@@ -40,22 +39,24 @@ export class CachedValueController<T> implements ReactiveController {
    */
   public clearValue(): void {
     this._value = undefined;
-    this._stopTimer();
   }
 
   /**
    * Disable the timer.
    */
-  protected _stopTimer(): void {
-    clearInterval(this._timerID);
+  public stopTimer(): void {
+    if (this._timerID !== undefined) {
+      window.clearInterval(this._timerID);
+    }
     this._timerID = undefined;
   }
 
   /**
    * Enable the timer. Repeated calls will have no effect.
    */
-  protected _startTimer(): void {
-    this._stopTimer();
+  public startTimer(): void {
+    this.stopTimer();
+
     if (this._timerSeconds > 0) {
       this._timerID = window.setInterval(() => {
         this.updateValue();
@@ -69,6 +70,7 @@ export class CachedValueController<T> implements ReactiveController {
    */
   hostConnected(): void {
     this.updateValue();
+    this.startTimer();
     this._host.requestUpdate();
   }
 
@@ -77,5 +79,6 @@ export class CachedValueController<T> implements ReactiveController {
    */
   hostDisconnected(): void {
     this.clearValue();
+    this.stopTimer();
   }
 }

src/components/image.ts

@@ -145,12 +145,14 @@ export class FrigateCardImage extends LitElement {
   connectedCallback(): void {
     super.connectedCallback();
     document.addEventListener('visibilitychange', this._boundVisibilityHandler);
+    this._cachedValueController?.startTimer();
   }
 
   /**
    * Component disconnected callback.
    */
   disconnectedCallback(): void {
+    this._cachedValueController?.stopTimer();
     document.removeEventListener('visibilitychange', this._boundVisibilityHandler);
     super.disconnectedCallback();
   }
@@ -170,6 +172,7 @@ export class FrigateCardImage extends LitElement {
       // re-generation of a new URL would generate an unauthorized request
       // (401), see:
       // https://github.com/dermotduffy/frigate-hass-card/issues/398
+      this._cachedValueController?.stopTimer();
       this._cachedValueController?.clearValue();
       this._forceSafeImage();
     } else {
@@ -177,6 +180,7 @@ export class FrigateCardImage extends LitElement {
       // restore the image src. If the HASS object is old (i.e. browser tab was
       // inactive for some time) this update request may be (correctly)
       // rejected.
+      this._cachedValueController?.startTimer();
       this.requestUpdate();
     }
   }