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 [loading, setLoading] = React.useState(true);
  24         const [player, setPlayer] = React.useState(null);
  25
  26         React.useEffect(() => {
  27                 setError(null);
  28                 setLoading(true);
  29                 const ctrl = new AbortController();
  30                 const fetchPng = async () => {
  31                         try {
  32                                 const response = await axios.get(src, {
  33                                         responseType: 'arraybuffer',
  34                                         signal: ctrl.signal,
  35                                 });
  36                                 const png = parseApng(response.data);
  37                                 await png.createImages();
  38                                 setApng(png);
  39                                 setLoading(false);
  40                         } catch (e) {
  41                                 if (!axios.isCancel(e)) {
  42                                         setError(e);
  43                                         console.log(e);
  44                                 }
  45                         }
  46                 };
  47                 fetchPng();
  48                 return () => {
  49                         ctrl.abort();
  50                 };
  51         }, [src]);
  52
  53         React.useEffect(async () => {
  54                 if (loading || !canvas.current) return;
  55                 setPlayer(await createPlayer(apng, canvas.current));
  56         }, [apng, canvas.current, loading]);
  57
  58         const play = React.useCallback(() => {
  59                 if (player) player.play();
  60         }, [player]);
  61
  62         const pause = React.useCallback(() => {
  63                 if (player) player.pause();
  64         }, [player]);
  65
  66         const stop = React.useCallback(() => {
  67                 if (player) player.stop();
  68         }, [player]);
  69
  70         const nextFrame = React.useCallback(() => {
  71                 if (player) player.renderNextFrame();
  72         }, [player]);
  73
  74         if (error) {
  75                 return <div>Error</div>;
  76         }
  77         if (loading) {
  78                 return <div>Loading</div>;
  79         }
  80
  81         return <div className="png-player">
  82                 <div className="screen">
  83                         <canvas ref={canvas} width={apng.width} height={apng.height} />
  84                 </div>
  85                 <div className="button-bar controls">
  86                         <Button
  87                                 onClick={stop}
  88                                 title={t('button.stop')}
  89                                 variant="outline-secondary"
  90                         >
  91                                 <Icon.STOP title="" />
  92                         </Button>
  93                         <Button
  94                                 onClick={play}
  95                                 title={t('button.play')}
  96                                 variant="outline-secondary"
  97                         >
  98                                 <Icon.PLAY title="" />
  99                         </Button>
 100                         <Button
 101                                 onClick={pause}
 102                                 title={t('button.pause')}
 103                                 variant="outline-secondary"
 104                         >
 105                                 <Icon.PAUSE title="" />
 106                         </Button>
 107                         <Button
 108                                 onClick={nextFrame}
 109                                 title={t('button.nextFrame')}
 110                                 variant="outline-secondary"
 111                         >
 112                                 <Icon.STEP_FORWARD title="" />
 113                         </Button>
 114                 </div>
 115         </div>;
 116 };
 117
 118 PngPlayer.propTypes = {
 119         src: PropTypes.string,
 120 };
 121
 122 export default PngPlayer;