2020-04-26 15:22:44 +00:00
|
|
|
|
2020-04-27 05:16:35 +00:00
|
|
|
import React, { memo, useEffect, useRef, useMemo, useState } from 'react';
|
|
|
|
import useDebounce from 'react-use/lib/useDebounce';
|
2020-04-26 15:22:44 +00:00
|
|
|
|
|
|
|
import CanvasPlayer from './CanvasPlayer';
|
|
|
|
|
2020-04-27 05:16:35 +00:00
|
|
|
const Canvas = memo(({ rotate, filePath, width, height, playerTime, streamIndex, commandedTime, playing }) => {
|
2020-04-26 15:22:44 +00:00
|
|
|
const canvasRef = useRef();
|
|
|
|
|
2020-04-27 05:16:35 +00:00
|
|
|
const canvasPlayer = useMemo(() => CanvasPlayer({ path: filePath, width, height, streamIndex }),
|
|
|
|
[filePath, width, height, streamIndex]);
|
2020-04-26 15:22:44 +00:00
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
canvasPlayer.setCanvas(canvasRef.current);
|
|
|
|
|
|
|
|
return () => {
|
|
|
|
canvasPlayer.setCanvas();
|
2020-04-27 05:16:35 +00:00
|
|
|
canvasPlayer.dispose();
|
2020-04-26 15:22:44 +00:00
|
|
|
};
|
|
|
|
}, [canvasPlayer]);
|
|
|
|
|
2020-04-27 05:16:35 +00:00
|
|
|
const [debouncedPlayerTime, setDebouncedPlayerTime] = useState(0);
|
|
|
|
const [debouncedCommandedTime, setDebouncedCommandedTime] = useState(0);
|
|
|
|
|
|
|
|
const [, cancelPlayerTimeDebounce] = useDebounce(() => {
|
|
|
|
setDebouncedPlayerTime(playerTime);
|
|
|
|
}, 100, [playerTime]);
|
|
|
|
|
|
|
|
const [, cancelCommandedTimeDebounce] = useDebounce(() => {
|
|
|
|
setDebouncedCommandedTime(commandedTime);
|
|
|
|
}, 300, [commandedTime]);
|
|
|
|
|
|
|
|
useEffect(() => () => {
|
|
|
|
cancelPlayerTimeDebounce();
|
|
|
|
cancelCommandedTimeDebounce();
|
|
|
|
}, [cancelPlayerTimeDebounce, cancelCommandedTimeDebounce]);
|
|
|
|
|
2020-04-26 15:22:44 +00:00
|
|
|
useEffect(() => {
|
2020-04-27 05:16:35 +00:00
|
|
|
if (playing) canvasPlayer.play(debouncedCommandedTime);
|
|
|
|
else canvasPlayer.pause(debouncedPlayerTime);
|
|
|
|
}, [canvasPlayer, debouncedCommandedTime, debouncedPlayerTime, playing]);
|
|
|
|
|
2020-05-03 10:21:49 +00:00
|
|
|
const canvasStyle = useMemo(() => ({ display: 'block', width: '100%', height: '100%', objectFit: 'contain', transform: rotate ? `rotate(${rotate}deg)` : undefined }), [rotate]);
|
2020-04-26 15:22:44 +00:00
|
|
|
|
|
|
|
return (
|
|
|
|
<div style={{ width: '100%', height: '100%', left: 0, right: 0, top: 0, bottom: 0, position: 'absolute', overflow: 'hidden', background: 'black' }}>
|
2020-04-27 05:16:35 +00:00
|
|
|
<canvas ref={canvasRef} style={canvasStyle} />
|
2020-04-26 15:22:44 +00:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
});
|
|
|
|
|
|
|
|
export default Canvas;
|