impress/app/javascript/wardrobe-2020/components/OutfitMovieLayer.js

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;