fix errors linter

2017-10-10 19:08:51 -03:00 · 2017-10-10 19:08:51 -03:00 · 50cc876cf7
commit 50cc876cf7
parent 5393051d9d
21 changed files with 212 additions and 234 deletions
--- a/bigbluebutton-html5/imports/api/2.0/cursor/server/modifiers/initializeCursor.js
+++ b/bigbluebutton-html5/imports/api/2.0/cursor/server/modifiers/initializeCursor.js
@ -1,4 +1,3 @@
-import Cursor from '/imports/api/2.0/cursor';
 import updateCursor from './updateCursor';

 export default function initializeCursor(meetingId) {
--- a/bigbluebutton-html5/imports/ui/components/chat/chat-dropdown/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/chat/chat-dropdown/component.jsx
@ -1,6 +1,5 @@
 import React, { Component } from 'react';
 import { defineMessages, injectIntl } from 'react-intl';
-import cx from 'classnames';
 import { withModalMounter } from '/imports/ui/components/modal/service';
 import Clipboard from 'clipboard';
 import _ from 'lodash';
--- a/bigbluebutton-html5/imports/ui/components/chat/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/chat/component.jsx
@ -90,7 +90,7 @@ const Chat = (props) => {

 export default injectWbResizeEvent(injectIntl(Chat));

-Chat.propTypes = {
+const propTypes = {
  chatID: PropTypes.string.isRequired,
  chatName: PropTypes.string.isRequired,
  title: PropTypes.string.isRequired,
@ -104,7 +104,7 @@ Chat.propTypes = {
      ]),
    ).isRequired,
  ).isRequired,
-  scrollPosition: PropTypes.number,
+  scrollPosition: PropTypes.number.isRequired,
  hasUnreadMessages: PropTypes.bool.isRequired,
  lastReadMessageTime: PropTypes.number.isRequired,
  partnerIsLoggedOut: PropTypes.bool.isRequired,
@ -121,3 +121,5 @@ Chat.propTypes = {
    formatMessage: PropTypes.func.isRequired,
  }).isRequired,
 };
+
+Chat.propTypes = propTypes;
--- a/bigbluebutton-html5/imports/ui/components/chat/message-form/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/chat/message-form/component.jsx
@ -1,12 +1,8 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 import { defineMessages, injectIntl } from 'react-intl';
-import { findDOMNode } from 'react-dom';
 import cx from 'classnames';
-import styles from './styles';
-
-import MessageFormActions from './message-form-actions/component';
 import TextareaAutosize from 'react-autosize-textarea';
+import styles from './styles';
 import Button from '../../button/component';

 const propTypes = {
@ -142,7 +138,7 @@ class MessageForm extends Component {
          <TextareaAutosize
            className={styles.input}
            id="message-input"
-            innerRef={ref => this.textarea = ref}
+            innerRef={ref => (this.textarea = ref)}
            placeholder={intl.formatMessage(messages.inputPlaceholder, { 0: chatName })}
            aria-controls={this.props.chatAreaId}
            aria-label={intl.formatMessage(messages.inputLabel, { 0: chatTitle })}
--- a/bigbluebutton-html5/imports/ui/components/dropdown/list/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/dropdown/list/component.jsx
@ -8,7 +8,8 @@ import ListSeparator from './separator/component';
 import ListTitle from './title/component';

 const propTypes = {
-  // We should recheck this proptype, sometimes we need to create an container and send to dropdown, but with this
+ /*  We should recheck this proptype, sometimes we need to create an container and send to dropdown,
+   but with this */
  // proptype, is not possible.
  children: PropTypes.arrayOf((propValue, key, componentName, location, propFullName) => {
    if (propValue[key].type !== ListItem &&
--- a/bigbluebutton-html5/imports/ui/components/icon/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/icon/component.jsx
@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';

@ -11,17 +11,14 @@ const defaultProps = {
  prependIconName: 'icon-bbb-',
 };

-export default class Icon extends Component {
-  render() {
-    const { className, prependIconName, iconName, ...otherProps } = this.props;
-    return (
-      <i
-        className={cx(className, [prependIconName, iconName].join(''))}
-        {...otherProps}
-      />
-    );
-  }
-}
+const Icon = ({ className, prependIconName, iconName, ...otherProps }) => (
+  <i
+    className={cx(className, [prependIconName, iconName].join(''))}
+    {...otherProps}
+  />
+   );
+
+export default Icon;

 Icon.propTypes = propTypes;
 Icon.defaultProps = defaultProps;
--- a/bigbluebutton-html5/imports/ui/components/media/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/media/component.jsx
@ -7,6 +7,10 @@ const propTypes = {
  overlay: PropTypes.element,
 };

+const defaultProps = {
+  overlay: null,
+};
+
 export default class Media extends Component {
  renderContent() {
    const { content } = this.props;
@ -44,3 +48,4 @@ export default class Media extends Component {
 }

 Media.propTypes = propTypes;
+Media.defaultProps = defaultProps;
--- a/bigbluebutton-html5/imports/ui/components/modal/service.js
+++ b/bigbluebutton-html5/imports/ui/components/modal/service.js
@ -20,14 +20,8 @@ export const getModal = () => {

 export const withModalMounter = ComponentToWrap =>
  class ModalMounterWrapper extends Component {
-    constructor(props) {
-      super(props);
-      this.mount = this.mount.bind(this);
-    }
-
-    mount(modalComponent) {
+    static mount(modalComponent) {
      showModal(null);
-
      // defer the execution to a subsequent event loop
      setTimeout(() => showModal(modalComponent), 0);
    }
@ -35,7 +29,7 @@ export const withModalMounter = ComponentToWrap =>
    render() {
      return (<ComponentToWrap
        {...this.props}
-        mountModal={this.mount}
+        mountModal={ModalMounterWrapper.mount}
      />);
    }
  };
--- a/bigbluebutton-html5/imports/ui/components/modal/simple/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/modal/simple/component.jsx
@ -1,9 +1,9 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import ModalBase, { withModalState } from '../base/component';
-import Button from '/imports/ui/components/button/component';
-import styles from './styles.scss';
 import cx from 'classnames';
+import Button from '/imports/ui/components/button/component';
+import ModalBase, { withModalState } from '../base/component';
+import styles from './styles.scss';

 const propTypes = {
  title: PropTypes.string.isRequired,
@ -24,6 +24,11 @@ const defaultProps = {
 };

 class ModalSimple extends Component {
+  constructor(props) {
+    super(props);
+    this.handleDismiss = this.handleDismiss.bind(this);
+  }
+
  handleDismiss() {
    this.props.modalHide(this.props.dismiss.callback);
  }
@ -34,14 +39,14 @@ class ModalSimple extends Component {
      dismiss,
      className,
      modalisOpen,
-      ...otherProps,
+      ...otherProps
    } = this.props;

    return (
      <ModalBase
        isOpen={modalisOpen}
        className={cx(className, styles.modal)}
-        onRequestClose={this.handleDismiss.bind(this)}
+        onRequestClose={this.handleDismiss}
        contentLabel={title}
        {...otherProps}
      >
@ -51,10 +56,11 @@ class ModalSimple extends Component {
            className={styles.dismiss}
            label={dismiss.label}
            icon={'close'}
-            circle={true}
-            hideLabel={true}
-            onClick={this.handleDismiss.bind(this)}
-            aria-describedby={'modalDismissDescription'} />
+            circle
+            hideLabel
+            onClick={this.handleDismiss}
+            aria-describedby={'modalDismissDescription'}
+          />
        </header>
        <div className={styles.content}>
          {this.props.children}
@ -63,7 +69,7 @@ class ModalSimple extends Component {
      </ModalBase>
    );
  }
-};
+}

 ModalSimple.propTypes = propTypes;
 ModalSimple.defaultProps = defaultProps;
--- a/bigbluebutton-html5/imports/ui/components/nav-bar/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/nav-bar/component.jsx
@ -2,10 +2,6 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import _ from 'lodash';
 import cx from 'classnames';
-import styles from './styles.scss';
-import Button from '../button/component';
-import RecordingIndicator from './recording-indicator/component';
-import SettingsDropdownContainer from './settings-dropdown/container';
 import Icon from '/imports/ui/components/icon/component';
 import BreakoutJoinConfirmation from '/imports/ui/components/breakout-join-confirmation/component';
 import Dropdown from '/imports/ui/components/dropdown/component';
@ -15,6 +11,10 @@ import DropdownList from '/imports/ui/components/dropdown/list/component';
 import DropdownListItem from '/imports/ui/components/dropdown/list/item/component';
 import { withModalMounter } from '/imports/ui/components/modal/service';
 import { defineMessages, injectIntl } from 'react-intl';
+import styles from './styles.scss';
+import Button from '../button/component';
+import RecordingIndicator from './recording-indicator/component';
+import SettingsDropdownContainer from './settings-dropdown/container';

 const intlMessages = defineMessages({
  toggleUserListLabel: {
@ -57,6 +57,35 @@ class NavBar extends Component {
    this.handleToggleUserList = this.handleToggleUserList.bind(this);
  }

+  componentDidUpdate() {
+    const {
+      breakouts,
+      getBreakoutJoinURL,
+      isBreakoutRoom,
+    } = this.props;
+
+    breakouts.forEach((breakout) => {
+      if (!breakout.users) {
+        return;
+      }
+
+      const breakoutURL = getBreakoutJoinURL(breakout);
+
+      if (!this.state.didSendBreakoutInvite && !isBreakoutRoom) {
+        this.inviteUserToBreakout(breakout, breakoutURL);
+      }
+    });
+
+    if (!breakouts.length && this.state.didSendBreakoutInvite) {
+      // this.setState({ didSendBreakoutInvite: false });
+      this.onUpdate(() => {
+        this.setState({
+          didSendBreakoutInvite: false,
+        });
+      });
+    }
+  }
+
  componendDidMount() {
    document.title = this.props.presentationTitle;
  }
@ -75,6 +104,55 @@ class NavBar extends Component {
    });
  }

+  renderPresentationTitle() {
+    const {
+      breakouts,
+      isBreakoutRoom,
+      presentationTitle,
+    } = this.props;
+
+    if (isBreakoutRoom || !breakouts.length) {
+      return (
+        <h1 className={styles.presentationTitle}>{presentationTitle}</h1>
+      );
+    }
+
+    return (
+      <Dropdown isOpen={this.state.isActionsOpen}>
+        <DropdownTrigger>
+          <h1 className={cx(styles.presentationTitle, styles.dropdownBreakout)}>
+            {presentationTitle} <Icon iconName="down-arrow" />
+          </h1>
+        </DropdownTrigger>
+        <DropdownContent
+          placement="bottom"
+        >
+          <DropdownList>
+            {breakouts.map(breakout => this.renderBreakoutItem(breakout))}
+          </DropdownList>
+        </DropdownContent>
+      </Dropdown>
+    );
+  }
+
+  renderBreakoutItem(breakout) {
+    const {
+      getBreakoutJoinURL,
+      mountModal,
+    } = this.props;
+
+    const breakoutName = breakout.name;
+    const breakoutURL = getBreakoutJoinURL(breakout);
+
+    return (
+      <DropdownListItem
+        className={styles.actionsHeader}
+        key={_.uniqueId('action-header')}
+        label={breakoutName}
+        onClick={openBreakoutJoinConfirmation.bind(this, breakoutURL, breakoutName, mountModal)}
+      />
+    );
+  }
  render() {
    const { hasUnreadMessages, beingRecorded, isExpanded, intl } = this.props;

@ -111,80 +189,6 @@ class NavBar extends Component {
      </div>
    );
  }
-
-  renderPresentationTitle() {
-    const {
-      breakouts,
-      isBreakoutRoom,
-      presentationTitle,
-    } = this.props;
-
-    if (isBreakoutRoom || !breakouts.length) {
-      return (
-        <h1 className={styles.presentationTitle}>{presentationTitle}</h1>
-      );
-    }
-
-    return (
-      <Dropdown isOpen={this.state.isActionsOpen}>
-        <DropdownTrigger>
-          <h1 className={cx(styles.presentationTitle, styles.dropdownBreakout)}>
-            {presentationTitle} <Icon iconName="down-arrow" />
-          </h1>
-        </DropdownTrigger>
-        <DropdownContent
-          placement="bottom"
-        >
-          <DropdownList>
-            {breakouts.map(breakout => this.renderBreakoutItem(breakout))}
-          </DropdownList>
-        </DropdownContent>
-      </Dropdown>
-    );
-  }
-
-  componentDidUpdate() {
-    const {
-      breakouts,
-      getBreakoutJoinURL,
-      isBreakoutRoom,
-    } = this.props;
-
-    breakouts.forEach((breakout) => {
-      if (!breakout.users) {
-        return;
-      }
-
-      const breakoutURL = getBreakoutJoinURL(breakout);
-
-      if (!this.state.didSendBreakoutInvite && !isBreakoutRoom) {
-        this.inviteUserToBreakout(breakout, breakoutURL);
-      }
-    });
-
-    if (!breakouts.length && this.state.didSendBreakoutInvite) {
-      this.setState({ didSendBreakoutInvite: false });
-    }
-  }
-
-  renderBreakoutItem(breakout) {
-    const {
-      getBreakoutJoinURL,
-      mountModal,
-    } = this.props;
-
-    const breakoutName = breakout.name;
-    const breakoutURL = getBreakoutJoinURL(breakout);
-
-    return (
-      <DropdownListItem
-        className={styles.actionsHeader}
-        key={_.uniqueId('action-header')}
-        label={breakoutName}
-        onClick={openBreakoutJoinConfirmation.bind(this, breakoutURL, breakoutName, mountModal)}
-      />
-    );
-  }
 }

 NavBar.propTypes = propTypes;
--- a/bigbluebutton-html5/imports/ui/components/nav-bar/container.jsx
+++ b/bigbluebutton-html5/imports/ui/components/nav-bar/container.jsx
@ -1,31 +1,22 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 import { createContainer } from 'meteor/react-meteor-data';
 import { withRouter } from 'react-router';
 import Meetings from '/imports/api/2.0/meetings';
 import Auth from '/imports/ui/services/auth';
+import { meetingIsBreakout } from '/imports/ui/components/app/service';
 import userListService from '../user-list/service';
 import ChatService from '../chat/service';
 import Service from './service';
-import { meetingIsBreakout } from '/imports/ui/components/app/service';
 import NavBar from './component';

 const CHAT_CONFIG = Meteor.settings.public.chat;
 const PUBLIC_CHAT_KEY = CHAT_CONFIG.public_id;

-class NavBarContainer extends Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    return (
-      <NavBar {...this.props}>
-        {this.props.children}
-      </NavBar>
-    );
-  }
-}
+const NavBarContainer = ({ children, ...props }) => (
+  <NavBar {...props}>
+    {children}
+  </NavBar>
+);

 export default withRouter(createContainer(({ location, router }) => {
  let meetingTitle;
--- a/bigbluebutton-html5/imports/ui/components/nav-bar/recording-indicator/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/nav-bar/recording-indicator/component.jsx
@ -1,8 +1,7 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import React from 'react';
 import styles from './styles.scss';

-export default class RecordingIndicator extends Component {
+/* export default class RecordingIndicator extends Component {
  constructor(props) {
    super(props);
  }
@ -16,4 +15,11 @@ export default class RecordingIndicator extends Component {

    return (<div className={styles.indicator} />);
  }
-}
+} */
+
+const RecordingIndicator = ({ beingRecorded }) => {
+  if (!beingRecorded) return null;
+  return <div className={styles.indicator} />;
+};
+
+export default RecordingIndicator;
--- a/bigbluebutton-html5/imports/ui/components/settings/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/settings/component.jsx
@ -2,12 +2,11 @@ import React, { Component } from 'react';
 import Modal from '/imports/ui/components/modal/fullscreen/component';
 import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
 import { defineMessages, injectIntl } from 'react-intl';
-import { withModalMounter } from '../modal/service';
 import ClosedCaptions from '/imports/ui/components/settings/submenus/closed-captions/component';
 import Application from '/imports/ui/components/settings/submenus/application/container';
 import Participants from '/imports/ui/components/settings/submenus/participants/component';
-import Video from '/imports/ui/components/settings/submenus/video/component';
 import _ from 'lodash';
+import { withModalMounter } from '../modal/service';

 import Icon from '../icon/component';
 import styles from './styles';
@ -59,6 +58,9 @@ const propTypes = {
 };

 class Settings extends Component {
+  static setHtmlFontSize(size) {
+    document.getElementsByTagName('html')[0].style.fontSize = size;
+  }
  constructor(props) {
    super(props);

@ -94,37 +96,6 @@ class Settings extends Component {
    });
  }

-  setHtmlFontSize(size) {
-    document.getElementsByTagName('html')[0].style.fontSize = size;
-  }
-
-  render() {
-    const intl = this.props.intl;
-
-    return (
-      <Modal
-        title={intl.formatMessage(intlMessages.SettingsLabel)}
-        confirm={{
-          callback: (() => {
-            this.props.mountModal(null);
-            this.updateSettings(this.state.current);
-          }),
-          label: intl.formatMessage(intlMessages.SaveLabel),
-          description: intl.formatMessage(intlMessages.SaveLabelDesc),
-        }}
-        dismiss={{
-          callback: (() => {
-            this.setHtmlFontSize(this.state.saved.application.fontSize);
-          }),
-          label: intl.formatMessage(intlMessages.CancelLabel),
-          description: intl.formatMessage(intlMessages.CancelLabelDesc),
-        }}
-      >
-        {this.renderModalContent()}
-      </Modal>
-    );
-  }
-
  handleUpdateSettings(key, newSettings) {
    const settings = this.state;
    settings.current[key] = newSettings;
@ -201,6 +172,33 @@ class Settings extends Component {
      </Tabs>
    );
  }
+  render() {
+    const intl = this.props.intl;
+
+    return (
+      <Modal
+        title={intl.formatMessage(intlMessages.SettingsLabel)}
+        confirm={{
+          callback: (() => {
+            this.props.mountModal(null);
+            this.updateSettings(this.state.current);
+          }),
+          label: intl.formatMessage(intlMessages.SaveLabel),
+          description: intl.formatMessage(intlMessages.SaveLabelDesc),
+        }}
+        dismiss={{
+          callback: (() => {
+            this.setHtmlFontSize(this.state.saved.application.fontSize);
+          }),
+          label: intl.formatMessage(intlMessages.CancelLabel),
+          description: intl.formatMessage(intlMessages.CancelLabelDesc),
+        }}
+      >
+        {this.renderModalContent()}
+      </Modal>
+    );
+  }
+
 }

 Settings.propTypes = propTypes;
--- a/bigbluebutton-html5/imports/ui/components/settings/service.js
+++ b/bigbluebutton-html5/imports/ui/components/settings/service.js
@ -23,13 +23,11 @@ const getUserRoles = () => {
 };

 const updateSettings = (obj) => {
-  Object.keys(obj).forEach(k => Settings[k] = obj[k]);
+  Object.keys(obj).forEach(k => (Settings[k] = obj[k]));
  Settings.save();
 };

-const getAvailableLocales = function () {
-  return fetch('/html5client/locales').then(locales => locales.json());
-};
+const getAvailableLocales = () => fetch('/html5client/locales').then(locales => locales.json());

 export {
  getClosedCaptionLocales,
--- a/bigbluebutton-html5/imports/ui/components/settings/submenus/application/container.jsx
+++ b/bigbluebutton-html5/imports/ui/components/settings/submenus/application/container.jsx
@ -1,19 +1,14 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import React from 'react';
 import { createContainer } from 'meteor/react-meteor-data';
 import Application from './component';

-// import Service from './service';

-class ApplicationContainer extends Component {
-  render() {
-    return (
-      <Application {...this.props}>
-        {this.props.children}
-      </Application>
+const ApplicationContainer = props => (
+  <Application {...props}>
+    {props.children}
+  </Application>
    );
-  }
-}
+
 export default createContainer(() => ({
  fontSizes: [
    '12px',
--- a/bigbluebutton-html5/imports/ui/components/settings/submenus/base/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/settings/submenus/base/component.jsx
@ -1,8 +1,4 @@
 import React from 'react';
-import Modal from 'react-modal';
-import Icon from '/imports/ui/components/icon/component';
-import Button from '/imports/ui/components/button/component';
-import styles from '../styles.scss';

 export default class BaseMenu extends React.Component {
  constructor(props) {
--- a/bigbluebutton-html5/imports/ui/components/settings/submenus/participants/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/settings/submenus/participants/component.jsx
@ -1,14 +1,11 @@
 import React from 'react';
-import Modal from 'react-modal';
-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 cx from 'classnames';
-import styles from '../styles.scss';
 import Toggle from '/imports/ui/components/switch/component';
 import Checkbox from '/imports/ui/components/checkbox/component';
+import cx from 'classnames';
 import { defineMessages, injectIntl } from 'react-intl';
+import _ from 'lodash';
+import BaseMenu from '../base/component';
+import styles from '../styles.scss';

 const intlMessages = defineMessages({
  participantsTitle: {
@ -159,9 +156,9 @@ class ApplicationMenu extends BaseMenu {
          <div className={styles.row}>
            <div className={styles.col}>
              <div className={styles.formElement}>
-                <label className={styles.label}>
+                <div className={styles.label}>
                  {intl.formatMessage(intlMessages.muteAllLabel)}
-                </label>
+                </div>
              </div>
            </div>
            <div className={styles.col}>
@ -181,9 +178,9 @@ class ApplicationMenu extends BaseMenu {
          <div className={styles.row}>
            <div className={styles.col}>
              <div className={styles.formElement}>
-                <label className={styles.label}>
+                <div className={styles.label}>
                  {intl.formatMessage(intlMessages.lockAllLabel)}
-                </label>
+                </div>
              </div>
            </div>
            <div className={styles.col}>
@ -205,11 +202,12 @@ class ApplicationMenu extends BaseMenu {
  }

  renderLockItem({ label, key, ariaLabel, ariaLabelledBy, ariaDesc, ariaDescribedBy }, i) {
+    const formControlId = _.uniqueId('from-key-');
    return (
      <div key={i} className={cx(styles.row, styles.spacedLeft)}>
        <div className={styles.col}>
          <div className={styles.formElement}>
-            <label className={styles.label}>
+            <label htmlFor={formControlId} className={styles.label}>
              {label}
            </label>
          </div>
@ -225,6 +223,7 @@ class ApplicationMenu extends BaseMenu {
              ariaLabelledBy={ariaLabelledBy}
              ariaDesc={ariaDesc}
              ariaDescribedBy={ariaDescribedBy}
+              id={formControlId}
            />
          </div>
        </div>
--- a/bigbluebutton-html5/imports/ui/components/settings/submenus/video/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/settings/submenus/video/component.jsx
@ -1,9 +1,9 @@
-import React, { Component } from 'react';
-import BaseMenu from '../base/component';
-import styles from '../styles.scss';
-import { defineMessages, injectIntl } from 'react-intl';
+import React from 'react';
 import Toggle from '/imports/ui/components/switch/component';
 import cx from 'classnames';
+import { defineMessages, injectIntl } from 'react-intl';
+import BaseMenu from '../base/component';
+import styles from '../styles.scss';

 const intlMessages = defineMessages({
  videoSectionTitle: {
@ -58,10 +58,11 @@ class VideoMenu extends BaseMenu {
                className={styles.formElement}
                aria-label={intl.formatMessage(intlMessages.videoSourceLabel)}
              >
-                <label className={cx(styles.label, styles.labelSmall)}>
+                <label htmlFor="videoSourceSelect" className={cx(styles.label, styles.labelSmall)}>
                  {intl.formatMessage(intlMessages.videoSourceLabel)}
                </label>
                <select
+                  id="videoSourceSelect"
                  defaultValue="-1"
                  className={styles.select}
                >
@ -76,10 +77,11 @@ class VideoMenu extends BaseMenu {
                className={styles.formElement}
                aria-label={intl.formatMessage(intlMessages.videoQualityLabel)}
              >
-                <label className={cx(styles.label, styles.labelSmall)}>
+                <label htmlFor="videoSelectQuality" className={cx(styles.label, styles.labelSmall)}>
                  {intl.formatMessage(intlMessages.videoQualityLabel)}
                </label>
                <select
+                  id="videoSelectQuality"
                  defaultValue="-1"
                  className={styles.select}
                >
@ -93,9 +95,9 @@ class VideoMenu extends BaseMenu {
          <div className={styles.row}>
            <div className={styles.col}>
              <div className={styles.formElement}>
-                <label className={styles.label}>
+                <div className={styles.label}>
                  {intl.formatMessage(intlMessages.participantsCamLabel)}
-                </label>
+                </div>
              </div>
            </div>
            <div className={styles.col}>
--- a/bigbluebutton-html5/imports/ui/components/user-avatar/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/user-avatar/component.jsx
@ -24,6 +24,7 @@ const defaultProps = {
  listenOnly: false,
  voice: false,
  color: '#000',
+  className: null,
 };

 const UserAvatar = ({
--- a/bigbluebutton-html5/imports/ui/components/video-dock/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/video-dock/component.jsx
@ -2,12 +2,10 @@ import React, { Component } from 'react';
 import ScreenshareContainer from '/imports/ui/components/screenshare/container';
 import styles from './styles.scss';

-export default class VideoDock extends Component {
-  render() {
-    return (
-      <div className={styles.videoDock}>
-        <ScreenshareContainer />
-      </div>
-    );
-  }
-}
+const VideoDock = () => (
+  <div className={styles.videoDock}>
+    <ScreenshareContainer />
+  </div>
+);
+
+export default VideoDock;
--- a/bigbluebutton-html5/imports/ui/components/video-dock/container.jsx
+++ b/bigbluebutton-html5/imports/ui/components/video-dock/container.jsx
@ -1,22 +1,13 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import React from 'react';
 import { createContainer } from 'meteor/react-meteor-data';

 import VideoDock from './component';

-class VideoDockContainer extends Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    return (
-      <VideoDock>
-        {this.props.children}
-      </VideoDock>
-    );
-  }
-}
+const VideoDockContainer = props => (
+  <VideoDock>
+    {props.children}
+  </VideoDock>
+);

 export default createContainer(() => {
  const data = {};