Jerko Steiner
f056048d62
The addStream and removeStream are deprecated and the MDN docs recommend using addStream/removeStream instead. While we add tracks, we can also add event listeners to whether or not a track has ended and then remove a stream once all tracks in the streams have ended.
64 lines
1.6 KiB
TypeScript
64 lines
1.6 KiB
TypeScript
import React, { ReactEventHandler } from 'react'
|
|
import classnames from 'classnames'
|
|
import socket from '../socket'
|
|
import { StreamWithURL } from '../reducers/streams'
|
|
|
|
export interface VideoProps {
|
|
videos: Record<string, unknown>
|
|
onClick: (userId: string) => void
|
|
active: boolean
|
|
stream?: StreamWithURL
|
|
userId: string
|
|
muted: boolean
|
|
mirrored: boolean
|
|
play: () => void
|
|
}
|
|
|
|
export default class Video extends React.PureComponent<VideoProps> {
|
|
videoRef = React.createRef<HTMLVideoElement>()
|
|
|
|
static defaultProps = {
|
|
muted: false,
|
|
mirrored: false,
|
|
}
|
|
handleClick: ReactEventHandler<HTMLVideoElement> = e => {
|
|
const { onClick, userId } = this.props
|
|
this.props.play()
|
|
onClick(userId)
|
|
}
|
|
componentDidMount () {
|
|
this.componentDidUpdate()
|
|
}
|
|
componentDidUpdate () {
|
|
const { videos, stream } = this.props
|
|
const video = this.videoRef.current!
|
|
const mediaStream = stream && stream.stream || null
|
|
const url = stream && stream.url
|
|
if ('srcObject' in video as unknown) {
|
|
if (video.srcObject !== mediaStream) {
|
|
video.srcObject = mediaStream
|
|
}
|
|
} else if (video.src !== url) {
|
|
video.src = url || ''
|
|
}
|
|
videos[socket.id] = video
|
|
}
|
|
render () {
|
|
const { active, mirrored, muted } = this.props
|
|
const className = classnames('video-container', { active, mirrored })
|
|
return (
|
|
<div className={className}>
|
|
<video
|
|
id={`video-${socket.id}`}
|
|
autoPlay
|
|
onClick={this.handleClick}
|
|
onLoadedMetadata={() => this.props.play()}
|
|
playsInline
|
|
ref={this.videoRef}
|
|
muted={muted}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
}
|