Add server connection info dialog

app/index.html

@@ -126,6 +126,51 @@
           </form>
         </div>
       <!-- /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 -->
       <div class="settings-dialog dialog" data-bind="visible: $data">
           <div class="dialog-header">
@@ -354,8 +399,9 @@
         <img class="tb-connect" data-bind="visible: !connectDialog.joinOnly(),
                                            click: connectDialog.show"
                       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>
         <img class="tb-mute" data-bind="visible: !selfMute(),
                               click: function () { requestMute(thisUser()) }"

app/index.js

@@ -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.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

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;
+  }
+}
 
 
 /****************/