85 lines
1.9 KiB
JavaScript
85 lines
1.9 KiB
JavaScript
// @flow
|
|
|
|
import React from 'react';
|
|
|
|
import { Video } from '../../../media';
|
|
import { connect } from '../../../redux';
|
|
import { getLocalVideoTrack } from '../../../tracks';
|
|
|
|
import PreviewAvatar from './Avatar';
|
|
|
|
export type Props = {
|
|
|
|
/**
|
|
* The name of the user that is about to join.
|
|
*/
|
|
name: string,
|
|
|
|
/**
|
|
* Indicates whether the avatar should be shown when video is off
|
|
*/
|
|
showAvatar: boolean,
|
|
|
|
/**
|
|
* Flag signaling the visibility of camera preview.
|
|
*/
|
|
videoMuted: boolean,
|
|
|
|
/**
|
|
* The JitsiLocalTrack to display.
|
|
*/
|
|
videoTrack: ?Object,
|
|
};
|
|
|
|
/**
|
|
* Component showing the video preview and device status.
|
|
*
|
|
* @param {Props} props - The props of the component.
|
|
* @returns {ReactElement}
|
|
*/
|
|
function Preview(props: Props) {
|
|
const { name, showAvatar, videoMuted, videoTrack } = props;
|
|
|
|
if (!videoMuted && videoTrack) {
|
|
return (
|
|
<div id = 'preview'>
|
|
<Video
|
|
className = 'flipVideoX'
|
|
videoTrack = {{ jitsiTrack: videoTrack }} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (showAvatar) {
|
|
return (
|
|
<div
|
|
className = 'no-video'
|
|
id = 'preview'>
|
|
<PreviewAvatar name = { name } />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return null;
|
|
}
|
|
|
|
Preview.defaultProps = {
|
|
showAvatar: true
|
|
};
|
|
|
|
/**
|
|
* Maps part of the Redux state to the props of this component.
|
|
*
|
|
* @param {Object} state - The Redux state.
|
|
* @param {Props} ownProps - The own props of the component.
|
|
* @returns {Props}
|
|
*/
|
|
function _mapStateToProps(state, ownProps) {
|
|
return {
|
|
videoMuted: ownProps.videoTrack ? ownProps.videoMuted : state['features/base/media'].video.muted,
|
|
videoTrack: ownProps.videoTrack || (getLocalVideoTrack(state['features/base/tracks']) || {}).jitsiTrack
|
|
};
|
|
}
|
|
|
|
export default connect(_mapStateToProps)(Preview);
|