From 56fe5e48890ec3efd5164200a4ec2db8f6edeb0d Mon Sep 17 00:00:00 2001
From: Emi Matchu <emi@matchu.dev>
Date: Wed, 12 Jun 2024 17:14:16 -0700
Subject: [PATCH] Oops, fix bug in recent movie-pausing bugfix!

Oh right, this previously logic was silly: we can't count on the
*interval itself* to be reliably resetting the FPS counter state,
because the interval might not be firing!

I think this fix worked when I tried brief tests, but didn't work when
I did an (accidental) longer test, because the browser switched to a
more aggressive throttle mode, and the previous mode was close enough
on the resets for it to be fine, whereas this time the FPS counter
state got way too old.

Now, we reset the FPS counter state *exactly* when the page comes back.
---
 .../components/OutfitMovieLayer.js            | 28 +++++++++++++++----
 1 file changed, 22 insertions(+), 6 deletions(-)

diff --git a/app/javascript/wardrobe-2020/components/OutfitMovieLayer.js b/app/javascript/wardrobe-2020/components/OutfitMovieLayer.js
index 2423e3ce..77169b35 100644
--- a/app/javascript/wardrobe-2020/components/OutfitMovieLayer.js
+++ b/app/javascript/wardrobe-2020/components/OutfitMovieLayer.js
@@ -224,15 +224,31 @@ function OutfitMovieLayer({
           lastFpsLoggedAtInMs = now;
           numFramesSinceLastLogged = 0;
         }
-      } else {
-        // Otherwise, if the page is hidden, keep resetting the FPS tracker
-        // state, to be able to pick up counting fresh once we come back.
-        lastFpsLoggedAtInMs = now;
-        numFramesSinceLastLogged = 0;
       }
     }, 1000 / targetFps);
 
-    return () => clearInterval(intervalId);
+    const onVisibilityChange = () => {
+      // When the page switches from hidden to visible, reset the FPS counter
+      // state, to start counting from When Visibility Came Back, rather than
+      // from when we last counted, which could be a long time ago.
+      if (!document.hidden) {
+        lastFpsLoggedAtInMs = performance.now();
+        numFramesSinceLastLogged = 0;
+        console.debug(
+          `[OutfitMovieLayer] Resuming now that page is visible (${libraryUrl})`,
+        );
+      } else {
+        console.debug(
+          `[OutfitMovieLayer] Pausing while page is hidden (${libraryUrl})`,
+        );
+      }
+    };
+    document.addEventListener("visibilitychange", onVisibilityChange);
+
+    return () => {
+      clearInterval(intervalId);
+      document.removeEventListener("visibilitychange", onVisibilityChange);
+    };
   }, [libraryUrl, stage, updateStage, movieClip, library, isPaused, onLowFps]);
 
   // This effect keeps the `movieClip` scaled correctly, based on the canvas