better png player

diff --git a/resources/js/components/common/PngPlayer.js b/resources/js/components/common/PngPlayer.js
index d1d5da3bca3bae77b0b6e257395878bc526ef510..ef70271b5b39d9bafaa55abe32a339277ce60ba9 100644 (file)
--- 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 5036ac0a6be5e63dae0d4017af5748142708c1b9..fd8bfede1335aae7500f1e490432a672a3de4bb9 100644 (file)
--- 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 ca0e4126c5a74f15d3dd2b510d387e0147a8418f..179d6849ea13ebeffa60dcf40ab59f7406b976ab 100644 (file)
--- 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',