haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update register/unregister listeners logic of some components in the old app

This commit is contained in:
Ilya Daynatovich 2017-02-15 15:39:16 -06:00 committed by Lyubo Marinov
parent b409c8cc2f
commit 631e853b40
4 changed files with 203 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

213
modules/UI/UI.js
View File

@ -304,9 +304,7 @@ UI.mucJoined = function () {
/***
* Handler for toggling filmstrip
*/
UI.handleToggleFilmStrip = () => {
UI.toggleFilmStrip();
};
UI.handleToggleFilmStrip = () => UI.toggleFilmStrip();
/**
* Sets tooltip defaults.
@ -324,69 +322,6 @@ function _setTooltipDefaults() {
};
}
/**
* Setup some UI event listeners.
*/
function registerListeners() {
UI.addListener(UIEvents.ETHERPAD_CLICKED, function () {
if (etherpadManager) {
etherpadManager.toggleEtherpad();
}
});
UI.addListener(UIEvents.SHARED_VIDEO_CLICKED, function () {
if (sharedVideoManager) {
sharedVideoManager.toggleSharedVideo();
}
});
UI.addListener(UIEvents.TOGGLE_FULLSCREEN, UI.toggleFullScreen);
UI.addListener(UIEvents.TOGGLE_CHAT, UI.toggleChat);
UI.addListener(UIEvents.TOGGLE_SETTINGS, function () {
UI.toggleSidePanel("settings_container");
});
UI.addListener(UIEvents.TOGGLE_CONTACT_LIST, UI.toggleContactList);
UI.addListener( UIEvents.TOGGLE_PROFILE, function() {
if(APP.tokenData.isGuest)
UI.toggleSidePanel("profile_container");
});
UI.addListener(UIEvents.TOGGLE_FILM_STRIP, UI.handleToggleFilmStrip);
UI.addListener(UIEvents.FOLLOW_ME_ENABLED, function (isEnabled) {
if (followMeHandler)
followMeHandler.enableFollowMe(isEnabled);
});
}
/**
* Setup some DOM event listeners.
*/
function bindEvents() {
function onResize() {
SideContainerToggler.resize();
VideoLayout.resizeVideoArea();
}
// Resize and reposition videos in full screen mode.
$(document).on(
'webkitfullscreenchange mozfullscreenchange fullscreenchange',
() => {
eventEmitter.emit( UIEvents.FULLSCREEN_TOGGLED,
UIUtil.isFullScreen());
onResize();
}
);
$(window).resize(onResize);
}
/**
* Returns the shared document manager object.
* @return {EtherpadManager} the shared document manager object
@ -410,8 +345,6 @@ UI.start = function () {
// Set the defaults for tooltips.
_setTooltipDefaults();
registerListeners();
ToolbarToggler.init();
SideContainerToggler.init(eventEmitter);
FilmStrip.init(eventEmitter);
@ -422,7 +355,6 @@ UI.start = function () {
}
VideoLayout.resizeVideoArea(true, true);
bindEvents();
sharedVideoManager = new SharedVideoManager(eventEmitter);
if (!interfaceConfig.filmStripOnly) {
let debouncedShowToolbar = debounce(() => {
@ -480,17 +412,57 @@ UI.start = function () {
if(APP.tokenData.callee) {
UI.showRingOverlay();
}
};
// Return true to indicate that the UI has been fully started and
// conference ready.
return true;
/**
* Setup some UI event listeners.
*/
UI.registerListeners
= () => UIListeners.forEach((value, key) => UI.addListener(key, value));
/**
* Unregister some UI event listeners.
*/
UI.unregisterListeners
= () => UIListeners.forEach((value, key) => UI.removeListener(key, value));
/**
* Setup some DOM event listeners.
*/
UI.bindEvents = () => {
function onResize() {
SideContainerToggler.resize();
VideoLayout.resizeVideoArea();
}
// Resize and reposition videos in full screen mode.
$(document).on(
'webkitfullscreenchange mozfullscreenchange fullscreenchange',
() => {
eventEmitter.emit(
UIEvents.FULLSCREEN_TOGGLED,
UIUtil.isFullScreen());
onResize();
});
$(window).resize(onResize);
};
/**
* Unbind some DOM event listeners.
*/
UI.unbindEvents = () => {
$(document).off(
'webkitfullscreenchange mozfullscreenchange fullscreenchange');
$(window).off('resize');
};
/**
* Show local stream on UI.
* @param {JitsiTrack} track stream to show
*/
UI.addLocalStream = function (track) {
UI.addLocalStream = track => {
switch (track.getType()) {
case 'audio':
VideoLayout.changeLocalAudio(track);
@ -509,31 +481,25 @@ UI.addLocalStream = function (track) {
* Show remote stream on UI.
* @param {JitsiTrack} track stream to show
*/
UI.addRemoteStream = function (track) {
VideoLayout.onRemoteStreamAdded(track);
};
UI.addRemoteStream = track => VideoLayout.onRemoteStreamAdded(track);
/**
* Removed remote stream from UI.
* @param {JitsiTrack} track stream to remove
*/
UI.removeRemoteStream = function (track) {
VideoLayout.onRemoteStreamRemoved(track);
};
UI.removeRemoteStream = track => VideoLayout.onRemoteStreamRemoved(track);
/**
* Update chat subject.
* @param {string} subject new chat subject
*/
UI.setSubject = function (subject) {
Chat.setSubject(subject);
};
UI.setSubject = subject => Chat.setSubject(subject);
/**
* Setup and show Etherpad.
* @param {string} name etherpad id
*/
UI.initEtherpad = function (name) {
UI.initEtherpad = name => {
if (etherpadManager || !config.etherpad_base || !name) {
return;
}
@ -547,9 +513,7 @@ UI.initEtherpad = function (name) {
* Returns the shared document manager object.
* @return {EtherpadManager} the shared document manager object
*/
UI.getSharedDocumentManager = function () {
return etherpadManager;
};
UI.getSharedDocumentManager = () => etherpadManager;
/**
* Show user on UI.
@ -607,15 +571,14 @@ UI.removeUser = function (id, displayName) {
* @param {string} id user id
* @param {string} newVideoType new videotype
*/
UI.onPeerVideoTypeChanged = (id, newVideoType) => {
VideoLayout.onVideoTypeChanged(id, newVideoType);
};
UI.onPeerVideoTypeChanged
= (id, newVideoType) => VideoLayout.onVideoTypeChanged(id, newVideoType);
/**
* Update local user role and show notification if user is moderator.
* @param {boolean} isModerator if local user is moderator or not
*/
UI.updateLocalRole = function (isModerator) {
UI.updateLocalRole = isModerator => {
VideoLayout.showModeratorIndicator();
Toolbar.showSipCallButton(isModerator);
@ -638,7 +601,7 @@ UI.updateLocalRole = function (isModerator) {
* and notifies user who is the moderator
* @param user to check for moderator
*/
UI.updateUserRole = function (user) {
UI.updateUserRole = user => {
VideoLayout.showModeratorIndicator();
// We don't need to show moderator notifications when the focus (moderator)
@ -663,13 +626,10 @@ UI.updateUserRole = function (user) {
}
};
/**
* Toggles smileys in the chat.
*/
UI.toggleSmileys = function () {
Chat.toggleSmileys();
};
UI.toggleSmileys = () => Chat.toggleSmileys();
/**
* Toggles film strip.
@ -684,32 +644,24 @@ UI.toggleFilmStrip = function () {
* Indicates if the film strip is currently visible or not.
* @returns {true} if the film strip is currently visible, otherwise
*/
UI.isFilmStripVisible = function () {
return FilmStrip.isFilmStripVisible();
};
UI.isFilmStripVisible = () => FilmStrip.isFilmStripVisible();
/**
* Toggles chat panel.
*/
UI.toggleChat = function () {
UI.toggleSidePanel("chat_container");
};
UI.toggleChat = () => UI.toggleSidePanel("chat_container");
/**
* Toggles contact list panel.
*/
UI.toggleContactList = function () {
UI.toggleSidePanel("contacts_container");
};
UI.toggleContactList = () => UI.toggleSidePanel("contacts_container");
/**
* Toggles the given side panel.
*
* @param {String} sidePanelId the identifier of the side panel to toggle
*/
UI.toggleSidePanel = function (sidePanelId) {
SideContainerToggler.toggle(sidePanelId);
};
UI.toggleSidePanel = sidePanelId => SideContainerToggler.toggle(sidePanelId);
/**
@ -1374,9 +1326,7 @@ UI.onSharedVideoStop = function (id, attributes) {
* @param {boolean} enabled indicates if the camera button should be enabled
* or disabled
*/
UI.setCameraButtonEnabled = function (enabled) {
Toolbar.setVideoIconEnabled(enabled);
};
UI.setCameraButtonEnabled = enabled => Toolbar.setVideoIconEnabled(enabled);
/**
* Enables / disables microphone toolbar button.
@ -1384,9 +1334,7 @@ UI.setCameraButtonEnabled = function (enabled) {
* @param {boolean} enabled indicates if the microphone button should be
* enabled or disabled
*/
UI.setMicrophoneButtonEnabled = function (enabled) {
Toolbar.setAudioIconEnabled(enabled);
};
UI.setMicrophoneButtonEnabled = enabled => Toolbar.setAudioIconEnabled(enabled);
UI.showRingOverlay = function () {
RingOverlay.show(APP.tokenData.callee, interfaceConfig.DISABLE_RINGING);
@ -1415,15 +1363,42 @@ UI.isOverlayVisible = function () {
*
* @returns {*|boolean} {true} if the ring overlay is visible, {false} otherwise
*/
UI.isRingOverlayVisible = function () {
return RingOverlay.isVisible();
};
UI.isRingOverlayVisible = () => RingOverlay.isVisible();
/**
* Handles user's features changes.
*/
UI.onUserFeaturesChanged = function (user) {
VideoLayout.onUserFeaturesChanged(user);
};
UI.onUserFeaturesChanged = user => VideoLayout.onUserFeaturesChanged(user);
const UIListeners = new Map([
[
UIEvents.ETHERPAD_CLICKED,
() => etherpadManager && etherpadManager.toggleEtherpad()
], [
UIEvents.SHARED_VIDEO_CLICKED,
() => sharedVideoManager && sharedVideoManager.toggleSharedVideo()
], [
UIEvents.TOGGLE_FULLSCREEN,
UI.toggleFullScreen
], [
UIEvents.TOGGLE_CHAT,
UI.toggleChat
], [
UIEvents.TOGGLE_SETTINGS,
() => UI.toggleSidePanel("settings_container")
], [
UIEvents.TOGGLE_CONTACT_LIST,
UI.toggleContactList
], [
UIEvents.TOGGLE_PROFILE,
() => APP.tokenData.isGuest && UI.toggleSidePanel("profile_container")
], [
UIEvents.TOGGLE_FILM_STRIP,
UI.handleToggleFilmStrip
], [
UIEvents.FOLLOW_ME_ENABLED,
enabled => (followMeHandler && followMeHandler.enableFollowMe(enabled))
]
]);
module.exports = UI;

81
modules/UI/toolbars/Toolbar.js
View File

@ -328,6 +328,39 @@ function getToolbarButtonPlace (btn) {
'extended';
}
/**
* Event handler for side toolbar container toggled event.
*
* @param {string} containerId - ID of the container.
* @param {boolean} isVisible - Flag showing whether container
* is visible.
* @returns {void}
*/
function onSideToolbarContainerToggled(containerId, isVisible) {
Toolbar._handleSideToolbarContainerToggled(containerId, isVisible);
}
/**
* Event handler for local raise hand changed event.
*
* @param {boolean} isRaisedHand - Flag showing whether hand is raised.
* @returns {void}
*/
function onLocalRaiseHandChanged(isRaisedHand) {
Toolbar._setToggledState("toolbar_button_raisehand", isRaisedHand);
}
/**
* Event handler for full screen toggled event.
*
* @param {boolean} isFullScreen - Flag showing whether app in full
* screen mode.
* @returns {void}
*/
function onFullScreenToggled(isFullScreen) {
Toolbar._handleFullScreenToggled(isFullScreen);
}
Toolbar = {
init (eventEmitter) {
emitter = eventEmitter;
@ -336,6 +369,9 @@ Toolbar = {
this.toolbarSelector = $("#mainToolbarContainer");
this.extendedToolbarSelector = $("#extendedToolbar");
// Unregister listeners in case of reinitialization.
this.unregisterListeners();
// Initialise the toolbar buttons.
// The main toolbar will only take into account
// it's own configuration from interface_config.
@ -345,21 +381,7 @@ Toolbar = {
this._setButtonHandlers();
APP.UI.addListener(UIEvents.SIDE_TOOLBAR_CONTAINER_TOGGLED,
(containerId, isVisible) => {
Toolbar._handleSideToolbarContainerToggled( containerId,
isVisible);
});
APP.UI.addListener(UIEvents.LOCAL_RAISE_HAND_CHANGED,
(isRaisedHand) => {
this._setToggledState("toolbar_button_raisehand", isRaisedHand);
});
APP.UI.addListener(UIEvents.FULLSCREEN_TOGGLED,
(isFullScreen) => {
Toolbar._handleFullScreenToggled(isFullScreen);
});
this.registerListeners();
APP.UI.addListener(UIEvents.SHOW_CUSTOM_TOOLBAR_BUTTON_POPUP,
(popupID, show, timeout) => {
@ -372,6 +394,35 @@ Toolbar = {
document.getElementById('toolbar_button_profile'));
}
},
/**
* Register listeners for UI events of toolbar component.
*
* @returns {void}
*/
registerListeners() {
APP.UI.addListener(UIEvents.SIDE_TOOLBAR_CONTAINER_TOGGLED,
onSideToolbarContainerToggled);
APP.UI.addListener(UIEvents.LOCAL_RAISE_HAND_CHANGED,
onLocalRaiseHandChanged);
APP.UI.addListener(UIEvents.FULLSCREEN_TOGGLED, onFullScreenToggled);
},
/**
* Unregisters handlers for UI events of Toolbar component.
*
* @returns {void}
*/
unregisterListeners() {
APP.UI.removeListener(UIEvents.SIDE_TOOLBAR_CONTAINER_TOGGLED,
onSideToolbarContainerToggled);
APP.UI.removeListener(UIEvents.LOCAL_RAISE_HAND_CHANGED,
onLocalRaiseHandChanged);
APP.UI.removeListener(UIEvents.FULLSCREEN_TOGGLED,
onFullScreenToggled);
},
/**
* Enables / disables the toolbar.
* @param {e} set to {true} to enable the toolbar or {false}

43
modules/UI/videolayout/VideoLayout.js
View File

@ -67,6 +67,17 @@ function onContactClicked (id) {
}
}
/**
* Handler for local flip X changed event.
* @param {Object} val
*/
function onLocalFlipXChanged (val) {
localFlipX = val;
if(largeVideo) {
largeVideo.onLocalFlipXChange(val);
}
}
/**
* Returns the corresponding resource id to the given peer container
* DOM element.
@ -91,11 +102,10 @@ let largeVideo;
var VideoLayout = {
init (emitter) {
eventEmitter = emitter;
eventEmitter.addListener(UIEvents.LOCAL_FLIPX_CHANGED, function (val) {
localFlipX = val;
if(largeVideo)
largeVideo.onLocalFlipXChange(val);
});
// Unregister listeners in case of reinitialization
this.unregisterListeners();
localVideoThumbnail = new LocalVideo(VideoLayout, emitter);
// sets default video type of local video
// FIXME container type is totally different thing from the video type
@ -104,8 +114,29 @@ var VideoLayout = {
// the local video thumb maybe one pixel
this.resizeThumbnails(false, true);
emitter.addListener(UIEvents.CONTACT_CLICKED, onContactClicked);
this.lastNCount = config.channelLastN;
this.registerListeners();
},
/**
* Registering listeners for UI events in Video layout component.
*
* @returns {void}
*/
registerListeners() {
eventEmitter.addListener(UIEvents.LOCAL_FLIPX_CHANGED,
onLocalFlipXChanged);
eventEmitter.addListener(UIEvents.CONTACT_CLICKED, onContactClicked);
},
/**
* Unregistering listeners for UI events in Video layout component.
*
* @returns {void}
*/
unregisterListeners() {
eventEmitter.removeListener(UIEvents.CONTACT_CLICKED, onContactClicked);
},
initLargeVideo () {

6
react/features/conference/components/Conference.web.js
View File

@ -47,6 +47,9 @@ class Conference extends Component {
componentDidMount() {
APP.UI.start();
APP.UI.registerListeners();
APP.UI.bindEvents();
// XXX Temporary solution until we add React translation.
APP.translation.translateElement($('#videoconference_page'));
@ -60,6 +63,9 @@ class Conference extends Component {
* @inheritdoc
*/
componentWillUnmount() {
APP.UI.unregisterListeners();
APP.UI.unbindEvents();
APP.conference.isJoined() && this.props.dispatch(disconnect());
}