OpenNeo/impress
OpenNeo/impress
1
0
Fork 1
Code Pull requests Activity

Fix bug where changing tabs would *always* pause the outfit animations

Browse source 
We have a feature to check the movie's FPS, and pause it if it gets too
low, as a guard against especially low-performance movies. But this was
triggering in an *expected* case, where browsers intentionally throttle
interval events when a page is in the background (e.g. you switch to
another tab).

Now, our rendering is aware of page visibility: when the page is
hidden, don't bother rendering, and keep resetting the FPS counter
state, so that we can pick up with a fresh FPS counter when the page
comes back.
This commit is contained in:
Emi Matchu 2024-06-12 17:05:53 -07:00
parent cedceeaf3c
commit 60e9130891
1 changed files with 24 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
app/javascript/wardrobe-2020/components/OutfitMovieLayer.js
View file

@ -196,26 +196,37 @@ function OutfitMovieLayer({
let lastFpsLoggedAtInMs = performance.now(); let lastFpsLoggedAtInMs = performance.now();
let numFramesSinceLastLogged = 0; let numFramesSinceLastLogged = 0;
const intervalId = setInterval(() => { const intervalId = setInterval(() => {
updateStage();
numFramesSinceLastLogged++;
const now = performance.now(); const now = performance.now();
const timeSinceLastFpsLoggedAtInMs = now - lastFpsLoggedAtInMs; const timeSinceLastFpsLoggedAtInMs = now - lastFpsLoggedAtInMs;
const timeSinceLastFpsLoggedAtInSec = timeSinceLastFpsLoggedAtInMs / 1000; const timeSinceLastFpsLoggedAtInSec = timeSinceLastFpsLoggedAtInMs / 1000;
const fps = numFramesSinceLastLogged / timeSinceLastFpsLoggedAtInSec;
const roundedFps = Math.round(fps * 100) / 100;
if (timeSinceLastFpsLoggedAtInSec > 2) { // If the page is visible, render the next frame, and track that we did.
const fps = numFramesSinceLastLogged / timeSinceLastFpsLoggedAtInSec; // And if it's been 2 seconds since the last time we logged the FPS,
const roundedFps = Math.round(fps * 100) / 100; // compute and log the FPS during those two seconds. (Checking the page
// visibility is both an optimization to avoid rendering the movie, but
// also makes "low FPS" tracking more accurate: browsers already throttle
// intervals when the page is hidden, so a low FPS is *expected*, and
// wouldn't indicate a performance problem like a low FPS normally would.)
if (!document.hidden) {
updateStage();
numFramesSinceLastLogged++;
console.debug( if (timeSinceLastFpsLoggedAtInSec > 2) {
`[OutfitMovieLayer] FPS: ${roundedFps} (Target: ${targetFps}) (${libraryUrl})`, console.debug(
); `[OutfitMovieLayer] FPS: ${roundedFps} (Target: ${targetFps}) (${libraryUrl})`,
);
if (onLowFps && fps < 2) {
onLowFps(fps);
}
if (onLowFps && fps < 2) { lastFpsLoggedAtInMs = now;
onLowFps(fps); 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; lastFpsLoggedAtInMs = now;
numFramesSinceLastLogged = 0; numFramesSinceLastLogged = 0;
} }