bigbluebutton-Github/bigbluebutton-html5/imports/ui/components/notifications-bar/container.jsx

129 lines
4.0 KiB
React
Raw Normal View History

import React, { useEffect } from 'react';
import { defineMessages, useIntl } from 'react-intl';
import { isEmpty } from 'radash';
import MeetingRemainingTime from '/imports/ui/components/common/remaining-time/meeting-duration/component';
import { useReactiveVar } from '@apollo/client';
2021-09-11 04:48:52 +08:00
import { layoutSelectInput, layoutDispatch } from '../layout/context';
import { ACTIONS } from '../layout/enums';
import NotificationsBar from './component';
import connectionStatus from '../../core/graphql/singletons/connectionStatus';
import useMeeting from '../../core/hooks/useMeeting';
// disconnected and trying to open a new connection
const intlMessages = defineMessages({
failedMessage: {
id: 'app.failedMessage',
2017-05-17 22:32:35 +08:00
description: 'Notification for connecting to server problems',
},
connectingMessage: {
id: 'app.connectingMessage',
2017-05-17 22:32:35 +08:00
description: 'Notification message for when client is connecting to server',
},
waitingMessage: {
id: 'app.waitingMessage',
2017-05-17 22:32:35 +08:00
description: 'Notification message for disconnection with reconnection counter',
},
reconnectingMessage: {
id: 'app.reconnectingMessage',
description: 'Notification message for disconnection',
2019-06-06 02:19:13 +08:00
},
2016-11-15 00:12:54 +08:00
calculatingBreakoutTimeRemaining: {
id: 'app.calculatingBreakoutTimeRemaining',
description: 'Message that tells that the remaining time is being calculated',
},
alertMeetingEndsUnderMinutes: {
id: 'app.meeting.alertMeetingEndsUnderMinutes',
description: 'Alert that tells that the meeting ends under x minutes',
},
alertBreakoutEndsUnderMinutes: {
id: 'app.meeting.alertBreakoutEndsUnderMinutes',
description: 'Alert that tells that the breakout ends under x minutes',
},
serverIsNotResponding: {
id: 'app.serverIsNotResponding',
description: 'Alert that tells that server is not responding',
},
serverIsSlow: {
id: 'app.serverIsSlow',
description: 'Alert that tells that server is slow',
},
});
const NotificationsBarContainer = () => {
const data = {};
data.alert = true;
data.color = 'primary';
const intl = useIntl();
const connected = useReactiveVar(connectionStatus.getConnectedStatusVar());
const serverIsResponding = useReactiveVar(connectionStatus.getServerIsRespondingVar());
const pingIsComing = useReactiveVar(connectionStatus.getPingIsComingVar());
const lastRttRequestSuccess = useReactiveVar(connectionStatus.getLastRttRequestSuccessVar());
// if connection failed x attempts a error will be thrown
if (
!connected
|| !serverIsResponding
|| !pingIsComing
) {
data.color = 'primary';
data.message = (
<>
{!connected && intl.formatMessage(intlMessages.reconnectingMessage)}
{(connected && !serverIsResponding && lastRttRequestSuccess)
&& intl.formatMessage(intlMessages.serverIsNotResponding)}
{(connected && serverIsResponding && !pingIsComing && lastRttRequestSuccess)
&& intl.formatMessage(intlMessages.serverIsSlow)}
</>
);
}
const { data: meeting } = useMeeting((m) => ({
isBreakout: m.isBreakout,
componentsFlags: m.componentsFlags,
}));
if (meeting?.isBreakout) {
data.message = (
<MeetingRemainingTime />
);
}
if (meeting) {
const { isBreakout, componentsFlags } = meeting;
if (componentsFlags.showRemainingTime && !isBreakout) {
data.message = (
<MeetingRemainingTime />
);
}
}
const notificationsBar = layoutSelectInput((i) => i.notificationsBar);
const layoutContextDispatch = layoutDispatch();
const { hasNotification } = notificationsBar;
useEffect(() => {
const localHasNotification = !!data.message;
if (localHasNotification !== hasNotification) {
layoutContextDispatch({
type: ACTIONS.SET_HAS_NOTIFICATIONS_BAR,
value: localHasNotification,
});
2016-11-15 00:12:54 +08:00
}
}, [data.message, hasNotification]);
if (isEmpty(data.message)) {
return null;
2016-11-14 19:57:10 +08:00
}
return (
<NotificationsBar color={data.color}>
{data.message}
</NotificationsBar>
);
};
export default NotificationsBarContainer;