61 lines
1.4 KiB
JavaScript
61 lines
1.4 KiB
JavaScript
import PropTypes from 'prop-types'
|
|
import React from 'react'
|
|
import classnames from 'classnames'
|
|
import { MediaStream } from '../window.js'
|
|
|
|
export const StreamPropType = PropTypes.shape({
|
|
mediaStream: PropTypes.instanceOf(MediaStream).isRequired,
|
|
url: PropTypes.string
|
|
})
|
|
|
|
export default class Video extends React.PureComponent {
|
|
static propTypes = {
|
|
onClick: PropTypes.func,
|
|
active: PropTypes.bool.isRequired,
|
|
stream: StreamPropType,
|
|
userId: PropTypes.string.isRequired
|
|
}
|
|
handleClick = e => {
|
|
const { onClick, userId } = this.props
|
|
this.play(e)
|
|
onClick(userId)
|
|
}
|
|
play = e => {
|
|
e.preventDefault()
|
|
e.target.play()
|
|
}
|
|
componentDidMount () {
|
|
this.componentDidUpdate()
|
|
}
|
|
componentDidUpdate () {
|
|
const { stream } = this.props
|
|
const { video } = this.refs
|
|
const mediaStream = stream && stream.mediaStream
|
|
const url = stream && stream.url
|
|
if ('srcObject' in video) {
|
|
if (video.srcObject !== mediaStream) {
|
|
this.refs.video.srcObject = mediaStream
|
|
}
|
|
} else {
|
|
if (video.src !== url) {
|
|
video.src = url
|
|
}
|
|
}
|
|
}
|
|
render () {
|
|
const { active } = this.props
|
|
const className = classnames('video-container', { active })
|
|
return (
|
|
<div className={className}>
|
|
<video
|
|
autoPlay
|
|
onClick={this.handleClick}
|
|
onLoadedMetadata={this.play}
|
|
playsInline
|
|
ref="video"
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
}
|