Fixes full screen event handling

modules/UI/UI.js

@@ -143,13 +143,22 @@ function setupToolbars() {
  * @see https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API
  */
 UI.toggleFullScreen = function() {
-                            // alternative standard method
-    let isNotFullScreen = !document.fullscreenElement &&
-            !document.mozFullScreenElement && // current working methods
-        !document.webkitFullscreenElement &&
-        !document.msFullscreenElement;
+    let isFullScreen = document.fullscreenElement
+            || document.mozFullScreenElement // current working methods
+            || document.webkitFullscreenElement
+            || document.msFullscreenElement;
 
-    if (isNotFullScreen) {
+    if (isFullScreen) {
+        if (document.exitFullscreen) {
+            document.exitFullscreen();
+        } else if (document.msExitFullscreen) {
+            document.msExitFullscreen();
+        } else if (document.mozCancelFullScreen) {
+            document.mozCancelFullScreen();
+        } else if (document.webkitExitFullscreen) {
+            document.webkitExitFullscreen();
+        }
+    } else {
         if (document.documentElement.requestFullscreen) {
             document.documentElement.requestFullscreen();
         } else if (document.documentElement.msRequestFullscreen) {
@@ -160,16 +169,6 @@ UI.toggleFullScreen = function() {
             document.documentElement
                 .webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
         }
-    } else {
-        if (document.exitFullscreen) {
-            document.exitFullscreen();
-        } else if (document.msExitFullscreen) {
-            document.msExitFullscreen();
-        } else if (document.mozCancelFullScreen) {
-            document.mozCancelFullScreen();
-        } else if (document.webkitExitFullscreen) {
-            document.webkitExitFullscreen();
-        }
     }
 };
 
@@ -380,7 +379,7 @@ function registerListeners() {
         }
     });
 
-    UI.addListener(UIEvents.FULLSCREEN_TOGGLE, UI.toggleFullScreen);
+    UI.addListener(UIEvents.TOGGLE_FULLSCREEN, UI.toggleFullScreen);
 
     UI.addListener(UIEvents.TOGGLE_CHAT, UI.toggleChat);
 
@@ -415,7 +414,16 @@ function bindEvents() {
     // Resize and reposition videos in full screen mode.
     $(document).on(
         'webkitfullscreenchange mozfullscreenchange fullscreenchange',
-        onResize
+        () => {
+            let isFullScreen = document.fullscreenElement
+                || document.mozFullScreenElement // current working methods
+                || document.webkitFullscreenElement
+                || document.msFullscreenElement;
+
+            eventEmitter.emit(UIEvents.FULLSCREEN_TOGGLED, isFullScreen);
+
+            onResize();
+        }
     );
 
     $(window).resize(onResize);

modules/UI/toolbars/Toolbar.js

@@ -73,9 +73,8 @@ const buttonHandlers = {
     },
     "toolbar_button_fullScreen": function() {
         JitsiMeetJS.analytics.sendEvent('toolbar.fullscreen.enabled');
-        UIUtil.buttonClick("toolbar_button_fullScreen",
-            "icon-full-screen icon-exit-full-screen");
-        emitter.emit(UIEvents.FULLSCREEN_TOGGLE);
+
+        emitter.emit(UIEvents.TOGGLE_FULLSCREEN);
     },
     "toolbar_button_sip": function () {
         JitsiMeetJS.analytics.sendEvent('toolbar.sip.clicked');
@@ -359,6 +358,11 @@ Toolbar = {
                 this._setToggledState("toolbar_button_raisehand", isRaisedHand);
             });
 
+        APP.UI.addListener(UIEvents.FULLSCREEN_TOGGLED,
+            (isFullScreen) => {
+                Toolbar._handleFullScreenToggled(isFullScreen);
+            });
+
         if(!APP.tokenData.isGuest) {
             $("#toolbar_button_profile").addClass("unclickable");
             UIUtil.removeTooltip(
@@ -657,6 +661,8 @@ Toolbar = {
 
     /**
      * Handles the side toolbar toggle.
+     *
+     * @param {string} containerId the identifier of the container element
      */
     _handleSideToolbarContainerToggled(containerId) {
         Object.keys(defaultToolbarButtons).forEach(
@@ -675,6 +681,25 @@ Toolbar = {
         );
     },
 
+    /**
+     * Handles full screen toggled.
+     *
+     * @param {boolean} isFullScreen indicates if we're currently in full
+     * screen mode
+     */
+    _handleFullScreenToggled(isFullScreen) {
+        let element
+            = document.getElementById("toolbar_button_fullScreen");
+
+        element.className = isFullScreen
+            ? element.className
+                .replace("icon-full-screen", "icon-exit-full-screen")
+            : element.className
+                .replace("icon-exit-full-screen", "icon-full-screen");
+
+        Toolbar._setToggledState("toolbar_button_fullScreen", isFullScreen);
+    },
+
     /**
      * Initialise main toolbar buttons.
      */

service/UI/UIEvents.js

@@ -34,7 +34,8 @@ export default {
     UPDATE_SHARED_VIDEO: "UI.update_shared_video",
     USER_KICKED: "UI.user_kicked",
     REMOTE_AUDIO_MUTED: "UI.remote_audio_muted",
-    FULLSCREEN_TOGGLE: "UI.fullscreen_toggle",
+    TOGGLE_FULLSCREEN: "UI.toogle_fullscreen",
+    FULLSCREEN_TOGGLED: "UI.fullscreen_toggled",
     AUTH_CLICKED: "UI.auth_clicked",
     TOGGLE_CHAT: "UI.toggle_chat",
     TOGGLE_SETTINGS: "UI.toggle_settings",