PR 9946 + suggested text changes

bigbluebutton-html5/imports/ui/components/end-meeting-confirmation/component.jsx

@@ -4,7 +4,6 @@ import { defineMessages, injectIntl } from 'react-intl';
 import Button from '/imports/ui/components/button/component';
 import Modal from '/imports/ui/components/modal/simple/component';
 import { styles } from './styles';
-import EndMeetingUserList from './user-list/component';
 
 const intlMessages = defineMessages({
   endMeetingTitle: {
@@ -26,16 +25,19 @@ const intlMessages = defineMessages({
 });
 
 const propTypes = {
-  intl: PropTypes.object.isRequired,
+  intl: PropTypes.shape({
+    formatMessage: PropTypes.func.isRequired,
+  }).isRequired,
   closeModal: PropTypes.func.isRequired,
   endMeeting: PropTypes.func.isRequired,
+  meetingTitle: PropTypes.func.isRequired,
   users: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
 };
 
 class EndMeetingComponent extends React.PureComponent {
   render() {
     const {
-      users, intl, closeModal, endMeeting,
+      users, intl, closeModal, endMeeting, meetingTitle,
     } = this.props;
 
     return (
@@ -44,14 +46,11 @@ class EndMeetingComponent extends React.PureComponent {
         className={styles.modal}
         onRequestClose={closeModal}
         hideBorder
-        title={intl.formatMessage(intlMessages.endMeetingTitle)}
+        title={intl.formatMessage(intlMessages.endMeetingTitle, { 0: meetingTitle })}
       >
         <div className={styles.container}>
           <div className={styles.description}>
-            <EndMeetingUserList
-              users={users}
-            />
-            {intl.formatMessage(intlMessages.endMeetingDescription)}
+            {intl.formatMessage(intlMessages.endMeetingDescription, { 0: users.length })}
           </div>
           <div className={styles.footer}>
             <Button
@@ -75,4 +74,4 @@ class EndMeetingComponent extends React.PureComponent {
 
 EndMeetingComponent.propTypes = propTypes;
 
-export default injectIntl(EndMeetingComponent);
+export default injectIntl(EndMeetingComponent);

bigbluebutton-html5/imports/ui/components/end-meeting-confirmation/container.jsx

@@ -21,6 +21,6 @@ export default withModalMounter(withTracker(({ mountModal }) => ({
     makeCall('endMeeting');
     mountModal(null);
   },
-
+  meetingTitle: Service.getMeetingTitle(),
   users: Service.getUsers(),
-}))(EndMeetingContainer));
+}))(EndMeetingContainer));

bigbluebutton-html5/imports/ui/components/end-meeting-confirmation/service.js

@@ -1,7 +1,6 @@
 import Users from '/imports/api/users';
 import Auth from '/imports/ui/services/auth';
-
-const USERS_TO_DISPLAY = Meteor.settings.public.app.maxUsersForConfirmation;
+import Meetings from '/imports/api/meetings';
 
 const userFindSorting = {
   emojiTime: 1,
@@ -11,26 +10,25 @@ const userFindSorting = {
   userId: 1,
 };
 
+const getMeetingTitle = () => {
+  const meeting = Meetings.findOne({
+    meetingId: Auth.meetingID,
+  }, { fields: { 'meetingProp.name': 1, 'breakoutProps.sequence': 1 } });
+
+  return meeting.meetingProp.name;
+};
+
 const getUsers = () => {
-  let users = Users
+  const users = Users
     .find({
       meetingId: Auth.meetingID,
-      connectionStatus: 'online',
     }, userFindSorting)
     .fetch();
 
-  // user shouldn't see themselves in the list
-  users = users.filter(u => u.userId !== Auth.userID);
-
   return users;
 };
 
-const getUsersToDisplay = (users) => {
-  const diff = users.length - USERS_TO_DISPLAY;
-  return { displayUsers: users.slice(0, USERS_TO_DISPLAY), remainder: diff <= 0 ? false : diff };
-};
-
 export default {
   getUsers,
-  getUsersToDisplay,
-};
+  getMeetingTitle,
+};

bigbluebutton-html5/imports/ui/components/end-meeting-confirmation/styles.scss

@@ -53,26 +53,4 @@
   border: none;
   line-height: var(--title-position-left);
   margin-bottom: var(--lg-padding-y);
-}
-
-.warningItem {
-  display: flex;
-  flex-grow: 1;
-  align-items: center;
-  text-decoration: none;
-  font-weight: bold;
-  width: 100%;
-}
-
-.warningIcon{
-  flex: 0 0 2.2rem;
-  padding-right: var(--lg-padding-y);
-}
-
-.userListItemText {
-  text-overflow: ellipsis;
-}
-
-.userListText {
-  text-align: left;
 }

bigbluebutton-html5/imports/ui/components/end-meeting-confirmation/user-list/component.jsx

@@ -1,45 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { styles } from '../styles.scss';
-import WarningIcon from '../warning-icon/component';
-import Service from '../service';
-
-const propTypes = {
-  users: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
-};
-
-class EndMeetingUserListComponent extends Component {
-  render() {
-    const { users } = this.props;
-
-    const { displayUsers, remainder } = Service.getUsersToDisplay(users);
-    const list = users.length > 0 ? (
-      <div>
-        <div className={styles.warningItem}>
-          <div className={styles.warningIcon}>
-            <WarningIcon icon="warning" />
-          </div>
-          <p>Attention</p>
-        </div>
-        <div className={styles.userListText}>
-          <p>This action will end the meeting for:</p>
-          <ul className={styles.userListItemText}>
-            {displayUsers.map(user => (
-              <li key={user.userId}>
-                {user.name}
-              </li>
-            ))}
-          </ul>
-          {remainder && (
-            <p>and {remainder} other active users in this session.</p>
-          )}
-        </div>
-      </div>
-    ) : null;
-    return list;
-  }
-}
-
-EndMeetingUserListComponent.propTypes = propTypes;
-
-export default EndMeetingUserListComponent;

bigbluebutton-html5/imports/ui/components/end-meeting-confirmation/warning-icon/component.jsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { styles } from './styles.scss';
-import Icon from '/imports/ui/components/icon/component';
-
-const propTypes = {
-  icon: PropTypes.elementType.isRequired,
-};
-
-const WarningIcon = (props) => {
-  const { icon } = props;
-  return (
-    <div className={styles.warningThumbnail}>
-      <Icon iconName={icon} />
-    </div>
-  );
-};
-
-WarningIcon.propTypes = propTypes;
-
-export default WarningIcon;

bigbluebutton-html5/imports/ui/components/end-meeting-confirmation/warning-icon/styles.scss

@@ -1,6 +0,0 @@
-.warningThumbnail {
-//  color: var(--color-gray-light);
-  font-size: 175%;
-  padding: 0;
-  margin: 0;
-}

bigbluebutton-html5/private/locales/en.json

@@ -284,8 +284,8 @@
     "app.navBar.emptyAudioBrdige": "No active microphone. Share your microphone to add audio to this recording.",
     "app.leaveConfirmation.confirmLabel": "Leave",
     "app.leaveConfirmation.confirmDesc": "Logs you out of the meeting",
-    "app.endMeeting.title": "End meeting",
-    "app.endMeeting.description": "Are you sure you want to end this meeting for everyone (all users will be disconnected)?",
+    "app.endMeeting.title": "End {0}",
+    "app.endMeeting.description": "This action will end the session for {0} active user(s). Are you sure you want to end this session?",
     "app.endMeeting.yesLabel": "Yes",
     "app.endMeeting.noLabel": "No",
     "app.about.title": "About",
@@ -729,4 +729,4 @@
     "app.debugWindow.form.button.copy": "Copy",
     "app.debugWindow.form.enableAutoarrangeLayoutLabel": "Enable Auto Arrange Layout",
     "app.debugWindow.form.enableAutoarrangeLayoutDescription": "(it will be disabled if you drag or resize the webcams area)"
-}
+}