From 59a89b3e406b0f5625857f1b93b5f592d6f9304e Mon Sep 17 00:00:00 2001
From: Dermot Duffy <dermot.duffy@gmail.com>
Date: Sun, 7 Aug 2022 19:21:38 -0700
Subject: [PATCH] Fix issue with image timers being created recursively.

---
 src/cached-value-controller.ts | 17 ++++++++++-------
 src/components/image.ts        |  4 ++++
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/cached-value-controller.ts b/src/cached-value-controller.ts
index 80119e76..1022c46d 100644
--- a/src/cached-value-controller.ts
+++ b/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();
   }
 }
diff --git a/src/components/image.ts b/src/components/image.ts
index 5960bf8c..a2aa6770 100644
--- a/src/components/image.ts
+++ b/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();
     }
   }