X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;ds=inline;f=resources%2Fjs%2Fcomponents%2Fcommon%2FPngPlayer.js;h=3ecc53c6a14d22ec4c6d233a2b3b34b1b3290014;hb=b537f5570f85af14f7b7d64b34aa1a7946efee23;hp=4bdb41adc5653aab9588820d19b0542a7f977911;hpb=c01ebf99d629029288a2ea7cf6874ca076d87f70;p=alttp.git diff --git a/resources/js/components/common/PngPlayer.js b/resources/js/components/common/PngPlayer.js index 4bdb41a..3ecc53c 100644 --- a/resources/js/components/common/PngPlayer.js +++ b/resources/js/components/common/PngPlayer.js @@ -20,10 +20,12 @@ 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); React.useEffect(() => { + if (!src) return; setError(null); setLoading(true); const ctrl = new AbortController(); @@ -50,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]); @@ -82,6 +93,7 @@ const PngPlayer = ({ src }) => {