From 8eae25d70622696edd5a984ebad9d70d77b9b09e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Cchrisshank=E2=80=9D?= <chris.shank.23@gmail.com>
Date: Tue, 10 Dec 2024 14:20:21 -0800
Subject: [PATCH] add animation frame timeout

---
 src/common/animation-frame-controller.ts | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/common/animation-frame-controller.ts b/src/common/animation-frame-controller.ts
index 6974f6f..80fabaf 100644
--- a/src/common/animation-frame-controller.ts
+++ b/src/common/animation-frame-controller.ts
@@ -11,6 +11,8 @@ export class AnimationFrameController implements ReactiveController {
   #lastTime = 0;
   #dtAccumulator = 0;
   #fixedTimestep = 1 / 60;
+  #timeoutMs;
+  #timeoutId = -1;
 
   get fixedTimestep() {
     return this.#fixedTimestep;
@@ -21,8 +23,9 @@ export class AnimationFrameController implements ReactiveController {
     return this.#isRunning;
   }
 
-  constructor(host: AnimationFrameControllerHost) {
+  constructor(host: AnimationFrameControllerHost, timeoutMs = 5000) {
     this.#host = host;
+    this.#timeoutMs = timeoutMs;
     host.addController(this);
   }
 
@@ -30,7 +33,11 @@ export class AnimationFrameController implements ReactiveController {
     this.start();
   }
 
-  hostUpdate() {}
+  hostUpdated() {
+    window.clearTimeout(this.#timeoutId);
+    this.#timeoutId = window.setTimeout(this.stop, this.#timeoutMs);
+    this.start();
+  }
 
   hostDisconnected() {
     this.stop();
@@ -61,8 +68,9 @@ export class AnimationFrameController implements ReactiveController {
     this.#tick();
   }
 
-  stop() {
+  stop = () => {
     cancelAnimationFrame(this.#tick);
+    window.clearTimeout(this.#timeoutId);
     this.#isRunning = false;
-  }
+  };
 }