1 | import React from 'react'
|
2 | import styled from 'styled-components'
|
3 | import PropTypes from 'prop-types'
|
4 | import Source from './sources.base'
|
5 |
|
6 | class Video extends React.Component {
|
7 | constructor (props) {
|
8 | super(props)
|
9 | this.video = null
|
10 | }
|
11 |
|
12 | setVideoRef = (element) => {
|
13 | this.video = element
|
14 | }
|
15 |
|
16 | componentDidMount () {
|
17 | if (this.video) {
|
18 | this.video.load()
|
19 | this.video.play()
|
20 | }
|
21 | }
|
22 |
|
23 | render () {
|
24 | const {children, sources: inSources, ...props} = this.props
|
25 | let sources = []
|
26 | if (inSources) {
|
27 | sources = new Source(inSources).render()
|
28 | }
|
29 | return (
|
30 | <video {...props}>
|
31 | {sources.map((source, key) => {
|
32 | return source
|
33 | })}
|
34 | {children && children}
|
35 | </video>
|
36 | )
|
37 | }
|
38 | }
|
39 |
|
40 | Video.propTypes = {
|
41 | sources: PropTypes.oneOfType([
|
42 | PropTypes.string,
|
43 | PropTypes.array
|
44 | ]),
|
45 | }
|
46 |
|
47 | Video.defaultProps = {
|
48 | autoPlay: true,
|
49 | playsInline: true,
|
50 | loop: true,
|
51 | muted: true
|
52 | }
|
53 |
|
54 |
|
55 | export default styled(Video)``
|