From b0234654a54402891ca0d1c50be7d542489946f5 Mon Sep 17 00:00:00 2001 From: Jonas Herzig Date: Wed, 26 Sep 2018 13:08:40 +0200 Subject: [PATCH] Add server connection info dialog --- app/index.html | 50 ++++++++++++++++++++++++-- app/index.js | 58 +++++++++++++++++++++++++++---- themes/MetroMumbleLight/main.scss | 14 +++++++- 3 files changed, 113 insertions(+), 9 deletions(-) diff --git a/app/index.html b/app/index.html index 81f3bbf..2d1b2e6 100644 --- a/app/index.html +++ b/app/index.html @@ -126,6 +126,51 @@ + +
+
+ Connection Information +
+
+

Version

+ + Protocol + . +
+
+ +
+ + +
+ + + Unknown + + +

Control channel

+ ms average latency + ( deviation) +
+
+ Remote host + (port ) +
+ +

Audio bandwidth

+ Maximum kbits/s + ( kbits/s with overhead) +
+ Current kbits/s + ( kbits/s with overhead) +
+ Codec: +
+ +
+
@@ -354,8 +399,9 @@ - +
{ + 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.connectDialog = new ConnectDialog() this.connectErrorDialog = new ConnectErrorDialog(this.connectDialog) - this.connectionInfo = new ConnectionInfo() + this.connectionInfo = new ConnectionInfo(this) this.commentDialog = new CommentDialog() this.settingsDialog = ko.observable() this.minimalView = ko.observable(false) this.log = ko.observableArray() + this.remoteHost = ko.observable() + this.remotePort = ko.observable() this.thisUser = ko.observable() this.root = ko.observable() this.avatarView = ko.observable() @@ -285,6 +328,9 @@ class GlobalBindings { this.connect = (username, host, port, token, password) => { this.resetClient() + this.remoteHost(host) + this.remotePort(port) + log('Connecting to server ', host) // TODO: token diff --git a/themes/MetroMumbleLight/main.scss b/themes/MetroMumbleLight/main.scss index c1cdff1..2e9d155 100644 --- a/themes/MetroMumbleLight/main.scss +++ b/themes/MetroMumbleLight/main.scss @@ -358,7 +358,7 @@ form { .message-content p { margin: 0; } -.tb-information, .tb-record, .tb-comment { +.tb-information.disabled, .tb-record, .tb-comment { filter: grayscale(100%); } .dialog-header { @@ -471,6 +471,18 @@ form { width: 400px; 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; + } +} /****************/