From: Daniel Karbach <daniel.karbach@localhorst.tv>
Date: Wed, 2 Aug 2023 17:16:32 +0000 (+0200)
Subject: better png player
X-Git-Url: https://git.localhorst.tv/?a=commitdiff_plain;h=e001c4e421fad5822503901ba76dcd6abbba4fa2;p=alttp.git

better png player
---

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
diff --git a/resources/js/i18n/de.js b/resources/js/i18n/de.js
index 5036ac0..fd8bfed 100644
--- a/resources/js/i18n/de.js
+++ b/resources/js/i18n/de.js
@@ -70,6 +70,7 @@ export default {
 			nextFrame: 'Nächster Frame',
 			pause: 'Pause',
 			play: 'Play',
+			playPause: 'Play/Pause',
 			protocol: 'Protokoll',
 			remove: 'Entfernen',
 			retry: 'Neu versuchen',
diff --git a/resources/js/i18n/en.js b/resources/js/i18n/en.js
index ca0e412..179d684 100644
--- a/resources/js/i18n/en.js
+++ b/resources/js/i18n/en.js
@@ -70,6 +70,7 @@ export default {
 			nextFrame: 'Next frame',
 			pause: 'Pause',
 			play: 'Play',
+			playPause: 'Play/Pause',
 			protocol: 'Protocol',
 			remove: 'Remove',
 			retry: 'Retry',