42 lines
1.0 KiB
JavaScript
42 lines
1.0 KiB
JavaScript
import PropTypes from 'prop-types'
|
|
import React from 'react'
|
|
import classnames from 'classnames'
|
|
import { ME } from '../constants.js'
|
|
|
|
export const StreamPropType = PropTypes.shape({
|
|
userId: PropTypes.string.isRequired,
|
|
stream: PropTypes.instanceOf(ArrayBuffer).isRequired,
|
|
url: PropTypes.string.isRequired
|
|
})
|
|
|
|
export default class Video extends React.Component {
|
|
static propTypes = {
|
|
activate: PropTypes.func.isRequired,
|
|
active: PropTypes.string.required,
|
|
stream: StreamPropType.isRequired
|
|
}
|
|
activate = e => {
|
|
const { activate, stream: { userId } } = this.props
|
|
this.play(e)
|
|
activate(userId)
|
|
}
|
|
play = e => {
|
|
e.preventDefault()
|
|
e.target.play()
|
|
}
|
|
render () {
|
|
const { active, stream: { userId, url } } = this.props
|
|
const className = classnames('video-container', { active })
|
|
return (
|
|
<div className={className}>
|
|
<video
|
|
muted={userId === ME}
|
|
onClick={this.activate}
|
|
onLoadedMetadata={this.play}
|
|
src={url}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
}
|