fix(raised-hands); some copilot fixes and otimizations

Author: AtilaU19

bigbluebutton-html5/imports/ui/components/user-list/hooks/useUserOperations.ts

@@ -1,4 +1,3 @@
-import { useState } from 'react';
 import { useLazyQuery, useMutation } from '@apollo/client';
 import { useIntl } from 'react-intl';
 import { User, RaisedHandUser } from '/imports/ui/Types/user';
@@ -14,6 +13,7 @@ import {
   SET_PRESENTER,
   SET_RAISE_HAND,
 } from '/imports/ui/core/graphql/mutations/userMutations';
+import { useModalRegistration } from '/imports/ui/core/singletons/modalController';
 
 export const mapRaisedHandToUser = (raisedHandUser: RaisedHandUser): User => {
   const voiceData = raisedHandUser.voice || {};
@@ -48,14 +48,29 @@ export const mapRaisedHandToUser = (raisedHandUser: RaisedHandUser): User => {
   return user;
 };
 
-export const useUserOperations = (pageId: string) => {
+export const useUserOperations = (userId?: string) => {
   const intl = useIntl();
   const toggleVoiceFunction = useToggleVoice();
-  const [isConfirmationModalOpen, setIsConfirmationModalOpen] = useState<boolean>(false);
   const [chatCreateWithUser] = useMutation(CHAT_CREATE_WITH_USER);
 
+  const {
+    isOpen: isConfirmationModalOpen,
+    open: openConfirmationModal,
+    close: closeConfirmationModal,
+  } = useModalRegistration({
+    id: `removeUserConfirmation-${userId || 'default'}`,
+    priority: 'low',
+  });
+
+  const setIsConfirmationModalOpen = (isOpen: boolean) => {
+    if (isOpen) {
+      openConfirmationModal();
+    } else {
+      closeConfirmationModal();
+    }
+  };
+
   const [getWriters] = useLazyQuery(CURRENT_PAGE_WRITERS_QUERY, {
-    variables: { pageId },
     fetchPolicy: 'no-cache',
   });
 

bigbluebutton-html5/imports/ui/components/user-list/raised-hands/component.tsx

@@ -49,7 +49,7 @@ const RaisedHandsContainer: React.FC = () => {
     color: u.color,
   }));
 
-  const { data: presentationData, loading: presentationLoading } = useDeduplicatedSubscription<{
+  const { data: presentationData } = useDeduplicatedSubscription<{
     pres_page_curr: Array<{ pageId: string }> }>(CURRENT_PRESENTATION_PAGE_SUBSCRIPTION);
   const pageId = presentationData?.pres_page_curr?.[0]?.pageId ?? '';
 
@@ -60,7 +60,7 @@ const RaisedHandsContainer: React.FC = () => {
     );
   }
 
-  if (!meeting || !currentUser || meetingLoading || presentationLoading || raisedHands.length === 0) {
+  if (!meeting || !currentUser || meetingLoading || raisedHands.length === 0) {
     return null;
   }
 

bigbluebutton-html5/imports/ui/components/user-list/raised-hands/list-item/component.tsx

@@ -120,9 +120,8 @@ const RaisedHandsListItem: React.FC<RaisedHandsListItemProps> = ({
   openUserAction,
   setOpenUserAction,
 }) => {
-  const { intl, operations, modal } = useUserOperations(pageId);
-
   const user = useMemo(() => mapRaisedHandToUser(raisedHandUser), [raisedHandUser]);
+  const { intl, operations, modal } = useUserOperations(user.userId);
 
   const isReactionsEnabled = useIsReactionsEnabled();
   const emojiSize = convertRemToPixels(2.2);
@@ -186,7 +185,7 @@ const RaisedHandsListItem: React.FC<RaisedHandsListItemProps> = ({
     operations.setRole,
     operations.setLocked,
     operations.userEjectCameras,
-    modal.setIsOpen,
+    () => modal.setIsOpen(true),
     operations.setRaiseHand,
   );
 

bigbluebutton-html5/imports/ui/components/user-list/raised-hands/list/component.tsx

@@ -26,8 +26,6 @@ const RaisedHandsList: React.FC<RaisedHandsListProps> = ({
 }) => {
   const [openUserAction, setOpenUserAction] = useState<string | null>(null);
 
-  if (raisedHands.length === 0) return null;
-
   const listContent = raisedHands.map((user, index) => (
     <Styled.RaisedHandsItem key={user.userId}>
       <RaisedHandsListItem

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

@@ -53,7 +53,7 @@ const UserListItem: React.FC<UserListItemProps> = ({
   pageId,
   type,
 }) => {
-  const { intl, operations, modal } = useUserOperations(pageId);
+  const { intl, operations, modal } = useUserOperations(user.userId);
 
   const { pluginsExtensibleAreasAggregatedState } = useContext(PluginsContext);
   let userItemsFromPlugin = [] as PluginSdk.UserListItemAdditionalInformationInterface[];
@@ -117,7 +117,7 @@ const UserListItem: React.FC<UserListItemProps> = ({
     operations.setRole,
     operations.setLocked,
     operations.userEjectCameras,
-    modal.setIsOpen,
+    () => modal.setIsOpen(true),
     operations.setRaiseHand,
   );
 

bigbluebutton-html5/imports/ui/components/user-list/user-list-participants/list-item/service.ts

@@ -171,13 +171,15 @@ export const generateActionsPermissions = (
     && !isDialInUser
     && isPrivateChatEnabled
     && !isSubjectUserBot
+    && !isBreakout
     && type === 'participant';
 
   const allowedToMuteAudio = hasAuthority
     && subjectUserInAudio
     && !isMuted
     && !subjectUserVoice?.listenOnly
     && !isSubjectUserBot
+    && !isBreakout
     && (type === 'participant' || type === 'raised-hand');
 
   const allowedToUnmuteAudio = hasAuthority
@@ -186,6 +188,7 @@ export const generateActionsPermissions = (
     && isMuted
     && (amISubjectUser || usersPolicies?.allowModsToUnmuteUsers)
     && !lockSettings?.disableMic
+    && !isBreakout
     && (type === 'participant' || type === 'raised-hand');
 
   const allowedToChangeWhiteboardAccess = currentUser.presenter
@@ -368,7 +371,7 @@ export const createToolbarOptions = (
   setRole: MutationFunction,
   setLocked: MutationFunction,
   userEjectCameras: MutationFunction,
-  setIsConfirmationModalOpen: (value: boolean) => void,
+  openConfirmationModal: () => void,
   setRaiseHand: MutationFunction,
 ) => {
   const MODERATOR_ROLE = window.meetingClientSettings.public.user.role_moderator;

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

@@ -21,15 +21,7 @@ interface AvatarProps {
   isSkeleton?: boolean;
 }
 
-interface RaisedHandAvatarProps {
-  moderator?: boolean;
-  presenter?: boolean;
-  talking?: boolean;
-  color?: string;
-  animations?: boolean;
-  emoji?: boolean;
-  avatar?: string;
-  isSkeleton?: boolean;
+interface RaisedHandAvatarProps extends AvatarProps {
   children?: React.ReactNode;
 }