};
}, [src]);
- React.useEffect(async () => {
+ React.useEffect(() => {
if (loading || !canvas.current) return;
setFrameInfo(`1/${apng.frames.length}`);
- const p = await createPlayer(apng, canvas.current);
- setPlayer(p);
- const updateFrame = (number) => {
- setFrameInfo(`${number + 1}/${apng.frames.length}`);
- };
- p.on('frame', updateFrame);
- return () => {
- p.off('frame', updateFrame);
- };
+ (async () => {
+ const p = await createPlayer(apng, canvas.current);
+ setPlayer(p);
+ const updateFrame = (number) => {
+ setFrameInfo(`${number + 1}/${apng.frames.length}`);
+ };
+ p.on('frame', updateFrame);
+ })();
}, [apng, canvas.current, loading]);
const stop = React.useCallback(() => {