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

diff --git a/resources/js/components/common/PngPlayer.js b/resources/js/components/common/PngPlayer.js
index d1d5da3..ef70271 100644
--- a/resources/js/components/common/PngPlayer.js
+++ b/resources/js/components/common/PngPlayer.js
@@ -20,6 +20,7 @@ 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);
 
@@ -53,21 +54,31 @@ const PngPlayer = ({ src }) => {
 
 	React.useEffect(async () => {
 		if (loading || !canvas.current) return;
-		setPlayer(await createPlayer(apng, canvas.current));
+		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);
+		};
 	}, [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]);
@@ -83,6 +94,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}
@@ -92,17 +104,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