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

diff --git a/resources/js/components/common/PngPlayer.js b/resources/js/components/common/PngPlayer.js
index 4bdb41a..3ecc53c 100644
--- a/resources/js/components/common/PngPlayer.js
+++ b/resources/js/components/common/PngPlayer.js
@@ -20,10 +20,12 @@ const PngPlayer = ({ src }) => {
 
 	const [apng, setApng] = React.useState(null);
 	const [error, setError] = React.useState(null);
+	const [frameInfo, setFrameInfo] = React.useState('');
 	const [loading, setLoading] = React.useState(true);
 	const [player, setPlayer] = React.useState(null);
 
 	React.useEffect(() => {
+		if (!src) return;
 		setError(null);
 		setLoading(true);
 		const ctrl = new AbortController();
@@ -50,23 +52,32 @@ const PngPlayer = ({ src }) => {
 		};
 	}, [src]);
 
-	React.useEffect(async () => {
+	React.useEffect(() => {
 		if (loading || !canvas.current) return;
-		setPlayer(await createPlayer(apng, canvas.current));
+		setFrameInfo(`1/${apng.frames.length}`);
+		(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 play = React.useCallback(() => {
-		if (player) player.play();
-	}, [player]);
-
-	const pause = React.useCallback(() => {
-		if (player) player.pause();
-	}, [player]);
-
 	const stop = React.useCallback(() => {
 		if (player) player.stop();
 	}, [player]);
 
+	const toggle = React.useCallback(() => {
+		if (!player) return;
+		if (player.paused) {
+			player.play();
+		} else {
+			player.pause();
+		}
+	}, [player]);
+
 	const nextFrame = React.useCallback(() => {
 		if (player) player.renderNextFrame();
 	}, [player]);
@@ -82,6 +93,7 @@ const PngPlayer = ({ src }) => {
 		<div className="screen">
 			<canvas ref={canvas} width={apng.width} height={apng.height} />
 		</div>
+		<span className="ms-auto">{frameInfo}</span>
 		<div className="button-bar controls">
 			<Button
 				onClick={stop}
@@ -91,17 +103,12 @@ const PngPlayer = ({ src }) => {
 				<Icon.STOP title="" />
 			</Button>
 			<Button
-				onClick={play}
-				title={t('button.play')}
+				onClick={toggle}
+				title={t('button.playPause')}
 				variant="outline-secondary"
 			>
 				<Icon.PLAY title="" />
-			</Button>
-			<Button
-				onClick={pause}
-				title={t('button.pause')}
-				variant="outline-secondary"
-			>
+				{' '}
 				<Icon.PAUSE title="" />
 			</Button>
 			<Button