jiti-meet/react/features/filmstrip/components/web/RaisedHandIndicator.tsx

79 lines
2.1 KiB
TypeScript
Raw Normal View History

2022-09-13 07:36:00 +00:00
import { Theme } from '@mui/material';
2019-03-27 10:23:41 +00:00
import React from 'react';
import { useSelector } from 'react-redux';
2022-09-13 07:36:00 +00:00
import { makeStyles } from 'tss-react/mui';
2019-03-27 10:23:41 +00:00
import { IState } from '../../../app/types';
import { IconRaisedHand } from '../../../base/icons/svg';
import { getParticipantById, hasRaisedHand } from '../../../base/participants/functions';
import { Participant } from '../../../base/participants/types';
import BaseIndicator from '../../../base/react/components/web/BaseIndicator';
/**
* The type of the React {@code Component} props of {@link RaisedHandIndicator}.
*/
type Props = {
/**
* The font-size for the icon.
*/
iconSize: number;
/**
* The participant id who we want to render the raised hand indicator
* for.
*/
participantId: string;
/**
* From which side of the indicator the tooltip should appear from.
*/
tooltipPosition: string;
};
2022-09-13 07:36:00 +00:00
const useStyles = makeStyles()((theme: Theme) => {
return {
raisedHandIndicator: {
backgroundColor: theme.palette.warning02,
padding: '2px',
zIndex: 3,
display: 'inline-block',
borderRadius: '4px',
boxSizing: 'border-box'
}
};
});
/**
* Thumbnail badge showing that the participant would like to speak.
*
* @returns {ReactElement}
*/
const RaisedHandIndicator = ({
iconSize,
participantId,
tooltipPosition
}: Props) => {
const participant: Participant | undefined = useSelector((state: IState) =>
getParticipantById(state, participantId));
const _raisedHand = hasRaisedHand(participant);
2022-09-13 07:36:00 +00:00
const { classes: styles, theme } = useStyles();
if (!_raisedHand) {
return null;
}
return (
<div className = { styles.raisedHandIndicator }>
<BaseIndicator
2019-08-30 16:39:06 +00:00
icon = { IconRaisedHand }
2022-09-13 07:36:00 +00:00
iconColor = { theme.palette.uiBackground }
iconSize = { `${iconSize}px` }
tooltipKey = 'raisedHand'
tooltipPosition = { tooltipPosition } />
</div>
);
};
export default RaisedHandIndicator;