cisti/mumble-web
3
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Add server connection info dialog

Browse source
This commit is contained in:
Jonas Herzig 2018-09-26 13:08:40 +02:00
parent e77da5335e
commit b0234654a5
3 changed files with 113 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
app/index.html
View file

@ -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"
rel="information" src="/svg/information_icon.svg">
<img class="tb-information" 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()) }"

58
app/index.js
View file

@ -81,11 +81,52 @@ function ConnectErrorDialog (connectDialog) {
}
}
function ConnectionInfo () {
var self = this
self.visible = ko.observable(false)
self.show = function () {
self.visible(true)
class ConnectionInfo {
constructor (ui) {
this._ui = ui
this.visible = ko.observable(false)
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

14
themes/MetroMumbleLight/main.scss
View file

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