Add server connection info dialog

This commit is contained in:
Jonas Herzig 2018-09-26 13:08:40 +02:00
parent e77da5335e
commit b0234654a5
3 changed files with 113 additions and 9 deletions

View file

@ -126,6 +126,51 @@
</form> </form>
</div> </div>
<!-- /ko --> <!-- /ko -->
<!-- ko with: connectionInfo -->
<div class="connection-info-dialog dialog" data-bind="visible: visible">
<div class="dialog-header">
Connection Information
</div>
<div class="dialog-content">
<h3>Version</h3>
<!-- ko with: serverVersion -->
Protocol
<span data-bind="text: major + '.' + minor + '.' + patch"></span>.
<br>
<br>
<span data-bind="text: release"></span>
<br>
<span data-bind="text: os"></span>
<span data-bind="text: osVersion"></span>
<br>
<!-- /ko -->
<!-- ko if: !serverVersion() -->
Unknown
<!-- /ko -->
<h3>Control channel</h3>
<span data-bind="text: latencyMs().toFixed(2)"></span> ms average latency
(<span data-bind="text: latencyDeviation().toFixed(2)"></span> deviation)
<br>
<br>
Remote host <span data-bind="text: remoteHost"></span>
(port <span data-bind="text: remotePort"></span>)
<br>
<h3>Audio bandwidth</h3>
Maximum <span data-bind="text: (maxBitrate()/1000).toFixed(1)"></span> kbits/s
(<span data-bind="text: (maxBandwidth()/1000).toFixed(1)"></span> kbits/s with overhead)
<br>
Current <span data-bind="text: (currentBitrate()/1000).toFixed(1)"></span> kbits/s
(<span data-bind="text: (currentBandwidth()/1000).toFixed(1)"></span> kbits/s with overhead)
<br>
Codec: <span data-bind="text: codec"></span>
</div>
<div class="dialog-footer">
<input class="dialog-close" type="button" data-bind="click: hide" value="OK">
</div>
</div>
<!-- /ko -->
<!-- ko with: settingsDialog --> <!-- ko with: settingsDialog -->
<div class="settings-dialog dialog" data-bind="visible: $data"> <div class="settings-dialog dialog" data-bind="visible: $data">
<div class="dialog-header"> <div class="dialog-header">
@ -354,8 +399,9 @@
<img class="tb-connect" data-bind="visible: !connectDialog.joinOnly(), <img class="tb-connect" data-bind="visible: !connectDialog.joinOnly(),
click: connectDialog.show" click: connectDialog.show"
rel="connect" src="/svg/applications-internet.svg"> rel="connect" src="/svg/applications-internet.svg">
<img class="tb-information" data-bind="click: connectionInfo.show" <img class="tb-information" rel="information" src="/svg/information_icon.svg"
rel="information" src="/svg/information_icon.svg"> data-bind="click: connectionInfo.show,
css: { disabled: !thisUser() }">
<div class="divider"></div> <div class="divider"></div>
<img class="tb-mute" data-bind="visible: !selfMute(), <img class="tb-mute" data-bind="visible: !selfMute(),
click: function () { requestMute(thisUser()) }" click: function () { requestMute(thisUser()) }"

View file

@ -81,11 +81,52 @@ function ConnectErrorDialog (connectDialog) {
} }
} }
function ConnectionInfo () { class ConnectionInfo {
var self = this constructor (ui) {
self.visible = ko.observable(false) this._ui = ui
self.show = function () { this.visible = ko.observable(false)
self.visible(true) this.serverVersion = ko.observable()
this.latencyMs = ko.observable(NaN)
this.latencyDeviation = ko.observable(NaN)
this.remoteHost = ko.observable()
this.remotePort = ko.observable()
this.maxBitrate = ko.observable(NaN)
this.currentBitrate = ko.observable(NaN)
this.maxBandwidth = ko.observable(NaN)
this.currentBandwidth = ko.observable(NaN)
this.codec = ko.observable()
this.show = () => {
if (!ui.thisUser()) return
this.update()
this.visible(true)
}
this.hide = () => this.visible(false)
}
update () {
let client = this._ui.client
this.serverVersion(client.serverVersion)
let dataStats = client.dataStats
if (dataStats) {
this.latencyMs(dataStats.mean)
this.latencyDeviation(Math.sqrt(dataStats.variance))
}
this.remoteHost(this._ui.remoteHost())
this.remotePort(this._ui.remotePort())
let spp = this._ui.settings.samplesPerPacket
let maxBitrate = client.getMaxBitrate(spp, false)
let maxBandwidth = client.maxBandwidth
let actualBitrate = client.getActualBitrate(spp, false)
let actualBandwidth = MumbleClient.calcEnforcableBandwidth(actualBitrate, spp, false)
this.maxBitrate(maxBitrate)
this.currentBitrate(actualBitrate)
this.maxBandwidth(maxBandwidth)
this.currentBandwidth(actualBandwidth)
this.codec('Opus') // only one supported for sending
} }
} }
@ -226,11 +267,13 @@ class GlobalBindings {
this.channelContextMenu = new ContextMenu() this.channelContextMenu = new ContextMenu()
this.connectDialog = new ConnectDialog() this.connectDialog = new ConnectDialog()
this.connectErrorDialog = new ConnectErrorDialog(this.connectDialog) this.connectErrorDialog = new ConnectErrorDialog(this.connectDialog)
this.connectionInfo = new ConnectionInfo() this.connectionInfo = new ConnectionInfo(this)
this.commentDialog = new CommentDialog() this.commentDialog = new CommentDialog()
this.settingsDialog = ko.observable() this.settingsDialog = ko.observable()
this.minimalView = ko.observable(false) this.minimalView = ko.observable(false)
this.log = ko.observableArray() this.log = ko.observableArray()
this.remoteHost = ko.observable()
this.remotePort = ko.observable()
this.thisUser = ko.observable() this.thisUser = ko.observable()
this.root = ko.observable() this.root = ko.observable()
this.avatarView = ko.observable() this.avatarView = ko.observable()
@ -285,6 +328,9 @@ class GlobalBindings {
this.connect = (username, host, port, token, password) => { this.connect = (username, host, port, token, password) => {
this.resetClient() this.resetClient()
this.remoteHost(host)
this.remotePort(port)
log('Connecting to server ', host) log('Connecting to server ', host)
// TODO: token // TODO: token

View file

@ -358,7 +358,7 @@ form {
.message-content p { .message-content p {
margin: 0; margin: 0;
} }
.tb-information, .tb-record, .tb-comment { .tb-information.disabled, .tb-record, .tb-comment {
filter: grayscale(100%); filter: grayscale(100%);
} }
.dialog-header { .dialog-header {
@ -471,6 +471,18 @@ form {
width: 400px; width: 400px;
left: calc(50% - 200px); left: calc(50% - 200px);
} }
.connection-info-dialog {
width: 500px;
height: 400px;
top: calc(50% - 200px);
left: calc(50% - 250px);
h3 {
margin-bottom: 5px;
}
.dialog-content {
padding-left: 20px;
}
}
/****************/ /****************/