Merge pull request #3514 from KDSBrowne/New-Settings-Update

New settings update - Application Menu

bigbluebutton-html5/client/main.jsx

@@ -3,6 +3,15 @@ import { Meteor } from 'meteor/meteor';
 import { render } from 'react-dom';
 import { renderRoutes } from '../imports/startup/client/routes.js';
 import { IntlProvider } from 'react-intl';
+import Singleton from '/imports/ui/services/storage/local.js';
+
+function loadUserSettings() {
+    const userSavedFontSize = Singleton.getItem('bbbSavedFontSizePixels');
+
+    if (userSavedFontSize) {
+      document.getElementsByTagName('html')[0].style.fontSize = userSavedFontSize;
+    }
+}
 
 function setMessages(data) {
   let messages = data;
@@ -37,6 +46,7 @@ function loadLib(libname, success, fail) {
 };
 
 Meteor.startup(() => {
+
   loadLib('sip.js');
   loadLib('bbb_webrtc_bridge_sip.js');
   loadLib('bbblogger.js');
@@ -46,6 +56,8 @@ Meteor.startup(() => {
   loadLib('verto_extension.js');
   loadLib('jquery.jsonrpcclient.js');
 
+  loadUserSettings();
+
   let browserLanguage = navigator.language;
   let request = new Request
     (`${window.location.origin}/html5client/locale?locale=${browserLanguage}`);

bigbluebutton-html5/imports/api/FontControl/index.js

@@ -1,61 +0,0 @@
-class FontControl {
-  static get fontSizeEnum() {
-    return {
-      EXTRA_SMALL: 1,
-      SMALL: 2,
-      MEDIUM: 3,
-      LARGE: 4,
-      EXTRA_LARGE: 5,
-
-      properties: {
-        1: { size: '12px', name: 'Extra Small' },
-        2: { size: '14px', name: 'Small' },
-        3: { size: '16px', name: 'Medium' },
-        4: { size: '18px', name: 'Large' },
-        5: { size: '20px', name: 'Extra Large' },
-      },
-    };
-  }
-
-  static applyFontSize() {
-    const size = FontControl.fontSizeEnum.properties[this.state.currentFontSize].size;
-    document.getElementsByTagName('html')[0].style.fontSize = size;
-  }
-
-  static loadFontSize() {
-    const existingFontSize = localStorage.getItem('bbbFontSize');
-    let newFontSize = null;
-    if (existingFontSize &&
-      existingFontSize >= _this.fontSizeEnum.EXTRA_SMALL &&
-      existingFontSize <= _this.fontSizeEnum.EXTRA_LARGE) {
-      newFontSize = existingFontSize;
-    } else {
-      newFontSize = FontControl.fontSizeEnum.MEDIUM;
-    }
-
-    FontControl.storeFontSize.call(this, newFontSize);
-  }
-
-  static storeFontSize(fs) {
-    localStorage.setItem('bbbFontSize', fs);
-    this.setState({ currentFontSize: fs }, function () {
-      FontControl.applyFontSize.call(this);
-    });
-  }
-
-  static getFontSizeName() {
-    return FontControl.fontSizeEnum.properties[this.state.currentFontSize].name;
-  }
-
-  static increaseFontSize() {
-    const fs = Math.min(this.state.currentFontSize + 1, FontControl.fontSizeEnum.EXTRA_LARGE);
-    FontControl.storeFontSize.call(this, fs);
-  };
-
-  static decreaseFontSize() {
-    const fs = Math.max(this.state.currentFontSize - 1, FontControl.fontSizeEnum.EXTRA_SMALL);
-    FontControl.storeFontSize.call(this, fs);
-  };
-};
-
-export default FontControl;

bigbluebutton-html5/imports/ui/components/logout-confirmation/component.jsx

@@ -2,6 +2,8 @@ import React, { Component } from 'react';
 import { defineMessages, injectIntl } from 'react-intl';
 import Auth from '/imports/ui/services/auth';
 import Modal from '/imports/ui/components/modal/component';
+import LocalStorage from '/imports/ui/services/storage/local.js';
+import { clearModal } from '/imports/ui/components/app/service';
 
 const intlMessages = defineMessages({
   title: {
@@ -35,12 +37,17 @@ class LeaveConfirmation extends Component {
     super(props);
 
     this.handleLeaveConfirmation = this.handleLeaveConfirmation.bind(this);
+    this.handleCancleLogout = this.handleCancleLogout.bind(this);
   }
 
   handleLeaveConfirmation() {
     Auth.completeLogout();
   }
 
+  handleCancleLogout() {
+    clearModal();
+  }
+
   render() {
     const { intl } = this.props;
     return (
@@ -52,6 +59,7 @@ class LeaveConfirmation extends Component {
           description: intl.formatMessage(intlMessages.confirmDesc),
         }}
         dismiss={{
+          callback: this.handleCancleLogout,
           label: intl.formatMessage(intlMessages.dismissLabel),
           description: intl.formatMessage(intlMessages.dismissDesc),
         }}>

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

@@ -45,6 +45,8 @@ export default class Modal extends Component {
   }
 
   handleDismiss() {
+    const { dismiss } = this.props;
+    dismiss.callback(...arguments);
     this.setState({ isOpen: false });
     clearModal();
   }
@@ -52,6 +54,8 @@ export default class Modal extends Component {
   handleConfirm() {
     const { confirm } = this.props;
     confirm.callback(...arguments);
+    this.setState({ isOpen: false });
+    clearModal();
   }
 
   componentDidUpdate(prevProps, prevState) {

bigbluebutton-html5/imports/ui/components/settings/component.jsx

@@ -19,7 +19,7 @@ export default class Settings extends React.Component {
 
   renderSettingOptions() {
     const { isPresenter, role } = this.props;
-    
+
     this.submenus = [];
     this.submenus.push(
       { componentName: AudioMenu, tabIndex: 3,
@@ -71,6 +71,9 @@ export default class Settings extends React.Component {
       title: this.submenus[curr].props.title,
       prependIconName: this.submenus[curr].props.prependIconName,
       icon: this.submenus[curr].props.icon,
+      handleIncreaseFontSize: this.props.handleIncreaseFontSize,
+      handleDecreaseFontSize: this.props.handleDecreaseFontSize,
+      handleGetFontSizeName: this.props.handleGetFontSizeName,
     };
 
     const Submenu = this.submenus[curr].componentName;
@@ -184,6 +187,7 @@ export default class Settings extends React.Component {
   }
 
   render() {
+
     return (
       <Modal
         title="Settings"
@@ -191,14 +195,16 @@ export default class Settings extends React.Component {
           callback: (() => {
             this.setState({ activeSubmenu: 0, focusSubmenu: 0 });
             console.log('SHOULD APPLY SETTINGS CHANGES');
+            this.props.handleSaveFontState();
           }),
-          label: 'Done',
+          label: 'Save',
           description: 'Saves the changes and close the settings menu',
         }}
         dismiss={{
           callback: (() => {
             this.setState({ activeSubmenu: 0, focusSubmenu: 0 });
             console.log('SHOULD DISCART SETTINGS CHANGES');
+            this.props.handleRevertFontState();
           }),
           label: 'Cancel',
           description: 'Discart the changes and close the settings menu',

bigbluebutton-html5/imports/ui/components/settings/container.jsx

@@ -1,17 +1,97 @@
-import React, { Component, PropTypes } from 'react';
+import React, { Component } from 'react';
 import { createContainer } from 'meteor/react-meteor-data';
-
 import Settings from './component';
-import Service from './service';
+import Service from './service';
+import LocalStorage from '/imports/ui/services/storage/local.js';
+
+const DEFAULT_FONTSIZE = 3;
+const MAX_FONTSIZE = 5;
+const MIN_FONTSIZE = 1;
 
 class SettingsMenuContainer extends Component {
   constructor(props) {
-    super(props);
-  }
+    super(props);
+
+    this.state = {
+      currentFontSize: LocalStorage.getItem('bbbSavedFontSize') || DEFAULT_FONTSIZE,
+    }
+
+    this.fontControl = {
+      properties: {
+        1: { size: '12px', name: 'Extra Small' },
+        2: { size: '14px', name: 'Small' },
+        3: { size: '16px', name: 'Medium' },
+        4: { size: '18px', name: 'Large' },
+        5: { size: '20px', name: 'Extra Large' },
+      },
+    };
+
+    this.handleGetFontSizeName = this.handleGetFontSizeName.bind(this);
+    this.handleApplyFontSize = this.handleApplyFontSize.bind(this);
+    this.handleIncreaseFontSize = this.handleIncreaseFontSize.bind(this);
+    this.handleDecreaseFontSize = this.handleDecreaseFontSize.bind(this);
+    this.handleSaveFontState = this.handleSaveFontState.bind(this);
+    this.handleRevertFontState = this.handleRevertFontState.bind(this);
+  }
+
+  handleGetFontSizeName() {
+    return this.fontControl.properties[this.state.currentFontSize].name;
+  };
+
+  handleApplyFontSize() {
+    const size = this.fontControl.properties[this.state.currentFontSize].size;
+    document.getElementsByTagName('html')[0].style.fontSize = size;
+  };
+
+  handleIncreaseFontSize() {
+    let fs = ( this.state.currentFontSize < MAX_FONTSIZE) ? ++this.state.currentFontSize : MAX_FONTSIZE;
+    LocalStorage.setItem('bbbFontSize', fs);
+    this.setState({ currentFontSize: fs }, function () {
+      this.handleApplyFontSize();
+    });
+  };
+
+  handleDecreaseFontSize() {
+    let fs = ( this.state.currentFontSize > MIN_FONTSIZE) ? --this.state.currentFontSize : MIN_FONTSIZE;
+    LocalStorage.setItem('bbbFontSize', fs);
+    this.setState({ currentFontSize: fs }, function () {
+      this.handleApplyFontSize();
+    });
+  };
+
+  handleSaveFontState() {
+    let fs = LocalStorage.getItem('bbbFontSize') || DEFAULT_FONTSIZE;
+    LocalStorage.setItem('bbbSavedFontSize', fs);
+    LocalStorage.setItem('bbbSavedFontSizePixels', this.fontControl.properties[fs].size);
+    this.setState({ currentFontSize: fs }, function () {
+      this.handleApplyFontSize();
+    });
+  };
+
+  handleRevertFontState(){
+    let fs = LocalStorage.getItem('bbbSavedFontSize') || DEFAULT_FONTSIZE;
+    this.setState({ currentFontSize: fs }, function () {
+      this.handleApplyFontSize();
+    });
+  };
+
+
+  render() {
+
+    const handleGetFontSizeName = () => this.handleGetFontSizeName();
+    const handleIncreaseFontSize = () => this.handleIncreaseFontSize();
+    const handleDecreaseFontSize = () => this.handleDecreaseFontSize();
+    const handleSaveFontState = () => this.handleSaveFontState();
+    const handleRevertFontState = () => this.handleRevertFontState();
 
-  render() {
     return (
-      <Settings {...this.props}>
+      <Settings
+        handleGetFontSizeName={handleGetFontSizeName}
+        handleIncreaseFontSize={handleIncreaseFontSize}
+        handleDecreaseFontSize={handleDecreaseFontSize}
+        handleSaveFontState={handleSaveFontState}
+        handleRevertFontState={handleRevertFontState}
+        {...this.props}>
         {this.props.children}
       </Settings>
     );

bigbluebutton-html5/imports/ui/components/settings/submenus/application/component.jsx

@@ -4,15 +4,11 @@ import Icon from '/imports/ui/components/icon/component';
 import Button from '/imports/ui/components/button/component';
 import BaseMenu from '../base/component';
 import ReactDOM from 'react-dom';
-import FontControl from '/imports/api/FontControl';
 import styles from '../styles.scss';
 
 export default class ApplicationMenu extends BaseMenu {
   constructor(props) {
     super(props);
-    this.state = {
-      currentFontSize: FontControl.fontSizeEnum.MEDIUM,
-    };
   }
 
   getContent() {
@@ -37,11 +33,11 @@ export default class ApplicationMenu extends BaseMenu {
             <p>Font size</p>
           </div>
           <div className={styles.fontBarMid}>
-            <p>{FontControl.getFontSizeName.call(this)}</p>
+            <p>{this.props.handleGetFontSizeName()}</p>
           </div>
           <div className={styles.fontBarRight} role='presentation'>
             <Button
-              onClick={FontControl.increaseFontSize.bind(this)}
+              onClick={this.props.handleIncreaseFontSize}
               icon={'circle-add'}
               circle={true}
               tabIndex={9}
@@ -54,7 +50,7 @@ export default class ApplicationMenu extends BaseMenu {
             <div id='sizeUpDesc' hidden>
               Increases the font size of the application.</div>
             <Button
-              onClick={FontControl.decreaseFontSize.bind(this)}
+              onClick={this.props.handleDecreaseFontSize}
               icon={'circle-minus'}
               circle={true}
               tabIndex={10}