From 74b5638d993240f6957cd3056027cc2e146e93e7 Mon Sep 17 00:00:00 2001 From: Ilya Daynatovich Date: Fri, 31 Mar 2017 12:54:58 -0500 Subject: [PATCH] Add jsdocs, apply manual formatting https://github.com/jitsi/jitsi-meet/pull/1397 (React Toolbar) is huge at the time of this writing. In order to reduce it, I'm extracting changes not directly related to React-ifying the Toolbar such as added jsdocs and source code formatting. --- modules/UI/UI.js | 23 ++++++------ modules/UI/side_pannels/SidePanels.js | 25 ++++++++----- modules/UI/side_pannels/chat/Chat.js | 35 ++++++++++++------- .../film-strip/components/FilmStrip.js | 9 ++++- .../components/AbstractToolbarButton.js | 12 +++++++ react/features/toolbar/components/Notice.js | 5 +++ 6 files changed, 75 insertions(+), 34 deletions(-) diff --git a/modules/UI/UI.js b/modules/UI/UI.js index 56bd4c6c9..a59cfd6c6 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 e0808fcd2..222b33d63 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 6b4545e3e..8437838f0 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 c285c3f26..399f82c82 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 f6d17f5d7..75c50bf13 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 4587cf317..06b753973 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 }; }