From 7baa473e550c6938f7ef1a19fe9c13d195b9e0ef Mon Sep 17 00:00:00 2001 From: yanas Date: Thu, 13 Oct 2016 15:09:18 -0500 Subject: [PATCH 1/4] Fixes full screen event handling --- modules/UI/UI.js | 44 ++++++++++++++++++++-------------- modules/UI/toolbars/Toolbar.js | 31 +++++++++++++++++++++--- service/UI/UIEvents.js | 3 ++- 3 files changed, 56 insertions(+), 22 deletions(-) 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", From ee31d24f7c8f2bf33b439e6b4553ed05f77ed8f9 Mon Sep 17 00:00:00 2001 From: yanas Date: Thu, 13 Oct 2016 15:09:52 -0500 Subject: [PATCH 2/4] Puts fullscreen button in the top toolbar --- index.html | 1 - interface_config.js | 4 ++-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index b7c6bc1f8..46462e14b 100644 --- a/index.html +++ b/index.html @@ -142,7 +142,6 @@ -
diff --git a/interface_config.js b/interface_config.js index 02cfd6fe0..876e048a3 100644 --- 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 From 36fdb3127f8ad42d4384dc85ba900a765412acf7 Mon Sep 17 00:00:00 2001 From: yanas Date: Thu, 13 Oct 2016 15:17:15 -0500 Subject: [PATCH 3/4] Removes unrelated comment. --- modules/UI/UI.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/UI/UI.js b/modules/UI/UI.js index d8d263fa8..9e7389d03 100644 --- a/modules/UI/UI.js +++ b/modules/UI/UI.js @@ -416,7 +416,7 @@ function bindEvents() { 'webkitfullscreenchange mozfullscreenchange fullscreenchange', () => { let isFullScreen = document.fullscreenElement - || document.mozFullScreenElement // current working methods + || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement; From 26ff54366b0e909e11dae6d73ba46d16cb5fb8b3 Mon Sep 17 00:00:00 2001 From: yanas Date: Thu, 13 Oct 2016 17:28:24 -0500 Subject: [PATCH 4/4] Moves full screen functions in UIUtil --- modules/UI/UI.js | 39 ++++------------------------- modules/UI/util/UIUtil.js | 52 ++++++++++++++++++++++++++++++++++----- 2 files changed, 51 insertions(+), 40 deletions(-) diff --git a/modules/UI/UI.js b/modules/UI/UI.js index 9e7389d03..95dec167e 100644 --- a/modules/UI/UI.js +++ b/modules/UI/UI.js @@ -140,36 +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() { - let isFullScreen = document.fullscreenElement - || document.mozFullScreenElement // current working methods - || document.webkitFullscreenElement - || document.msFullscreenElement; - - 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) { - document.documentElement.msRequestFullscreen(); - } else if (document.documentElement.mozRequestFullScreen) { - document.documentElement.mozRequestFullScreen(); - } else if (document.documentElement.webkitRequestFullscreen) { - document.documentElement - .webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT); - } - } + (UIUtil.isFullScreen()) + ? UIUtil.exitFullScreen() + : UIUtil.enterFullScreen(); }; /** @@ -415,12 +390,8 @@ function bindEvents() { $(document).on( 'webkitfullscreenchange mozfullscreenchange fullscreenchange', () => { - let isFullScreen = document.fullscreenElement - || document.mozFullScreenElement - || document.webkitFullscreenElement - || document.msFullscreenElement; - - eventEmitter.emit(UIEvents.FULLSCREEN_TOGGLED, isFullScreen); + eventEmitter.emit( UIEvents.FULLSCREEN_TOGGLED, + UIUtil.isFullScreen()); onResize(); } diff --git a/modules/UI/util/UIUtil.js b/modules/UI/util/UIUtil.js index b7ff1fb0e..564483355 100644 --- 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