X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;f=resources%2Fjs%2Fcomponents%2Fcommon%2FPngPlayer.js;h=3ecc53c6a14d22ec4c6d233a2b3b34b1b3290014;hb=eb6958dcb4a2f01b9997da12aee558a54a994a46;hp=ef70271b5b39d9bafaa55abe32a339277ce60ba9;hpb=d060f4ab88178bb7e673cf51cd9c3cf6f7cbdb3a;p=alttp.git

diff --git a/resources/js/components/common/PngPlayer.js b/resources/js/components/common/PngPlayer.js
index ef70271..3ecc53c 100644
--- 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(() => {