update react

[alttp.git] / resources / js / components / common / PngPlayer.js

diff --git a/resources/js/components/common/PngPlayer.js b/resources/js/components/common/PngPlayer.js
index ef70271b5b39d9bafaa55abe32a339277ce60ba9..3ecc53c6a14d22ec4c6d233a2b3b34b1b3290014 100644 (file)
--- a/resources/js/components/common/PngPlayer.js
+++ b/resources/js/components/common/PngPlayer.js
@@ -52,18 +52,17 @@ const PngPlayer = ({ src }) => {
                };
        }, [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(() => {