Add setting for voice mode and PTT key
This commit is contained in:
parent
ef14f9b61f
commit
c49dabbfc4
|
@ -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"
|
||||
|
|
63
app/index.js
63
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 () {
|
||||
this.visible = ko.observable(false)
|
||||
this.voiceMode = ko.observable()
|
||||
constructor (settings) {
|
||||
this.voiceMode = ko.observable(settings.voiceMode)
|
||||
this.pttKey = ko.observable(settings.pttKey)
|
||||
this.pttKeyDisplay = ko.observable(settings.pttKey)
|
||||
}
|
||||
|
||||
show () {
|
||||
this.visible(true)
|
||||
applyTo (settings) {
|
||||
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 {
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in a new issue