99 lines
2.6 KiB
JavaScript
99 lines
2.6 KiB
JavaScript
// @flow
|
|
|
|
import { makeStyles } from '@material-ui/styles';
|
|
import React from 'react';
|
|
import { useSelector } from 'react-redux';
|
|
|
|
import { isDisplayNameVisible, isNameReadOnly } from '../../../base/config/functions.any';
|
|
import DisplayName from '../../../display-name/components/web/DisplayName';
|
|
import { THUMBNAIL_TYPE } from '../../constants';
|
|
|
|
import StatusIndicators from './StatusIndicators';
|
|
|
|
declare var interfaceConfig: Object;
|
|
|
|
type Props = {
|
|
|
|
/**
|
|
* Class name for indicators container.
|
|
*/
|
|
className: string,
|
|
|
|
/**
|
|
* Whether or not the indicators are for the local participant.
|
|
*/
|
|
local: boolean,
|
|
|
|
/**
|
|
* Id of the participant for which the component is displayed.
|
|
*/
|
|
participantId: string,
|
|
|
|
/**
|
|
* Whether or not to show the status indicators.
|
|
*/
|
|
showStatusIndicators: string,
|
|
|
|
/**
|
|
* The type of thumbnail.
|
|
*/
|
|
thumbnailType: string
|
|
}
|
|
|
|
const useStyles = makeStyles(() => {
|
|
return {
|
|
nameContainer: {
|
|
display: 'flex',
|
|
overflow: 'hidden',
|
|
padding: '2px 0',
|
|
|
|
'&>div': {
|
|
display: 'flex',
|
|
overflow: 'hidden'
|
|
},
|
|
|
|
'&:first-child': {
|
|
marginLeft: '6px'
|
|
}
|
|
}
|
|
};
|
|
});
|
|
|
|
const ThumbnailBottomIndicators = ({
|
|
className,
|
|
local,
|
|
participantId,
|
|
showStatusIndicators = true,
|
|
thumbnailType
|
|
}: Props) => {
|
|
const styles = useStyles();
|
|
const _allowEditing = !useSelector(isNameReadOnly);
|
|
const _defaultLocalDisplayName = interfaceConfig.DEFAULT_LOCAL_DISPLAY_NAME;
|
|
const _showDisplayName = useSelector(isDisplayNameVisible);
|
|
|
|
return (<div className = { className }>
|
|
{
|
|
showStatusIndicators && <StatusIndicators
|
|
audio = { true }
|
|
moderator = { true }
|
|
participantID = { participantId }
|
|
screenshare = { thumbnailType === THUMBNAIL_TYPE.TILE }
|
|
thumbnailType = { thumbnailType } />
|
|
}
|
|
{
|
|
_showDisplayName && (
|
|
<span className = { styles.nameContainer }>
|
|
<DisplayName
|
|
allowEditing = { local ? _allowEditing : false }
|
|
displayNameSuffix = { local ? _defaultLocalDisplayName : '' }
|
|
elementID = { local ? 'localDisplayName' : `participant_${participantId}_name` }
|
|
participantID = { participantId }
|
|
thumbnailType = { thumbnailType } />
|
|
</span>
|
|
)
|
|
}
|
|
</div>);
|
|
};
|
|
|
|
export default ThumbnailBottomIndicators;
|