Update lock viewers modal

With this changes you need to click apply button in order to lock have effect, also update the lock text. close #7766
2019-09-09 11:21:54 -03:00 · 2019-09-09 11:21:54 -03:00 · 4f00c6b994
commit 4f00c6b994
parent c646351823
7 changed files with 169 additions and 76 deletions
--- a/bigbluebutton-html5/imports/api/meetings/server/methods/toggleLockSettings.js
+++ b/bigbluebutton-html5/imports/api/meetings/server/methods/toggleLockSettings.js
@ -2,7 +2,7 @@ import { Meteor } from 'meteor/meteor';
 import { check } from 'meteor/check';
 import RedisPubSub from '/imports/startup/server/redis';

-export default function toggleLockSettings(credentials, meeting) {
+export default function toggleLockSettings(credentials, lockSettingsProps) {
  const REDIS_CONFIG = Meteor.settings.private.redis;
  const CHANNEL = REDIS_CONFIG.channels.toAkkaApps;
  const EVENT_NAME = 'ChangeLockSettingsInMeetingCmdMsg';
@ -11,7 +11,7 @@ export default function toggleLockSettings(credentials, meeting) {

  check(meetingId, String);
  check(requesterUserId, String);
-  check(meeting.lockSettingsProps, {
+  check(lockSettingsProps, {
    disableCam: Boolean,
    disableMic: Boolean,
    disablePrivateChat: Boolean,
@ -24,16 +24,28 @@ export default function toggleLockSettings(credentials, meeting) {
    setBy: Match.Maybe(String),
  });

+  const {
+    disableCam,
+    disableMic,
+    disablePrivateChat: disablePrivChat,
+    disablePublicChat: disablePubChat,
+    disableNote,
+    hideUserList,
+    lockedLayout,
+    lockOnJoin,
+    lockOnJoinConfigurable,
+  } = lockSettingsProps;
+
  const payload = {
-    disableCam: meeting.lockSettingsProps.disableCam,
-    disableMic: meeting.lockSettingsProps.disableMic,
-    disablePrivChat: meeting.lockSettingsProps.disablePrivateChat,
-    disablePubChat: meeting.lockSettingsProps.disablePublicChat,
-    disableNote: meeting.lockSettingsProps.disableNote,
-    hideUserList: meeting.lockSettingsProps.hideUserList,
-    lockedLayout: meeting.lockSettingsProps.lockedLayout,
-    lockOnJoin: meeting.lockSettingsProps.lockOnJoin,
-    lockOnJoinConfigurable: meeting.lockSettingsProps.lockOnJoinConfigurable,
+    disableCam,
+    disableMic,
+    disablePrivChat,
+    disablePubChat,
+    disableNote,
+    hideUserList,
+    lockedLayout,
+    lockOnJoin,
+    lockOnJoinConfigurable,
    setBy: requesterUserId,
  };

--- a/bigbluebutton-html5/imports/api/meetings/server/methods/toggleWebcamsOnlyForModerator.js
+++ b/bigbluebutton-html5/imports/api/meetings/server/methods/toggleWebcamsOnlyForModerator.js
@ -2,7 +2,7 @@ import { Meteor } from 'meteor/meteor';
 import { check } from 'meteor/check';
 import RedisPubSub from '/imports/startup/server/redis';

-export default function toggleWebcamsOnlyForModerator(credentials, meeting) {
+export default function toggleWebcamsOnlyForModerator(credentials, webcamsOnlyForModerator) {
  const REDIS_CONFIG = Meteor.settings.private.redis;
  const CHANNEL = REDIS_CONFIG.channels.toAkkaApps;
  const EVENT_NAME = 'UpdateWebcamsOnlyForModeratorCmdMsg';
@ -11,10 +11,10 @@ export default function toggleWebcamsOnlyForModerator(credentials, meeting) {

  check(meetingId, String);
  check(requesterUserId, String);
-  check(meeting.usersProp.webcamsOnlyForModerator, Boolean);
+  check(webcamsOnlyForModerator, Boolean);

  const payload = {
-    webcamsOnlyForModerator: meeting.usersProp.webcamsOnlyForModerator,
+    webcamsOnlyForModerator,
    setBy: requesterUserId,
  };

--- a/bigbluebutton-html5/imports/ui/components/lock-viewers/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/lock-viewers/component.jsx
@ -1,11 +1,15 @@
-import React, { Fragment } from 'react';
+import React, { Fragment, PureComponent } from 'react';
 import { defineMessages, injectIntl } from 'react-intl';
-import Toggle from '/imports/ui/components/switch/component';
+import PropTypes from 'prop-types';
 import cx from 'classnames';
+import Toggle from '/imports/ui/components/switch/component';
 import Modal from '/imports/ui/components/modal/simple/component';
 import NoteService from '/imports/ui/components/note/service';
+import Button from '/imports/ui/components/button/component';
 import { styles } from './styles';

+const CHAT_ENABLED = Meteor.settings.public.chat.enabled;
+
 const intlMessages = defineMessages({
  lockViewersTitle: {
    id: 'app.lock-viewers.title',
@ -63,30 +67,79 @@ const intlMessages = defineMessages({
    id: 'app.lock-viewers.ariaTitle',
    description: 'aria label for modal title',
  },
+  buttonApply: {
+    id: 'app.lock-viewers.button.apply',
+    description: 'label for apply button',
+  },
+  buttonCancel: {
+    id: 'app.lock-viewers.button.cancel',
+    description: 'label for cancel button',
+  },
 });

-const CHAT_ENABLED = Meteor.settings.public.chat.enabled;
+const propTypes = {
+  closeModal: PropTypes.func.isRequired,
+  intl: PropTypes.shape({
+    formatMessage: PropTypes.func.isRequired,
+  }).isRequired,
+  meeting: PropTypes.object.isRequired,
+  updateLockSettings: PropTypes.func.isRequired,
+  updateWebcamsOnlyForModerator: PropTypes.func.isRequired,
+};
+
+class LockViewersComponent extends PureComponent {
+  constructor(props) {
+    super(props);
+
+    const { meeting: { lockSettingsProps, usersProp } } = this.props;
+
+    this.state = {
+      lockSettingsProps,
+      usersProp,
+    };
+  }
+
+  toggleLockSettings(property) {
+    const { lockSettingsProps } = this.state;
+
+    lockSettingsProps[property] = !lockSettingsProps[property];
+
+    this.setState({
+      lockSettingsProps,
+    });
+  }
+
+  toggleUserProps(property) {
+    const { usersProp } = this.state;
+
+    usersProp[property] = !usersProp[property];
+
+    this.setState({
+      usersProp,
+    });
+  }

-class LockViewersComponent extends React.PureComponent {
  render() {
    const {
      intl,
-      meeting,
      closeModal,
-      toggleLockSettings,
-      toggleWebcamsOnlyForModerator,
+      updateLockSettings,
+      updateWebcamsOnlyForModerator,
    } = this.props;

+    const { lockSettingsProps, usersProp } = this.state;
+
    return (
      <Modal
        overlayClassName={styles.overlay}
        className={styles.modal}
        onRequestClose={closeModal}
        hideBorder
+        shouldShowCloseButton={false}
        contentLabel={intl.formatMessage(intlMessages.ariaModalTitle)}
      >

-        <div className={styles.container}>
+        <div className={styles.containetoggleLockSettingsr}>
          <div className={styles.header}>
            <h2 className={styles.title}>{intl.formatMessage(intlMessages.lockViewersTitle)}</h2>
          </div>
@ -111,10 +164,9 @@ class LockViewersComponent extends React.PureComponent {
                <div className={cx(styles.formElement, styles.pullContentRight)}>
                  <Toggle
                    icons={false}
-                    defaultChecked={meeting.lockSettingsProps.disableCam}
+                    defaultChecked={lockSettingsProps.disableCam}
                    onChange={() => {
-                      meeting.lockSettingsProps.disableCam = !meeting.lockSettingsProps.disableCam;
-                      toggleLockSettings(meeting);
+                      this.toggleLockSettings('disableCam');
                    }}
                    ariaLabel={intl.formatMessage(intlMessages.webcamLabel)}
                  />
@ -133,10 +185,9 @@ class LockViewersComponent extends React.PureComponent {
                <div className={cx(styles.formElement, styles.pullContentRight)}>
                  <Toggle
                    icons={false}
-                    defaultChecked={meeting.usersProp.webcamsOnlyForModerator}
+                    defaultChecked={usersProp.webcamsOnlyForModerator}
                    onChange={() => {
-                      meeting.usersProp.webcamsOnlyForModerator = !meeting.usersProp.webcamsOnlyForModerator;
-                      toggleWebcamsOnlyForModerator(meeting);
+                      this.toggleUserProps('webcamsOnlyForModerator');
                    }}
                    ariaLabel={intl.formatMessage(intlMessages.otherViewersWebcamLabel)}
                  />
@ -155,10 +206,9 @@ class LockViewersComponent extends React.PureComponent {
                <div className={cx(styles.formElement, styles.pullContentRight)}>
                  <Toggle
                    icons={false}
-                    defaultChecked={meeting.lockSettingsProps.disableMic}
+                    defaultChecked={lockSettingsProps.disableMic}
                    onChange={() => {
-                      meeting.lockSettingsProps.disableMic = !meeting.lockSettingsProps.disableMic;
-                      toggleLockSettings(meeting);
+                      this.toggleLockSettings('disableMic');
                    }}
                    ariaLabel={intl.formatMessage(intlMessages.microphoneLable)}
                  />
@ -180,10 +230,9 @@ class LockViewersComponent extends React.PureComponent {
                    <div className={cx(styles.formElement, styles.pullContentRight)}>
                      <Toggle
                        icons={false}
-                        defaultChecked={meeting.lockSettingsProps.disablePublicChat}
+                        defaultChecked={lockSettingsProps.disablePublicChat}
                        onChange={() => {
-                          meeting.lockSettingsProps.disablePublicChat = !meeting.lockSettingsProps.disablePublicChat;
-                          toggleLockSettings(meeting);
+                          this.toggleLockSettings('disablePublicChat');
                        }}
                        ariaLabel={intl.formatMessage(intlMessages.publicChatLabel)}
                      />
@ -202,10 +251,9 @@ class LockViewersComponent extends React.PureComponent {
                    <div className={cx(styles.formElement, styles.pullContentRight)}>
                      <Toggle
                        icons={false}
-                        defaultChecked={meeting.lockSettingsProps.disablePrivateChat}
+                        defaultChecked={lockSettingsProps.disablePrivateChat}
                        onChange={() => {
-                          meeting.lockSettingsProps.disablePrivateChat = !meeting.lockSettingsProps.disablePrivateChat;
-                          toggleLockSettings(meeting);
+                          this.toggleLockSettings('disablePrivateChat');
                        }}
                        ariaLabel={intl.formatMessage(intlMessages.privateChatLable)}
                      />
@ -215,8 +263,7 @@ class LockViewersComponent extends React.PureComponent {
              </Fragment>
            ) : null
            }
-
-            { NoteService.isEnabled()
+            {NoteService.isEnabled()
              ? (
                <div className={styles.row}>
                  <div className={styles.col} aria-hidden="true">
@ -230,10 +277,9 @@ class LockViewersComponent extends React.PureComponent {
                    <div className={cx(styles.formElement, styles.pullContentRight)}>
                      <Toggle
                        icons={false}
-                        defaultChecked={meeting.lockSettingsProps.disableNote}
+                        defaultChecked={lockSettingsProps.disableNote}
                        onChange={() => {
-                          meeting.lockSettingsProps.disableNote = !meeting.lockSettingsProps.disableNote;
-                          toggleLockSettings(meeting);
+                          this.toggleLockSettings('disableNote');
                        }}
                        ariaLabel={intl.formatMessage(intlMessages.notesLabel)}
                      />
@ -243,7 +289,6 @@ class LockViewersComponent extends React.PureComponent {
              )
              : null
            }
-
            <div className={styles.row}>
              <div className={styles.col} aria-hidden="true">
                <div className={styles.formElement}>
@ -256,10 +301,9 @@ class LockViewersComponent extends React.PureComponent {
                <div className={cx(styles.formElement, styles.pullContentRight)}>
                  <Toggle
                    icons={false}
-                    defaultChecked={meeting.lockSettingsProps.hideUserList}
+                    defaultChecked={lockSettingsProps.hideUserList}
                    onChange={() => {
-                      meeting.lockSettingsProps.hideUserList = !meeting.lockSettingsProps.hideUserList;
-                      toggleLockSettings(meeting);
+                      this.toggleLockSettings('hideUserList');
                    }}
                    ariaLabel={intl.formatMessage(intlMessages.userListLabel)}
                  />
@ -268,9 +312,28 @@ class LockViewersComponent extends React.PureComponent {
            </div>
          </div>
        </div>
+        <div className={styles.footer}>
+          <div className={styles.actions}>
+            <Button
+              label={intl.formatMessage(intlMessages.buttonCancel)}
+              onClick={closeModal}
+            />
+            <Button
+              color="primary"
+              label={intl.formatMessage(intlMessages.buttonApply)}
+              onClick={() => {
+                updateLockSettings(lockSettingsProps);
+                updateWebcamsOnlyForModerator(usersProp.webcamsOnlyForModerator);
+                closeModal();
+              }}
+            />
+          </div>
+        </div>
      </Modal>
    );
  }
 }

+LockViewersComponent.propTypes = propTypes;
+
 export default injectIntl(LockViewersComponent);
--- a/bigbluebutton-html5/imports/ui/components/lock-viewers/container.jsx
+++ b/bigbluebutton-html5/imports/ui/components/lock-viewers/container.jsx
@ -1,22 +1,16 @@
 import React from 'react';
 import { withTracker } from 'meteor/react-meteor-data';
 import { withModalMounter } from '/imports/ui/components/modal/service';
-import { makeCall } from '/imports/ui/services/api';
 import Meetings from '/imports/api/meetings';
 import Auth from '/imports/ui/services/auth';
 import LockViewersComponent from './component';
+import { updateLockSettings, updateWebcamsOnlyForModerator } from './service';

 const LockViewersContainer = props => <LockViewersComponent {...props} />;

 export default withModalMounter(withTracker(({ mountModal }) => ({
-  closeModal() {
-    mountModal(null);
-  },
-  toggleLockSettings(meeting) {
-    makeCall('toggleLockSettings', meeting);
-  },
-  toggleWebcamsOnlyForModerator(meeting) {
-    makeCall('toggleWebcamsOnlyForModerator', meeting);
-  },
+  closeModal: () => mountModal(null),
  meeting: Meetings.findOne({ meetingId: Auth.meetingID }),
+  updateLockSettings,
+  updateWebcamsOnlyForModerator,
 }))(LockViewersContainer));
--- a/bigbluebutton-html5/imports/ui/components/lock-viewers/service.js
+++ b/bigbluebutton-html5/imports/ui/components/lock-viewers/service.js
@ -1,14 +1,10 @@
 import { makeCall } from '/imports/ui/services/api';
-import Meetings from '/imports/api/meetings';
-import Auth from '/imports/ui/services/auth';

-const getCurrentMeeting = () => Meetings.findOne({ meetingId: Auth.meetingID });
+const updateLockSettings = lockProps => makeCall('toggleLockSettings', lockProps);

-const toggleLockSettings = () => makeCall('toggleLockSettings', getCurrentMeeting());
+const updateWebcamsOnlyForModerator = webcamsOnlyForModerator => makeCall('toggleWebcamsOnlyForModerator', webcamsOnlyForModerator);

-const toggleWebcamsOnlyForModerator = () => makeCall('toggleWebcamsOnlyForModerator', getCurrentMeeting());
-
-export default {
-  toggleLockSettings,
-  toggleWebcamsOnlyForModerator,
+export {
+  updateLockSettings,
+  updateWebcamsOnlyForModerator,
 };
--- a/bigbluebutton-html5/imports/ui/components/lock-viewers/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/lock-viewers/styles.scss
@ -25,6 +25,7 @@
 .form {
  display: flex;
  flex-flow: column;
+  border-bottom: 1px solid var(--color-gray-lighter);
 }

 .container {
@ -132,3 +133,29 @@
  line-height: var(--title-position-left);
  margin-bottom: var(--lg-padding-y);
 }
+
+.footer {
+  display: flex;
+  margin-top: var(--sm-padding-x);
+}
+
+.actions {
+  margin-left: auto;
+  margin-right: 3px;
+
+
+  [dir="rtl"] & {
+    margin-right: auto;
+    margin-left: 3px;
+  }
+
+  :first-child {
+    margin-right: 3px;
+    margin-left: inherit;
+
+    [dir="rtl"] & {
+      margin-right: inherit;
+      margin-left: 3px;
+    }
+  }
+}
--- a/bigbluebutton-html5/private/locales/en.json
+++ b/bigbluebutton-html5/private/locales/en.json
@ -91,7 +91,7 @@
    "app.userList.userOptions.muteAllExceptPresenterDesc": "Mutes all users in the meeting except the presenter",
    "app.userList.userOptions.unmuteAllLabel": "Turn off meeting mute",
    "app.userList.userOptions.unmuteAllDesc": "Unmutes the meeting",
-    "app.userList.userOptions.lockViewersLabel": "Lock viewers",
+    "app.userList.userOptions.lockViewersLabel": "Lock Viewers Settings",
    "app.userList.userOptions.lockViewersDesc": "Lock certain functionalities for attendees of the meeting",
    "app.userList.userOptions.disableCam": "Viewers' webcams are disabled",
    "app.userList.userOptions.disableMic": "Viewers' microphones are disabled",
@ -495,19 +495,20 @@
    "app.shortcut-help.togglePan": "Activate Pan tool (Presenter)",
    "app.shortcut-help.nextSlideDesc": "Next slide (Presenter)",
    "app.shortcut-help.previousSlideDesc": "Previous slide (Presenter)",
-    "app.lock-viewers.title": "Lock viewers",
+    "app.lock-viewers.title": "Lock Viewers Settings",
    "app.lock-viewers.description": "These options enable you to restrict viewers from using specific features.  (These lock settings do not apply to moderators.)",
    "app.lock-viewers.featuresLable": "Feature",
    "app.lock-viewers.lockStatusLabel": "Locked status",
-    "app.lock-viewers.webcamLabel": "Webcam",
-    "app.lock-viewers.otherViewersWebcamLabel": "See other viewers webcams",
-    "app.lock-viewers.microphoneLable": "Microphone",
-    "app.lock-viewers.PublicChatLabel": "Public chat",
-    "app.lock-viewers.PrivateChatLable": "Private chat",
-    "app.lock-viewers.notesLabel": "Shared notes",
-    "app.lock-viewers.userListLabel": "User list",
-    "app.lock-viewers.Layout": "Layout",
-    "app.lock-viewers.ariaTitle": "Lock viewers modal",
+    "app.lock-viewers.webcamLabel": "Disable viewers webcam",
+    "app.lock-viewers.otherViewersWebcamLabel": "Seeing other viewers webcams",
+    "app.lock-viewers.microphoneLable": "Microphone capabilities",
+    "app.lock-viewers.PublicChatLabel": "Sending Public chat messages",
+    "app.lock-viewers.PrivateChatLable": "Sending Private chat messages",
+    "app.lock-viewers.notesLabel": "Using Shared notes",
+    "app.lock-viewers.userListLabel": "See other viewers in the user's list",
+    "app.lock-viewers.ariaTitle": "Lock viewers settings modal",
+    "app.lock-viewers.button.apply": "Apply",
+    "app.lock-viewers.button.cancel": "Cancel",
    "app.recording.startTitle": "Start recording",
    "app.recording.stopTitle": "Pause recording",
    "app.recording.resumeTitle": "Resume recording",