apitech
/
jitsi-meet
mirror of https://github.com/jitsi/jitsi-meet
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

Browse Source
pull/1349/head
Ilya Daynatovich 8 years ago committed by Lyubo Marinov
parent b409c8cc2f
commit 631e853b40
4 changed files with 203 additions and 140 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 213
      modules/UI/UI.js
  2. 81
      modules/UI/toolbars/Toolbar.js
  3. 43
      modules/UI/videolayout/VideoLayout.js
  4. 6
      react/features/conference/components/Conference.web.js

213
modules/UI/UI.js
Unescape 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
Unescape 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
Unescape 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
Unescape 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());
}

Write Preview
Loading…
Cancel
Save