85 lines
2.2 KiB
JavaScript
85 lines
2.2 KiB
JavaScript
|
// @flow
|
||
|
|
|
||
|
|
import { makeStyles } from '@material-ui/styles';
|
||
|
|
import React from 'react';
|
||
|
|
import { useSelector } from 'react-redux';
|
||
|
|
|
||
|
|
import { isNameReadOnly } from '../../../base/config/functions.any';
|
||
|
|
import DisplayName from '../../../display-name/components/web/DisplayName';
|
||
|
|
import { LAYOUTS } from '../../../video-layout';
|
||
|
|
|
||
|
|
import StatusIndicators from './StatusIndicators';
|
||
|
|
|
||
|
|
declare var interfaceConfig: Object;
|
||
|
|
|
||
|
|
type Props = {
|
||
|
|
|
||
|
|
/**
|
||
|
|
* The current layout of the filmstrip.
|
||
|
|
*/
|
||
|
|
currentLayout: string,
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 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
|
||
|
|
}
|
||
|
|
|
||
|
|
const useStyles = makeStyles(() => {
|
||
|
|
return {
|
||
|
|
nameContainer: {
|
||
|
|
display: 'flex',
|
||
|
|
overflow: 'hidden',
|
||
|
|
padding: '2px 0',
|
||
|
|
|
||
|
|
'&>div': {
|
||
|
|
display: 'flex',
|
||
|
|
overflow: 'hidden'
|
||
|
|
},
|
||
|
|
|
||
|
|
'&:first-child': {
|
||
|
|
marginLeft: '6px'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
});
|
||
|
|
|
||
|
|
const ThumbnailBottomIndicators = ({
|
||
|
|
className,
|
||
|
|
currentLayout,
|
||
|
|
local,
|
||
|
|
participantId
|
||
|
|
}: Props) => {
|
||
|
|
const styles = useStyles();
|
||
|
|
const _allowEditing = !useSelector(isNameReadOnly);
|
||
|
|
const _defaultLocalDisplayName = interfaceConfig.DEFAULT_LOCAL_DISPLAY_NAME;
|
||
|
|
|
||
|
|
return (<div className = { className }>
|
||
|
|
<StatusIndicators
|
||
|
|
audio = { true }
|
||
|
|
moderator = { true }
|
||
|
|
participantID = { participantId }
|
||
|
|
screenshare = { currentLayout === LAYOUTS.TILE_VIEW } />
|
||
|
|
<span className = { styles.nameContainer }>
|
||
|
|
<DisplayName
|
||
|
|
allowEditing = { local ? _allowEditing : false }
|
||
|
|
currentLayout = { currentLayout }
|
||
|
|
displayNameSuffix = { local ? _defaultLocalDisplayName : '' }
|
||
|
|
elementID = { local ? 'localDisplayName' : `participant_${participantId}_name` }
|
||
|
|
participantID = { participantId } />
|
||
|
|
</span>
|
||
|
|
</div>);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default ThumbnailBottomIndicators;
|