Merge branch 'master' into kkrisstoff-task/dropdown-aui-changes
This commit is contained in:
commit
55b741d11b
|
@ -1086,7 +1086,6 @@ export default {
|
|||
}
|
||||
);
|
||||
|
||||
|
||||
room.on(ConferenceEvents.USER_JOINED, (id, user) => {
|
||||
if (user.isHidden())
|
||||
return;
|
||||
|
|
|
@ -186,6 +186,7 @@ form {
|
|||
}
|
||||
|
||||
.link {
|
||||
cursor: pointer;
|
||||
color: $linkFontColor;
|
||||
@include transition(color .1s ease-out);
|
||||
|
||||
|
|
|
@ -8,98 +8,87 @@
|
|||
min-width: 100px;
|
||||
padding: 1px;
|
||||
text-align: left;
|
||||
color: #333333;
|
||||
background-color: #ffffff;
|
||||
color: $popoverFontColor;
|
||||
background-color: $popoverBg;
|
||||
background-clip: padding-box;
|
||||
border: 1px solid #cccccc;
|
||||
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||
border-radius: 6px;
|
||||
border: 1px solid $popoverBg;
|
||||
border-radius: 3px;
|
||||
/*-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);*/
|
||||
/*box-shadow: 0 5px 10px rgba(0, 0, 0, 0.4);*/
|
||||
white-space: normal;
|
||||
margin-top: -10px;
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
|
||||
.jitsipopover.black
|
||||
{
|
||||
background-color: rgba(0,0,0,0.8);
|
||||
color: #ffffff;
|
||||
}
|
||||
&__title {
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.jitsipopover-content {
|
||||
padding: 9px 14px;
|
||||
font-size: 10pt;
|
||||
white-space:pre-wrap;
|
||||
text-align: center;
|
||||
}
|
||||
&__content {
|
||||
padding: em(5) em(10);
|
||||
font-size: em(14);
|
||||
white-space:pre-wrap;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.jitsipopover > .arrow,
|
||||
.jitsipopover > .arrow:after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
}
|
||||
&__icon {
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.jitsipopover > .arrow {
|
||||
border-width: 11px;
|
||||
left: 50%;
|
||||
margin-left: -11px;
|
||||
border-bottom-width: 0;
|
||||
border-top-color: #999999;
|
||||
border-top-color: rgba(0, 0, 0, 0.25);
|
||||
bottom: -11px;
|
||||
}
|
||||
.jitsipopover > .arrow:after {
|
||||
border-width: 10px;
|
||||
content: " ";
|
||||
bottom: 1px;
|
||||
margin-left: -10px;
|
||||
border-bottom-width: 0;
|
||||
border-top-color: #ffffff;
|
||||
}
|
||||
&__green
|
||||
{
|
||||
@extend .jitsipopover__icon;
|
||||
color: #4abd04;
|
||||
}
|
||||
|
||||
.jitsipopover.black > .arrow:after
|
||||
{
|
||||
border-top-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
&__orange
|
||||
{
|
||||
@extend .jitsipopover__icon;
|
||||
color: #ffa800;
|
||||
}
|
||||
|
||||
.jitsiPopupmenuPadding {
|
||||
height: 35px;
|
||||
width: 100px;
|
||||
position: absolute;
|
||||
bottom: -35px;
|
||||
}
|
||||
&__menu-padding {
|
||||
height: 35px;
|
||||
width: 100px;
|
||||
position: absolute;
|
||||
bottom: -35px;
|
||||
}
|
||||
|
||||
.jitsipopover_green
|
||||
{
|
||||
color: #4abd04;
|
||||
}
|
||||
&__showmore {
|
||||
display: block;
|
||||
text-align: center;
|
||||
width: 90px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.jitsipopover_orange
|
||||
{
|
||||
color: #ffa800;
|
||||
}
|
||||
&__clear {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.jitsipopover_blue
|
||||
{
|
||||
color: #21B9FC;
|
||||
}
|
||||
> .arrow {
|
||||
border-width: 5px 2.5px 0 2.5px;
|
||||
left: 50%;
|
||||
margin-left: -5px;
|
||||
@extend .jitsipopover__clear;
|
||||
border-bottom-width: 0;
|
||||
border-top-color: $popoverBg;
|
||||
bottom: -5px;
|
||||
|
||||
.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;
|
||||
|
||||
&:after {
|
||||
border-width: 5px;
|
||||
content: " ";
|
||||
bottom: 1px;
|
||||
margin-left: -5px;
|
||||
@extend .jitsipopover__clear;
|
||||
border-bottom-width: 0;
|
||||
border-top-color: $popoverBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -31,24 +31,6 @@ ul.loginmenu:after {
|
|||
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 {
|
||||
color: gray !important;
|
||||
pointer-events: none;
|
||||
|
@ -73,4 +55,4 @@ ul.loginmenu.extendedToolbarPopup:after {
|
|||
position: absolute;
|
||||
top: 18px;
|
||||
left: -7px;
|
||||
}
|
||||
}
|
|
@ -24,7 +24,7 @@
|
|||
*/
|
||||
input, select, a,
|
||||
.sideToolbarBlock, .input-control, .button-control {
|
||||
display: inline-block;
|
||||
display: block;
|
||||
margin-top: 15px;
|
||||
margin-left: 10%;
|
||||
width: 80%;
|
||||
|
@ -118,3 +118,29 @@
|
|||
width : auto !important;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,3 +1,8 @@
|
|||
/**
|
||||
* Theme
|
||||
*/
|
||||
@import 'themes/main';
|
||||
|
||||
/**
|
||||
* Style variables
|
||||
*/
|
||||
|
|
|
@ -260,24 +260,6 @@
|
|||
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 .displayname:hover {
|
||||
cursor: text;
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
|
@ -20,7 +20,11 @@
|
|||
}
|
||||
|
||||
&__input {
|
||||
margin: 8px 0;
|
||||
margin-bottom: 8px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: inherit;
|
||||
}
|
||||
|
||||
&::selection {
|
||||
background-color: $defaultDarkSelectionColor;
|
||||
|
|
|
@ -61,6 +61,7 @@
|
|||
@import 'shortcuts/main';
|
||||
@import 'buttons/button-control';
|
||||
@import "modals/invite/invite";
|
||||
@import "connection-info";
|
||||
@import 'aui-components/dropdown';
|
||||
|
||||
/* Modules END */
|
||||
/* Modules END */
|
||||
|
|
|
@ -43,4 +43,8 @@ $labelFontWeight: 400;
|
|||
$hintFontSize: em(13, 14);
|
||||
$linkFontColor: #3572b0;
|
||||
$linkHoverFontColor: darken(#3572b0, 10%);
|
||||
$dropdownColor: #333;
|
||||
$dropdownColor: #333;
|
||||
|
||||
// Popover colors
|
||||
$popoverBg: #000;
|
||||
$popoverFontColor: #ffffff;
|
27
index.html
27
index.html
|
@ -103,23 +103,11 @@
|
|||
<span id="mainToolbar" class="toolbar"></span>
|
||||
</div>
|
||||
<div id="subject" class="hide"></div>
|
||||
|
||||
<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">
|
||||
<img id="avatar" src="images/avatar2.png"/>
|
||||
</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">
|
||||
<span class="badge-round">
|
||||
<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-toggle-filmstrip" id="toolbar_film_strip" data-container="body" shortcut="filmstripPopover"></a>
|
||||
<a class="button icon-feedback" id="feedbackButton"></a>
|
||||
|
||||
<div id="sideToolbarContainer">
|
||||
<div id="profile_container" class="sideToolbarContainer__inner">
|
||||
<div class="title" data-i18n="profile.title"></div>
|
||||
|
@ -155,6 +144,18 @@
|
|||
<label data-i18n="profile.setEmailLabel"></label>
|
||||
<input type="text" id="setEmail" placeholder="Enter e-mail">
|
||||
</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 id="chat_container" class="sideToolbarContainer__inner">
|
||||
<div id="nickname">
|
||||
|
|
|
@ -17,6 +17,10 @@ var interfaceConfig = { // eslint-disable-line no-unused-vars
|
|||
GENERATE_ROOMNAMES_ON_WELCOME_PAGE: true,
|
||||
APP_NAME: "Jitsi Meet",
|
||||
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
|
||||
// to easily override values or remove them using regex
|
||||
MAIN_TOOLBAR_BUTTONS: ['microphone', 'camera', 'desktop', 'invite', 'fullscreen', 'hangup'], // jshint ignore:line
|
||||
|
|
|
@ -151,6 +151,7 @@
|
|||
},
|
||||
"connectionindicator":
|
||||
{
|
||||
"header": "Connection data",
|
||||
"bitrate": "Bitrate:",
|
||||
"packetloss": "Packet loss:",
|
||||
"resolution": "Resolution:",
|
||||
|
|
|
@ -764,6 +764,7 @@ UI.getRemoteVideoType = function (jid) {
|
|||
|
||||
UI.connectionIndicatorShowMore = function(id) {
|
||||
VideoLayout.showMore(id);
|
||||
return false;
|
||||
};
|
||||
|
||||
// FIXME check if someone user this
|
||||
|
@ -1140,11 +1141,12 @@ UI.notifyFocusLeft = function () {
|
|||
* @param {string} [login] current login
|
||||
*/
|
||||
UI.updateAuthInfo = function (isAuthEnabled, login) {
|
||||
let showAuth = isAuthEnabled && UIUtil.isAuthenticationEnabled();
|
||||
let loggedIn = !!login;
|
||||
|
||||
Toolbar.showAuthenticateButton(isAuthEnabled);
|
||||
Toolbar.showAuthenticateButton(showAuth);
|
||||
|
||||
if (isAuthEnabled) {
|
||||
if (showAuth) {
|
||||
Toolbar.setAuthenticatedIdentity(login);
|
||||
|
||||
Toolbar.showLoginButton(!loggedIn);
|
||||
|
|
|
@ -8,16 +8,15 @@ function getPasswordInputHtml() {
|
|||
let placeholder = config.hosts.authdomain
|
||||
? "user identity"
|
||||
: "user@domain.net";
|
||||
let passRequiredMsg = APP.translation.translateString(
|
||||
"dialog.passwordRequired"
|
||||
);
|
||||
|
||||
return `
|
||||
<h2 data-i18n="dialog.passwordRequired">${passRequiredMsg}</h2>
|
||||
<input name="username" type="text" placeholder=${placeholder} autofocus>
|
||||
<input name="username" type="text"
|
||||
class="input-control__input"
|
||||
placeholder=${placeholder} autofocus>
|
||||
<input name="password" type="password"
|
||||
class="input-control__input"
|
||||
data-i18n="[placeholder]dialog.userPassword"
|
||||
placeholder="user password">
|
||||
`;
|
||||
placeholder="user password">`;
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -80,6 +79,7 @@ function LoginDialog(successCallback, cancelCallback) {
|
|||
|
||||
const states = {
|
||||
login: {
|
||||
title: APP.translation.translateString('dialog.passwordRequired'),
|
||||
html: getPasswordInputHtml(),
|
||||
buttons: loginButtons,
|
||||
focus: ':input:first',
|
||||
|
|
|
@ -391,11 +391,9 @@ Toolbar = {
|
|||
* @param show <tt>true</tt> to show or <tt>false</tt> to hide
|
||||
*/
|
||||
showAuthenticateButton (show) {
|
||||
if (UIUtil.isButtonEnabled('authentication') && show) {
|
||||
$('#authentication').css({display: "inline"});
|
||||
} else {
|
||||
$('#authentication').css({display: "none"});
|
||||
}
|
||||
let display = show ? 'block' : 'none';
|
||||
|
||||
$('#authenticationContainer').css({display});
|
||||
},
|
||||
|
||||
showEtherpadButton () {
|
||||
|
@ -449,12 +447,14 @@ Toolbar = {
|
|||
* @param authIdentity identity name to be displayed.
|
||||
*/
|
||||
setAuthenticatedIdentity (authIdentity) {
|
||||
let selector = $('#toolbar_auth_identity');
|
||||
|
||||
if (authIdentity) {
|
||||
let selector = $('#toolbar_auth_identity');
|
||||
selector.css({display: "list-item"});
|
||||
selector.text(authIdentity);
|
||||
} 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
|
||||
*/
|
||||
showLoginButton (show) {
|
||||
if (UIUtil.isButtonEnabled('authentication') && show) {
|
||||
if (show) {
|
||||
$('#toolbar_button_login').css({display: "list-item"});
|
||||
} else {
|
||||
$('#toolbar_button_login').css({display: "none"});
|
||||
|
@ -475,7 +475,7 @@ Toolbar = {
|
|||
* @param show <tt>true</tt> to show
|
||||
*/
|
||||
showLogoutButton (show) {
|
||||
if (UIUtil.isButtonEnabled('authentication') && show) {
|
||||
if (show) {
|
||||
$('#toolbar_button_logout').css({display: "list-item"});
|
||||
} else {
|
||||
$('#toolbar_button_logout').css({display: "none"});
|
||||
|
|
|
@ -29,8 +29,8 @@ var JitsiPopover = (function () {
|
|||
this.element = element;
|
||||
this.template = ' <div class="jitsipopover ' + this.options.skin +
|
||||
'"><div class="arrow"></div>' +
|
||||
'<div class="jitsipopover-content"></div>' +
|
||||
'<div class="jitsiPopupmenuPadding"></div></div>';
|
||||
'<div class="jitsipopover__content"></div>' +
|
||||
'<div class="jitsipopover__menu-padding"></div></div>';
|
||||
var self = this;
|
||||
this.element.on("mouseenter", function () {
|
||||
self.elementIsHovered = true;
|
||||
|
@ -76,7 +76,7 @@ var JitsiPopover = (function () {
|
|||
*/
|
||||
JitsiPopover.prototype.createPopover = function () {
|
||||
$("body").append(this.template);
|
||||
$(".jitsipopover > .jitsipopover-content").html(this.options.content);
|
||||
$(".jitsipopover > .jitsipopover__content").html(this.options.content);
|
||||
var self = this;
|
||||
$(".jitsipopover").on("mouseenter", function () {
|
||||
self.popoverIsHovered = true;
|
||||
|
@ -103,7 +103,7 @@ var JitsiPopover = (function () {
|
|||
$(".jitsipopover").css(
|
||||
{top: position.top, left: position.left, display: "table"});
|
||||
$(".jitsipopover > .arrow").css({left: calcLeft});
|
||||
$(".jitsipopover > .jitsiPopupmenuPadding").css(
|
||||
$(".jitsipopover > .jitsipopover__menu-padding").css(
|
||||
{left: calcLeft - 50});
|
||||
}
|
||||
});
|
||||
|
|
|
@ -204,6 +204,15 @@ const TOOLTIP_POSITIONS = {
|
|||
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.
|
||||
*
|
||||
|
|
|
@ -80,10 +80,10 @@ ConnectionIndicator.prototype.generateText = function () {
|
|||
packetLoss = "N/A";
|
||||
} else {
|
||||
|
||||
packetLoss = "<span class='jitsipopover_green'>↓</span>" +
|
||||
packetLoss = "<span class='jitsipopover__green'>↓</span>" +
|
||||
(this.packetLoss.download !== null ?
|
||||
this.packetLoss.download : "N/A") +
|
||||
"% <span class='jitsipopover_orange'>↑</span>" +
|
||||
"% <span class='jitsipopover__orange'>↑</span>" +
|
||||
(this.packetLoss.upload !== null? this.packetLoss.upload : "N/A") +
|
||||
"%";
|
||||
}
|
||||
|
@ -95,31 +95,48 @@ ConnectionIndicator.prototype.generateText = function () {
|
|||
return `${width}x${height}`;
|
||||
}).join(', ') || 'N/A';
|
||||
|
||||
var result = "<table style='width:100%'>" +
|
||||
"<tr>" +
|
||||
"<td><span class='jitsipopover_blue' data-i18n='connectionindicator.bitrate'>" +
|
||||
translate("connectionindicator.bitrate") + "</span></td>" +
|
||||
"<td><span class='jitsipopover_green'>↓</span>" +
|
||||
downloadBitrate + " <span class='jitsipopover_orange'>↑</span>" +
|
||||
uploadBitrate + "</td>" +
|
||||
"</tr><tr>" +
|
||||
"<td><span class='jitsipopover_blue' data-i18n='connectionindicator.packetloss'>" +
|
||||
translate("connectionindicator.packetloss") + "</span></td>" +
|
||||
"<td>" + packetLoss + "</td>" +
|
||||
"</tr><tr>" +
|
||||
"<td><span class='jitsipopover_blue' data-i18n='connectionindicator.resolution'>" +
|
||||
translate("connectionindicator.resolution") + "</span></td>" +
|
||||
"<td>" + resolutionStr + "</td></tr></table>";
|
||||
let result = (
|
||||
`<table class="connection-info__container" style='width:100%'>
|
||||
<tr>
|
||||
<td>
|
||||
<span data-i18n='connectionindicator.bitrate'>
|
||||
${translate("connectionindicator.bitrate")}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class='jitsipopover__green'>↓</span>${downloadBitrate}
|
||||
<span class='jitsipopover__orange'>↑</span>${uploadBitrate}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<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") {
|
||||
result += "<div class=\"jitsipopover_showmore\" " +
|
||||
result += "<a class=\"jitsipopover__showmore link\" " +
|
||||
"onclick = \"APP.UI.connectionIndicatorShowMore('" +
|
||||
// FIXME: we do not know local id when this text is generated
|
||||
//this.id + "')\" data-i18n='connectionindicator." +
|
||||
"local')\" data-i18n='connectionindicator." +
|
||||
(this.showMoreValue ? "less" : "more") + "'>" +
|
||||
translate("connectionindicator." + (this.showMoreValue ? "less" : "more")) +
|
||||
"</div><br />";
|
||||
"</a>";
|
||||
}
|
||||
|
||||
if (this.showMoreValue) {
|
||||
|
@ -138,7 +155,7 @@ ConnectionIndicator.prototype.generateText = function () {
|
|||
|
||||
if (!this.transport || this.transport.length === 0) {
|
||||
transport = "<tr>" +
|
||||
"<td><span class='jitsipopover_blue' " +
|
||||
"<td><span " +
|
||||
"data-i18n='connectionindicator.address'>" +
|
||||
translate("connectionindicator.address") + "</span></td>" +
|
||||
"<td> N/A</td></tr>";
|
||||
|
@ -171,7 +188,7 @@ ConnectionIndicator.prototype.generateText = function () {
|
|||
var local_address_key = "connectionindicator.localaddress";
|
||||
var remote_address_key = "connectionindicator.remoteaddress";
|
||||
var localTransport =
|
||||
"<tr><td><span class='jitsipopover_blue' data-i18n='" +
|
||||
"<tr><td><span data-i18n='" +
|
||||
local_address_key +"' data-i18n-options='" +
|
||||
JSON.stringify({count: data.localIP.length}) + "'>" +
|
||||
translate(local_address_key, {count: data.localIP.length}) +
|
||||
|
@ -179,7 +196,7 @@ ConnectionIndicator.prototype.generateText = function () {
|
|||
ConnectionIndicator.getStringFromArray(data.localIP) +
|
||||
"</td></tr>";
|
||||
transport =
|
||||
"<tr><td><span class='jitsipopover_blue' data-i18n='" +
|
||||
"<tr><td><span data-i18n='" +
|
||||
remote_address_key + "' data-i18n-options='" +
|
||||
JSON.stringify({count: data.remoteIP.length}) + "'>" +
|
||||
translate(remote_address_key,
|
||||
|
@ -193,14 +210,14 @@ ConnectionIndicator.prototype.generateText = function () {
|
|||
|
||||
transport += "<tr>" +
|
||||
"<td>" +
|
||||
"<span class='jitsipopover_blue' data-i18n='" + key_remote +
|
||||
"<span data-i18n='" + key_remote +
|
||||
"' data-i18n-options='" +
|
||||
JSON.stringify({count: this.transport.length}) + "'>" +
|
||||
translate(key_remote, {count: this.transport.length}) +
|
||||
"</span></td><td>";
|
||||
localTransport += "<tr>" +
|
||||
"<td>" +
|
||||
"<span class='jitsipopover_blue' data-i18n='" + key_local +
|
||||
"<span data-i18n='" + key_local +
|
||||
"' data-i18n-options='" +
|
||||
JSON.stringify({count: this.transport.length}) + "'>" +
|
||||
translate(key_local, {count: this.transport.length}) +
|
||||
|
@ -213,21 +230,21 @@ ConnectionIndicator.prototype.generateText = function () {
|
|||
transport += "</td></tr>";
|
||||
transport += localTransport + "</td></tr>";
|
||||
transport +="<tr>" +
|
||||
"<td><span class='jitsipopover_blue' data-i18n='connectionindicator.transport'>" +
|
||||
"<td><span data-i18n='connectionindicator.transport'>" +
|
||||
translate("connectionindicator.transport") + "</span></td>" +
|
||||
"<td>" + this.transport[0].type + "</td></tr>";
|
||||
|
||||
}
|
||||
|
||||
result += "<table style='width:100%'>" +
|
||||
result += "<table class='connection-info__container' style='width:100%'>" +
|
||||
"<tr>" +
|
||||
"<td>" +
|
||||
"<span class='jitsipopover_blue' data-i18n='connectionindicator.bandwidth'>" +
|
||||
"<span data-i18n='connectionindicator.bandwidth'>" +
|
||||
translate("connectionindicator.bandwidth") + "</span>" +
|
||||
"</td><td>" +
|
||||
"<span class='jitsipopover_green'>↓</span>" +
|
||||
"<span class='jitsipopover__green'>↓</span>" +
|
||||
downloadBandwidth +
|
||||
" <span class='jitsipopover_orange'>↑</span>" +
|
||||
" <span class='jitsipopover__orange'>↑</span>" +
|
||||
uploadBandwidth + "</td></tr>";
|
||||
|
||||
result += transport + "</table>";
|
||||
|
@ -266,7 +283,7 @@ ConnectionIndicator.prototype.create = function () {
|
|||
this.connectionIndicatorContainer);
|
||||
this.popover = new JitsiPopover(
|
||||
$("#" + 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>",
|
||||
skin: "black"});
|
||||
|
||||
|
@ -379,9 +396,9 @@ ConnectionIndicator.prototype.updatePopoverData = function (force) {
|
|||
// popover is visible or we force to do so.
|
||||
if(this.popover.popoverShown || force) {
|
||||
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"));
|
||||
}
|
||||
};
|
||||
|
||||
|
|
Loading…
Reference in New Issue