X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;ds=sidebyside;f=resources%2Fjs%2Fcomponents%2Fcommon%2FPngPlayer.js;h=ef70271b5b39d9bafaa55abe32a339277ce60ba9;hb=e086f5821a02d7f577baf4edbcdb14c509732f4c;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..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 }) => {