feat: Add proxying support for images (#2427)

- Closes #2418

src/components-lib/cached-value-controller.ts

@@ -2,40 +2,42 @@ import { ReactiveController, ReactiveControllerHost } from 'lit';
 import { Timer } from '../utils/timer';
 
 export class CachedValueController<T> implements ReactiveController {
-  private _value?: T;
-  private _host: ReactiveControllerHost;
-  private _timerSeconds: number;
+  private _host: ReactiveControllerHost & HTMLElement;
+
+  private _value: T | null = null;
+
+  private _timerSeconds: number | null = null;
+
   private _callback: () => T;
+
+  private _getTimerSecondsCallback: () => number | null;
+
   private _timerStartCallback?: () => void;
   private _timerStopCallback?: () => void;
+  private _timerTickCallback?: () => void;
   private _timer = new Timer();
 
   constructor(
-    host: ReactiveControllerHost,
-    timerSeconds: number,
+    host: ReactiveControllerHost & HTMLElement,
+    getTimerSecondsCallback: () => number | null,
     callback: () => T,
     timerStartCallback?: () => void,
     timerStopCallback?: () => void,
+    timerTickCallback?: () => void,
   ) {
-    this._timerSeconds = timerSeconds;
+    this._getTimerSecondsCallback = getTimerSecondsCallback;
+    this._timerSeconds = getTimerSecondsCallback();
     this._callback = callback;
     this._timerStartCallback = timerStartCallback;
     this._timerStopCallback = timerStopCallback;
+    this._timerTickCallback = timerTickCallback;
     (this._host = host).addController(this);
   }
 
-  /**
-   * Remove the controller for the host.
-   */
-  public removeController(): void {
-    this.stopTimer();
-    this._host.removeController(this);
-  }
-
   /**
    * Get the value.
    */
-  get value(): T | undefined {
+  public getValue(): T | null {
     return this._value;
   }
 
@@ -44,13 +46,14 @@ export class CachedValueController<T> implements ReactiveController {
    */
   public updateValue(): void {
     this._value = this._callback();
+    this._host.requestUpdate();
   }
 
   /**
    * Clear the cached value.
    */
   public clearValue(): void {
-    this._value = undefined;
+    this._value = null;
   }
 
   /**
@@ -69,10 +72,14 @@ export class CachedValueController<T> implements ReactiveController {
   public startTimer(): void {
     this.stopTimer();
 
+    if (!this._timerSeconds || this._timerSeconds <= 0) {
+      return;
+    }
+
     this._timerStartCallback?.();
     this._timer.startRepeated(this._timerSeconds, () => {
+      this._timerTickCallback?.();
       this.updateValue();
-      this._host.requestUpdate();
     });
   }
 
@@ -80,13 +87,22 @@ export class CachedValueController<T> implements ReactiveController {
     return this._timer.isRunning();
   }
 
+  public hostUpdate(): void {
+    const newTimerSeconds = this._getTimerSecondsCallback();
+    if (newTimerSeconds !== this._timerSeconds) {
+      this._timerSeconds = newTimerSeconds;
+      if (this._host.isConnected) {
+        this.startTimer();
+      }
+    }
+  }
+
   /**
    * Host has connected to the cache.
    */
   hostConnected(): void {
     this.updateValue();
     this.startTimer();
-    this._host.requestUpdate();
   }
 
   /**