133 lines
3.9 KiB
JavaScript
133 lines
3.9 KiB
JavaScript
// @flow
|
|
|
|
import { makeStyles } from '@material-ui/styles';
|
|
import clsx from 'clsx';
|
|
import React from 'react';
|
|
import { useSelector } from 'react-redux';
|
|
|
|
import { isMobileBrowser } from '../../../base/environment/utils';
|
|
import ConnectionIndicator from '../../../connection-indicator/components/web/ConnectionIndicator';
|
|
import { LAYOUTS } from '../../../video-layout';
|
|
import { STATS_POPOVER_POSITION } from '../../constants';
|
|
import { getIndicatorsTooltipPosition } from '../../functions.web';
|
|
|
|
import RaisedHandIndicator from './RaisedHandIndicator';
|
|
import StatusIndicators from './StatusIndicators';
|
|
import VideoMenuTriggerButton from './VideoMenuTriggerButton';
|
|
|
|
declare var interfaceConfig: Object;
|
|
|
|
type Props = {
|
|
|
|
/**
|
|
* The current layout of the filmstrip.
|
|
*/
|
|
currentLayout: string,
|
|
|
|
/**
|
|
* Hide popover callback.
|
|
*/
|
|
hidePopover: Function,
|
|
|
|
/**
|
|
* Class name for the status indicators container.
|
|
*/
|
|
indicatorsClassName: string,
|
|
|
|
/**
|
|
* Whether or not the thumbnail is hovered.
|
|
*/
|
|
isHovered: boolean,
|
|
|
|
/**
|
|
* 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 popover is visible or not.
|
|
*/
|
|
popoverVisible: boolean,
|
|
|
|
/**
|
|
* Show popover callback.
|
|
*/
|
|
showPopover: Function
|
|
}
|
|
|
|
const useStyles = makeStyles(() => {
|
|
return {
|
|
container: {
|
|
display: 'flex',
|
|
|
|
'& > *:not(:last-child)': {
|
|
marginRight: '4px'
|
|
}
|
|
}
|
|
};
|
|
});
|
|
|
|
const ThumbnailTopIndicators = ({
|
|
currentLayout,
|
|
hidePopover,
|
|
indicatorsClassName,
|
|
isHovered,
|
|
local,
|
|
participantId,
|
|
popoverVisible,
|
|
showPopover
|
|
}: Props) => {
|
|
const styles = useStyles();
|
|
|
|
const _isMobile = isMobileBrowser();
|
|
const { NORMAL = 16 } = interfaceConfig.INDICATOR_FONT_SIZES || {};
|
|
const _indicatorIconSize = NORMAL;
|
|
const _connectionIndicatorAutoHideEnabled = Boolean(
|
|
useSelector(state => state['features/base/config'].connectionIndicators?.autoHide) ?? true);
|
|
const _connectionIndicatorDisabled = _isMobile
|
|
|| Boolean(useSelector(state => state['features/base/config'].connectionIndicators?.disabled));
|
|
|
|
const showConnectionIndicator = isHovered || !_connectionIndicatorAutoHideEnabled;
|
|
|
|
return (
|
|
<>
|
|
<div className = { styles.container }>
|
|
{!_connectionIndicatorDisabled
|
|
&& <ConnectionIndicator
|
|
alwaysVisible = { showConnectionIndicator }
|
|
enableStatsDisplay = { true }
|
|
iconSize = { _indicatorIconSize }
|
|
participantId = { participantId }
|
|
statsPopoverPosition = { STATS_POPOVER_POSITION[currentLayout] } />
|
|
}
|
|
<RaisedHandIndicator
|
|
iconSize = { _indicatorIconSize }
|
|
participantId = { participantId }
|
|
tooltipPosition = { getIndicatorsTooltipPosition(currentLayout) } />
|
|
{currentLayout !== LAYOUTS.TILE_VIEW && (
|
|
<div className = { clsx(indicatorsClassName, 'top-indicators') }>
|
|
<StatusIndicators
|
|
participantID = { participantId }
|
|
screenshare = { true } />
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className = { styles.container }>
|
|
<VideoMenuTriggerButton
|
|
hidePopover = { hidePopover }
|
|
local = { local }
|
|
participantId = { participantId }
|
|
popoverVisible = { popoverVisible }
|
|
showPopover = { showPopover }
|
|
visible = { isHovered } />
|
|
</div>
|
|
</>);
|
|
};
|
|
|
|
export default ThumbnailTopIndicators;
|