fix(reactions): working after 2.5 merge

Reactions are working now

bigbluebutton-html5/imports/ui/components/user-avatar/component.jsx

@@ -54,6 +54,7 @@ const UserAvatar = ({
   noVoice,
   whiteboardAccess,
   isSkeleton,
+  className,
 }) => (
   <>
     {isSkeleton && (<Styled.Skeleton>{children}</Styled.Skeleton>)}
@@ -73,6 +74,7 @@ const UserAvatar = ({
         isChrome={isChrome}
         isFirefox={isFirefox}
         isEdge={isEdge}
+        className={className}
         style={{
           backgroundColor: color,
           color, // We need the same color on both for the border

bigbluebutton-html5/imports/ui/components/user-list/service.js

@@ -12,6 +12,7 @@ import { makeCall } from '/imports/ui/services/api';
 import KEY_CODES from '/imports/utils/keyCodes';
 import AudioService from '/imports/ui/components/audio/service';
 import VideoService from '/imports/ui/components/video-provider/service';
+import UserReactionService from '/imports/ui/components/user-reaction/service';
 import logger from '/imports/startup/client/logger';
 import WhiteboardService from '/imports/ui/components/whiteboard/service';
 import { Session } from 'meteor/session';
@@ -206,7 +207,7 @@ const addUserReaction = (users) => {
 
   return users.map((user) => {
     let reaction = '';
-    const obj = usersReactions.find(us => us.userId === user.userId);
+    const obj = usersReactions.find((us) => us.userId === user.userId);
     if (obj !== undefined) {
       ({ reaction } = obj);
     }
@@ -218,6 +219,7 @@ const addUserReaction = (users) => {
   });
 };
 
+// TODO I think this method is no longer used, verify
 const getUsers = () => {
   let users = Users
     .find({
@@ -238,7 +240,7 @@ const getUsers = () => {
   return addIsSharingWebcam(addUserReaction(addWhiteboardAccess(users))).sort(sortUsers);
 };
 
-const formatUsers = (contextUsers, videoUsers, whiteboardUsers) => {
+const formatUsers = (contextUsers, videoUsers, whiteboardUsers, reactionUsers) => {
   let users = contextUsers.filter((user) => user.loggedOut === false && user.left === false);
 
   const currentUser = Users.findOne({ userId: Auth.userID }, { fields: { role: 1, locked: 1 } });
@@ -254,11 +256,15 @@ const formatUsers = (contextUsers, videoUsers, whiteboardUsers) => {
   return users.map((user) => {
     const isSharingWebcam = videoUsers?.includes(user.userId);
     const whiteboardAccess = whiteboardUsers?.includes(user.userId);
+    const reaction = reactionUsers?.includes(user.userId)
+      ? UserReactionService.getUserReaction(user.userId)
+      : 'none';
 
     return {
       ...user,
       isSharingWebcam,
       whiteboardAccess,
+      reaction,
     };
   }).sort(sortUsers);
 };

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

@@ -7,6 +7,7 @@ import ChatService from '/imports/ui/components/chat/service';
 import Auth from '/imports/ui/services/auth';
 import useContextUsers from '/imports/ui/components/components-data/users-context/service';
 import VideoService from '/imports/ui/components/video-provider/service';
+import UserReactionService from '/imports/ui/components/user-reaction/service';
 import WhiteboardService from '/imports/ui/components/whiteboard/service';
 import Meetings from '/imports/api/meetings';
 
@@ -19,12 +20,12 @@ const UserParticipantsContainer = (props) => {
     requestUserInformation,
   } = UserListService;
 
-  const { videoUsers, whiteboardUsers } = props;
+  const { videoUsers, whiteboardUsers, reactionUsers } = props;
   const { users: contextUsers, isReady } = useContextUsers();
 
   const currentUser = contextUsers && isReady ? contextUsers[Auth.meetingID][Auth.userID] : null;
   const usersArray = contextUsers && isReady ? Object.values(contextUsers[Auth.meetingID]) : null;
-  const users = contextUsers && isReady ? formatUsers(usersArray, videoUsers, whiteboardUsers) : [];
+  const users = contextUsers && isReady ? formatUsers(usersArray, videoUsers, whiteboardUsers, reactionUsers) : [];
 
   return (
     <UserParticipants {
@@ -66,6 +67,7 @@ export default withTracker(() => {
     meetingIsBreakout: meetingIsBreakout(),
     videoUsers: VideoService.getUsersIdFromVideoStreams(),
     whiteboardUsers,
+    reactionUsers: UserReactionService.getUsersIdFromUserReaction(),
     isThisMeetingLocked: UserListService.isMeetingLocked(Auth.meetingID),
     lockSettingsProps: currentMeeting && currentMeeting.lockSettingsProps,
   });

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

@@ -608,18 +608,29 @@ class UserListItem extends PureComponent {
       voiceUser,
     } = this.props;
 
+    // TODO Review this, compare with 2.5 bbb
+    let isReaction = false;
+    const getIconUser = () => {
+      if (user.emoji !== 'none' && user.emoji !== 'notAway') {
+        return <Icon iconName={normalizeEmojiName(user.emoji)} />;
+      } if (user.reaction !== 'none') {
+        isReaction = true;
+        return user.reaction;
+      } if (user.name) {
+        return user.name.toLowerCase().slice(0, 2);
+      } return '??';
+    };
+
     const { clientType } = user;
     const isVoiceOnly = clientType === 'dial-in-user';
 
-    const iconUser = user.emoji !== 'none'
-      ? (<Icon iconName={normalizeEmojiName(user.emoji)} />)
-      : user.name.toLowerCase().slice(0, 2);
+    const iconUser = getIconUser();
 
     const iconVoiceOnlyUser = (<Icon iconName="volume_level_2" />);
     const userIcon = isVoiceOnly ? iconVoiceOnlyUser : iconUser;
 
     return (
-      <UserAvatar
+      <Styled.UserAvatarComponent
         moderator={user.role === ROLE_MODERATOR}
         presenter={user.presenter}
         talking={voiceUser.isTalking}
@@ -630,6 +641,7 @@ class UserListItem extends PureComponent {
         color={user.color}
         whiteboardAccess={user.whiteboardAccess}
         emoji={user.emoji !== 'none'}
+        hasReaction={user.reaction !== 'none'}
         avatar={user.avatar}
       >
         {
@@ -637,7 +649,7 @@ class UserListItem extends PureComponent {
             && !meetingIsBreakout
             ? breakoutSequence : userIcon
         }
-      </UserAvatar>
+      </Styled.UserAvatarComponent>
     );
   }
 

bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-list-item/styles.js

@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import userAvatar from '/imports/ui/components/user-avatar/component';
 
 import {
   lgPaddingY,
@@ -107,6 +108,13 @@ const UserAvatar = styled.div`
   flex: 0 0 2.25rem;
 `;
 
+const UserAvatarComponent = styled(userAvatar)`
+${({ hasReaction, emoji }) => hasReaction && !emoji && `
+  transition: all .5s ease;
+  font-size: 1.2rem;
+`}
+`;
+
 const NoActionsListItem = styled.div`
   margin-left: 0.5rem;
   padding: .45rem;
@@ -177,4 +185,5 @@ export default {
   UserNameMain,
   UserNameSub,
   SkeletonWrapper,
+  UserAvatarComponent,
 };

bigbluebutton-html5/imports/ui/components/user-reaction/service.js

@@ -13,6 +13,11 @@ const setUserReaction = (reaction) => {
   }
 };
 
+const getUsersIdFromUserReaction = () => UserReaction.find(
+  { meetingId: Auth.meetingID },
+  { fields: { userId: 1 } },
+).fetch().map((user) => user.userId);
+
 const getUserReaction = (userId) => {
   const reaction = UserReaction.findOne(
     {
@@ -33,11 +38,12 @@ const getUserReaction = (userId) => {
     };
   }
 
-  return reaction;
+  return reaction.reaction;
 };
 
 export default {
   getUserReaction,
   setUserReaction,
+  getUsersIdFromUserReaction,
   isEnabled,
 };