add free join interface

bigbluebutton-html5/imports/ui/components/breakout-join-confirmation/component.jsx

@@ -3,6 +3,7 @@ import { defineMessages, injectIntl } from 'react-intl';
 import { withModalMounter } from '/imports/ui/components/modal/service';
 import Modal from '/imports/ui/components/modal/fullscreen/component';
 import AudioService from '../audio/service';
+import { styles } from './styles';
 
 const intlMessages = defineMessages({
   title: {
@@ -13,6 +14,10 @@ const intlMessages = defineMessages({
     id: 'app.breakoutJoinConfirmation.message',
     description: 'Join breakout confim message',
   },
+  freeJoinMessage: {
+    id: 'app.breakoutJoinConfirmation.freeJoinMessage',
+    description: 'Join breakout confim message',
+  },
   confirmLabel: {
     id: 'app.breakoutJoinConfirmation.confirmLabel',
     description: 'Join confirmation button label',
@@ -35,24 +40,53 @@ class BreakoutJoinConfirmation extends Component {
   constructor(props) {
     super(props);
 
+    this.state = {
+      selectValue: props.breakout.breakoutId,
+    };
+
     this.handleJoinBreakoutConfirmation = this.handleJoinBreakoutConfirmation.bind(this);
+    this.renderSelectMeeting = this.renderSelectMeeting.bind(this);
+    this.handleSelectChange = this.handleSelectChange.bind(this);
   }
 
   handleJoinBreakoutConfirmation() {
     const {
-      breakoutURL,
+      getURL,
       mountModal,
+      breakoutURL,
+      isFreeJoin,
     } = this.props;
-
+    const url = isFreeJoin ? getURL(this.state.selectValue) : breakoutURL;
     // leave main room's audio when joining a breakout room
     AudioService.exitAudio();
 
-    window.open(breakoutURL);
+    window.open(url);
     mountModal(null);
   }
+  handleSelectChange(e) {
+    const { value } = e.target;
+    this.setState({ selectValue: value });
+    this.props.requestJoinURL(value);
+  }
+
+  renderSelectMeeting() {
+    const { breakouts, intl } = this.props;
+    return (
+      <div className={styles.selectParent}>
+        {`${intl.formatMessage(intlMessages.freeJoinMessage)}`}
+        <select
+          className={styles.select}
+          value={this.state.selectValue}
+          onChange={this.handleSelectChange}
+        >
+          {breakouts.map(({ name, breakoutId }) => (<option key={breakoutId} value={breakoutId} >{name}</option>))}
+        </select>
+      </div>
+    );
+  }
 
   render() {
-    const { intl, breakoutName } = this.props;
+    const { intl, breakoutName, isFreeJoin } = this.props;
     return (
       <Modal
         title={intl.formatMessage(intlMessages.title)}
@@ -66,7 +100,7 @@ class BreakoutJoinConfirmation extends Component {
           description: intl.formatMessage(intlMessages.dismissDesc),
         }}
       >
-        {`${intl.formatMessage(intlMessages.message)} ${breakoutName}?`}
+        { isFreeJoin ? this.renderSelectMeeting() : `${intl.formatMessage(intlMessages.message)} ${breakoutName}?`}
       </Modal>
     );
   }

bigbluebutton-html5/imports/ui/components/breakout-join-confirmation/container.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { withTracker } from 'meteor/react-meteor-data';
+import Breakouts from '/imports/api/breakouts';
+import Auth from '/imports/ui/services/auth';
+import { makeCall } from '/imports/ui/services/api';
+import navBarService from '/imports/ui/components/nav-bar/service';
+import BreakoutJoinConfirmationComponent from './component';
+
+const BreakoutJoinConfirmationContrainer = props =>
+  (<BreakoutJoinConfirmationComponent {...props} />);
+
+const getURL = (breakoutId) => {
+  const currentUserId = Auth.userID;
+  const getBreakout = Breakouts.findOne({ breakoutId });
+  const user = getBreakout ? getBreakout.users.find(u => u.userId === currentUserId) : '';
+  if (user) return user.redirectToHtml5JoinURL;
+  return '';
+};
+
+const requestJoinURL = (breakoutId) => {
+  makeCall('requestJoinURL', {
+    breakoutId,
+  });
+};
+
+export default withTracker(({ breakout, mountModal, breakoutName }) => {
+  const isFreeJoin = breakout.freeJoin;
+  const { breakoutId } = breakout;
+  const url = getURL(breakoutId);
+  if (isFreeJoin && !url) {
+    requestJoinURL(breakoutId);
+  }
+
+  return {
+    isFreeJoin,
+    mountModal,
+    breakoutName,
+    breakoutURL: url,
+    breakouts: navBarService.getBreakouts(),
+    requestJoinURL,
+    getURL,
+  };
+})(BreakoutJoinConfirmationContrainer);

bigbluebutton-html5/imports/ui/components/breakout-join-confirmation/styles.scss

@@ -0,0 +1,14 @@
+@import "../../stylesheets/variables/_all";
+
+.selectParent {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.select {
+    background-color: $color-white;
+    width: 50%;
+    margin: 1rem;
+    border-color: $color-gray-lighter;
+}