Merge pull request #1010 from jitsi/fullscreen-feature-fixes

Fullscreen feature fixes
2016-10-13 18:39:47 -05:00 · 2016-10-13 18:39:47 -05:00 · 33c026cc06
parent 762420fcc8 26ff54366b
commit 33c026cc06
6 changed files with 88 additions and 44 deletions
--- a/index.html
+++ b/index.html
@ -142,7 +142,6 @@
            <a class="button icon-dialpad" id="toolbar_button_dialpad" style="display: none"></a>
            <a class="button icon-settings" id="toolbar_button_settings"></a>
            <a class="button icon-raised-hand" id="toolbar_button_raisehand" shortcut="raiseHandPopover"></a>
-            <a class="button icon-full-screen" id="toolbar_button_fullScreen" shortcut="toggleFullscreenPopover"></a>
            <a class="button icon-toggle-filmstrip" id="toolbar_film_strip" data-container="body" shortcut="filmstripPopover"></a>
            <a class="button icon-feedback" id="feedbackButton"></a>
            <div id="sideToolbarContainer">
--- a/interface_config.js
+++ b/interface_config.js
@ -19,8 +19,8 @@ var interfaceConfig = { // eslint-disable-line no-unused-vars
    INVITATION_POWERED_BY: true,
    // the toolbar buttons line is intentionally left in one line, to be able
    // to easily override values or remove them using regex
-    MAIN_TOOLBAR_BUTTONS: ['microphone', 'camera', 'desktop', 'invite', 'hangup'], // jshint ignore:line
-    TOOLBAR_BUTTONS: ['profile', 'authentication', 'microphone', 'camera', 'desktop', 'recording', 'security', 'raisehand', 'chat', 'etherpad', 'sharedvideo', 'fullscreen', 'sip', 'dialpad', 'settings', 'hangup', 'filmstrip', 'contacts'], // jshint ignore:line
+    MAIN_TOOLBAR_BUTTONS: ['microphone', 'camera', 'desktop', 'invite', 'fullscreen', 'hangup'], // jshint ignore:line
+    TOOLBAR_BUTTONS: ['profile', 'authentication', 'microphone', 'camera', 'desktop', 'recording', 'security', 'raisehand', 'chat', 'etherpad', 'sharedvideo', 'sip', 'dialpad', 'settings', 'hangup', 'filmstrip', 'contacts'], // jshint ignore:line
    SETTINGS_SECTIONS: ['language', 'devices', 'moderator'],
    // Determines how the video would fit the screen. 'both' would fit the whole
    // screen, 'height' would fit the original video height to the height of the
--- a/modules/UI/UI.js
+++ b/modules/UI/UI.js
@ -140,37 +140,11 @@ function setupToolbars() {
 /**
 * Toggles the application in and out of full screen mode
 * (a.k.a. presentation mode in Chrome).
- * @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;
-
-    if (isNotFullScreen) {
-        if (document.documentElement.requestFullscreen) {
-            document.documentElement.requestFullscreen();
-        } else if (document.documentElement.msRequestFullscreen) {
-            document.documentElement.msRequestFullscreen();
-        } else if (document.documentElement.mozRequestFullScreen) {
-            document.documentElement.mozRequestFullScreen();
-        } else if (document.documentElement.webkitRequestFullscreen) {
-            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();
-        }
-    }
+    (UIUtil.isFullScreen())
+        ? UIUtil.exitFullScreen()
+        : UIUtil.enterFullScreen();
 };

 /**
@ -380,7 +354,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 +389,12 @@ function bindEvents() {
    // Resize and reposition videos in full screen mode.
    $(document).on(
        'webkitfullscreenchange mozfullscreenchange fullscreenchange',
-        onResize
+        () => {
+            eventEmitter.emit(  UIEvents.FULLSCREEN_TOGGLED,
+                                UIUtil.isFullScreen());
+
+            onResize();
+        }
    );

    $(window).resize(onResize);
--- a/modules/UI/toolbars/Toolbar.js
+++ b/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.
     */
--- a/modules/UI/util/UIUtil.js
+++ b/modules/UI/util/UIUtil.js
@ -240,13 +240,53 @@ const TOOLTIP_POSITIONS = {
         window.location.href = url;
    },

-     isFullScreen () {
-         return document.fullScreen
-             || document.mozFullScreen
-             || document.webkitIsFullScreen;
-     },
+    /**
+     * Indicates if we're currently in full screen mode.
+     *
+     * @return {boolean} {true} to indicate that we're currently in full screen
+     * mode, {false} otherwise
+     */
+    isFullScreen() {
+        return document.fullscreenElement
+            || document.mozFullScreenElement
+            || document.webkitFullscreenElement
+            || document.msFullscreenElement;
+    },

-     /**
+    /**
+     * Exits full screen mode.
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API
+     */
+    exitFullScreen() {
+        if (document.exitFullscreen) {
+            document.exitFullscreen();
+        } else if (document.msExitFullscreen) {
+            document.msExitFullscreen();
+        } else if (document.mozCancelFullScreen) {
+            document.mozCancelFullScreen();
+        } else if (document.webkitExitFullscreen) {
+            document.webkitExitFullscreen();
+        }
+    },
+
+    /**
+     * Enter full screen mode.
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API
+     */
+    enterFullScreen() {
+        if (document.documentElement.requestFullscreen) {
+            document.documentElement.requestFullscreen();
+        } else if (document.documentElement.msRequestFullscreen) {
+            document.documentElement.msRequestFullscreen();
+        } else if (document.documentElement.mozRequestFullScreen) {
+            document.documentElement.mozRequestFullScreen();
+        } else if (document.documentElement.webkitRequestFullscreen) {
+            document.documentElement
+                .webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
+        }
+    },
+
+    /**
      * Create html attributes string out of object properties.
      * @param {Object} attrs object with properties
      * @returns {String} string of html element attributes
--- a/service/UI/UIEvents.js
+++ b/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",