diff --git a/src/components/modal/component.tsx b/src/components/modal/component.tsx
index 41d73c4..13ee0d0 100644
--- a/src/components/modal/component.tsx
+++ b/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 (
document.querySelector('#modals-container') as HTMLElement}
isOpen={showModal}
onRequestClose={handleCloseModal}
>
- {
- handleCloseModal();
- }}
- aria-label={intl.formatMessage(intlMessages.closeButton)}
- >
-
-
+ {!isBot && (
+ {
+ handleCloseModal();
+ }}
+ aria-label={intl.formatMessage(intlMessages.closeButton)}
+ >
+
+
+ )}
+ {isBot && showModal && (
+
+
+
+ )}
);
}
diff --git a/src/components/modal/styles.ts b/src/components/modal/styles.ts
index f19d6ed..8e3df84 100644
--- a/src/components/modal/styles.ts
+++ b/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,
};
diff --git a/src/components/modal/types.ts b/src/components/modal/types.ts
index 564d2d5..2ed4937 100644
--- a/src/components/modal/types.ts
+++ b/src/components/modal/types.ts
@@ -10,4 +10,5 @@ export interface PickUserModalProps {
handleCloseModal: () => void;
pickedUserWithEntryId: PickedUserWithEntryId;
currentUser: CurrentUserData;
+ isBot: boolean;
}
diff --git a/src/components/pick-random-user-panel/component.tsx b/src/components/pick-random-user-panel/component.tsx
index 91a4e84..80183fc 100644
--- a/src/components/pick-random-user-panel/component.tsx
+++ b/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;
diff --git a/src/components/pick-random-user-panel/queries.ts b/src/components/pick-random-user-panel/queries.ts
index 95821a0..1d74b56 100644
--- a/src/components/pick-random-user-panel/queries.ts
+++ b/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
}
}
`;
diff --git a/src/components/pick-random-user/component.tsx b/src/components/pick-random-user/component.tsx
index 4069fd5..f3c4cb1 100644
--- a/src/components/pick-random-user/component.tsx
+++ b/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!(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 && (
[];
}
+
+export interface BotData {
+ bot: boolean
+}
+
+export interface BotDataWrapper {
+ user_current: BotData[];
+}