jiti-meet/react/features/invite/components/callee-info/CalleeInfo.js

161 lines
4.6 KiB
JavaScript

// @flow
import React, { Component } from 'react';
import { Avatar } from '../../../base/avatar';
import { MEDIA_TYPE } from '../../../base/media';
import {
getParticipantDisplayName,
getParticipantPresenceStatus,
getRemoteParticipants
} from '../../../base/participants';
import { Container, Text } from '../../../base/react';
import { connect } from '../../../base/redux';
import { isLocalTrackMuted } from '../../../base/tracks';
import { CALLING, PresenceLabel } from '../../../presence-status';
import styles from './styles';
/**
* The type of the React {@code Component} props of {@link CalleeInfo}.
*/
type Props = {
/**
* The callee's information such as display name.
*/
_callee: Object,
_isVideoMuted: boolean
};
/**
* Implements a React {@link Component} which depicts the establishment of a
* call with a specific remote callee.
*
* @augments Component
*/
class CalleeInfo extends Component<Props> {
/**
* Implements React's {@link Component#render()}.
*
* @inheritdoc
* @returns {ReactElement}
*/
render() {
const {
id,
name,
status = CALLING
} = this.props._callee;
const className = this.props._isVideoMuted ? 'solidBG' : undefined;
return (
<Container
{ ...this._style('ringing', className) }
id = 'ringOverlay'>
<Container
{ ...this._style('ringing__content') }>
<Avatar
{ ...this._style('ringing__avatar') }
participantId = { id } />
<Container { ...this._style('ringing__status') }>
<PresenceLabel
defaultPresence = { status }
{ ...this._style('ringing__text') } />
</Container>
<Container { ...this._style('ringing__name') }>
<Text
{ ...this._style('ringing__text') }>
{ name }
</Text>
</Container>
</Container>
</Container>
);
}
/**
* Attempts to convert specified CSS class names into React
* {@link Component} props {@code style} or {@code className}.
*
* @param {Array<string>} classNames - The CSS class names to convert
* into React {@code Component} props {@code style} or {@code className}.
* @returns {{
* className: string,
* style: Object
* }}
*/
_style(...classNames: Array<?string>) {
let className = '';
let style;
for (const aClassName of classNames) {
if (aClassName) {
// Attempt to convert aClassName into style.
if (styles && aClassName in styles) {
// React Native will accept an Array as the value of the
// style prop. However, I do not know about React.
style = {
...style,
...styles[aClassName]
};
} else {
// Otherwise, leave it as className.
className += `${aClassName} `;
}
}
}
// Choose which of the className and/or style props has a value and,
// consequently, must be returned.
const props = {};
if (className) {
props.className = className.trim();
}
if (style) {
props.style = style;
}
return props;
}
}
/**
* Maps (parts of) the redux state to {@code CalleeInfo}'s props.
*
* @param {Object} state - The redux state.
* @private
* @returns {{
* _callee: Object
* }}
*/
function _mapStateToProps(state) {
const _isVideoMuted
= isLocalTrackMuted(state['features/base/tracks'], MEDIA_TYPE.VIDEO);
// This would be expensive for big calls but the component will be mounted only when there are up
// to 3 participants in the call.
for (const [ id, p ] of getRemoteParticipants(state)) {
if (p.botType === 'poltergeist') {
return {
_callee: {
id,
name: getParticipantDisplayName(state, id),
status: getParticipantPresenceStatus(state, id)
},
_isVideoMuted
};
}
}
return {
_callee: state['features/invite'].initialCalleeInfo,
_isVideoMuted
};
}
export default connect(_mapStateToProps)(CalleeInfo);