X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;ds=sidebyside;f=resources%2Fjs%2Fcomponents%2Fcommon%2FPngPlayer.js;h=3ecc53c6a14d22ec4c6d233a2b3b34b1b3290014;hb=9a4e2305bb37cb8c62e3ad332f4a2bf45f720a18;hp=d1d5da3bca3bae77b0b6e257395878bc526ef510;hpb=df85042df90aee0b09eb11a3cd5bbc98169cb765;p=alttp.git diff --git a/resources/js/components/common/PngPlayer.js b/resources/js/components/common/PngPlayer.js index d1d5da3..3ecc53c 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); @@ -51,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]); @@ -83,6 +93,7 @@ const PngPlayer = ({ src }) => {