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

modules/UI/UI.js

@@ -304,9 +304,7 @@ UI.mucJoined = function () {
 /***
  * Handler for toggling filmstrip
  */
-UI.handleToggleFilmStrip = () => {
+UI.handleToggleFilmStrip = () => UI.toggleFilmStrip();
-    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.
+ * Setup some UI event listeners.
-    return true;
+ */
+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) {
+UI.addRemoteStream = track => VideoLayout.onRemoteStreamAdded(track);
-    VideoLayout.onRemoteStreamAdded(track);
-};
 
 /**
  * Removed remote stream from UI.
  * @param {JitsiTrack} track stream to remove
  */
-UI.removeRemoteStream = function (track) {
+UI.removeRemoteStream = track => VideoLayout.onRemoteStreamRemoved(track);
-    VideoLayout.onRemoteStreamRemoved(track);
-};
 
 /**
  * Update chat subject.
  * @param {string} subject new chat subject
  */
-UI.setSubject = function (subject) {
+UI.setSubject = subject => Chat.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 () {
+UI.getSharedDocumentManager = () => etherpadManager;
-    return 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) => {
+UI.onPeerVideoTypeChanged
-    VideoLayout.onVideoTypeChanged(id, newVideoType);
+    = (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 () {
+UI.toggleSmileys = () => Chat.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 () {
+UI.isFilmStripVisible = () => FilmStrip.isFilmStripVisible();
-    return FilmStrip.isFilmStripVisible();
-};
 
 /**
  * Toggles chat panel.
  */
-UI.toggleChat = function () {
+UI.toggleChat = () => UI.toggleSidePanel("chat_container");
-    UI.toggleSidePanel("chat_container");
-};
 
 /**
  * Toggles contact list panel.
  */
-UI.toggleContactList = function () {
+UI.toggleContactList = () => UI.toggleSidePanel("contacts_container");
-    UI.toggleSidePanel("contacts_container");
-};
 
 /**
  * Toggles the given side panel.
  *
  * @param {String} sidePanelId the identifier of the side panel to toggle
  */
-UI.toggleSidePanel = function (sidePanelId) {
+UI.toggleSidePanel = sidePanelId => SideContainerToggler.toggle(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) {
+UI.setCameraButtonEnabled = enabled => Toolbar.setVideoIconEnabled(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) {
+UI.setMicrophoneButtonEnabled = enabled => Toolbar.setAudioIconEnabled(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 () {
+UI.isRingOverlayVisible = () => RingOverlay.isVisible();
-    return RingOverlay.isVisible();
-};
 
 /**
  * Handles user's features changes.
  */
-UI.onUserFeaturesChanged = function (user) {
+UI.onUserFeaturesChanged = user => VideoLayout.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;

modules/UI/toolbars/Toolbar.js

@@ -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,
+        this.registerListeners();
-            (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);
-            });
 
         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}

modules/UI/videolayout/VideoLayout.js

@@ -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;
+        // Unregister listeners in case of reinitialization
-                if(largeVideo)
+        this.unregisterListeners();
-                    largeVideo.onLocalFlipXChange(val);
+
-            });
         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 () {

react/features/conference/components/Conference.web.js

@@ -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());
     }