Add setting for voice mode and PTT key

This commit is contained in:
Jonas Herzig 2017-09-19 22:40:54 +02:00
parent ef14f9b61f
commit c49dabbfc4
3 changed files with 115 additions and 15 deletions

View file

@ -21,7 +21,7 @@
</div> </div>
<div id="container" style="display: none" data-bind="visible: true"> <div id="container" style="display: none" data-bind="visible: true">
<!-- ko with: connectDialog --> <!-- ko with: connectDialog -->
<div class="connect-dialog" data-bind="visible: visible"> <div class="connect-dialog dialog" data-bind="visible: visible">
<div class="dialog-header"> <div class="dialog-header">
Connect to Server Connect to Server
</div> </div>
@ -55,6 +55,36 @@
</form> </form>
</div> </div>
<!-- /ko --> <!-- /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"> <script type="text/html" id="user-tag">
<span class="user-tag" data-bind="text: name"></span> <span class="user-tag" data-bind="text: name"></span>
</script> </script>
@ -87,7 +117,7 @@
<img class="tb-comment" data-bind="click: commentDialog.show" <img class="tb-comment" data-bind="click: commentDialog.show"
rel="comment" src="/svg/toolbar-comment.svg"> rel="comment" src="/svg/toolbar-comment.svg">
<div class="divider"></div> <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"> rel="settings" src="/svg/config_basic.svg">
<div class="divider"></div> <div class="divider"></div>
<img class="tb-sourcecode" data-bind="click: openSourceCode" <img class="tb-sourcecode" data-bind="click: openSourceCode"

View file

@ -7,6 +7,7 @@ import audioContext from 'audio-context'
import Resampler from 'libsamplerate.js' import Resampler from 'libsamplerate.js'
import ko from 'knockout' import ko from 'knockout'
import _dompurify from 'dompurify' import _dompurify from 'dompurify'
import keyboardjs from 'keyboardjs'
import { ContinuousVoiceHandler, PushToTalkVoiceHandler, initVoice } from './voice' import { ContinuousVoiceHandler, PushToTalkVoiceHandler, initVoice } from './voice'
@ -53,13 +54,35 @@ function CommentDialog () {
} }
class SettingsDialog { 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 () { constructor () {
const load = key => window.localStorage.getItem('mumble.' + key) const load = key => window.localStorage.getItem('mumble.' + key)
this.voiceMode = load('voiceMode') || 'cont' 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.connectDialog = new ConnectDialog()
this.connectionInfo = new ConnectionInfo() this.connectionInfo = new ConnectionInfo()
this.commentDialog = new CommentDialog() this.commentDialog = new CommentDialog()
this.settingsDialog = new SettingsDialog() this.settingsDialog = ko.observable()
this.log = ko.observableArray() this.log = ko.observableArray()
this.thisUser = ko.observable() this.thisUser = ko.observable()
this.root = ko.observable() this.root = ko.observable()
@ -88,6 +118,25 @@ class GlobalBindings {
this.selected(element) 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 = () => { this.getTimeString = () => {
return '[' + new Date().toLocaleTimeString('en-US') + ']' return '[' + new Date().toLocaleTimeString('en-US') + ']'
} }
@ -309,7 +358,7 @@ class GlobalBindings {
if (mode === 'cont') { if (mode === 'cont') {
voiceHandler = new ContinuousVoiceHandler(this.client) voiceHandler = new ContinuousVoiceHandler(this.client)
} else if (mode === 'ptt') { } else if (mode === 'ptt') {
voiceHandler = new PushToTalkVoiceHandler(this.client, 'ctrl + shift') voiceHandler = new PushToTalkVoiceHandler(this.client, this.settings.pttKey)
} else if (mode === 'vad') { } else if (mode === 'vad') {
} else { } else {

View file

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