Add "Audio Quality" and "Audio per packet" to settings dialog

app/index.html

@@ -160,6 +160,38 @@
                     <input type="button" data-bind="value: pttKeyDisplay, click: recordPttKey">
                   </td>
                 </tr>
+                <tr>
+                  <td>Audio Quality</td>
+                  <td><span data-bind="text: (audioBitrate()/1000).toFixed(1)"></span> kbit/s</td>
+                </tr>
+                <tr>
+                  <td colspan="2">
+                    <input type="range" min="8000" max="96000" step="8"
+                           data-bind="value: audioBitrate, valueUpdate: 'input'">
+                  </td>
+                </tr>
+                <tr>
+                  <td>Audio per packet</td>
+                  <td><span data-bind="text: msPerPacket"></span> ms</td>
+                </tr>
+                <tr>
+                  <td colspan="2">
+                    <input type="range" min="10" max="60" step="10"
+                           data-bind="value: msPerPacket, valueUpdate: 'input'">
+                  </td>
+                </tr>
+                <tr>
+                  <td colspan="2" class="bandwidth-info">
+                    <span data-bind="text: (totalBandwidth()/1000).toFixed(1)"></span>
+                    kbit/s
+                    (Audio
+                    <span data-bind="text: (audioBitrate()/1000).toFixed(1)"></span>,
+                    Position
+                    <span data-bind="text: (positionBandwidth()/1000).toFixed(1)"></span>,
+                    Overhead
+                    <span data-bind="text: (overheadBandwidth()/1000).toFixed(1)"></span>)
+                  </td>
+                </tr>
                 <tr>
                   <td>Show Avatars</td>
                   <td>

app/index.js

@@ -1,5 +1,6 @@
 import 'stream-browserify' // see https://github.com/ericgundrum/pouch-websocket-sync-example/commit/2a4437b013092cc7b2cd84cf1499172c84a963a3
 import url from 'url'
+import MumbleClient from 'mumble-client'
 import mumbleConnect from 'mumble-client-websocket'
 import CodecsBrowser from 'mumble-client-codecs-browser'
 import BufferQueueNode from 'web-audio-buffer-queue'
@@ -105,6 +106,17 @@ class SettingsDialog {
     this.testVadLevel = ko.observable(0)
     this.testVadActive = ko.observable(false)
     this.showAvatars = ko.observable(settings.showAvatars())
+    // Need to wrap this in a pureComputed to make sure it's always numeric
+    let audioBitrate = ko.observable(settings.audioBitrate)
+    this.audioBitrate = ko.pureComputed({
+      read: audioBitrate,
+      write: (value) => audioBitrate(Number(value))
+    })
+    this.samplesPerPacket = ko.observable(settings.samplesPerPacket)
+    this.msPerPacket = ko.pureComputed({
+      read: () => this.samplesPerPacket() / 48,
+      write: (value) => this.samplesPerPacket(value * 48)
+    })
 
     this._setupTestVad()
     this.vadLevel.subscribe(() => this._setupTestVad())
@@ -128,6 +140,8 @@ class SettingsDialog {
     settings.pttKey = this.pttKey()
     settings.vadLevel = this.vadLevel()
     settings.showAvatars(this.showAvatars())
+    settings.audioBitrate = this.audioBitrate()
+    settings.samplesPerPacket = this.samplesPerPacket()
   }
 
   end () {
@@ -154,6 +168,30 @@ class SettingsDialog {
     keyboardjs.bind('', keydown, keyup)
     this.pttKeyDisplay('> ? <')
   }
+
+  totalBandwidth () {
+    return MumbleClient.calcEnforcableBandwidth(
+      this.audioBitrate(),
+      this.samplesPerPacket(),
+      true
+    )
+  }
+
+  positionBandwidth () {
+    return this.totalBandwidth() - MumbleClient.calcEnforcableBandwidth(
+      this.audioBitrate(),
+      this.samplesPerPacket(),
+      false
+    )
+  }
+
+  overheadBandwidth () {
+    return MumbleClient.calcEnforcableBandwidth(
+      0,
+      this.samplesPerPacket(),
+      false
+    )
+  }
 }
 
 class Settings {

themes/MetroMumbleLight/main.scss

@@ -404,10 +404,10 @@ form {
   z-index: 20;
 }
 .settings-dialog {
-  width: 300px;
-  height: 200px;
-  top: calc(50% - 100px);
-  left: calc(50% - 150px);
+  width: 450px;
+  height: 320px;
+  top: calc(50% - 160px);
+  left: calc(50% - 225px);
 }
 .settings-dialog table {
   width: 100%;