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

Fade from image -> movie, instead of harsh change

Browse source 
We put it on top, then fade it out!
This commit is contained in:
Emi Matchu 2021-06-20 12:21:11 -07:00
parent e2aeb90b4b
commit 7a8c5068a7
1 changed files with 18 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
src/app/components/OutfitMovieLayer.js
View file

@ -233,25 +233,29 @@ function OutfitMovieLayer({
return (
<Grid templateAreas="single-shared-area">
{!movieIsLoaded && (
// 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?
<canvas
ref={canvasRef}
width={internalWidth}
height={internalHeight}
style={{
width: width,
height: height,
gridArea: "single-shared-area",
}}
/>
{/* 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? */}
<Box
as="img"
src={safeImageUrl(placeholderImageUrl)}
width={width}
height={height}
gridArea="single-shared-area"
opacity={movieIsLoaded ? 0 : 1}
transition="opacity 0.2s"
onLoad={callOnLoadIfNotYetCalled}
/>
)}
<canvas
ref={canvasRef}
width={internalWidth}
height={internalHeight}
style={{ width: width, height: height, gridArea: "single-shared-area" }}
/>
</Grid>
);
}