From 4f91ac01fdb19507a945933cabdb78b024fb7230 Mon Sep 17 00:00:00 2001 From: isymchych Date: Mon, 14 Dec 2015 17:40:30 +0200 Subject: [PATCH] refactoring --- modules/UI/UI.js | 24 ++++---- .../side_pannels/contactlist/ContactList.js | 55 ++++++++----------- .../UI/side_pannels/settings/SettingsMenu.js | 5 +- modules/UI/videolayout/ConnectionIndicator.js | 3 +- modules/UI/videolayout/VideoLayout.js | 45 +++++---------- service/UI/UIEvents.js | 1 + 6 files changed, 57 insertions(+), 76 deletions(-) diff --git a/modules/UI/UI.js b/modules/UI/UI.js index f2936a1ad..bbb164bf3 100644 --- a/modules/UI/UI.js +++ b/modules/UI/UI.js @@ -14,11 +14,11 @@ import UIUtil from "./util/UIUtil"; import UIEvents from "../../service/UI/UIEvents"; import VideoLayout from "./videolayout/VideoLayout"; +import SettingsMenu from "./side_pannels/settings/SettingsMenu"; var Prezi = require("./prezi/Prezi"); var Etherpad = require("./etherpad/Etherpad"); var EventEmitter = require("events"); -var SettingsMenu = require("./side_pannels/settings/SettingsMenu"); var Settings = require("./../settings/Settings"); UI.messageHandler = require("./util/MessageHandler"); var messageHandler = UI.messageHandler; @@ -255,6 +255,7 @@ UI.start = function () { registerListeners(); VideoLayout.init(eventEmitter); + ContactList.init(eventEmitter); bindEvents(); setupPrezi(); @@ -355,6 +356,8 @@ function initEtherpad(name) { } UI.addUser = function (id, displayName) { + ContactList.addContact(id); + messageHandler.notify( displayName,'notify.somebody', 'connected', 'notify.connected' ); @@ -367,22 +370,21 @@ UI.addUser = function (id, displayName) { UI.setUserAvatar(id, displayName); // Add Peer's container - VideoLayout.ensurePeerContainerExists(id); + VideoLayout.addParticipantContainer(id); }; UI.removeUser = function (id, displayName) { - console.log('left.muc', id); - messageHandler.notify(displayName,'notify.somebody', - 'disconnected', - 'notify.disconnected'); - if (!config.startAudioMuted || - config.startAudioMuted > APP.conference.membersCount) { + ContactList.removeContact(id); + + messageHandler.notify( + displayName,'notify.somebody', 'disconnected', 'notify.disconnected' + ); + + if (!config.startAudioMuted || config.startAudioMuted > APP.conference.membersCount) { UIUtil.playSoundNotification('userLeft'); } - ContactList.removeContact(id); - - VideoLayout.participantLeft(id); + VideoLayout.removeParticipantContainer(id); }; function onMucPresenceStatus(jid, info) { diff --git a/modules/UI/side_pannels/contactlist/ContactList.js b/modules/UI/side_pannels/contactlist/ContactList.js index 39a05eaf3..8a2ba041e 100644 --- a/modules/UI/side_pannels/contactlist/ContactList.js +++ b/modules/UI/side_pannels/contactlist/ContactList.js @@ -1,8 +1,9 @@ /* global $, APP */ import Avatar from '../../avatar/Avatar'; +import UIEvents from '../../../../service/UI/UIEvents'; -var numberOfContacts = 0; -var notificationInterval; +let numberOfContacts = 0; +let notificationInterval; /** * Updates the number of participants in the contact list button and sets @@ -30,7 +31,7 @@ function updateNumberOfParticipants(delta) { * @return {object} the newly created avatar element */ function createAvatar(jid) { - var avatar = document.createElement('img'); + let avatar = document.createElement('img'); avatar.className = "icon-avatar avatar"; avatar.src = Avatar.getContactListUrl(jid); @@ -43,7 +44,7 @@ function createAvatar(jid) { * @param displayName the display name to set */ function createDisplayNameParagraph(key, displayName) { - var p = document.createElement('p'); + let p = document.createElement('p'); if (displayName) { p.innerText = displayName; } else if(key) { @@ -76,39 +77,32 @@ function contactElExists (id) { * Contact list. */ var ContactList = { + init (emitter) { + this.emitter = emitter; + }, /** * Indicates if the chat is currently visible. * * @return true if the chat is currently visible, false - * otherwise */ - isVisible: function () { + isVisible () { return $('#contactlist').is(":visible"); }, - /** - * Adds a contact for the given id if such doesn't yet exist. - * - */ - ensureAddContact: function (id) { - if (!contactElExists(id)) { - ContactList.addContact(id); - } - }, - /** * Adds a contact for the given id. * */ - addContact: function (id) { - var contactlist = $('#contacts'); + addContact (id) { + let contactlist = $('#contacts'); - var newContact = document.createElement('li'); + let newContact = document.createElement('li'); newContact.id = id; newContact.className = "clickable"; - newContact.onclick = function (event) { + newContact.onclick = (event) => { if (event.currentTarget.className === "clickable") { - $(ContactList).trigger('contactclicked', [id]); + this.emitter.emit(UIEvents.CONTACT_CLICKED, id); } }; @@ -127,7 +121,7 @@ var ContactList = { * Removes a contact for the given id. * */ - removeContact: function (id) { + removeContact (id) { let contact = getContactEl(id); if (contact.length > 0) { @@ -136,15 +130,14 @@ var ContactList = { } }, - setVisualNotification: function (show, stopGlowingIn) { - var glower = $('#contactListButton'); + setVisualNotification (show, stopGlowingIn) { + let glower = $('#contactListButton'); if (show && !notificationInterval) { notificationInterval = window.setInterval(function () { glower.toggleClass('active glowing'); }, 800); - } - else if (!show && notificationInterval) { + } else if (!show && notificationInterval) { stopGlowing(glower); } if (stopGlowingIn) { @@ -154,28 +147,28 @@ var ContactList = { } }, - setClickable: function (id, isClickable) { + setClickable (id, isClickable) { getContactEl(id).toggleClass('clickable', isClickable); }, - onDisplayNameChange: function (id, displayName) { + onDisplayNameChange (id, displayName) { if (id === 'localVideoContainer') { id = APP.conference.localId; } - var contactName = $(`#contacts #${id}>p`); + let contactName = $(`#contacts #${id}>p`); if (displayName) { contactName.html(displayName); } }, - changeUserAvatar: function (id, contactListUrl) { + changeUserAvatar (id, contactListUrl) { // set the avatar in the contact list - var contact = $(`#${id}>img`); + let contact = $(`#${id}>img`); if (contact.length > 0) { contact.attr('src', contactListUrl); } } }; -module.exports = ContactList; +export default ContactList; diff --git a/modules/UI/side_pannels/settings/SettingsMenu.js b/modules/UI/side_pannels/settings/SettingsMenu.js index 543fae33d..881cb10c5 100644 --- a/modules/UI/side_pannels/settings/SettingsMenu.js +++ b/modules/UI/side_pannels/settings/SettingsMenu.js @@ -21,7 +21,7 @@ function generateLanguagesSelectBox() { } -var SettingsMenu = { +const SettingsMenu = { init: function (emitter) { this.emitter = emitter; @@ -97,5 +97,4 @@ var SettingsMenu = { } }; - -module.exports = SettingsMenu; +export default SettingsMenu; diff --git a/modules/UI/videolayout/ConnectionIndicator.js b/modules/UI/videolayout/ConnectionIndicator.js index 80b5a2fd6..4aa517a80 100644 --- a/modules/UI/videolayout/ConnectionIndicator.js +++ b/modules/UI/videolayout/ConnectionIndicator.js @@ -365,7 +365,8 @@ ConnectionIndicator.prototype.updateResolution = function (resolution) { */ ConnectionIndicator.prototype.updatePopoverData = function () { this.popover.updateContent( - "
" + this.generateText() + "
"); + `
${this.generateText()}
` + ); APP.translation.translateElement($(".connection_info")); }; diff --git a/modules/UI/videolayout/VideoLayout.js b/modules/UI/videolayout/VideoLayout.js index 05522cae3..b851056c9 100644 --- a/modules/UI/videolayout/VideoLayout.js +++ b/modules/UI/videolayout/VideoLayout.js @@ -2,7 +2,6 @@ /* jshint -W101 */ import AudioLevels from "../audio_levels/AudioLevels"; -import ContactList from "../side_pannels/contactlist/ContactList"; import UIEvents from "../../../service/UI/UIEvents"; import UIUtil from "../util/UIUtil"; @@ -36,19 +35,15 @@ var focusedVideoResourceJid = null; /** * On contact list item clicked. */ -$(ContactList).bind('contactclicked', function(event, id) { - if (!id) { - return; - } - +function onContactClicked (id) { if (APP.conference.isLocalId(id)) { $("#localVideoContainer").click(); return; } - var remoteVideo = remoteVideos[id]; + let remoteVideo = remoteVideos[id]; if (remoteVideo && remoteVideo.selectVideoElement().length) { - var videoThumb = remoteVideo.selectVideoElement()[0]; + let videoThumb = remoteVideo.selectVideoElement()[0]; // It is not always the case that a videoThumb exists (if there is // no actual video). if (RTC.getVideoSrc(videoThumb)) { @@ -72,7 +67,7 @@ $(ContactList).bind('contactclicked', function(event, id) { eventEmitter.emit(UIEvents.PINNED_ENDPOINT, id); } } -}); +} /** * Returns the corresponding resource id to the given peer container @@ -106,6 +101,7 @@ var VideoLayout = { VideoLayout.resizeLargeVideoContainer(); + emitter.addListener(UIEvents.CONTACT_CLICKED, onContactClicked); }, isInLastN (resource) { @@ -242,7 +238,6 @@ var VideoLayout = { onRemoteStreamAdded (stream) { let id = stream.getParticipantId(); - VideoLayout.ensurePeerContainerExists(id); remoteVideos[id].addRemoteStreamElement(stream); }, @@ -340,13 +335,7 @@ var VideoLayout = { * @return Returns true if the peer container exists, * false - otherwise */ - ensurePeerContainerExists (id) { - ContactList.ensureAddContact(id); - - if (remoteVideos[id]) { - return; - } - + addParticipantContainer (id) { let remoteVideo = new RemoteVideo(id, VideoLayout, eventEmitter); remoteVideos[id] = remoteVideo; @@ -534,7 +523,6 @@ var VideoLayout = { if (resourceJid === APP.xmpp.myResource()) { localVideoThumbnail.showAudioIndicator(isMuted); } else { - VideoLayout.ensurePeerContainerExists(jid); remoteVideos[resourceJid].showAudioIndicator(isMuted); if (APP.xmpp.isModerator()) { remoteVideos[resourceJid].updateRemoteVideoMenu(isMuted); @@ -555,7 +543,6 @@ var VideoLayout = { } else { var resource = Strophe.getResourceFromJid(jid); - VideoLayout.ensurePeerContainerExists(jid); var remoteVideo = remoteVideos[resource]; remoteVideo.showVideoIndicator(value); @@ -575,7 +562,6 @@ var VideoLayout = { APP.conference.isLocalId(id)) { localVideoThumbnail.setDisplayName(displayName); } else { - VideoLayout.ensurePeerContainerExists(id); remoteVideos[id].setDisplayName(displayName, status); } }, @@ -801,23 +787,22 @@ var VideoLayout = { /** * Updates remote stats. - * @param jid the jid associated with the stats + * @param id the id associated with the stats * @param percent the connection quality percent * @param object the stats data */ - updateConnectionStats (jid, percent, object) { - var resourceJid = Strophe.getResourceFromJid(jid); - - if (remoteVideos[resourceJid]) - remoteVideos[resourceJid].updateStatsIndicator(percent, object); + updateConnectionStats (id, percent, object) { + if (remoteVideos[id]) { + remoteVideos[id].updateStatsIndicator(percent, object); + } }, /** * Hides the connection indicator - * @param jid + * @param id */ - hideConnectionIndicator (jid) { - remoteVideos[Strophe.getResourceFromJid(jid)].hideConnectionIndicator(); + hideConnectionIndicator (id) { + remoteVideos[id].hideConnectionIndicator(); }, /** @@ -830,7 +815,7 @@ var VideoLayout = { localVideoThumbnail.hideIndicator(); }, - participantLeft (id) { + removeParticipantContainer (id) { // Unlock large video if (focusedVideoResourceJid === id) { console.info("Focused video owner has left the conference"); diff --git a/service/UI/UIEvents.js b/service/UI/UIEvents.js index 33b9fed58..81c56af3c 100644 --- a/service/UI/UIEvents.js +++ b/service/UI/UIEvents.js @@ -32,6 +32,7 @@ export default { TOGGLE_SETTINGS: "UI.toggle_settings", TOGGLE_CONTACT_LIST: "UI.toggle_contact_list", TOGGLE_FILM_STRIP: "UI.toggle_film_strip", + CONTACT_CLICKED: "UI.contact_clicked", HANGUP: "UI.hangup", LOGOUT: "UI.logout", RECORDING_TOGGLE: "UI.recording_toggle",