BBB

app/videobridge/client/index.js

@@ -1,7 +1,4 @@
-import './stylesheets/video.css';
 import './views/bbbLiveView.html';
-import './views/videoFlexTabBbb.html';
-import './views/videoFlexTabBbb';
 import './tabBar';
 import './actionLink';
 import '../lib/messageType';

app/videobridge/client/tabBar.tsx

@@ -7,6 +7,8 @@ import { addAction, ToolboxActionConfig } from '../../../client/views/room/lib/T
 import { useTranslation } from '../../../client/contexts/TranslationContext';
 import Header from '../../../client/components/Header';
 
+const templateBBB = lazy(() => import('../../../client/views/room/contextualBar/Call/BBB'));
+
 addAction('bbb_video', ({ room }) => {
 	const enabled = useSetting('bigbluebutton_Enabled');
 	const t = useTranslation();
@@ -28,7 +30,7 @@ addAction('bbb_video', ({ room }) => {
 		id: 'bbb_video',
 		title: 'BBB Video Call',
 		icon: 'phone',
-		template: 'videoFlexTabBbb',
+		template: templateBBB,
 		order: live ? -1 : 0,
 		renderAction: (props): React.ReactNode => <Header.ToolBoxAction {...props}>
 			{live ? <Header.Badge title={t('Started_a_video_call')} variant='primary'>!</Header.Badge> : null}
@@ -37,7 +39,7 @@ addAction('bbb_video', ({ room }) => {
 	} : null), [enabled, groups, live, t]);
 });
 
-const template = lazy(() => import('../../../client/views/room/contextualBar/Call/Jitsi'));
+const templateJitsi = lazy(() => import('../../../client/views/room/contextualBar/Call/Jitsi'));
 
 addAction('video', ({ room }) => {
 	const enabled = useSetting('Jitsi_Enabled');
@@ -61,7 +63,7 @@ addAction('video', ({ room }) => {
 		id: 'video',
 		title: 'Call',
 		icon: 'phone',
-		template,
+		template: templateJitsi,
 		full: true,
 		order: live ? -1 : 0,
 		renderAction: (props): React.ReactNode => <Header.ToolBoxAction {...props}>

app/videobridge/server/methods/bbb.js

@@ -111,14 +111,12 @@ Meteor.methods({
 		const endApiResult = HTTP.get(endApi);
 
 		if (endApiResult.statusCode !== 200) {
-			// TODO improve error logging
-			console.log({ endApiResult });
-			return;
+			saveStreamingOptions(rid, {});
+			throw new Meteor.Error(endApiResult);
 		}
-
 		const doc = parseString(endApiResult.content);
 
-		if (doc.response.returncode[0] === 'FAILED') {
+		if (['SUCCESS', 'FAILED'].includes(doc.response.returncode[0])) {
 			saveStreamingOptions(rid, {});
 		}
 	},

app/videobridge/server/settings.js

@@ -30,6 +30,18 @@ Meteor.startup(function() {
 				},
 			});
 
+
+			this.add('bigbluebutton_Open_New_Window', false, {
+				type: 'boolean',
+				enableQuery: {
+					_id: 'bigbluebutton_Enabled',
+					value: true,
+				},
+				i18nLabel: 'Always_open_in_new_window',
+				public: true,
+			});
+
+
 			this.add('bigbluebutton_enable_d', true, {
 				type: 'boolean',
 				i18nLabel: 'WebRTC_Enable_Direct',

client/views/room/adapters.js

@@ -73,13 +73,6 @@ createTemplateForComponent('OTR', () => import('./contextualBar/OTR'), {
 	renderContainerView: () => HTML.DIV({ class: 'contextual-bar' }), // eslint-disable-line new-cap
 });
 
-createTemplateForComponent('CallJitsi', () => import('./contextualBar/Call/Jitsi'), {
-	renderContainerView: () => HTML.DIV({ class: 'contextual-bar' }), // eslint-disable-line new-cap
-});
-
-// createTemplateForComponent('CallBbb', () => import('./Call/Bbb'), {
-// 	renderContainerView: () => HTML.DIV({ class: 'contextual-bar' }), // eslint-disable-line new-cap
-// });
 createTemplateForComponent('EditRoomInfo', () => import('./contextualBar/Info/EditRoomInfo'), {
 	renderContainerView: () => HTML.DIV({ class: 'contextual-bar' }), // eslint-disable-line new-cap
 });

client/views/room/contextualBar/Call/BBB/CallBBB.tsx

@@ -0,0 +1,101 @@
+import React, { FC, useEffect } from 'react';
+import { Box, Button, ButtonGroup } from '@rocket.chat/fuselage';
+import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
+
+import { useTranslation } from '../../../../../contexts/TranslationContext';
+import VerticalBar from '../../../../../components/VerticalBar';
+import { useTabBarClose } from '../../../providers/ToolboxProvider';
+import { useSetting } from '../../../../../contexts/SettingsContext';
+import { useRoom } from '../../../providers/RoomProvider';
+import { usePermission } from '../../../../../contexts/AuthorizationContext';
+import { IRoom } from '../../../../../../definition/IRoom';
+import { useMethod } from '../../../../../contexts/ServerContext';
+import { popout } from '../../../../../../app/ui-utils/client';
+
+
+export const CallBBB: FC <{
+	startCall: () => void;
+	endCall: () => void;
+	handleClose: () => void;
+	canManageCall: boolean;
+	live: boolean;
+	openNewWindow: boolean;
+}> = ({
+	handleClose,
+	canManageCall,
+	live,
+	startCall,
+	endCall,
+	openNewWindow,
+}) => {
+	const t = useTranslation();
+	return <>
+		<VerticalBar.Header>
+			<VerticalBar.Icon name='phone'/>
+			<VerticalBar.Text>{t('Call')}</VerticalBar.Text>
+			{handleClose && <VerticalBar.Close onClick={handleClose}/>}
+		</VerticalBar.Header>
+		<VerticalBar.ScrollableContent>
+			{ openNewWindow ? <>
+				<Box fontScale='p2'>{t('Video_Conference')}</Box>
+				<Box fontScale='p1' color='neutral-700'>{t('Opened_in_a_new_window')}</Box>
+			</> : null }
+			<ButtonGroup stretch>
+				{ live && <Button primary onClick={startCall}>{t('BBB_Join_Meeting')}</Button> }
+				{ live && canManageCall && <Button danger onClick={endCall}>{t('BBB_End_Meeting')}</Button> }
+				{ !live && canManageCall && <Button primary onClick={startCall} >{t('BBB_Start_Meeting')}</Button> }
+				{ !live && !canManageCall && <Button primary>{t('BBB_You_have_no_permission_to_start_a_call')}</Button> }
+			</ButtonGroup>
+		</VerticalBar.ScrollableContent>
+	</>;
+};
+
+
+const D: FC<{ rid: IRoom['_id'] }> = ({ rid }) => {
+	const handleClose = useTabBarClose();
+	const openNewWindow = !!useSetting('bigbluebutton_Open_New_Window');
+	const hasCallManagement = usePermission('call-management', rid);
+	const room = useRoom();
+	const join = useMethod('bbbJoin');
+	const end = useMethod('bbbEnd');
+
+	const endCall = useMutableCallback(() => {
+		end({ rid });
+	});
+
+	const startCall = useMutableCallback(async () => {
+		const result = await join({ rid });
+		if (!result) {
+			return;
+		}
+		if (openNewWindow) {
+			return window.open(result.url);
+		}
+		popout.open({
+			content: 'bbbLiveView',
+			data: {
+				source: result.url,
+				streamingOptions: result,
+				canOpenExternal: true,
+				showVideoControls: false,
+			},
+			onCloseCallback: () => false,
+		});
+	});
+
+	useEffect(() => {
+		if (room?.streamingOptions?.type !== 'call' || popout.context) {
+			return;
+		}
+		startCall();
+		return (): void => {
+			popout.close();
+		};
+	}, [room?.streamingOptions?.type, startCall]);
+
+	const canManageCall = room?.t === 'd' || hasCallManagement;
+
+	return <CallBBB handleClose={handleClose} openNewWindow={openNewWindow} live={room?.streamingOptions?.type === 'call'} endCall={endCall} startCall={startCall} canManageCall={canManageCall} />;
+};
+
+export default D;

client/views/room/contextualBar/Call/BBB/index.js

@@ -0,0 +1,3 @@
+import CallBBB from './CallBBB';
+
+export default CallBBB;

client/views/room/contextualBar/Call/Jitsi/CallJitsi.js

@@ -12,6 +12,7 @@ import { HEARTBEAT, TIMEOUT, DEBOUNCE } from '../../../../../../app/videobridge/
 import { useMethod } from '../../../../../contexts/ServerContext';
 import { useConnectionStatus } from '../../../../../contexts/ConnectionStatusContext';
 import { JitsiBridge } from './lib/JitsiBridge';
+import { useTabBarClose } from '../../../providers/ToolboxProvider';
 
 export const CallJitsi = ({
 	handleClose,
@@ -53,14 +54,14 @@ const querySettings = {
 	],
 };
 
-const CallJitsWithData = ({ tabBar, rid }) => {
+const CallJitsWithData = ({ rid }) => {
 	const user = useUser();
 	const { connected } = useConnectionStatus();
 	const [accessToken, setAccessToken] = useSafely(useState());
 	const [accepted, setAccepted] = useState(false);
 	const room = useUserRoom(rid);
 	const setModal = useSetModal();
-	const handleClose = useMutableCallback(() => tabBar && tabBar.close());
+	const handleClose = useTabBarClose();
 	const closeModal = useMutableCallback(() => setModal(null));
 	const generateAccessToken = useMethod('jitsi:generateAccessToken');
 	const updateTimeout = useMethod('jitsi:updateTimeout');

client/views/room/providers/ToolboxProvider.tsx

@@ -131,6 +131,6 @@ export const ToolboxProvider = ({ children, room }: { children: ReactNode; room:
 
 export const useTabContext = (): ToolboxActionConfig | undefined => useContext(ToolboxContext).context;
 export const useTab = (): ToolboxActionConfig | undefined => useContext(ToolboxContext).activeTabBar;
-export const useTabBarOpen = (): Function => useContext(ToolboxContext).open;
-export const useTabBarClose = (): Function => useContext(ToolboxContext).close;
-export const useTabBarOpenUserInfo = (): Function => useContext(ToolboxContext).openUserInfo;
+export const useTabBarOpen = (): () => void => useContext(ToolboxContext).open;
+export const useTabBarClose = (): () => void => useContext(ToolboxContext).close;
+export const useTabBarOpenUserInfo = (): () => void => useContext(ToolboxContext).openUserInfo;

packages/rocketchat-i18n/i18n/en.i18n.json

@@ -592,6 +592,10 @@
   "Backup_codes": "Backup codes",
   "ban-user": "Ban User",
   "ban-user_description": "Permission to ban a user from a channel",
+  "BBB_End_Meeting": "End Meeting",
+  "BBB_Join_Meeting": "Join Meeting",
+  "BBB_Start_Meeting": "Start Meeting",
+  "BBB_You_have_no_permission_to_start_a_call": "You have no permission to start a call",
   "Best_first_response_time": "Best first response time",
   "Beta_feature_Depends_on_Video_Conference_to_be_enabled": "Beta feature. Depends on Video Conference to be enabled.",
   "Better": "Better",