jiti-meet/react/features/base/premeeting/components/web/Preview.js

103 lines
2.8 KiB
JavaScript
Raw Normal View History

2020-05-20 08:25:31 +00:00
// @flow
import React, { useEffect } from 'react';
2020-05-20 08:25:31 +00:00
import { getDisplayName } from '../../../../base/settings';
import { Avatar } from '../../../avatar';
2020-05-20 08:25:31 +00:00
import { Video } from '../../../media';
import { getLocalParticipant } from '../../../participants';
2020-05-20 08:25:31 +00:00
import { connect } from '../../../redux';
import { getLocalVideoTrack } from '../../../tracks';
declare var APP: Object;
2020-05-20 08:25:31 +00:00
export type Props = {
/**
2021-11-04 21:10:43 +00:00
* Local participant id.
*/
_participantId: string,
/**
* Flag controlling whether the video should be flipped or not.
*/
flipVideo: boolean,
/**
* The name of the user that is about to join.
*/
name: string,
2020-05-20 08:25:31 +00:00
/**
* 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 { _participantId, flipVideo, name, videoMuted, videoTrack } = props;
const className = flipVideo ? 'flipVideoX' : '';
2020-05-20 08:25:31 +00:00
useEffect(() => {
APP.API.notifyPrejoinVideoVisibilityChanged(Boolean(!videoMuted && videoTrack));
}, [ videoMuted, videoTrack ]);
useEffect(() => {
APP.API.notifyPrejoinLoaded();
return () => APP.API.notifyPrejoinVideoVisibilityChanged(false);
}, []);
return (
<div id = 'preview'>
{!videoMuted && videoTrack
? (
<Video
className = { className }
id = 'prejoinVideo'
videoTrack = {{ jitsiTrack: videoTrack }} />
)
: (
<Avatar
className = 'premeeting-screen-avatar'
displayName = { name }
participantId = { _participantId }
size = { 200 } />
)}
</div>
);
2020-05-20 08:25:31 +00:00
}
/**
* 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) {
const name = getDisplayName(state);
const { id: _participantId } = getLocalParticipant(state);
2020-05-20 08:25:31 +00:00
return {
_participantId,
flipVideo: state['features/base/settings'].localFlipX,
name,
2020-05-20 08:25:31 +00:00
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);