diff options
author | AL-LCL <alvin@alvinhavel.com> | 2023-05-19 10:39:49 +0200 |
---|---|---|
committer | AL-LCL <alvin@alvinhavel.com> | 2023-05-19 10:39:49 +0200 |
commit | 58ebd3bc0f00c532e97e9a5571471ffab87934ba (patch) | |
tree | 6e099e59af07206df6edf2b0c585d0c5a466d4bd /server/web/src/components/Card.tsx |
Diffstat (limited to 'server/web/src/components/Card.tsx')
-rw-r--r-- | server/web/src/components/Card.tsx | 80 |
1 files changed, 80 insertions, 0 deletions
diff --git a/server/web/src/components/Card.tsx b/server/web/src/components/Card.tsx new file mode 100644 index 0000000..f0e7c0e --- /dev/null +++ b/server/web/src/components/Card.tsx @@ -0,0 +1,80 @@ +import { IProps, IState } from '../interfaces/components/Card.interface'; +import { FaRedo, FaTrash } from 'react-icons/fa'; +import React, { Component } from 'react'; +import svg from 'plyr/dist/plyr.svg'; +import 'plyr/dist/plyr.css'; +import flvjs from 'flv.js'; +import Plyr from 'plyr'; +import { + CardContainer, + CardHeader, + CardFooter, + CardFooterItem +} from '../design/components/Card.design'; + +class Card extends Component<IProps, IState> { + videoRef: any = React.createRef(); + plyrPlayer: any; + flvPlayer: any; + + componentDidMount() { + const video = this.videoRef.current; + this.createFlvPlayer(); + + this.plyrPlayer = new Plyr(video, { + iconUrl: svg, + controls: [ + 'play-large', + 'play', + 'progress', + 'mute', + 'volume', + 'fullscreen' + ] + }); + } + + createFlvPlayer = () => { + const video = this.videoRef.current; + const { source } = this.props; + + this.flvPlayer = flvjs.createPlayer({ + type: 'flv', + isLive: true, + url: source + }); + this.flvPlayer.attachMediaElement(video); + this.flvPlayer.load() + } + + reload = () => { + this.flvPlayer.destroy(); + this.createFlvPlayer(); + } + + remove = () => { + const { source, title } = this.props; + this.props.removeStream({ source, title }); + } + + render() { + const { source, title } = this.props; + + return ( + <CardContainer> + <CardHeader title={`${title}: ${source}`}>{title}: {source}</CardHeader> + <video ref={this.videoRef} data-poster="./static/poster.png" /> + <CardFooter> + <CardFooterItem onClick={this.reload}> + <FaRedo size="0.8rem" /> + </CardFooterItem> + <CardFooterItem onClick={this.remove}> + <FaTrash size="0.8rem" /> + </CardFooterItem> + </CardFooter> + </CardContainer> + ) + } +} + +export default Card; |