diff --git a/Makefile b/Makefile index c53f325e9..d2119bf07 100644 --- a/Makefile +++ b/Makefile @@ -14,7 +14,7 @@ OUTPUT_DIR = . LIBJITSIMEET_DIR = node_modules/lib-jitsi-meet/ IFRAME_API_DIR = ./modules/API/external -all: update-deps compile compile-iframe-api uglify uglify-iframe-api deploy clean +all: compile compile-iframe-api uglify uglify-iframe-api deploy clean update-deps: $(NPM) update diff --git a/css/_toolbars.scss b/css/_toolbars.scss index ea498ceda..ba0f229c6 100644 --- a/css/_toolbars.scss +++ b/css/_toolbars.scss @@ -1,7 +1,7 @@ .toolbar { background-color: rgba(0,0,0,0.5); position: relative; - z-index: 900; + z-index: $toolbarZ; height: 100%; pointer-events: auto; } @@ -13,7 +13,7 @@ top:0; left:0; right:0; - z-index:10; + z-index: $toolbarZ; pointer-events: none; min-height: 100px; transform: translateY(-100%); @@ -76,6 +76,7 @@ #toolbar_button_hangup { color: #BF2117; + font-size: $hangupFontSize !important; } #toolbar_button_etherpad { diff --git a/css/_variables.scss b/css/_variables.scss index f3048dd7c..3fe42a996 100644 --- a/css/_variables.scss +++ b/css/_variables.scss @@ -3,6 +3,7 @@ */ $baseFontFamily: 'open_sanslight', 'Helvetica Neue', Helvetica, Arial, sans-serif; $toolbarFontSize: 1.9em; +$hangupFontSize: 2em; /** * Size variables. @@ -16,7 +17,7 @@ $defaultColor: #F1F1F1; $defaultSemiDarkColor: #ACACAC; $defaultDarkColor: #4F4F4F; $defaultBackground: #474747; -$toolbarSelectBackground: rgba(0, 0, 0, 0.6); +$toolbarSelectBackground: rgba(0, 0, 0, .6); $inputBackground: rgba(132, 132, 132, .5); $inputSemiBackground: rgba(132, 132, 132, .8); $inputLightBackground: #EBEBEB; @@ -28,4 +29,8 @@ $buttonBackground: #44A5FF; */ $borderRadius: 4px; - +/** + * Z-indexes. TODO: Replace this by a function. + */ +$toolbarZ: 900; +$overlayZ: 800; diff --git a/css/main.scss b/css/main.scss index b53b637af..76b68d929 100644 --- a/css/main.scss +++ b/css/main.scss @@ -21,7 +21,7 @@ @import 'toastr'; @import 'base'; -@import 'overlay'; +@import 'overlay/overlay'; @import 'videolayout_default'; @import 'jquery-impromptu'; @import 'modaldialog'; @@ -33,6 +33,7 @@ @import 'jitsi_popover'; @import 'contact_list'; @import 'chat'; +@import 'ringing/ringing'; @import 'welcome_page'; @import 'toolbars'; @import 'side_toolbar_container'; diff --git a/css/_overlay.scss b/css/overlay/_overlay.scss similarity index 68% rename from css/_overlay.scss rename to css/overlay/_overlay.scss index 70352c27b..f440b5ab2 100644 --- a/css/_overlay.scss +++ b/css/overlay/_overlay.scss @@ -1,11 +1,10 @@ - .overlay { position: fixed; left: 0; top: 0; width: 100%; height: 100%; - z-index: 1013; + z-index: $overlayZ; background: #21B9FC; /* Old browsers */ opacity: 0.75; display: block; @@ -19,7 +18,7 @@ width: 100%; height: 100%; position: fixed; - z-index: 1013; + z-index: $overlayZ; } .overlay_content { @@ -36,23 +35,6 @@ margin-left: -200px; } -.overlay_avatar { - width: 200px; - height: 200px; - position: relative; - border-radius: 100px; - z-index: 1013; - float: left; - margin-left: 100px; -} - -.overlay_text { - position: relative; - width: 400px; - z-index: 1013; - margin-top: 50px; - float: left; -} .overlay_text_small { font-size: 18px; diff --git a/index.html b/index.html index 7159ce770..73e142925 100644 --- a/index.html +++ b/index.html @@ -120,7 +120,6 @@ - @@ -138,6 +137,7 @@ +
diff --git a/interface_config.js b/interface_config.js index 48d29b7d3..95164e3a5 100644 --- a/interface_config.js +++ b/interface_config.js @@ -2,6 +2,9 @@ var interfaceConfig = { CANVAS_EXTRA: 104, CANVAS_RADIUS: 0, SHADOW_COLOR: '#ffffff', + // TO FIX: this needs to be handled from SASS variables. There are some + // methods allowing to use variables both in css and js. + DEFAULT_BACKGROUND: '#474747', INITIAL_TOOLBAR_TIMEOUT: 20000, TOOLBAR_TIMEOUT: 4000, DEFAULT_REMOTE_DISPLAY_NAME: "Fellow Jitster", @@ -16,8 +19,8 @@ var interfaceConfig = { 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', 'fullscreen', 'hangup'], // jshint ignore:line - TOOLBAR_BUTTONS: ['authentication', 'microphone', 'camera', 'desktop', 'recording', 'security', 'invite', 'chat', 'etherpad', 'sharedvideo', 'fullscreen', 'sip', 'dialpad', 'settings', 'hangup', 'filmstrip', 'contacts'], // jshint ignore:line + MAIN_TOOLBAR_BUTTONS: ['microphone', 'camera', 'desktop', 'invite', 'hangup'], // jshint ignore:line + TOOLBAR_BUTTONS: ['profile', 'authentication', 'microphone', 'camera', 'desktop', 'recording', 'security', 'invite', 'chat', 'etherpad', 'sharedvideo', 'fullscreen', 'sip', 'dialpad', 'settings', 'hangup', 'filmstrip', 'contacts'], // jshint ignore:line // 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 // screen, 'width' would fit the original video width to the width of the @@ -30,4 +33,4 @@ var interfaceConfig = { RANDOM_AVATAR_URL_PREFIX: false, RANDOM_AVATAR_URL_SUFFIX: false, FILM_STRIP_MAX_HEIGHT: 120 -}; +}; \ No newline at end of file diff --git a/lang/main.json b/lang/main.json index 5f0226112..f8d5d1c9b 100644 --- a/lang/main.json +++ b/lang/main.json @@ -11,7 +11,7 @@ "raisedHand": "Would like to speak", "defaultNickname": "ex. Jane Pink", "defaultLink": "e.g. __url__", - "calling": "Calling __name__ ...", + "callingName": "__name__", "userMedia": { "react-nativeGrantPermissions": "Please grant permissions to use your camera and microphone by pressing Allow button", "chromeGrantPermissions": "Please grant permissions to use your camera and microphone by pressing Allow button", diff --git a/modules/UI/UI.js b/modules/UI/UI.js index b705a0334..030c7ae2c 100644 --- a/modules/UI/UI.js +++ b/modules/UI/UI.js @@ -1499,6 +1499,15 @@ UI.hideRingOverLay = function () { FilmStrip.toggleFilmStrip(true); }; +/** + * Indicates if the ring overlay is currently visible. + * + * @returns {*|boolean} {true} if the ring overlay is visible, {false} otherwise + */ +UI.isRingOverlayVisible = function () { + return RingOverlay.isVisible(); +}; + /** * Shows browser-specific overlay with guidance how to proceed with gUM prompt. * @param {string} browser - name of browser for which to show the guidance diff --git a/modules/UI/ring_overlay/RingOverlay.js b/modules/UI/ring_overlay/RingOverlay.js index 6bc9b1645..78b433de3 100644 --- a/modules/UI/ring_overlay/RingOverlay.js +++ b/modules/UI/ring_overlay/RingOverlay.js @@ -1,4 +1,5 @@ /* global $ */ +/* jshint -W101 */ /** * Shows ring overlay @@ -8,35 +9,39 @@ class RingOverlay { * @param callee instance of User class from TokenData.js */ constructor(callee) { + this._containerId = 'ringOverlay'; + this._audioContainerId = 'ringOverlayRinging'; + this.callee = callee; - this._buildHtml(); - this.audio = $("#ring_overlay_ringing"); - this.audio[0].play(); + this.render(); + this.audio = document.getElementById(this._audioContainerId); + this.audio.play(); this._setAudioTimeout(); } /** * Builds and appends the ring overlay to the html document */ - _buildHtml() { - $("body").append("
" + - "
" + - "" + - "Calling " + - this.callee.getName() + "...
" + - "
"); + _getHtmlStr(callee) { + return ` +
+
+

Calling...

+ +
+

${callee.getName()}

+
+
+
`; } /** - * Sets the interval that is going to play the ringing sound. + * */ - _setAudioTimeout() { - this.interval = setInterval( () => { - this.audio[0].play(); - }, 5000); + render() { + this.htmlStr = this._getHtmlStr(this.callee); + this._attach(); } /** @@ -44,9 +49,28 @@ class RingOverlay { * related to the ring overlay. */ destroy() { - if(this.interval) + if (this.interval) { clearInterval(this.interval); - $(".overlay_container").remove(); + } + + this._detach(); + } + + _attach() { + $("body").append(this.htmlStr); + } + + _detach() { + $(`#${this._containerId}`).remove(); + } + + /** + * Sets the interval that is going to play the ringing sound. + */ + _setAudioTimeout() { + this.interval = setInterval( () => { + this.audio.play(); + }, 5000); } } @@ -66,26 +90,30 @@ export default { if(overlay) { this.hide(); } + overlay = new RingOverlay(callee); }, + /** * Hides the ring overlay. Destroys all the elements related to the ring * overlay. */ hide() { - if(!overlay) + if(!overlay) { return false; + } overlay.destroy(); overlay = null; return true; }, + /** * Checks whether or not the ring overlay is currently displayed. * * @returns {boolean} true if the ring overlay is currently displayed or * false otherwise. */ - isDisplayed () { + isVisible () { return overlay !== null; } }; diff --git a/modules/UI/toolbars/Toolbar.js b/modules/UI/toolbars/Toolbar.js index 3186318df..5225d78d8 100644 --- a/modules/UI/toolbars/Toolbar.js +++ b/modules/UI/toolbars/Toolbar.js @@ -214,22 +214,25 @@ const defaultToolbarButtons = { }, 'desktop': { id: 'toolbar_button_desktopsharing', - className: "button icon-share-desktop", + className: 'button icon-share-desktop', shortcut: 'D', shortcutAttr: 'toggleDesktopSharingPopover', shortcutFunc: function() { JitsiMeetJS.analytics.sendEvent('shortcut.screen.toggled'); APP.conference.toggleScreenSharing(); }, - shortcutDescription: "keyboardShortcuts.toggleScreensharing", - content: "Share screen", - i18n: "[content]toolbar.sharescreen" + shortcutDescription: 'keyboardShortcuts.toggleScreensharing', + content: 'Share screen', + i18n: '[content]toolbar.sharescreen' }, 'security': { id: 'toolbar_button_security' }, 'invite': { - id: 'toolbar_button_link' + id: 'toolbar_button_link', + className: 'button icon-link', + content: 'Invite others', + i18n: '[content]toolbar.invite' }, 'chat': { id: 'toolbar_button_chat', @@ -239,16 +242,16 @@ const defaultToolbarButtons = { JitsiMeetJS.analytics.sendEvent('shortcut.chat.toggled'); APP.UI.toggleChat(); }, - shortcutDescription: "keyboardShortcuts.toggleChat", - sideContainerId: "chat_container" + shortcutDescription: 'keyboardShortcuts.toggleChat', + sideContainerId: 'chat_container' }, 'contacts': { id: 'toolbar_contact_list', - sideContainerId: "contacts_container" + sideContainerId: 'contacts_container' }, 'profile': { id: 'toolbar_button_profile', - sideContainerId: "profile_container" + sideContainerId: 'profile_container' }, 'etherpad': { id: 'toolbar_button_etherpad' @@ -695,6 +698,15 @@ const Toolbar = { }); }, + /** + * Adds the given button to the main (top) toolbar. + * + * @param {Object} the button to add. + * @param {boolean} isFirst indicates if this is the first button in the + * toolbar + * @param {boolean} isLast indicates if this is the last button in the + * toolbar + */ _addMainToolbarButton(button, isFirst, isLast) { let buttonElement = document.createElement("a"); if (button.className) diff --git a/modules/UI/toolbars/ToolbarToggler.js b/modules/UI/toolbars/ToolbarToggler.js index 765894b2d..f1230e6b0 100644 --- a/modules/UI/toolbars/ToolbarToggler.js +++ b/modules/UI/toolbars/ToolbarToggler.js @@ -35,7 +35,7 @@ function hideToolbar(force) { clearTimeout(toolbarTimeoutObject); toolbarTimeoutObject = null; - if (Toolbar.isHovered()) { + if (Toolbar.isHovered() || APP.UI.isRingOverlayVisible()) { toolbarTimeoutObject = setTimeout(hideToolbar, toolbarTimeout); } else if (!SideContainerToggler.isVisible() || force) { Toolbar.hide(); diff --git a/modules/UI/util/MessageHandler.js b/modules/UI/util/MessageHandler.js index 1c336600e..578e0725f 100644 --- a/modules/UI/util/MessageHandler.js +++ b/modules/UI/util/MessageHandler.js @@ -258,7 +258,8 @@ var messageHandler = { notify: function(displayName, displayNameKey, cls, messageKey, messageArguments, options) { - if(!notificationsEnabled) + // If we're in ringing state we skip all toaster notifications. + if(!notificationsEnabled || APP.UI.isRingOverlayVisible()) return; var displayNameSpan = '