diff --git a/bigbluebutton-html5/imports/ui/components/user-avatar/component.jsx b/bigbluebutton-html5/imports/ui/components/user-avatar/component.jsx index a0ab4b21c1ce9ca26945f538a120a0705488fd97..a9337f82cc3a5f616f8c4a53caa54416f39dd0c6 100755 --- a/bigbluebutton-html5/imports/ui/components/user-avatar/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/user-avatar/component.jsx @@ -7,11 +7,12 @@ import { styles } from './styles'; const propTypes = { children: PropTypes.node.isRequired, moderator: PropTypes.bool.isRequired, - presenter: PropTypes.bool.isRequired, - talking: PropTypes.bool.isRequired, - muted: PropTypes.bool.isRequired, - listenOnly: PropTypes.bool.isRequired, - voice: PropTypes.bool.isRequired, + presenter: PropTypes.bool, + talking: PropTypes.bool, + muted: PropTypes.bool, + listenOnly: PropTypes.bool, + voice: PropTypes.bool, + noVoice: PropTypes.bool, color: PropTypes.string, className: PropTypes.string, }; @@ -23,6 +24,7 @@ const defaultProps = { muted: false, listenOnly: false, voice: false, + noVoice: false, color: '#000', className: null, }; @@ -36,36 +38,38 @@ const UserAvatar = ({ listenOnly, color, voice, + noVoice, className, }) => ( - <div - aria-hidden="true" - data-test="userAvatar" - className={cx(styles.avatar, { - [styles.moderator]: moderator, - [styles.presenter]: presenter, - [styles.muted]: muted, - [styles.listenOnly]: listenOnly, - [styles.voice]: voice, - }, className)} - style={{ - backgroundColor: color, - color, // We need the same color on both for the border - }} - > + <div + aria-hidden="true" + data-test="userAvatar" + className={cx(styles.avatar, { + [styles.moderator]: moderator, + [styles.presenter]: presenter, + [styles.muted]: muted, + [styles.listenOnly]: listenOnly, + [styles.voice]: voice, + [styles.noVoice]: noVoice && !listenOnly, + }, className)} + style={{ + backgroundColor: color, + color, // We need the same color on both for the border + }} + > - <div className={cx({ - [styles.talking]: (talking && !muted), - })} - /> + <div className={cx({ + [styles.talking]: (talking && !muted), + })} + /> - <div className={styles.content}> - {children} - </div> + <div className={styles.content}> + {children} </div> - ); + </div> +); UserAvatar.propTypes = propTypes; UserAvatar.defaultProps = defaultProps; diff --git a/bigbluebutton-html5/imports/ui/components/user-avatar/styles.scss b/bigbluebutton-html5/imports/ui/components/user-avatar/styles.scss index 94c2358b09c5657de5f26f96455216d72325ff87..29357d367409e921b9c0fc0d72f7ddea191b0fde 100755 --- a/bigbluebutton-html5/imports/ui/components/user-avatar/styles.scss +++ b/bigbluebutton-html5/imports/ui/components/user-avatar/styles.scss @@ -119,6 +119,13 @@ } } +.noVoice { + &:after { + content: ""; + background-color: var(--color-off-white); + } +} + .muted { &:after { content: "\00a0\e932\00a0"; @@ -134,7 +141,8 @@ .listenOnly, .muted, -.voice { +.voice, +.noVoice { @include indicatorStyles(); } diff --git a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-list-item/user-dropdown/component.jsx b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-list-item/user-dropdown/component.jsx index a79bdf7d3321e6b2b9a75b1661079faa4b09f44f..c9ee0517ebf09fb48261521280f75cb047d6efe6 100755 --- a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-list-item/user-dropdown/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-list-item/user-dropdown/component.jsx @@ -457,6 +457,7 @@ class UserDropdown extends PureComponent { muted={user.isMuted} listenOnly={user.isListenOnly} voice={user.isVoiceUser} + noVoice={!user.isVoiceUser} color={user.color} > {isVoiceOnly ? iconVoiceOnlyUser : iconUser}