76 lines
1.8 KiB
JavaScript
76 lines
1.8 KiB
JavaScript
// @flow
|
|
|
|
import React from 'react';
|
|
import { Avatar } from '../../../base/avatar';
|
|
import { Video } from '../../../base/media';
|
|
import { connect } from '../../../base/redux';
|
|
import { getActiveVideoTrack, isPrejoinVideoMuted } from '../../functions';
|
|
|
|
export type Props = {
|
|
|
|
/**
|
|
* The name of the user that is about to join.
|
|
*/
|
|
name: string,
|
|
|
|
/**
|
|
* Flag signaling the visibility of camera preview.
|
|
*/
|
|
showCameraPreview: 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,
|
|
showCameraPreview,
|
|
videoTrack
|
|
} = props;
|
|
|
|
if (showCameraPreview && videoTrack) {
|
|
return (
|
|
<div className = 'prejoin-preview'>
|
|
<div className = 'prejoin-preview-overlay' />
|
|
<div className = 'prejoin-preview-bottom-overlay' />
|
|
<Video
|
|
className = 'flipVideoX prejoin-preview-video'
|
|
videoTrack = {{ jitsiTrack: videoTrack }} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className = 'prejoin-preview prejoin-preview--no-video'>
|
|
<Avatar
|
|
className = 'prejoin-preview-avatar'
|
|
displayName = { name }
|
|
size = { 200 } />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Maps the redux state to the React {@code Component} props.
|
|
*
|
|
* @param {Object} state - The redux state.
|
|
* @returns {Object}
|
|
*/
|
|
function mapStateToProps(state) {
|
|
return {
|
|
videoTrack: getActiveVideoTrack(state),
|
|
showCameraPreview: !isPrejoinVideoMuted(state)
|
|
};
|
|
}
|
|
|
|
export default connect(mapStateToProps)(Preview);
|