+import parseApng from 'apng-js';
+import axios from 'axios';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Button } from 'react-bootstrap';
+import { useTranslation } from 'react-i18next';
+
+import Icon from './Icon';
+
+const createPlayer = async (apng, canvas) => {
+ const context = canvas.getContext('2d', { willReadFrequently: true });
+ const player = await apng.getPlayer(context);
+ player.stop();
+ return player;
+};
+
+const PngPlayer = ({ src }) => {
+ const canvas = React.useRef();
+ const { t } = useTranslation();
+
+ const [apng, setApng] = React.useState(null);
+ const [error, setError] = React.useState(null);
+ const [loading, setLoading] = React.useState(true);
+ const [player, setPlayer] = React.useState(null);
+
+ React.useEffect(() => {
+ setError(null);
+ setLoading(true);
+ const ctrl = new AbortController();
+ const fetchPng = async () => {
+ try {
+ const response = await axios.get(src, {
+ responseType: 'arraybuffer',
+ signal: ctrl.signal,
+ });
+ const png = parseApng(response.data);
+ await png.createImages();
+ setApng(png);
+ setLoading(false);
+ } catch (e) {
+ if (!axios.isCancel(e)) {
+ setError(e);
+ console.log(e);
+ }
+ }
+ };
+ fetchPng();
+ return () => {
+ ctrl.abort();
+ };
+ }, [src]);
+
+ React.useEffect(async () => {
+ if (loading || !canvas.current) return;
+ setPlayer(await createPlayer(apng, canvas.current));
+ }, [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 nextFrame = React.useCallback(() => {
+ if (player) player.renderNextFrame();
+ }, [player]);
+
+ if (error) {
+ return <div>Error</div>;
+ }
+ if (loading) {
+ return <div>Loading</div>;
+ }
+
+ return <div className="png-player">
+ <div className="screen">
+ <canvas ref={canvas} width={apng.width} height={apng.height} />
+ </div>
+ <div className="button-bar controls">
+ <Button
+ onClick={stop}
+ title={t('button.stop')}
+ variant="outline-secondary"
+ >
+ <Icon.STOP title="" />
+ </Button>
+ <Button
+ onClick={play}
+ title={t('button.play')}
+ variant="outline-secondary"
+ >
+ <Icon.PLAY title="" />
+ </Button>
+ <Button
+ onClick={pause}
+ title={t('button.pause')}
+ variant="outline-secondary"
+ >
+ <Icon.PAUSE title="" />
+ </Button>
+ <Button
+ onClick={nextFrame}
+ title={t('button.nextFrame')}
+ variant="outline-secondary"
+ >
+ <Icon.STEP_FORWARD title="" />
+ </Button>
+ </div>
+ </div>;
+};
+
+PngPlayer.propTypes = {
+ src: PropTypes.string,
+};
+
+export default PngPlayer;