haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'master' into kkrisstoff-task/dropdown-aui-changes

This commit is contained in:
Lyubomir Marinov 2016-10-20 12:10:50 -05:00
parent c9edc0ae15 0fa5aa48af
commit 55b741d11b
20 changed files with 240 additions and 187 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
conference.js
View File

@ -1086,7 +1086,6 @@ export default {
} }
); );
room.on(ConferenceEvents.USER_JOINED, (id, user) => { room.on(ConferenceEvents.USER_JOINED, (id, user) => {
if (user.isHidden()) if (user.isHidden())
return; return;

1
css/_base.scss
View File

@ -186,6 +186,7 @@ form {
} }
.link { .link {
cursor: pointer;
color: $linkFontColor; color: $linkFontColor;
@include transition(color .1s ease-out); @include transition(color .1s ease-out);

131
css/_jitsi_popover.scss
View File

@ -8,98 +8,87 @@
min-width: 100px; min-width: 100px;
padding: 1px; padding: 1px;
text-align: left; text-align: left;
color: #333333; color: $popoverFontColor;
background-color: #ffffff; background-color: $popoverBg;
background-clip: padding-box; background-clip: padding-box;
border: 1px solid #cccccc; border: 1px solid $popoverBg;
border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 3px;
border-radius: 6px;
/*-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);*/ /*-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);*/
/*box-shadow: 0 5px 10px rgba(0, 0, 0, 0.4);*/ /*box-shadow: 0 5px 10px rgba(0, 0, 0, 0.4);*/
white-space: normal; white-space: normal;
margin-top: -10px; margin-top: -10px;
margin-bottom: 35px; margin-bottom: 35px;
}
.jitsipopover.black &__title {
{ text-align: left;
background-color: rgba(0,0,0,0.8); margin: 0;
color: #ffffff; padding: 0;
} }
.jitsipopover-content { &__content {
padding: 9px 14px; padding: em(5) em(10);
font-size: 10pt; font-size: em(14);
white-space:pre-wrap; white-space:pre-wrap;
text-align: center; text-align: center;
} }
.jitsipopover > .arrow, &__icon {
.jitsipopover > .arrow:after { margin-right: 2px;
}
&__green
{
@extend .jitsipopover__icon;
color: #4abd04;
}
&__orange
{
@extend .jitsipopover__icon;
color: #ffa800;
}
&__menu-padding {
height: 35px;
width: 100px;
position: absolute;
bottom: -35px;
}
&__showmore {
display: block;
text-align: center;
width: 90px;
margin: 10px auto;
}
&__clear {
position: absolute; position: absolute;
display: block; display: block;
width: 0; width: 0;
height: 0; height: 0;
border-color: transparent; border-color: transparent;
border-style: solid; border-style: solid;
} }
.jitsipopover > .arrow { > .arrow {
border-width: 11px; border-width: 5px 2.5px 0 2.5px;
left: 50%; left: 50%;
margin-left: -11px; margin-left: -5px;
@extend .jitsipopover__clear;
border-bottom-width: 0; border-bottom-width: 0;
border-top-color: #999999; border-top-color: $popoverBg;
border-top-color: rgba(0, 0, 0, 0.25); bottom: -5px;
bottom: -11px;
}
.jitsipopover > .arrow:after { &:after {
border-width: 10px; border-width: 5px;
content: " "; content: " ";
bottom: 1px; bottom: 1px;
margin-left: -10px; margin-left: -5px;
@extend .jitsipopover__clear;
border-bottom-width: 0; border-bottom-width: 0;
border-top-color: #ffffff; border-top-color: $popoverBg;
} }
}
.jitsipopover.black > .arrow:after
{
border-top-color: rgba(0, 0, 0, 0.8);
}
.jitsiPopupmenuPadding {
height: 35px;
width: 100px;
position: absolute;
bottom: -35px;
}
.jitsipopover_green
{
color: #4abd04;
}
.jitsipopover_orange
{
color: #ffa800;
}
.jitsipopover_blue
{
color: #21B9FC;
}
.jitsipopover_showmore
{
background-color: #21B9FC;
color: #ffffff;
cursor: pointer;
border-radius: 3px;
text-align: center;
width: 90px;
height: 16px;
padding-top: 4px;
padding-left: 10px;
padding-right: 10px;
margin: 15px auto 0px auto;
} }

18
css/_login_menu.scss
View File

@ -31,24 +31,6 @@ ul.loginmenu:after {
left: 18px; left: 18px;
} }
li a.authButton{
background-color: #06a5df;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 29px;
padding-right: 29px;
border-radius: 4px;
cursor: pointer;
}
span.authentication:hover ul.loginmenu, ul.loginmenu:hover {
display:block !important;
}
span.authentication {
position: relative;
}
a.disabled { a.disabled {
color: gray !important; color: gray !important;
pointer-events: none; pointer-events: none;

28
css/_side_toolbar_container.scss
View File

@ -24,7 +24,7 @@
*/ */
input, select, a, input, select, a,
.sideToolbarBlock, .input-control, .button-control { .sideToolbarBlock, .input-control, .button-control {
display: inline-block; display: block;
margin-top: 15px; margin-top: 15px;
margin-left: 10%; margin-left: 10%;
width: 80%; width: 80%;
@ -118,3 +118,29 @@
width : auto !important; width : auto !important;
text-align: center; text-align: center;
} }
/**
* Profile
*/
.auth_container {
ul {
padding: 0;
li {
list-style-type: none;
a.authButton {
width: 160px;
margin: 10px 20px;
padding: 3px 29px;
box-sizing: border-box;
background-color: #06a5df;
border-radius: 4px;
cursor: pointer;
color: $defaultColor;
text-decoration: none;
text-align: center;
}
}
}
}

5
css/_variables.scss
View File

@ -1,3 +1,8 @@
/**
* Theme
*/
@import 'themes/main';
/** /**
* Style variables * Style variables
*/ */

18
css/_videolayout_default.scss
View File

@ -260,24 +260,6 @@
height: 13px; height: 13px;
} }
.connection_info
{
float: left;
padding-bottom: 5px;
}
.connection_info > table
{
white-space: nowrap;
}
.connection_info, .connection_info > table
{
text-align: left;
font-size: 11px;
color: #ffffff;
}
#localVideoContainer>span.status:hover, #localVideoContainer>span.status:hover,
#localVideoContainer .displayname:hover { #localVideoContainer .displayname:hover {
cursor: text; cursor: text;

26
css/connection-info.scss Normal file
View File

@ -0,0 +1,26 @@
%connection-info {
text-align: left;
font-size: 12px;
font-weight: 400;
color: $popoverFontColor;
td {
padding: 2px 0;
}
}
.connection-info
{
float: left;
padding-bottom: 5px;
@extend %connection-info;
> table {
white-space: nowrap;
@extend %connection-info;
}
td:nth-child(n-1) {
padding-left: 5px;
}
}

6
css/input-control/_input-control.scss
View File

@ -20,7 +20,11 @@
} }
&__input { &__input {
margin: 8px 0; margin-bottom: 8px;
&:last-child {
margin-bottom: inherit;
}
&::selection { &::selection {
background-color: $defaultDarkSelectionColor; background-color: $defaultDarkSelectionColor;

1
css/main.scss
View File

@ -61,6 +61,7 @@
@import 'shortcuts/main'; @import 'shortcuts/main';
@import 'buttons/button-control'; @import 'buttons/button-control';
@import "modals/invite/invite"; @import "modals/invite/invite";
@import "connection-info";
@import 'aui-components/dropdown'; @import 'aui-components/dropdown';
/* Modules END */ /* Modules END */

4
css/themes/_light.scss
View File

@ -44,3 +44,7 @@ $hintFontSize: em(13, 14);
$linkFontColor: #3572b0; $linkFontColor: #3572b0;
$linkHoverFontColor: darken(#3572b0, 10%); $linkHoverFontColor: darken(#3572b0, 10%);
$dropdownColor: #333; $dropdownColor: #333;
// Popover colors
$popoverBg: #000;
$popoverFontColor: #ffffff;

27
index.html
View File

@ -103,23 +103,11 @@
<span id="mainToolbar" class="toolbar"></span> <span id="mainToolbar" class="toolbar"></span>
</div> </div>
<div id="subject" class="hide"></div> <div id="subject" class="hide"></div>
<div id="extendedToolbar" class="toolbar"> <div id="extendedToolbar" class="toolbar">
<a class="button" id="toolbar_button_profile" data-container="body" data-placement="right" data-i18n="[content]toolbar.profile" content="Edit your profile"> <a class="button" id="toolbar_button_profile" data-container="body" data-placement="right" data-i18n="[content]toolbar.profile" content="Edit your profile">
<img id="avatar" src="images/avatar2.png"/> <img id="avatar" src="images/avatar2.png"/>
</a> </a>
<span id="authentication" class="authentication" style="display: none">
<a class="button icon-avatar" id="toolbar_button_authentication" data-i18n="[content]toolbar.authenticate"></a>
<ul class="loginmenu extendedToolbarPopup">
<span class="loginmenuPadding"></span>
<li id="toolbar_auth_identity"></li>
<li id="toolbar_button_login">
<a class="authButton" data-i18n="toolbar.login"></a>
</li>
<li id="toolbar_button_logout">
<a class="authButton" data-i18n="toolbar.logout"></a>
</li>
</ul>
</span>
<a class="button icon-contactList" id="toolbar_contact_list" shortcut="contactlistpopover"> <a class="button icon-contactList" id="toolbar_contact_list" shortcut="contactlistpopover">
<span class="badge-round"> <span class="badge-round">
<span id="numberOfParticipants"></span> <span id="numberOfParticipants"></span>
@ -144,6 +132,7 @@
<a class="button icon-raised-hand" id="toolbar_button_raisehand" shortcut="raiseHandPopover"></a> <a class="button icon-raised-hand" id="toolbar_button_raisehand" shortcut="raiseHandPopover"></a>
<a class="button icon-toggle-filmstrip" id="toolbar_film_strip" data-container="body" shortcut="filmstripPopover"></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> <a class="button icon-feedback" id="feedbackButton"></a>
<div id="sideToolbarContainer"> <div id="sideToolbarContainer">
<div id="profile_container" class="sideToolbarContainer__inner"> <div id="profile_container" class="sideToolbarContainer__inner">
<div class="title" data-i18n="profile.title"></div> <div class="title" data-i18n="profile.title"></div>
@ -155,6 +144,18 @@
<label data-i18n="profile.setEmailLabel"></label> <label data-i18n="profile.setEmailLabel"></label>
<input type="text" id="setEmail" placeholder="Enter e-mail"> <input type="text" id="setEmail" placeholder="Enter e-mail">
</div> </div>
<div class="sideToolbarBlock auth_container" id="authenticationContainer">
<p data-i18n="toolbar.authenticate"></p>
<ul>
<li id="toolbar_auth_identity"></li>
<li id="toolbar_button_login">
<a class="authButton" data-i18n="toolbar.login"></a>
</li>
<li id="toolbar_button_logout">
<a class="authButton" data-i18n="toolbar.logout"></a>
</li>
</ul>
</div>
</div> </div>
<div id="chat_container" class="sideToolbarContainer__inner"> <div id="chat_container" class="sideToolbarContainer__inner">
<div id="nickname"> <div id="nickname">

4
interface_config.js
View File

@ -17,6 +17,10 @@ var interfaceConfig = { // eslint-disable-line no-unused-vars
GENERATE_ROOMNAMES_ON_WELCOME_PAGE: true, GENERATE_ROOMNAMES_ON_WELCOME_PAGE: true,
APP_NAME: "Jitsi Meet", APP_NAME: "Jitsi Meet",
INVITATION_POWERED_BY: true, INVITATION_POWERED_BY: true,
/**
* If we should show authentication block in profile
*/
AUTHENTICATION_ENABLE: true,
// the toolbar buttons line is intentionally left in one line, to be able // the toolbar buttons line is intentionally left in one line, to be able
// to easily override values or remove them using regex // to easily override values or remove them using regex
MAIN_TOOLBAR_BUTTONS: ['microphone', 'camera', 'desktop', 'invite', 'fullscreen', 'hangup'], // jshint ignore:line MAIN_TOOLBAR_BUTTONS: ['microphone', 'camera', 'desktop', 'invite', 'fullscreen', 'hangup'], // jshint ignore:line

1
lang/main.json
View File

@ -151,6 +151,7 @@
}, },
"connectionindicator": "connectionindicator":
{ {
"header": "Connection data",
"bitrate": "Bitrate:", "bitrate": "Bitrate:",
"packetloss": "Packet loss:", "packetloss": "Packet loss:",
"resolution": "Resolution:", "resolution": "Resolution:",

6
modules/UI/UI.js
View File

@ -764,6 +764,7 @@ UI.getRemoteVideoType = function (jid) {
UI.connectionIndicatorShowMore = function(id) { UI.connectionIndicatorShowMore = function(id) {
VideoLayout.showMore(id); VideoLayout.showMore(id);
return false;
}; };
// FIXME check if someone user this // FIXME check if someone user this
@ -1140,11 +1141,12 @@ UI.notifyFocusLeft = function () {
* @param {string} [login] current login * @param {string} [login] current login
*/ */
UI.updateAuthInfo = function (isAuthEnabled, login) { UI.updateAuthInfo = function (isAuthEnabled, login) {
let showAuth = isAuthEnabled && UIUtil.isAuthenticationEnabled();
let loggedIn = !!login; let loggedIn = !!login;
Toolbar.showAuthenticateButton(isAuthEnabled); Toolbar.showAuthenticateButton(showAuth);
if (isAuthEnabled) { if (showAuth) {
Toolbar.setAuthenticatedIdentity(login); Toolbar.setAuthenticatedIdentity(login);
Toolbar.showLoginButton(!loggedIn); Toolbar.showLoginButton(!loggedIn);

14
modules/UI/authentication/LoginDialog.js
View File

@ -8,16 +8,15 @@ function getPasswordInputHtml() {
let placeholder = config.hosts.authdomain let placeholder = config.hosts.authdomain
? "user identity" ? "user identity"
: "user@domain.net"; : "user@domain.net";
let passRequiredMsg = APP.translation.translateString(
"dialog.passwordRequired"
);
return ` return `
<h2 data-i18n="dialog.passwordRequired">${passRequiredMsg}</h2> <input name="username" type="text"
<input name="username" type="text" placeholder=${placeholder} autofocus> class="input-control__input"
placeholder=${placeholder} autofocus>
<input name="password" type="password" <input name="password" type="password"
class="input-control__input"
data-i18n="[placeholder]dialog.userPassword" data-i18n="[placeholder]dialog.userPassword"
placeholder="user password"> placeholder="user password">`;
`;
} }
/** /**
@ -80,6 +79,7 @@ function LoginDialog(successCallback, cancelCallback) {
const states = { const states = {
login: { login: {
title: APP.translation.translateString('dialog.passwordRequired'),
html: getPasswordInputHtml(), html: getPasswordInputHtml(),
buttons: loginButtons, buttons: loginButtons,
focus: ':input:first', focus: ':input:first',

18
modules/UI/toolbars/Toolbar.js
View File

@ -391,11 +391,9 @@ Toolbar = {
* @param show <tt>true</tt> to show or <tt>false</tt> to hide * @param show <tt>true</tt> to show or <tt>false</tt> to hide
*/ */
showAuthenticateButton (show) { showAuthenticateButton (show) {
if (UIUtil.isButtonEnabled('authentication') && show) { let display = show ? 'block' : 'none';
$('#authentication').css({display: "inline"});
} else { $('#authenticationContainer').css({display});
$('#authentication').css({display: "none"});
}
}, },
showEtherpadButton () { showEtherpadButton () {
@ -449,12 +447,14 @@ Toolbar = {
* @param authIdentity identity name to be displayed. * @param authIdentity identity name to be displayed.
*/ */
setAuthenticatedIdentity (authIdentity) { setAuthenticatedIdentity (authIdentity) {
if (authIdentity) {
let selector = $('#toolbar_auth_identity'); let selector = $('#toolbar_auth_identity');
if (authIdentity) {
selector.css({display: "list-item"}); selector.css({display: "list-item"});
selector.text(authIdentity); selector.text(authIdentity);
} else { } else {
$('#toolbar_auth_identity').css({display: "none"}); selector.css({display: "none"});
selector.text('');
} }
}, },
@ -463,7 +463,7 @@ Toolbar = {
* @param show <tt>true</tt> to show * @param show <tt>true</tt> to show
*/ */
showLoginButton (show) { showLoginButton (show) {
if (UIUtil.isButtonEnabled('authentication') && show) { if (show) {
$('#toolbar_button_login').css({display: "list-item"}); $('#toolbar_button_login').css({display: "list-item"});
} else { } else {
$('#toolbar_button_login').css({display: "none"}); $('#toolbar_button_login').css({display: "none"});
@ -475,7 +475,7 @@ Toolbar = {
* @param show <tt>true</tt> to show * @param show <tt>true</tt> to show
*/ */
showLogoutButton (show) { showLogoutButton (show) {
if (UIUtil.isButtonEnabled('authentication') && show) { if (show) {
$('#toolbar_button_logout').css({display: "list-item"}); $('#toolbar_button_logout').css({display: "list-item"});
} else { } else {
$('#toolbar_button_logout').css({display: "none"}); $('#toolbar_button_logout').css({display: "none"});

8
modules/UI/util/JitsiPopover.js
View File

@ -29,8 +29,8 @@ var JitsiPopover = (function () {
this.element = element; this.element = element;
this.template = ' <div class="jitsipopover ' + this.options.skin + this.template = ' <div class="jitsipopover ' + this.options.skin +
'"><div class="arrow"></div>' + '"><div class="arrow"></div>' +
'<div class="jitsipopover-content"></div>' + '<div class="jitsipopover__content"></div>' +
'<div class="jitsiPopupmenuPadding"></div></div>'; '<div class="jitsipopover__menu-padding"></div></div>';
var self = this; var self = this;
this.element.on("mouseenter", function () { this.element.on("mouseenter", function () {
self.elementIsHovered = true; self.elementIsHovered = true;
@ -76,7 +76,7 @@ var JitsiPopover = (function () {
*/ */
JitsiPopover.prototype.createPopover = function () { JitsiPopover.prototype.createPopover = function () {
$("body").append(this.template); $("body").append(this.template);
$(".jitsipopover > .jitsipopover-content").html(this.options.content); $(".jitsipopover > .jitsipopover__content").html(this.options.content);
var self = this; var self = this;
$(".jitsipopover").on("mouseenter", function () { $(".jitsipopover").on("mouseenter", function () {
self.popoverIsHovered = true; self.popoverIsHovered = true;
@ -103,7 +103,7 @@ var JitsiPopover = (function () {
$(".jitsipopover").css( $(".jitsipopover").css(
{top: position.top, left: position.left, display: "table"}); {top: position.top, left: position.left, display: "table"});
$(".jitsipopover > .arrow").css({left: calcLeft}); $(".jitsipopover > .arrow").css({left: calcLeft});
$(".jitsipopover > .jitsiPopupmenuPadding").css( $(".jitsipopover > .jitsipopover__menu-padding").css(
{left: calcLeft - 50}); {left: calcLeft - 50});
} }
}); });

9
modules/UI/util/UIUtil.js
View File

@ -204,6 +204,15 @@ const TOOLTIP_POSITIONS = {
return interfaceConfig.SETTINGS_SECTIONS.indexOf(name) !== -1; return interfaceConfig.SETTINGS_SECTIONS.indexOf(name) !== -1;
}, },
/**
* Indicates if Authentication Section should be shown
*
* @returns {boolean}
*/
isAuthenticationEnabled: function() {
return interfaceConfig.AUTHENTICATION_ENABLE;
},
/** /**
* Shows the element given by id. * Shows the element given by id.
* *

81
modules/UI/videolayout/ConnectionIndicator.js
View File

@ -80,10 +80,10 @@ ConnectionIndicator.prototype.generateText = function () {
packetLoss = "N/A"; packetLoss = "N/A";
} else { } else {
packetLoss = "<span class='jitsipopover_green'>&darr;</span>" + packetLoss = "<span class='jitsipopover__green'>&darr;</span>" +
(this.packetLoss.download !== null ? (this.packetLoss.download !== null ?
this.packetLoss.download : "N/A") + this.packetLoss.download : "N/A") +
"% <span class='jitsipopover_orange'>&uarr;</span>" + "% <span class='jitsipopover__orange'>&uarr;</span>" +
(this.packetLoss.upload !== null? this.packetLoss.upload : "N/A") + (this.packetLoss.upload !== null? this.packetLoss.upload : "N/A") +
"%"; "%";
} }
@ -95,31 +95,48 @@ ConnectionIndicator.prototype.generateText = function () {
return `${width}x${height}`; return `${width}x${height}`;
}).join(', ') || 'N/A'; }).join(', ') || 'N/A';
var result = "<table style='width:100%'>" + let result = (
"<tr>" + `<table class="connection-info__container" style='width:100%'>
"<td><span class='jitsipopover_blue' data-i18n='connectionindicator.bitrate'>" + <tr>
translate("connectionindicator.bitrate") + "</span></td>" + <td>
"<td><span class='jitsipopover_green'>&darr;</span>" + <span data-i18n='connectionindicator.bitrate'>
downloadBitrate + " <span class='jitsipopover_orange'>&uarr;</span>" + ${translate("connectionindicator.bitrate")}
uploadBitrate + "</td>" + </span>
"</tr><tr>" + </td>
"<td><span class='jitsipopover_blue' data-i18n='connectionindicator.packetloss'>" + <td>
translate("connectionindicator.packetloss") + "</span></td>" + <span class='jitsipopover__green'>&darr;</span>${downloadBitrate}
"<td>" + packetLoss + "</td>" + <span class='jitsipopover__orange'>&uarr;</span>${uploadBitrate}
"</tr><tr>" + </td>
"<td><span class='jitsipopover_blue' data-i18n='connectionindicator.resolution'>" + </tr>
translate("connectionindicator.resolution") + "</span></td>" + <tr>
"<td>" + resolutionStr + "</td></tr></table>"; <td>
<span data-i18n='connectionindicator.packetloss'>
${translate("connectionindicator.packetloss")}
</span>
</td>
<td>${packetLoss}</td>
</tr>
<tr>
<td>
<span data-i18n='connectionindicator.resolution'>
${translate("connectionindicator.resolution")}
</span>
</td>
<td>
${resolutionStr}
</td>
</tr>
</table>`);
if(this.videoContainer.videoSpanId == "localVideoContainer") { if(this.videoContainer.videoSpanId == "localVideoContainer") {
result += "<div class=\"jitsipopover_showmore\" " + result += "<a class=\"jitsipopover__showmore link\" " +
"onclick = \"APP.UI.connectionIndicatorShowMore('" + "onclick = \"APP.UI.connectionIndicatorShowMore('" +
// FIXME: we do not know local id when this text is generated // FIXME: we do not know local id when this text is generated
//this.id + "')\" data-i18n='connectionindicator." + //this.id + "')\" data-i18n='connectionindicator." +
"local')\" data-i18n='connectionindicator." + "local')\" data-i18n='connectionindicator." +
(this.showMoreValue ? "less" : "more") + "'>" + (this.showMoreValue ? "less" : "more") + "'>" +
translate("connectionindicator." + (this.showMoreValue ? "less" : "more")) + translate("connectionindicator." + (this.showMoreValue ? "less" : "more")) +
"</div><br />"; "</a>";
} }
if (this.showMoreValue) { if (this.showMoreValue) {
@ -138,7 +155,7 @@ ConnectionIndicator.prototype.generateText = function () {
if (!this.transport || this.transport.length === 0) { if (!this.transport || this.transport.length === 0) {
transport = "<tr>" + transport = "<tr>" +
"<td><span class='jitsipopover_blue' " + "<td><span " +
"data-i18n='connectionindicator.address'>" + "data-i18n='connectionindicator.address'>" +
translate("connectionindicator.address") + "</span></td>" + translate("connectionindicator.address") + "</span></td>" +
"<td> N/A</td></tr>"; "<td> N/A</td></tr>";
@ -171,7 +188,7 @@ ConnectionIndicator.prototype.generateText = function () {
var local_address_key = "connectionindicator.localaddress"; var local_address_key = "connectionindicator.localaddress";
var remote_address_key = "connectionindicator.remoteaddress"; var remote_address_key = "connectionindicator.remoteaddress";
var localTransport = var localTransport =
"<tr><td><span class='jitsipopover_blue' data-i18n='" + "<tr><td><span data-i18n='" +
local_address_key +"' data-i18n-options='" + local_address_key +"' data-i18n-options='" +
JSON.stringify({count: data.localIP.length}) + "'>" + JSON.stringify({count: data.localIP.length}) + "'>" +
translate(local_address_key, {count: data.localIP.length}) + translate(local_address_key, {count: data.localIP.length}) +
@ -179,7 +196,7 @@ ConnectionIndicator.prototype.generateText = function () {
ConnectionIndicator.getStringFromArray(data.localIP) + ConnectionIndicator.getStringFromArray(data.localIP) +
"</td></tr>"; "</td></tr>";
transport = transport =
"<tr><td><span class='jitsipopover_blue' data-i18n='" + "<tr><td><span data-i18n='" +
remote_address_key + "' data-i18n-options='" + remote_address_key + "' data-i18n-options='" +
JSON.stringify({count: data.remoteIP.length}) + "'>" + JSON.stringify({count: data.remoteIP.length}) + "'>" +
translate(remote_address_key, translate(remote_address_key,
@ -193,14 +210,14 @@ ConnectionIndicator.prototype.generateText = function () {
transport += "<tr>" + transport += "<tr>" +
"<td>" + "<td>" +
"<span class='jitsipopover_blue' data-i18n='" + key_remote + "<span data-i18n='" + key_remote +
"' data-i18n-options='" + "' data-i18n-options='" +
JSON.stringify({count: this.transport.length}) + "'>" + JSON.stringify({count: this.transport.length}) + "'>" +
translate(key_remote, {count: this.transport.length}) + translate(key_remote, {count: this.transport.length}) +
"</span></td><td>"; "</span></td><td>";
localTransport += "<tr>" + localTransport += "<tr>" +
"<td>" + "<td>" +
"<span class='jitsipopover_blue' data-i18n='" + key_local + "<span data-i18n='" + key_local +
"' data-i18n-options='" + "' data-i18n-options='" +
JSON.stringify({count: this.transport.length}) + "'>" + JSON.stringify({count: this.transport.length}) + "'>" +
translate(key_local, {count: this.transport.length}) + translate(key_local, {count: this.transport.length}) +
@ -213,21 +230,21 @@ ConnectionIndicator.prototype.generateText = function () {
transport += "</td></tr>"; transport += "</td></tr>";
transport += localTransport + "</td></tr>"; transport += localTransport + "</td></tr>";
transport +="<tr>" + transport +="<tr>" +
"<td><span class='jitsipopover_blue' data-i18n='connectionindicator.transport'>" + "<td><span data-i18n='connectionindicator.transport'>" +
translate("connectionindicator.transport") + "</span></td>" + translate("connectionindicator.transport") + "</span></td>" +
"<td>" + this.transport[0].type + "</td></tr>"; "<td>" + this.transport[0].type + "</td></tr>";
} }
result += "<table style='width:100%'>" + result += "<table class='connection-info__container' style='width:100%'>" +
"<tr>" + "<tr>" +
"<td>" + "<td>" +
"<span class='jitsipopover_blue' data-i18n='connectionindicator.bandwidth'>" + "<span data-i18n='connectionindicator.bandwidth'>" +
translate("connectionindicator.bandwidth") + "</span>" + translate("connectionindicator.bandwidth") + "</span>" +
"</td><td>" + "</td><td>" +
"<span class='jitsipopover_green'>&darr;</span>" + "<span class='jitsipopover__green'>&darr;</span>" +
downloadBandwidth + downloadBandwidth +
" <span class='jitsipopover_orange'>&uarr;</span>" + " <span class='jitsipopover__orange'>&uarr;</span>" +
uploadBandwidth + "</td></tr>"; uploadBandwidth + "</td></tr>";
result += transport + "</table>"; result += transport + "</table>";
@ -266,7 +283,7 @@ ConnectionIndicator.prototype.create = function () {
this.connectionIndicatorContainer); this.connectionIndicatorContainer);
this.popover = new JitsiPopover( this.popover = new JitsiPopover(
$("#" + this.videoContainer.videoSpanId + " > .connectionindicator"), $("#" + this.videoContainer.videoSpanId + " > .connectionindicator"),
{content: "<div class=\"connection_info\" data-i18n='connectionindicator.na'>" + {content: "<div class=\"connection-info\" data-i18n='connectionindicator.na'>" +
APP.translation.translateString("connectionindicator.na") + "</div>", APP.translation.translateString("connectionindicator.na") + "</div>",
skin: "black"}); skin: "black"});
@ -379,9 +396,9 @@ ConnectionIndicator.prototype.updatePopoverData = function (force) {
// popover is visible or we force to do so. // popover is visible or we force to do so.
if(this.popover.popoverShown || force) { if(this.popover.popoverShown || force) {
this.popover.updateContent( this.popover.updateContent(
`<div class="connection_info">${this.generateText()}</div>` `<div class="connection-info">${this.generateText()}</div>`
); );
APP.translation.translateElement($(".connection_info")); APP.translation.translateElement($(".connection-info"));
} }
}; };