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 ( return (
<Grid templateAreas="single-shared-area"> <Grid templateAreas="single-shared-area">
{!movieIsLoaded && ( <canvas
// While the movie is loading, we show our image version as a ref={canvasRef}
// placeholder, because it generally loads much faster. width={internalWidth}
// TODO: Show a loading indicator for this partially-loaded state? 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 <Box
as="img" as="img"
src={safeImageUrl(placeholderImageUrl)} src={safeImageUrl(placeholderImageUrl)}
width={width} width={width}
height={height} height={height}
gridArea="single-shared-area" gridArea="single-shared-area"
opacity={movieIsLoaded ? 0 : 1}
transition="opacity 0.2s"
onLoad={callOnLoadIfNotYetCalled} onLoad={callOnLoadIfNotYetCalled}
/> />
)}
<canvas
ref={canvasRef}
width={internalWidth}
height={internalHeight}
style={{ width: width, height: height, gridArea: "single-shared-area" }}
/>
</Grid> </Grid>
); );
} }