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

include animated assets in preloading

Browse source 
Honestly kinda surprised this worked on the first go! I was worried something about the process would make the sorta like, instant-cache expectation not work.

Still thinking it might be considerate to like, keep a LRU cache of MovieClip options, so that we don't double-execute these scripts when adding stuff… we even re-execute the ones already applied lol 😅 and that adds lots of script tags to the body!

But yeah I'm not gonna push on it yet until I see evidence that it actually causes performance issues in practice
This commit is contained in:
Emi Matchu 2020-09-24 06:25:52 -07:00
parent 53b4d34419
commit ce402c23d7
2 changed files with 14 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/app/components/OutfitCanvas.js
View file

@ -241,7 +241,7 @@ export function OutfitCanvasMovie({ librarySrc, zIndex }) {
async function addMovieClip() {
try {
library = await loadMovieLibrary(librarySrc);
library = await loadCanvasMovieLibrary(librarySrc);
} catch (e) {
console.error("Error loading movie library", librarySrc, e);
return;
@ -414,7 +414,7 @@ export function loadImage(url) {
return promise;
}
async function loadMovieLibrary(librarySrc) {
export async function loadCanvasMovieLibrary(librarySrc) {
// 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

17
src/app/components/OutfitPreview.js
View file

@ -8,6 +8,7 @@ import OutfitCanvas, {
OutfitCanvasImage,
OutfitCanvasMovie,
loadImage,
loadCanvasMovieLibrary,
useEaselDependenciesLoader,
} from "./OutfitCanvas";
import HangerSpinner from "./HangerSpinner";
@ -330,15 +331,21 @@ export function usePreloadLayers(layers) {
let canceled = false;
setError(null);
const loadImages = async () => {
const imagePromises = layers.map(getBestImageUrlForLayer).map(loadImage);
const loadAssets = async () => {
const assetPromises = layers.map((layer) => {
if (layer.canvasMovieLibraryUrl) {
return loadCanvasMovieLibrary(layer.canvasMovieLibraryUrl);
} else {
return loadImage(getBestImageUrlForLayer(layer));
}
});
try {
// TODO: Load in one at a time, under a loading spinner & delay?
await Promise.all(imagePromises);
await Promise.all(assetPromises);
} catch (e) {
if (canceled) return;
console.error("Error preloading outfit layers", e);
imagePromises.forEach((p) => p.cancel());
assetPromises.forEach((p) => p.cancel());
setError(e);
return;
}
@ -347,7 +354,7 @@ export function usePreloadLayers(layers) {
setLoadedLayers(layers);
};
loadImages();
loadAssets();
return () => {
canceled = true;