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[]; +}