Merge pull request #11724 from ramonlsouza/userlist-rtl

Fix userlist RTL/LTR for userlist when language is changed

bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/component.jsx

@@ -12,6 +12,7 @@ import {
 } from 'react-virtualized';
 import UserListItemContainer from './user-list-item/container';
 import UserOptionsContainer from './user-options/container';
+import Settings from '/imports/ui/services/settings';
 
 const propTypes = {
   compact: PropTypes.bool,
@@ -135,6 +136,7 @@ class UserParticipants extends Component {
     } = this.props;
     const { scrollArea } = this.state;
     const user = users[index];
+    const isRTL = Settings.application.isRTL;
 
     return (
       <CellMeasurer
@@ -157,6 +159,7 @@ class UserParticipants extends Component {
               currentUser,
               meetingIsBreakout,
               scrollArea,
+              isRTL,
             }}
             user={user}
             getScrollContainerRef={this.getScrollContainerRef}

bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-list-item/component.jsx

@@ -50,6 +50,7 @@ class UserListItem extends PureComponent {
       notify,
       raiseHandAudioAlert,
       raiseHandPushAlert,
+      isRTL,
     } = this.props;
 
     const contents = (
@@ -86,6 +87,7 @@ class UserListItem extends PureComponent {
           notify,
           raiseHandAudioAlert,
           raiseHandPushAlert,
+          isRTL,
         }}
       />
     );

bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-list-item/user-dropdown/component.jsx

@@ -577,6 +577,7 @@ class UserDropdown extends PureComponent {
       intl,
       isThisMeetingLocked,
       isMe,
+      isRTL,
     } = this.props;
 
     const {
@@ -615,7 +616,7 @@ class UserDropdown extends PureComponent {
       <div
         data-test={isMe(user.userId) ? 'userListItemCurrent' : 'userListItem'}
         className={!actions.length ? styles.userListItem : null}
-        style={{ direction: document.documentElement.dir }}
+        style={{ direction: isRTL ? 'rtl' : 'ltr' }}
       >
         <div className={styles.userItemContents}>
           <div className={styles.userAvatar}>