]> git.localhorst.tv Git - alttp.git/blob - resources/js/components/common/PngPlayer.js
svg dungeon tracker
[alttp.git] / resources / js / components / common / PngPlayer.js
1 import parseApng from 'apng-js';
2 import axios from 'axios';
3 import PropTypes from 'prop-types';
4 import React from 'react';
5 import { Button } from 'react-bootstrap';
6 import { useTranslation } from 'react-i18next';
7
8 import Icon from './Icon';
9
10 const createPlayer = async (apng, canvas) => {
11         const context = canvas.getContext('2d', { willReadFrequently: true });
12         const player = await apng.getPlayer(context);
13         player.stop();
14         return player;
15 };
16
17 const PngPlayer = ({ src }) => {
18         const canvas = React.useRef();
19         const { t } = useTranslation();
20
21         const [apng, setApng] = React.useState(null);
22         const [error, setError] = React.useState(null);
23         const [frameInfo, setFrameInfo] = React.useState('');
24         const [loading, setLoading] = React.useState(true);
25         const [player, setPlayer] = React.useState(null);
26
27         React.useEffect(() => {
28                 if (!src) return;
29                 setError(null);
30                 setLoading(true);
31                 const ctrl = new AbortController();
32                 const fetchPng = async () => {
33                         try {
34                                 const response = await axios.get(src, {
35                                         responseType: 'arraybuffer',
36                                         signal: ctrl.signal,
37                                 });
38                                 const png = parseApng(response.data);
39                                 await png.createImages();
40                                 setApng(png);
41                                 setLoading(false);
42                         } catch (e) {
43                                 if (!axios.isCancel(e)) {
44                                         setError(e);
45                                         console.log(e);
46                                 }
47                         }
48                 };
49                 fetchPng();
50                 return () => {
51                         ctrl.abort();
52                 };
53         }, [src]);
54
55         React.useEffect(() => {
56                 if (loading || !canvas.current) return;
57                 setFrameInfo(`1/${apng.frames.length}`);
58                 (async () => {
59                         const p = await createPlayer(apng, canvas.current);
60                         setPlayer(p);
61                         const updateFrame = (number) => {
62                                 setFrameInfo(`${number + 1}/${apng.frames.length}`);
63                         };
64                         p.on('frame', updateFrame);
65                 })();
66         }, [apng, canvas.current, loading]);
67
68         const stop = React.useCallback(() => {
69                 if (player) player.stop();
70         }, [player]);
71
72         const toggle = React.useCallback(() => {
73                 if (!player) return;
74                 if (player.paused) {
75                         player.play();
76                 } else {
77                         player.pause();
78                 }
79         }, [player]);
80
81         const nextFrame = React.useCallback(() => {
82                 if (player) player.renderNextFrame();
83         }, [player]);
84
85         if (error) {
86                 return <div>Error</div>;
87         }
88         if (loading) {
89                 return <div>Loading</div>;
90         }
91
92         return <div className="png-player">
93                 <div className="screen">
94                         <canvas ref={canvas} width={apng.width} height={apng.height} />
95                 </div>
96                 <span className="ms-auto">{frameInfo}</span>
97                 <div className="button-bar controls">
98                         <Button
99                                 onClick={stop}
100                                 title={t('button.stop')}
101                                 variant="outline-secondary"
102                         >
103                                 <Icon.STOP title="" />
104                         </Button>
105                         <Button
106                                 onClick={toggle}
107                                 title={t('button.playPause')}
108                                 variant="outline-secondary"
109                         >
110                                 <Icon.PLAY title="" />
111                                 {' '}
112                                 <Icon.PAUSE title="" />
113                         </Button>
114                         <Button
115                                 onClick={nextFrame}
116                                 title={t('button.nextFrame')}
117                                 variant="outline-secondary"
118                         >
119                                 <Icon.STEP_FORWARD title="" />
120                         </Button>
121                 </div>
122         </div>;
123 };
124
125 PngPlayer.propTypes = {
126         src: PropTypes.string,
127 };
128
129 export default PngPlayer;