Merge pull request #7531 from KDSBrowne/0A-access-32

Improve the upload presentation modal experience

bigbluebutton-html5/imports/ui/components/modal/fullscreen/component.jsx

@@ -40,6 +40,7 @@ const propTypes = {
     disabled: PropTypes.bool,
   }),
   preventClosing: PropTypes.bool,
+  shouldCloseOnOverlayClick: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -54,9 +55,31 @@ const defaultProps = {
 };
 
 class ModalFullscreen extends PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.handleAction = this.handleAction.bind(this);
+  }
+
   handleAction(name) {
-    const action = this.props[name];
-    return this.props.modalHide(action.callback);
+    const { confirm, dismiss, modalHide } = this.props;
+    const { callback: callBackConfirm } = confirm;
+    const { callback: callBackDismiss } = dismiss;
+
+    let callback;
+
+    switch (name) {
+      case 'confirm':
+        callback = callBackConfirm;
+        break;
+      case 'dismiss':
+        callback = callBackDismiss;
+        break;
+      default:
+        break;
+    }
+
+    return modalHide(callback);
   }
 
   render() {
@@ -66,6 +89,7 @@ class ModalFullscreen extends PureComponent {
       confirm,
       dismiss,
       className,
+      children,
       modalisOpen,
       preventClosing,
       ...otherProps
@@ -93,17 +117,17 @@ class ModalFullscreen extends PureComponent {
               label={intl.formatMessage(intlMessages.modalClose)}
               aria-label={`${intl.formatMessage(intlMessages.modalClose)} ${title}`}
               disabled={dismiss.disabled}
-              onClick={this.handleAction.bind(this, 'dismiss')}
+              onClick={() => this.handleAction('dismiss')}
               aria-describedby="modalDismissDescription"
             />
             <Button
               data-test="modalConfirmButton"
               color="primary"
               className={popoutIcon ? cx(styles.confirm, styles.popout) : styles.confirm}
-              label={confirm.label}
+              label={confirm.label || intl.formatMessage(intlMessages.modalDone)}
               aria-label={confirmAriaLabel}
               disabled={confirm.disabled}
-              onClick={this.handleAction.bind(this, 'confirm')}
+              onClick={() => this.handleAction('confirm')}
               aria-describedby="modalConfirmDescription"
               icon={confirm.icon || null}
               iconRight={popoutIcon}
@@ -111,7 +135,7 @@ class ModalFullscreen extends PureComponent {
           </div>
         </header>
         <div className={styles.content}>
-          {this.props.children}
+          {children}
         </div>
         <div id="modalDismissDescription" hidden>{intl.formatMessage(intlMessages.modalCloseDescription)}</div>
         <div id="modalConfirmDescription" hidden>{intl.formatMessage(intlMessages.modalDoneDescription)}</div>

bigbluebutton-html5/imports/ui/components/presentation/presentation-uploader/component.jsx

@@ -18,6 +18,7 @@ import { styles } from './styles.scss';
 
 const propTypes = {
   intl: intlShape.isRequired,
+  mountModal: PropTypes.func.isRequired,
   defaultFileName: PropTypes.string.isRequired,
   fileSizeMin: PropTypes.number.isRequired,
   fileSizeMax: PropTypes.number.isRequired,
@@ -48,9 +49,13 @@ const intlMessages = defineMessages({
     id: 'app.presentationUploder.message',
     description: 'message warning the types of files accepted',
   },
+  uploadLabel: {
+    id: 'app.presentationUploder.uploadLabel',
+    description: 'confirm label when presentations are to be uploaded',
+  },
   confirmLabel: {
     id: 'app.presentationUploder.confirmLabel',
-    description: 'used in the button that start the upload of the new presentation',
+    description: 'confirm label when no presentations are to be uploaded',
   },
   confirmDesc: {
     id: 'app.presentationUploder.confirmDesc',
@@ -174,6 +179,7 @@ class PresentationUploader extends Component {
       oldCurrentId: currentPres ? currentPres.id : -1,
       preventClosing: false,
       disableActions: false,
+      disableConfirm: false,
     };
 
     this.handleConfirm = this.handleConfirm.bind(this);
@@ -189,6 +195,15 @@ class PresentationUploader extends Component {
     this.releaseActionsOnPresentationError = this.releaseActionsOnPresentationError.bind(this);
   }
 
+  static getDerivedStateFromProps(props, state) {
+    if (props.presentations[0].isCurrent && state.disableConfirm) {
+      return {
+        disableConfirm: !state.disableConfirm,
+      };
+    }
+    return null;
+  }
+
   componentDidUpdate() {
     this.releaseActionsOnPresentationError();
   }
@@ -395,6 +410,7 @@ class PresentationUploader extends Component {
 
     this.setState({
       presentations: presentationsUpdated,
+      disableConfirm: false,
     });
   }
 
@@ -408,6 +424,7 @@ class PresentationUploader extends Component {
       presentations: update(presentations, {
         $splice: [[toRemoveIndex, 1]],
       }),
+      disableConfirm: true,
     });
   }
 
@@ -669,7 +686,19 @@ class PresentationUploader extends Component {
 
   render() {
     const { intl } = this.props;
-    const { preventClosing, disableActions } = this.state;
+    const {
+      preventClosing, disableActions, presentations, disableConfirm,
+    } = this.state;
+
+    let awaitingConversion = false;
+    presentations.map((presentation) => {
+      if (!presentation.conversion.done) awaitingConversion = true;
+      return null;
+    });
+
+    const confirmLabel = awaitingConversion
+      ? intl.formatMessage(intlMessages.uploadLabel)
+      : intl.formatMessage(intlMessages.confirmLabel);
 
     return (
       <ModalFullscreen
@@ -677,9 +706,9 @@ class PresentationUploader extends Component {
         preventClosing={preventClosing}
         confirm={{
           callback: this.handleConfirm,
-          label: intl.formatMessage(intlMessages.confirmLabel),
+          label: confirmLabel,
           description: intl.formatMessage(intlMessages.confirmDesc),
-          disabled: disableActions,
+          disabled: disableConfirm,
         }}
         dismiss={{
           callback: this.handleDismiss,

bigbluebutton-html5/private/locales/en.json

@@ -128,8 +128,9 @@
     "app.presentation.presentationToolbar.fitToPage": "Fit to page",
     "app.presentation.presentationToolbar.goToSlide": "Slide {0}",
     "app.presentationUploder.title": "Presentation",
-    "app.presentationUploder.message": "As a presenter you have the ability of uploading any office document or PDF file.  We recommend PDF file for best results.",
-    "app.presentationUploder.confirmLabel": "Upload",
+    "app.presentationUploder.message": "As a presenter you have the ability of uploading any office document or PDF file.  We recommend PDF file for best results. Please ensure that a presentation is selected using the circle checkbox on the right hand side.",
+    "app.presentationUploder.uploadLabel": "Upload",
+    "app.presentationUploder.confirmLabel": "Confirm",
     "app.presentationUploder.confirmDesc": "Save your changes and start the presentation",
     "app.presentationUploder.dismissLabel": "Cancel",
     "app.presentationUploder.dismissDesc": "Close the modal window and discard your changes",