Emi Matchu
0e314482f7
I haven't been running Prettier consistently on things in this project. Now, it's quick-runnable, and I've got it on everything! Also, I just think tabs are the right default for this kind of thing, and I'm glad to get to switch over to it! (In `package.json`.)
503 lines
16 KiB
JavaScript
503 lines
16 KiB
JavaScript
import React from "react";
|
|
import LRU from "lru-cache";
|
|
import { Box, Grid, useToast } from "@chakra-ui/react";
|
|
|
|
import { loadImage, logAndCapture, safeImageUrl } from "../util";
|
|
import usePreferArchive from "./usePreferArchive";
|
|
|
|
// Import EaselJS and TweenJS as strings to run in a global context!
|
|
// The bundled scripts are built to attach themselves to `window.createjs`, and
|
|
// `window.createjs` is where the Neopets movie libraries expects to find them!
|
|
//
|
|
// TODO: Is there a nicer way to do this within esbuild? Would be nice to have
|
|
// builds of these libraries that just play better in the first place...
|
|
import easelSource from "easeljs/lib/easeljs.min.js";
|
|
import tweenSource from "tweenjs/lib/tweenjs.min.js";
|
|
new Function(easelSource).call(window);
|
|
new Function(tweenSource).call(window);
|
|
|
|
function OutfitMovieLayer({
|
|
libraryUrl,
|
|
width,
|
|
height,
|
|
placeholderImageUrl = null,
|
|
isPaused = false,
|
|
onLoad = null,
|
|
onError = null,
|
|
onLowFps = null,
|
|
canvasProps = {},
|
|
}) {
|
|
const [preferArchive] = usePreferArchive();
|
|
const [stage, setStage] = React.useState(null);
|
|
const [library, setLibrary] = React.useState(null);
|
|
const [movieClip, setMovieClip] = React.useState(null);
|
|
const [unusedHasCalledOnLoad, setHasCalledOnLoad] = React.useState(false);
|
|
const [movieIsLoaded, setMovieIsLoaded] = React.useState(false);
|
|
const canvasRef = React.useRef(null);
|
|
const hasShownErrorMessageRef = React.useRef(false);
|
|
const toast = useToast();
|
|
|
|
// Set the canvas's internal dimensions to be higher, if the device has high
|
|
// DPI like retina. But we'll keep the layout width/height as expected!
|
|
const internalWidth = width * window.devicePixelRatio;
|
|
const internalHeight = height * window.devicePixelRatio;
|
|
|
|
const callOnLoadIfNotYetCalled = React.useCallback(() => {
|
|
setHasCalledOnLoad((alreadyHasCalledOnLoad) => {
|
|
if (!alreadyHasCalledOnLoad && onLoad) {
|
|
onLoad();
|
|
}
|
|
return true;
|
|
});
|
|
}, [onLoad]);
|
|
|
|
const updateStage = React.useCallback(() => {
|
|
if (!stage) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
stage.update();
|
|
} catch (e) {
|
|
// If rendering the frame fails, log it and proceed. If it's an
|
|
// animation, then maybe the next frame will work? Also alert the user,
|
|
// just as an FYI. (This is pretty uncommon, so I'm not worried about
|
|
// being noisy!)
|
|
if (!hasShownErrorMessageRef.current) {
|
|
console.error(`Error rendering movie clip ${libraryUrl}`);
|
|
logAndCapture(e);
|
|
toast({
|
|
status: "warning",
|
|
title:
|
|
"Hmm, we're maybe having trouble playing one of these animations.",
|
|
description:
|
|
"If it looks wrong, try pausing and playing, or reloading the " +
|
|
"page. Sorry!",
|
|
duration: 10000,
|
|
isClosable: true,
|
|
});
|
|
// We do this via a ref, not state, because I want to guarantee that
|
|
// future calls see the new value. With state, React's effects might
|
|
// not happen in the right order for it to work!
|
|
hasShownErrorMessageRef.current = true;
|
|
}
|
|
}
|
|
}, [stage, toast, libraryUrl]);
|
|
|
|
// This effect gives us a `stage` corresponding to the canvas element.
|
|
React.useLayoutEffect(() => {
|
|
const canvas = canvasRef.current;
|
|
|
|
if (!canvas) {
|
|
return;
|
|
}
|
|
|
|
if (canvas.getContext("2d") == null) {
|
|
console.warn(`Out of memory, can't use canvas for ${libraryUrl}.`);
|
|
toast({
|
|
status: "warning",
|
|
title: "Oops, too many animations!",
|
|
description:
|
|
`Your device is out of memory, so we can't show any more ` +
|
|
`animations. Try removing some items, or using another device.`,
|
|
duration: null,
|
|
isClosable: true,
|
|
});
|
|
return;
|
|
}
|
|
|
|
setStage((stage) => {
|
|
if (stage && stage.canvas === canvas) {
|
|
return stage;
|
|
}
|
|
|
|
return new window.createjs.Stage(canvas);
|
|
});
|
|
|
|
return () => {
|
|
setStage(null);
|
|
|
|
if (canvas) {
|
|
// There's a Safari bug where it doesn't reliably garbage-collect
|
|
// canvas data. Clean it up ourselves, rather than leaking memory over
|
|
// time! https://stackoverflow.com/a/52586606/107415
|
|
// https://bugs.webkit.org/show_bug.cgi?id=195325
|
|
canvas.width = 0;
|
|
canvas.height = 0;
|
|
}
|
|
};
|
|
}, [libraryUrl, toast]);
|
|
|
|
// This effect gives us the `library` and `movieClip`, based on the incoming
|
|
// `libraryUrl`.
|
|
React.useEffect(() => {
|
|
let canceled = false;
|
|
|
|
const movieLibraryPromise = loadMovieLibrary(libraryUrl, { preferArchive });
|
|
movieLibraryPromise
|
|
.then((library) => {
|
|
if (canceled) {
|
|
return;
|
|
}
|
|
|
|
setLibrary(library);
|
|
|
|
const movieClip = buildMovieClip(library, libraryUrl);
|
|
setMovieClip(movieClip);
|
|
})
|
|
.catch((e) => {
|
|
console.error(`Error loading outfit movie layer: ${libraryUrl}`, e);
|
|
if (onError) {
|
|
onError(e);
|
|
}
|
|
});
|
|
|
|
return () => {
|
|
canceled = true;
|
|
movieLibraryPromise.cancel();
|
|
setLibrary(null);
|
|
setMovieClip(null);
|
|
};
|
|
}, [libraryUrl, preferArchive, onError]);
|
|
|
|
// This effect puts the `movieClip` on the `stage`, when both are ready.
|
|
React.useEffect(() => {
|
|
if (!stage || !movieClip) {
|
|
return;
|
|
}
|
|
|
|
stage.addChild(movieClip);
|
|
|
|
// Render the movie's first frame. If it's animated and we're not paused,
|
|
// then another effect will perform subsequent updates.
|
|
updateStage();
|
|
|
|
// This is when we trigger `onLoad`: once we're actually showing it!
|
|
callOnLoadIfNotYetCalled();
|
|
setMovieIsLoaded(true);
|
|
|
|
return () => stage.removeChild(movieClip);
|
|
}, [stage, updateStage, movieClip, callOnLoadIfNotYetCalled]);
|
|
|
|
// This effect updates the `stage` according to the `library`'s framerate,
|
|
// but only if there's actual animation to do - i.e., there's more than one
|
|
// frame to show, and we're not paused.
|
|
React.useEffect(() => {
|
|
if (!stage || !movieClip || !library) {
|
|
return;
|
|
}
|
|
|
|
if (isPaused || !hasAnimations(movieClip)) {
|
|
return;
|
|
}
|
|
|
|
const targetFps = library.properties.fps;
|
|
|
|
let lastFpsLoggedAtInMs = performance.now();
|
|
let numFramesSinceLastLogged = 0;
|
|
const intervalId = setInterval(() => {
|
|
const now = performance.now();
|
|
const timeSinceLastFpsLoggedAtInMs = now - lastFpsLoggedAtInMs;
|
|
const timeSinceLastFpsLoggedAtInSec = timeSinceLastFpsLoggedAtInMs / 1000;
|
|
const fps = numFramesSinceLastLogged / timeSinceLastFpsLoggedAtInSec;
|
|
const roundedFps = Math.round(fps * 100) / 100;
|
|
|
|
// If the page is visible, render the next frame, and track that we did.
|
|
// And if it's been 2 seconds since the last time we logged the FPS,
|
|
// 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++;
|
|
|
|
if (timeSinceLastFpsLoggedAtInSec > 2) {
|
|
console.debug(
|
|
`[OutfitMovieLayer] FPS: ${roundedFps} (Target: ${targetFps}) (${libraryUrl})`,
|
|
);
|
|
if (onLowFps && fps < 2) {
|
|
onLowFps(fps);
|
|
}
|
|
|
|
lastFpsLoggedAtInMs = now;
|
|
numFramesSinceLastLogged = 0;
|
|
}
|
|
}
|
|
}, 1000 / targetFps);
|
|
|
|
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
|
|
// size and the `library`'s natural size declaration. (If the canvas size
|
|
// changes on window resize, then this will keep us responsive, so long as
|
|
// the parent updates our width/height props on window resize!)
|
|
React.useEffect(() => {
|
|
if (!stage || !movieClip || !library) {
|
|
return;
|
|
}
|
|
|
|
movieClip.scaleX = internalWidth / library.properties.width;
|
|
movieClip.scaleY = internalHeight / library.properties.height;
|
|
|
|
// Redraw the stage with the new dimensions - but with `tickOnUpdate` set
|
|
// to `false`, so that we don't advance by a frame. This keeps us
|
|
// really-paused if we're paused, and avoids skipping ahead by a frame if
|
|
// we're playing.
|
|
stage.tickOnUpdate = false;
|
|
updateStage();
|
|
stage.tickOnUpdate = true;
|
|
}, [stage, updateStage, library, movieClip, internalWidth, internalHeight]);
|
|
|
|
return (
|
|
<Grid templateAreas="single-shared-area">
|
|
<canvas
|
|
ref={canvasRef}
|
|
width={internalWidth}
|
|
height={internalHeight}
|
|
style={{
|
|
width: width,
|
|
height: height,
|
|
gridArea: "single-shared-area",
|
|
}}
|
|
data-is-loaded={movieIsLoaded}
|
|
{...canvasProps}
|
|
/>
|
|
{/* While the movie is loading, we show our image version as a
|
|
* placeholder, because it generally loads much faster.
|
|
* TODO: Show a loading indicator for this partially-loaded state? */}
|
|
{placeholderImageUrl && (
|
|
<Box
|
|
as="img"
|
|
src={safeImageUrl(placeholderImageUrl)}
|
|
width={width}
|
|
height={height}
|
|
gridArea="single-shared-area"
|
|
opacity={movieIsLoaded ? 0 : 1}
|
|
transition="opacity 0.2s"
|
|
onLoad={callOnLoadIfNotYetCalled}
|
|
/>
|
|
)}
|
|
</Grid>
|
|
);
|
|
}
|
|
|
|
function loadScriptTag(src) {
|
|
let script;
|
|
let canceled = false;
|
|
let resolved = false;
|
|
|
|
const scriptTagPromise = new Promise((resolve, reject) => {
|
|
script = document.createElement("script");
|
|
script.onload = () => {
|
|
if (canceled) return;
|
|
resolved = true;
|
|
resolve(script);
|
|
};
|
|
script.onerror = (e) => {
|
|
if (canceled) return;
|
|
reject(new Error(`Failed to load script: ${JSON.stringify(src)}`));
|
|
};
|
|
script.src = src;
|
|
document.body.appendChild(script);
|
|
});
|
|
|
|
scriptTagPromise.cancel = () => {
|
|
if (resolved) return;
|
|
script.src = "";
|
|
canceled = true;
|
|
};
|
|
|
|
return scriptTagPromise;
|
|
}
|
|
|
|
const MOVIE_LIBRARY_CACHE = new LRU(10);
|
|
|
|
export function loadMovieLibrary(librarySrc, { preferArchive = false } = {}) {
|
|
const cancelableResourcePromises = [];
|
|
const cancelAllResources = () =>
|
|
cancelableResourcePromises.forEach((p) => p.cancel());
|
|
|
|
// Most of the logic for `loadMovieLibrary` is inside this async function.
|
|
// But we want to attach more fields to the promise before returning it; so
|
|
// we declare this async function separately, then call it, then edit the
|
|
// returned promise!
|
|
const createMovieLibraryPromise = async () => {
|
|
// First, check the LRU cache. This will enable us to quickly return movie
|
|
// libraries, without re-loading and re-parsing and re-executing.
|
|
const cachedLibrary = MOVIE_LIBRARY_CACHE.get(librarySrc);
|
|
if (cachedLibrary) {
|
|
return cachedLibrary;
|
|
}
|
|
|
|
// Then, load the script tag. (Make sure we set it up to be cancelable!)
|
|
const scriptPromise = loadScriptTag(
|
|
safeImageUrl(librarySrc, { preferArchive }),
|
|
);
|
|
cancelableResourcePromises.push(scriptPromise);
|
|
await scriptPromise;
|
|
|
|
// These library JS files are interesting in their operation. It seems like
|
|
// the idea is, it pushes an object to a global array, and you need to snap
|
|
// it up and see it at the end of the array! And I don't really see a way to
|
|
// like, get by a name or ID that we know by this point. So, here we go, just
|
|
// try to grab it once it arrives!
|
|
//
|
|
// I'm not _sure_ this method is reliable, but it seems to be stable so far
|
|
// in Firefox for me. The things I think I'm observing are:
|
|
// - Script execution order should match insert order,
|
|
// - Onload execution order should match insert order,
|
|
// - BUT, script executions might be batched before onloads.
|
|
// - So, each script grabs the _first_ composition from the list, and
|
|
// deletes it after grabbing. That way, it serves as a FIFO queue!
|
|
// I'm not suuure this is happening as I'm expecting, vs I'm just not seeing
|
|
// the race anymore? But fingers crossed!
|
|
if (Object.keys(window.AdobeAn?.compositions || {}).length === 0) {
|
|
throw new Error(
|
|
`Movie library ${librarySrc} did not add a composition to window.AdobeAn.compositions.`,
|
|
);
|
|
}
|
|
const [compositionId, composition] = Object.entries(
|
|
window.AdobeAn.compositions,
|
|
)[0];
|
|
if (Object.keys(window.AdobeAn.compositions).length > 1) {
|
|
console.warn(
|
|
`Grabbing composition ${compositionId}, but there are >1 here: `,
|
|
Object.keys(window.AdobeAn.compositions).length,
|
|
);
|
|
}
|
|
delete window.AdobeAn.compositions[compositionId];
|
|
const library = composition.getLibrary();
|
|
|
|
// One more loading step as part of loading this library is loading the
|
|
// images it uses for sprites.
|
|
//
|
|
// TODO: I guess the manifest has these too, so if we could use our DB cache
|
|
// to get the manifest to us faster, then we could avoid a network RTT
|
|
// on the critical path by preloading these images before the JS file
|
|
// even gets to us?
|
|
const librarySrcDir = librarySrc.split("/").slice(0, -1).join("/");
|
|
const manifestImages = new Map(
|
|
library.properties.manifest.map(({ id, src }) => [
|
|
id,
|
|
loadImage(librarySrcDir + "/" + src, {
|
|
crossOrigin: "anonymous",
|
|
preferArchive,
|
|
}),
|
|
]),
|
|
);
|
|
|
|
// Wait for the images, and make sure they're cancelable while we do.
|
|
const manifestImagePromises = manifestImages.values();
|
|
cancelableResourcePromises.push(...manifestImagePromises);
|
|
await Promise.all(manifestImagePromises);
|
|
|
|
// Finally, once we have the images loaded, the library object expects us to
|
|
// mutate it (!) to give it the actual image and sprite sheet objects from
|
|
// the loaded images. That's how the MovieClip's internal JS objects will
|
|
// access the loaded data!
|
|
const images = composition.getImages();
|
|
for (const [id, image] of manifestImages.entries()) {
|
|
images[id] = await image;
|
|
}
|
|
const spriteSheets = composition.getSpriteSheet();
|
|
for (const { name, frames } of library.ssMetadata) {
|
|
const image = await manifestImages.get(name);
|
|
spriteSheets[name] = new window.createjs.SpriteSheet({
|
|
images: [image],
|
|
frames,
|
|
});
|
|
}
|
|
|
|
MOVIE_LIBRARY_CACHE.set(librarySrc, library);
|
|
|
|
return library;
|
|
};
|
|
|
|
const movieLibraryPromise = createMovieLibraryPromise().catch((e) => {
|
|
// When any part of the movie library fails, we also cancel the other
|
|
// resources ourselves, to avoid stray throws for resources that fail after
|
|
// the parent catches the initial failure. We re-throw the initial failure
|
|
// for the parent to handle, though!
|
|
cancelAllResources();
|
|
throw e;
|
|
});
|
|
|
|
// To cancel a `loadMovieLibrary`, cancel all of the resource promises we
|
|
// load as part of it. That should effectively halt the async function above
|
|
// (anything not yet loaded will stop loading), and ensure that stray
|
|
// failures don't trigger uncaught promise rejection warnings.
|
|
movieLibraryPromise.cancel = cancelAllResources;
|
|
|
|
return movieLibraryPromise;
|
|
}
|
|
|
|
export function buildMovieClip(library, libraryUrl) {
|
|
let constructorName;
|
|
try {
|
|
const fileName = decodeURI(libraryUrl).split("/").pop();
|
|
const fileNameWithoutExtension = fileName.split(".")[0];
|
|
constructorName = fileNameWithoutExtension.replace(/[ -]/g, "");
|
|
if (constructorName.match(/^[0-9]/)) {
|
|
constructorName = "_" + constructorName;
|
|
}
|
|
} catch (e) {
|
|
throw new Error(
|
|
`Movie libraryUrl ${JSON.stringify(
|
|
libraryUrl,
|
|
)} did not match expected format: ${e.message}`,
|
|
);
|
|
}
|
|
|
|
const LibraryMovieClipConstructor = library[constructorName];
|
|
if (!LibraryMovieClipConstructor) {
|
|
throw new Error(
|
|
`Expected JS movie library ${libraryUrl} to contain a constructor ` +
|
|
`named ${constructorName}, but it did not: ${Object.keys(library)}`,
|
|
);
|
|
}
|
|
const movieClip = new LibraryMovieClipConstructor();
|
|
|
|
return movieClip;
|
|
}
|
|
|
|
/**
|
|
* Recursively scans the given MovieClip (or child createjs node), to see if
|
|
* there are any animated areas.
|
|
*/
|
|
export function hasAnimations(createjsNode) {
|
|
return (
|
|
// Some nodes have simple animation frames.
|
|
createjsNode.totalFrames > 1 ||
|
|
// Tweens are a form of animation that can happen separately from frames.
|
|
// They expect timer ticks to happen, and they change the scene accordingly.
|
|
createjsNode?.timeline?.tweens?.length >= 1 ||
|
|
// And some nodes have _children_ that are animated.
|
|
(createjsNode.children || []).some(hasAnimations)
|
|
);
|
|
}
|
|
|
|
export default OutfitMovieLayer;
|