98 lines
2.5 KiB
React
98 lines
2.5 KiB
React
// Video conference carousel item.
|
|
import React from 'react';
|
|
|
|
import LetterTile from './letter-tile.jsx';
|
|
|
|
/**
|
|
* Props:
|
|
* - cameraPub
|
|
* - micPub
|
|
* - isSpeaking
|
|
* - tinode
|
|
* - photo
|
|
* - userId
|
|
* - name
|
|
*/
|
|
export default class VCCarouselItem extends React.PureComponent {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.handleVideoRefChange = this.handleVideoRefChange.bind(this);
|
|
this.handleAudioRefChange = this.handleAudioRefChange.bind(this);
|
|
|
|
this.videoRef = null;
|
|
this.audioRef = null;
|
|
}
|
|
|
|
componentDidUpdate(prevProps) {
|
|
if (this.videoRef && !this.videoRef.srcObject && this.props.cameraPub && this.props.cameraPub.videoTrack) {
|
|
this.props.cameraPub.videoTrack.attach(this.videoRef);
|
|
}
|
|
if (this.audioRef && !this.audioRef.srcObject && this.props.micPub && this.props.micPub.audioTrack) {
|
|
this.props.micPub.audioTrack.attach(this.audioRef);
|
|
}
|
|
}
|
|
|
|
handleVideoRefChange(node) {
|
|
if (!node) {
|
|
return;
|
|
}
|
|
|
|
this.videoRef = node;
|
|
|
|
// Attach video track to video element.
|
|
const cameraPub = this.props.cameraPub;
|
|
const cameraEnabled = cameraPub && cameraPub.isSubscribed && !cameraPub.isMuted;
|
|
if (cameraEnabled && cameraPub.videoTrack) {
|
|
cameraPub.videoTrack.attach(node);
|
|
}
|
|
}
|
|
|
|
handleAudioRefChange(node) {
|
|
if (!node) {
|
|
return;
|
|
}
|
|
|
|
this.audioRef = node;
|
|
|
|
// Attach audio track to audio element.
|
|
const micPub = this.props.micPub;
|
|
const micEnabled = micPub && micPub.isSubscribed && !micPub.isMuted;
|
|
if (micEnabled && micPub.audioTrack) {
|
|
micPub.audioTrack.attach(node);
|
|
}
|
|
}
|
|
|
|
render() {
|
|
let classes = 'call-party carousel-item';
|
|
if (this.props.isSpeaking) {
|
|
classes += ' call-party-speaking';
|
|
}
|
|
|
|
const micPub = this.props.micPub;
|
|
const cameraPub = this.props.cameraPub;
|
|
return (
|
|
<div className={classes}>
|
|
<video ref={this.handleVideoRefChange}></video>
|
|
<audio ref={this.handleAudioRefChange}></audio>
|
|
{micPub && micPub.isMuted ?
|
|
<i className="material-icons muted">mic_off</i>
|
|
: null
|
|
}
|
|
{cameraPub && cameraPub.isMuted ?
|
|
<div className="avatar-box">
|
|
<LetterTile
|
|
tinode={this.props.tinode}
|
|
avatar={this.props.photo || true}
|
|
topic={this.props.userId}
|
|
title={this.props.name} />
|
|
</div>
|
|
: null}
|
|
<div className="caller-name inactive">
|
|
{this.props.name}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|