1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
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;
|
