Update register/unregister listeners logic of some components in the …

…old app
jitsi · Feb 23, 2017 · 7283f6d · 7283f6d
1 parent 98f78a9
commit 7283f6d
Show file tree

Hide file tree

Showing 4 changed files with 199 additions and 90 deletions.
diff --git a/modules/UI/UI.js b/modules/UI/UI.js
@@ -324,69 +324,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 +347,6 @@ UI.start = function () {
     // Set the defaults for tooltips.
     _setTooltipDefaults();
 
-    registerListeners();
-
     ToolbarToggler.init();
     SideContainerToggler.init(eventEmitter);
     FilmStrip.init(eventEmitter);
@@ -422,7 +357,6 @@ UI.start = function () {
     }
     VideoLayout.resizeVideoArea(true, true);
 
-    bindEvents();
     sharedVideoManager = new SharedVideoManager(eventEmitter);
     if (!interfaceConfig.filmStripOnly) {
         let debouncedShowToolbar = debounce(() => {
@@ -479,10 +413,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');
 };
 
 /**
@@ -1425,4 +1406,44 @@ UI.onUserFeaturesChanged = function (user) {
     VideoLayout.onUserFeaturesChanged(user);
 };
 
+const UIListeners = new Map([
+    [
+        UIEvents.ETHERPAD_CLICKED, () => {
+            if (etherpadManager) {
+                etherpadManager.toggleEtherpad();
+            }
+        }
+    ], [
+        UIEvents.SHARED_VIDEO_CLICKED, () => {
+            if (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, () => {
+            if(APP.tokenData.isGuest) {
+                UI.toggleSidePanel("profile_container");
+            }
+        }
+    ], [
+        UIEvents.TOGGLE_FILM_STRIP, UI.handleToggleFilmStrip
+    ], [
+        UIEvents.FOLLOW_ME_ENABLED, (isEnabled) => {
+            if (followMeHandler) {
+                followMeHandler.enableFollowMe(isEnabled);
+            }
+        }
+    ]
+]);
+
 module.exports = UI;
diff --git a/modules/UI/toolbars/Toolbar.js b/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,
-            (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}

diff --git a/modules/UI/videolayout/VideoLayout.js b/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;
-                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 () {

diff --git a/react/features/conference/components/Conference.web.js b/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();
+
         if (APP.conference.isJoined()) {
             this.props.dispatch(disconnect());
         }