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
diff --git a/modules/UI/UI.js b/modules/UI/UI.js
index cd720409e..95dec167e 100644
--- 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);
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/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
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",