fix: filter out bot users from random selection; auto-close modal for bots; apply modal priority

src/components/modal/component.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useEffect, useState } from 'react';
 import { PickUserModalProps } from './types';
 import { PickedUserViewComponent } from './picked-user-view/component';
 import Styled from './styles';
@@ -13,32 +14,65 @@ export function PickUserModal(props: PickUserModalProps) {
     updatePickedRandomUser,
     pickedUserWithEntryId,
     currentUser,
+    isBot,
   } = props;
 
+  const [progress, setProgress] = useState(0);
+
   const isYou = (pickedUserWithEntryId?.pickedUser?.userId === currentUser?.userId);
 
+  useEffect(() => {
+    if (isBot && showModal) {
+      setProgress(0);
+      const startTime = Date.now();
+      const duration = 5000; // Modal will be displayed for 5 seconds
+
+      const interval = setInterval(() => {
+        const elapsed = Date.now() - startTime;
+        const newProgress = (elapsed / duration) * 100;
+
+        if (newProgress >= 100) {
+          setProgress(100);
+          clearInterval(interval);
+          handleCloseModal();
+        } else {
+          setProgress(newProgress);
+        }
+      }, 30);
+
+      return () => clearInterval(interval);
+    }
+    return () => {};
+  }, [isBot, showModal, handleCloseModal]);
+
   const title = isYou
     ? intl.formatMessage(intlMessages.youWerePicked)
     : intl.formatMessage(intlMessages.pickedUser);
 
+  if (!showModal) return null;
+
   return (
     <Styled.PluginModal
-      overlayClassName="modal-overlay"
+      overlayClassName="modalOverlay"
+      portalClassName="modal-low"
+      parentSelector={() => document.querySelector('#modals-container') as HTMLElement}
       isOpen={showModal}
       onRequestClose={handleCloseModal}
     >
       <Styled.ModalContainer>
-        <Styled.ButtonClose
-          type="button"
-          onClick={() => {
-            handleCloseModal();
-          }}
-          aria-label={intl.formatMessage(intlMessages.closeButton)}
-        >
-          <i
-            className="icon-bbb-close"
-          />
-        </Styled.ButtonClose>
+        {!isBot && (
+          <Styled.ButtonClose
+            type="button"
+            onClick={() => {
+              handleCloseModal();
+            }}
+            aria-label={intl.formatMessage(intlMessages.closeButton)}
+          >
+            <i
+              className="icon-bbb-close"
+            />
+          </Styled.ButtonClose>
+        )}
       </Styled.ModalContainer>
       <PickedUserViewComponent
         {...{
@@ -49,6 +83,11 @@ export function PickUserModal(props: PickUserModalProps) {
           isYou,
         }}
       />
+      {isBot && showModal && (
+        <Styled.ProgressBarContainer>
+          <Styled.ProgressBarFill progress={progress} />
+        </Styled.ProgressBarContainer>
+      )}
     </Styled.PluginModal>
   );
 }

src/components/modal/styles.ts

@@ -1,5 +1,6 @@
 import styled from 'styled-components';
 import ReactModal from 'react-modal';
+import { colorGrayLightest, colorPrimary } from '../../styles/pallete';
 
 const PluginModal = styled(ReactModal)`
   position: relative;
@@ -95,9 +96,30 @@ const ButtonClose = styled.button`
   }
 `;
 
+const ProgressBarContainer = styled.div`
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
+  background-color: ${colorGrayLightest};
+  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 8px;
+  overflow: hidden;
+`;
+
+const ProgressBarFill = styled.div<{ progress: number }>`
+  height: 100%;
+  background-color: ${colorPrimary};
+  width: ${({ progress }) => `${progress}%`};
+  transition: width 0.03s linear;
+`;
+
 export default {
   PluginModal,
   ModalOverlay,
   ModalContainer,
   ButtonClose,
+  ProgressBarContainer,
+  ProgressBarFill,
 };

src/components/modal/types.ts

@@ -10,4 +10,5 @@ export interface PickUserModalProps {
   handleCloseModal: () => void;
   pickedUserWithEntryId: PickedUserWithEntryId;
   currentUser: CurrentUserData;
+  isBot: boolean;
 }

src/components/pick-random-user-panel/component.tsx

@@ -145,7 +145,7 @@ export function PickRandomUserPanelComponent(props: PickRandomUserPanelComponent
     includePickedUsers,
   ]);
 
-  const usersToBePicked: PickedUser[] = allUsers?.user
+  const usersToBePicked: PickedUser[] = (allUsers?.user ?? []).filter((user) => !user.bot)
     .filter((user) => {
       let roleFilter = true;
       if (!includeModerators) roleFilter = user.role === Role.VIEWER;

src/components/pick-random-user-panel/queries.ts

@@ -1,11 +1,13 @@
+// TODO: Replace this query with the useUsersBasicInfo once it's merged in
 export const USERS_MORE_INFORMATION = `
 subscription usersMoreInformation {
-  user {
+  user(where: { bot: { _eq: false } }) {
     color
     name
     userId
     role
     presenter
+    bot
   }
 }
 `;

src/components/pick-random-user/component.tsx

@@ -4,12 +4,14 @@ import * as ReactDOM from 'react-dom/client';
 
 import { GenericContentSidekickArea } from 'bigbluebutton-html-plugin-sdk';
 import {
+  BotDataWrapper,
   PickRandomUserPluginProps,
   PickedUser,
   PickedUserWithEntryId,
 } from './types';
 import { PickUserModal } from '../modal/component';
 import { Role } from './enums';
+import { BOT_SUBSCRIPTION } from './queries';
 import { PickRandomUserPanelComponent } from '../pick-random-user-panel/component';
 import { intlMessages } from '../../intlMessages';
 
@@ -23,6 +25,9 @@ function PickRandomUserPlugin({ pluginApi, intl }: PickRandomUserPluginProps) {
   const shouldPluginUnmount = pluginApi.useShouldUnmountPlugin();
   const currentUserInfo = pluginApi.useCurrentUser();
   const { data: currentUser } = currentUserInfo;
+  const { data: botData } = pluginApi
+    .useCustomSubscription!<BotDataWrapper>(BOT_SUBSCRIPTION) || {};
+  const isBot = botData?.user_current?.[0]?.bot || false;
 
   const {
     data: pickedUserFromDataChannelResponse,
@@ -105,6 +110,7 @@ function PickRandomUserPlugin({ pluginApi, intl }: PickRandomUserPluginProps) {
   if (!pickedUserWithEntryId) return null;
   return !shouldPluginUnmount && (
     <PickUserModal
+      isBot={isBot}
       {...{
         intl,
         showModal,

src/components/pick-random-user/queries.ts

@@ -0,0 +1,7 @@
+export const BOT_SUBSCRIPTION = `
+  subscription BotData {
+    user_current {
+      bot
+    }
+  }
+`;

src/components/pick-random-user/types.ts

@@ -8,6 +8,7 @@ export interface PickedUser {
     name: string;
     role: string;
     color: string;
+    bot: boolean;
 }
 
 export interface PickedUserWithEntryId {
@@ -41,3 +42,11 @@ export interface DataChannelPickedUserResponse {
 export interface DataChannelLastResetTimeResponse {
     pluginDataChannelMessage: DataChannelArrayMessages<Date>[];
 }
+
+export interface BotData {
+  bot: boolean
+}
+
+export interface BotDataWrapper {
+  user_current: BotData[];
+}