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.

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