diff --git a/modules/UI/UI.js b/modules/UI/UI.js index 56bd4c6c94..a59cfd6c6c 100644 --- a/modules/UI/UI.js +++ b/modules/UI/UI.js @@ -196,11 +196,11 @@ UI.setRaisedHandStatus = (participant, raisedHandStatus) => { /** * Sets the local "raised hand" status. */ -UI.setLocalRaisedHandStatus = (raisedHandStatus) => { - VideoLayout.setRaisedHandStatus( +UI.setLocalRaisedHandStatus + = raisedHandStatus => + VideoLayout.setRaisedHandStatus( APP.conference.getMyUserId(), raisedHandStatus); -}; /** * Initialize conference UI. @@ -306,9 +306,12 @@ UI.start = function () { sharedVideoManager = new SharedVideoManager(eventEmitter); if (!interfaceConfig.filmStripOnly) { - let debouncedShowToolbar = debounce(() => { - UI.showToolbar(); - }, 100, { leading: true, trailing: false }); + let debouncedShowToolbar + = debounce( + () => UI.showToolbar(), + 100, + { leading: true, trailing: false }); + $("#videoconference_page").mousemove(debouncedShowToolbar); setupToolbars(); @@ -713,9 +716,7 @@ UI.removeListener = function (type, listener) { * @param type the type of the event we're emitting * @param options the parameters for the event */ -UI.emitEvent = function (type, options) { - eventEmitter.emit(type, options); -}; +UI.emitEvent = (type, options) => eventEmitter.emit(type, options); UI.clickOnVideo = function (videoNumber) { let videos = $("#remoteVideos .videocontainer:not(#mixedstream)"); @@ -913,9 +914,7 @@ UI.promptDisplayName = () => { * @param {string} id user id * @param {number} lvl audio level */ -UI.setAudioLevel = function (id, lvl) { - VideoLayout.setAudioLevel(id, lvl); -}; +UI.setAudioLevel = (id, lvl) => VideoLayout.setAudioLevel(id, lvl); /** * Update state of desktop sharing buttons. diff --git a/modules/UI/side_pannels/SidePanels.js b/modules/UI/side_pannels/SidePanels.js index e0808fcd2e..222b33d633 100644 --- a/modules/UI/side_pannels/SidePanels.js +++ b/modules/UI/side_pannels/SidePanels.js @@ -6,19 +6,26 @@ import UIUtil from '../util/UIUtil'; const SidePanels = { init (eventEmitter) { - //Initialize chat - if (UIUtil.isButtonEnabled('chat')) + // Initialize chat + if (UIUtil.isButtonEnabled('chat')) { Chat.init(eventEmitter); - //Initialize settings - if (UIUtil.isButtonEnabled('settings')) + } + + // Initialize settings + if (UIUtil.isButtonEnabled('settings')) { SettingsMenu.init(eventEmitter); - //Initialize profile - if (UIUtil.isButtonEnabled('profile')) + } + + // Initialize profile + if (UIUtil.isButtonEnabled('profile')) { Profile.init(eventEmitter); - //Initialize contact list view - if (UIUtil.isButtonEnabled('contacts')) + } + + // Initialize contact list view + if (UIUtil.isButtonEnabled('contacts')) { ContactListView.init(); + } } }; -export default SidePanels; \ No newline at end of file +export default SidePanels; diff --git a/modules/UI/side_pannels/chat/Chat.js b/modules/UI/side_pannels/chat/Chat.js index 6b4545e3e4..8437838f04 100644 --- a/modules/UI/side_pannels/chat/Chat.js +++ b/modules/UI/side_pannels/chat/Chat.js @@ -49,30 +49,41 @@ var CHAT_CONTAINER_ID = "chat_container"; * Updates visual notification, indicating that a message has arrived. */ function updateVisualNotification() { - var unreadMsgElement = document.getElementById('unreadMessages'); + // XXX The rewrite of the toolbar in React delayed the availability of the + // element unreadMessages. In order to work around the delay, I introduced + // and utilized unreadMsgSelector in addition to unreadMsgElement. + const unreadMsgSelector = $('#unreadMessages'); + const unreadMsgElement + = unreadMsgSelector.length > 0 ? unreadMsgSelector[0] : undefined; if (unreadMessages) { unreadMsgElement.innerHTML = unreadMessages.toString(); ToolbarToggler.dockToolbar(true); - var chatButtonElement + const chatButtonElement = document.getElementById('toolbar_button_chat'); - var leftIndent = (UIUtil.getTextWidth(chatButtonElement) - - UIUtil.getTextWidth(unreadMsgElement)) / 2; - var topIndent = (UIUtil.getTextHeight(chatButtonElement) - - UIUtil.getTextHeight(unreadMsgElement)) / 2 - 5; + const leftIndent + = (UIUtil.getTextWidth(chatButtonElement) + - UIUtil.getTextWidth(unreadMsgElement)) + / 2; + const topIndent + = (UIUtil.getTextHeight(chatButtonElement) + - UIUtil.getTextHeight(unreadMsgElement)) + / 2 + - 5; unreadMsgElement.setAttribute( - 'style', - 'top:' + topIndent + - '; left:' + leftIndent + ';'); + 'style', + 'top:' + topIndent + '; left:' + leftIndent + ';'); } else { - unreadMsgElement.innerHTML = ''; + unreadMsgSelector.html(''); } - $(unreadMsgElement).parent()[unreadMessages > 0 ? 'show' : 'hide'](); + if (unreadMsgElement) { + unreadMsgSelector.parent()[unreadMessages > 0 ? 'show' : 'hide'](); + } } @@ -309,7 +320,7 @@ var Chat = { } let subjectId = 'subject'; - let html = linkify(UIUtil.escapeHtml(subject)); + const html = linkify(UIUtil.escapeHtml(subject)); $(`#${subjectId}`).html(html); UIUtil.setVisible(subjectId, subject && subject.length > 0); }, diff --git a/react/features/film-strip/components/FilmStrip.js b/react/features/film-strip/components/FilmStrip.js index c285c3f264..399f82c82f 100644 --- a/react/features/film-strip/components/FilmStrip.js +++ b/react/features/film-strip/components/FilmStrip.js @@ -26,6 +26,13 @@ class FilmStrip extends Component { * @type {Participant[]} */ _participants: React.PropTypes.array, + + /** + * The indicator which determines whether the film strip is visible. + * + * @private + * @type {boolean} + */ visible: React.PropTypes.bool.isRequired } @@ -101,7 +108,7 @@ class FilmStrip extends Component { * @param {Object} state - Redux state. * @private * @returns {{ - * _participants: Participant[], + * _participants: Participant[], * }} */ function _mapStateToProps(state) { diff --git a/react/features/toolbar/components/AbstractToolbarButton.js b/react/features/toolbar/components/AbstractToolbarButton.js index f6d17f5d7d..75c50bf13b 100644 --- a/react/features/toolbar/components/AbstractToolbarButton.js +++ b/react/features/toolbar/components/AbstractToolbarButton.js @@ -21,12 +21,24 @@ export default class AbstractToolbarButton extends Component { * The style of the Icon of this AbstractToolbarButton. */ iconStyle: React.PropTypes.object, + + /** + * On click handler. + */ onClick: React.PropTypes.func, + + /** + * Toolbar button styles. + */ style: React.PropTypes.oneOfType([ React.PropTypes.array, React.PropTypes.object ]), + + /** + * The color underlaying the button. + */ underlayColor: React.PropTypes.any } diff --git a/react/features/toolbar/components/Notice.js b/react/features/toolbar/components/Notice.js index 4587cf3174..06b7539732 100644 --- a/react/features/toolbar/components/Notice.js +++ b/react/features/toolbar/components/Notice.js @@ -24,6 +24,11 @@ export default class Notice extends Component { const { noticeMessage } = config; this.state = { + /** + * Message to be shown in notice component. + * + * @type {string} + */ noticeMessage }; }