Add setting for voice mode and PTT key

app/index.html

@@ -21,7 +21,7 @@
     </div>
     <div id="container" style="display: none" data-bind="visible: true">
       <!-- ko with: connectDialog --> 
-      <div class="connect-dialog" data-bind="visible: visible"> 
+      <div class="connect-dialog dialog" data-bind="visible: visible">
           <div class="dialog-header">
             Connect to Server
           </div>
@@ -55,6 +55,36 @@
           </form>
         </div>
       <!-- /ko -->
+      <!-- ko with: settingsDialog -->
+      <div class="settings-dialog dialog" data-bind="visible: $data">
+          <div class="dialog-header">
+            Settings
+          </div>
+          <form data-bind="submit: $root.applySettings">
+            <table>
+                <tr>
+                  <td>Transmission</td>
+                  <td>
+                    <select data-bind='value: voiceMode'>
+                      <option value="cont">Continuous</option>
+                      <option value="vad" disabled>Voice Activity</option>
+                      <option value="ptt">Push To Talk</option>
+                  </td>
+                </tr>
+                <tr data-bind="style: {visibility: voiceMode() == 'ptt' ? 'visible' : 'hidden'}">
+                  <td>PTT Key</td>
+                  <td>
+                    <input type="button" data-bind="value: pttKeyDisplay, click: recordPttKey">
+                  </td>
+                </tr>
+            </table>
+            <div class="dialog-footer">
+              <input class="dialog-close" type="button" data-bind="click: $root.closeSettings" value="Cancel">
+              <input class="dialog-submit" type="submit" value="Apply">
+            </div>
+          </form>
+        </div>
+      <!-- /ko -->
       <script type="text/html" id="user-tag">
         <span class="user-tag" data-bind="text: name"></span>
       </script>
@@ -87,7 +117,7 @@
         <img class="tb-comment" data-bind="click: commentDialog.show"
                       rel="comment" src="/svg/toolbar-comment.svg">
         <div class="divider"></div>
-        <img class="tb-settings" data-bind="click: settingsDialog.show"
+        <img class="tb-settings" data-bind="click: openSettings"
                       rel="settings" src="/svg/config_basic.svg">
         <div class="divider"></div>
         <img class="tb-sourcecode" data-bind="click: openSourceCode"

app/index.js

@@ -7,6 +7,7 @@ import audioContext from 'audio-context'
 import Resampler from 'libsamplerate.js'
 import ko from 'knockout'
 import _dompurify from 'dompurify'
+import keyboardjs from 'keyboardjs'
 
 import { ContinuousVoiceHandler, PushToTalkVoiceHandler, initVoice } from './voice'
 
@@ -53,13 +54,35 @@ function CommentDialog () {
 }
 
 class SettingsDialog {
-  constructor () {
+  constructor (settings) {
-    this.visible = ko.observable(false)
+    this.voiceMode = ko.observable(settings.voiceMode)
-    this.voiceMode = ko.observable()
+    this.pttKey = ko.observable(settings.pttKey)
+    this.pttKeyDisplay = ko.observable(settings.pttKey)
   }
 
-  show () {
+  applyTo (settings) {
-    this.visible(true)
+    settings.voiceMode = this.voiceMode()
+    settings.pttKey = this.pttKey()
+  }
+
+  recordPttKey () {
+    var combo = []
+    const keydown = e => {
+      combo = e.pressedKeys
+      let comboStr = combo.join(' + ')
+      this.pttKeyDisplay('> ' + comboStr + ' <')
+    }
+    const keyup = () => {
+      keyboardjs.unbind('', keydown, keyup)
+      let comboStr = combo.join(' + ')
+      if (comboStr) {
+        this.pttKey(comboStr).pttKeyDisplay(comboStr)
+      } else {
+        this.pttKeyDisplay(this.pttKey())
+      }
+    }
+    keyboardjs.bind('', keydown, keyup)
+    this.pttKeyDisplay('> ? <')
   }
 }
 
@@ -67,6 +90,13 @@ class Settings {
   constructor () {
     const load = key => window.localStorage.getItem('mumble.' + key)
     this.voiceMode = load('voiceMode') || 'cont'
+    this.pttKey = load('pttKey') || 'ctrl + shift'
+  }
+
+  save () {
+    const save = (key, val) => window.localStorage.setItem('mumble.' + key, val)
+    save('voiceMode', this.voiceMode)
+    save('pttKey', this.pttKey)
   }
 }
 
@@ -77,7 +107,7 @@ class GlobalBindings {
     this.connectDialog = new ConnectDialog()
     this.connectionInfo = new ConnectionInfo()
     this.commentDialog = new CommentDialog()
-    this.settingsDialog = new SettingsDialog()
+    this.settingsDialog = ko.observable()
     this.log = ko.observableArray()
     this.thisUser = ko.observable()
     this.root = ko.observable()
@@ -88,6 +118,25 @@ class GlobalBindings {
       this.selected(element)
     }
 
+    this.openSettings = () => {
+      this.settingsDialog(new SettingsDialog(this.settings))
+    }
+
+    this.applySettings = () => {
+      const settingsDialog = this.settingsDialog()
+
+      settingsDialog.applyTo(this.settings)
+
+      this._updateVoiceHandler()
+
+      this.settings.save()
+      this.settingsDialog(null)
+    }
+
+    this.closeSettings = () => {
+      this.settingsDialog(null)
+    }
+
     this.getTimeString = () => {
       return '[' + new Date().toLocaleTimeString('en-US') + ']'
     }
@@ -309,7 +358,7 @@ class GlobalBindings {
       if (mode === 'cont') {
         voiceHandler = new ContinuousVoiceHandler(this.client)
       } else if (mode === 'ptt') {
-        voiceHandler = new PushToTalkVoiceHandler(this.client, 'ctrl + shift')
+        voiceHandler = new PushToTalkVoiceHandler(this.client, this.settings.pttKey)
       } else if (mode === 'vad') {
 
       } else {

themes/MetroMumbleLight/main.css

@@ -195,7 +195,7 @@ form {
 .message-content p {
   margin: 0;
 }
-.tb-information, .tb-record, .tb-comment, .tb-settings{
+.tb-information, .tb-record, .tb-comment {
   filter: grayscale(100%);
 }
 .dialog-header {
@@ -230,17 +230,38 @@ form {
   text-align: center;
   width: 100%
 }
-.connect-dialog {
+.dialog {
   position: absolute;
-  width: 300px;
-  height: 227px;
-  top: calc(50% - 100px);
-  left: calc(50% - 150px);
   background-color: #eee;
   border: 1px gray solid;
   box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
   z-index: 20;
 }
+.settings-dialog {
+  width: 300px;
+  height: 156px;
+  top: calc(50% - 100px);
+  left: calc(50% - 150px);
+}
+.settings-dialog table {
+  width: 100%;
+  padding: 5px;
+}
+.settings-dialog td {
+  width: 50%;
+}
+.settings-dialog table select {
+  width: 100%;
+}
+.settings-dialog table input {
+  width: 100%;
+}
+.connect-dialog {
+  width: 300px;
+  height: 227px;
+  top: calc(50% - 100px);
+  left: calc(50% - 150px);
+}
 .connect-dialog input[type=text] {
   font-size: 15px;
   border: 1px gray solid;