diff --git a/modules/UI/UI.js b/modules/UI/UI.js index cd720409e..d8d263fa8 100644 --- a/modules/UI/UI.js +++ b/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); diff --git a/modules/UI/toolbars/Toolbar.js b/modules/UI/toolbars/Toolbar.js index 40219c087..a36cc10d4 100644 --- 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. */ diff --git a/service/UI/UIEvents.js b/service/UI/UIEvents.js index efe3ce05c..b92f0b4d8 100644 --- 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",