Initial commit
This commit is contained in:
johni0702
commit
7bad9baaaf
63 changed files with 2135 additions and 0 deletions
BIN
app/favicon/android-chrome-192x192.png
Normal file
BIN
app/favicon/android-chrome-192x192.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
app/favicon/android-chrome-512x512.png
Normal file
BIN
app/favicon/android-chrome-512x512.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
BIN
app/favicon/apple-touch-icon.png
Normal file
BIN
app/favicon/apple-touch-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
9
app/favicon/browserconfig.xml
Normal file
9
app/favicon/browserconfig.xml
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<browserconfig>
|
||||
<msapplication>
|
||||
<tile>
|
||||
<square150x150logo src="#require('./mstile-150x150.png')"/>
|
||||
<TileColor>#da532c</TileColor>
|
||||
</tile>
|
||||
</msapplication>
|
||||
</browserconfig>
|
||||
BIN
app/favicon/favicon-16x16.png
Normal file
BIN
app/favicon/favicon-16x16.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1 KiB |
BIN
app/favicon/favicon-32x32.png
Normal file
BIN
app/favicon/favicon-32x32.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
BIN
app/favicon/favicon.ico
Normal file
BIN
app/favicon/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
17
app/favicon/manifest.json
Normal file
17
app/favicon/manifest.json
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
{
|
||||
"name": "Mumble",
|
||||
"icons": [
|
||||
{
|
||||
"src": "#require('./android-chrome-192x192.png')",
|
||||
"sizes": "192x192",
|
||||
"type": "image\/png"
|
||||
},
|
||||
{
|
||||
"src": "#require('./android-chrome-512x512.png')",
|
||||
"sizes": "512x512",
|
||||
"type": "image\/png"
|
||||
}
|
||||
],
|
||||
"theme_color": "#ffffff",
|
||||
"display": "standalone"
|
||||
}
|
||||
BIN
app/favicon/mstile-144x144.png
Normal file
BIN
app/favicon/mstile-144x144.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
app/favicon/mstile-150x150.png
Normal file
BIN
app/favicon/mstile-150x150.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
app/favicon/mstile-310x150.png
Normal file
BIN
app/favicon/mstile-310x150.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
app/favicon/mstile-310x310.png
Normal file
BIN
app/favicon/mstile-310x310.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
BIN
app/favicon/mstile-70x70.png
Normal file
BIN
app/favicon/mstile-70x70.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
44
app/favicon/safari-pinned-tab.svg
Normal file
44
app/favicon/safari-pinned-tab.svg
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
|
||||
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
|
||||
width="700.000000pt" height="700.000000pt" viewBox="0 0 700.000000 700.000000"
|
||||
preserveAspectRatio="xMidYMid meet">
|
||||
<metadata>
|
||||
Created by potrace 1.11, written by Peter Selinger 2001-2013
|
||||
</metadata>
|
||||
<g transform="translate(0.000000,700.000000) scale(0.100000,-0.100000)"
|
||||
fill="#000000" stroke="none">
|
||||
<path d="M3245 6924 c-230 -22 -403 -51 -577 -94 -1229 -307 -2191 -1269
|
||||
-2498 -2498 -30 -123 -60 -282 -82 -442 -17 -128 -17 -652 0 -780 76 -553 226
|
||||
-984 498 -1422 510 -824 1365 -1403 2314 -1567 235 -41 302 -46 600 -46 298 0
|
||||
365 5 600 46 949 164 1804 743 2314 1567 272 438 422 869 498 1422 17 128 17
|
||||
652 0 780 -88 645 -296 1171 -654 1652 -564 758 -1367 1229 -2323 1364 -105
|
||||
14 -594 27 -690 18z m559 -75 c553 -44 1107 -241 1585 -566 185 -126 309 -229
|
||||
487 -407 281 -282 462 -531 638 -882 255 -509 369 -1057 344 -1657 -29 -692
|
||||
-275 -1352 -719 -1923 -106 -137 -392 -426 -526 -532 -515 -406 -1066 -639
|
||||
-1718 -724 -134 -17 -656 -17 -790 0 -652 85 -1203 318 -1718 724 -134 106
|
||||
-420 395 -526 532 -444 571 -690 1231 -719 1923 -21 502 54 959 229 1400 122
|
||||
308 301 614 511 877 105 130 374 399 504 504 524 420 1161 678 1810 732 224
|
||||
18 368 18 608 -1z"/>
|
||||
<path d="M4199 6540 c-103 -18 -191 -76 -229 -151 -39 -75 -42 -136 -39 -874
|
||||
2 -701 2 -711 -19 -776 -39 -118 -103 -189 -210 -230 -80 -31 -265 -38 -347
|
||||
-14 -177 51 -255 131 -288 295 -13 64 -15 180 -10 810 6 803 9 755 -49 820
|
||||
-76 84 -161 110 -351 110 -167 0 -235 -10 -366 -52 -350 -112 -616 -367 -711
|
||||
-683 -51 -169 -60 -312 -60 -992 l0 -542 -83 -39 c-252 -118 -482 -353 -631
|
||||
-645 -228 -447 -268 -1030 -105 -1522 137 -410 404 -754 704 -905 135 -68 229
|
||||
-91 375 -91 184 0 257 34 277 129 9 40 11 3221 3 3822 -5 385 -1 446 41 607
|
||||
25 93 77 196 131 258 49 56 145 104 222 112 l58 6 -3 -634 c-4 -721 -7 -697
|
||||
78 -868 113 -229 305 -340 643 -371 188 -18 526 -8 645 18 173 39 278 88 376
|
||||
179 96 89 157 199 195 353 18 70 19 115 15 699 l-3 624 69 -5 c76 -6 157 -37
|
||||
210 -82 68 -58 129 -179 158 -315 35 -167 37 -312 30 -2171 -3 -1004 -7 -1897
|
||||
-8 -1985 -1 -186 11 -246 67 -311 l34 -40 -63 -47 c-35 -25 -104 -70 -152 -99
|
||||
l-88 -53 -317 -3 -317 -3 -12 23 c-35 69 -138 141 -264 184 -74 25 -93 27
|
||||
-245 28 -183 1 -245 -10 -356 -64 -296 -144 -264 -436 62 -551 74 -26 210 -49
|
||||
290 -49 89 0 220 25 301 58 80 32 100 45 159 102 l43 41 313 -1 c337 0 378 4
|
||||
476 54 122 62 480 320 502 361 9 17 35 30 99 50 434 134 750 509 885 1050 78
|
||||
314 85 646 21 970 -35 173 -75 289 -160 460 -147 296 -337 496 -596 630 -58
|
||||
30 -112 61 -119 70 -17 20 -17 43 -1 460 15 397 10 685 -14 825 -43 239 -118
|
||||
414 -244 568 -110 134 -428 303 -691 367 -112 27 -261 38 -331 25z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.7 KiB |
221
app/index.html
Normal file
221
app/index.html
Normal file
|
|
@ -0,0 +1,221 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<!-- Favicon as generated by realfavicongenerator.net (slightly modified for webpack) -->
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" href="favicon/favicon-32x32.png" sizes="32x32">
|
||||
<link rel="icon" type="image/png" href="favicon/favicon-16x16.png" sizes="16x16">
|
||||
<link rel="manifest" href="favicon/manifest.json">
|
||||
<link rel="mask-icon" href="favicon/safari-pinned-tab.svg" color="#5bbad5">
|
||||
<link rel="shortcut icon" href="favicon/favicon.ico">
|
||||
<meta name="apple-mobile-web-app-title" content="Mumble">
|
||||
<meta name="application-name" content="Mumble">
|
||||
<meta name="msapplication-config" content="${require('./favicon/browserconfig.xml')}">
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="/loading.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="loading-container" data-bind="css: { loaded: true }">
|
||||
<div class="loading-circle" data-bind="css: { loaded: true }"></div>
|
||||
</div>
|
||||
<div id="container" style="display: none" data-bind="visible: true">
|
||||
<!-- ko with: connectDialog -->
|
||||
<div class="connect-dialog" data-bind="visible: visible">
|
||||
<div class="dialog-header">
|
||||
Connect to Server
|
||||
</div>
|
||||
<form data-bind="submit: connect">
|
||||
<table>
|
||||
<tr>
|
||||
<td>Address</td>
|
||||
<td><input id="address" type="text" data-bind="value: address"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Port</td>
|
||||
<td><input id="port" type="text" data-bind="value: port"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Token</td>
|
||||
<td><input id="token" type="text" data-bind="value: token"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Username</td>
|
||||
<td><input id="username" type="text" data-bind="value: username"></td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="dialog-footer">
|
||||
<input class="dialog-close" type="button" data-bind="click: hide" value="Cancel">
|
||||
<input class="dialog-submit" type="submit" value="Connect">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<!-- /ko -->
|
||||
<script type="text/html" id="user-tag">
|
||||
<span class="user-tag" data-bind="text: name"></span>
|
||||
</script>
|
||||
<script type="text/html" id="channel-tag">
|
||||
<span class="channel-tag" data-bind="text: name"></span>
|
||||
</script>
|
||||
<div class="toolbar">
|
||||
<img class="handle-horizontal" src="/svg/handle_horizontal.svg">
|
||||
<img class="handle-vertical" src="/svg/handle_horizontal.svg">
|
||||
<img class="tb-connect" data-bind="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">
|
||||
<div class="divider"></div>
|
||||
<img class="tb-mute" data-bind="visible: !thisUser() || !thisUser().selfMute(),
|
||||
click: function () { requestMute(thisUser) }"
|
||||
rel="mute" src="/svg/audio-input-microphone.svg">
|
||||
<img class="tb-unmute tb-active" data-bind="visible: thisUser() && thisUser().selfMute(),
|
||||
click: function () { requestUnmute(thisUser) }"
|
||||
rel="unmute" src="/svg/audio-input-microphone-muted.svg">
|
||||
<img class="tb-deaf" data-bind="visible: !thisUser() || !thisUser().selfDeaf(),
|
||||
click: function () { requestDeaf(thisUser) }"
|
||||
rel="deaf" src="/svg/audio-output.svg">
|
||||
<img class="tb-undeaf tb-active" data-bind="visible: thisUser() && thisUser().selfDeaf(),
|
||||
click: function () { requestUndeaf(thisUser) }"
|
||||
rel="undeaf" src="/svg/audio-output-deafened.svg">
|
||||
<img class="tb-record" data-bind="click: function(){}"
|
||||
rel="record" src="/svg/media-record.svg">
|
||||
<div class="divider"></div>
|
||||
<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"
|
||||
rel="settings" src="/svg/config_basic.svg">
|
||||
<div class="divider"></div>
|
||||
<img class="tb-sourcecode" data-bind="click: openSourceCode"
|
||||
rel="Source Code" src="/svg/source-code.svg">
|
||||
</div>
|
||||
<div class="chat">
|
||||
<script type="text/html" id="log-generic">
|
||||
<span data-bind="text: value"></span>
|
||||
</script>
|
||||
<script type="text/html" id="log-welcome-message">
|
||||
Welcome message: <span data-bind="html: message"></span>
|
||||
</script>
|
||||
<script type="text/html" id="log-chat-message">
|
||||
<span data-bind="visible: channel">
|
||||
(Channel)
|
||||
</span>
|
||||
<span data-bind="template: { name: 'user-tag', data: user }"></span>:
|
||||
<span class="message-content" data-bind="html: message"></span>
|
||||
</script>
|
||||
<script type="text/html" id="log-chat-message-self">
|
||||
To
|
||||
<span data-bind="template: { if: $data.channel, name: 'channel-tag', data: $data.channel }">
|
||||
</span><span data-bind="template: { if: $data.user, name: 'user-tag', data: $data.user }">
|
||||
</span>:
|
||||
<span class="message-content" data-bind="html: message"></span>
|
||||
</script>
|
||||
<script type="text/html" id="log-disconnect">
|
||||
</script>
|
||||
<div class="log" data-bind="foreach: {
|
||||
data: log,
|
||||
afterRender: function (e) {
|
||||
[].forEach.call(e[1].getElementsByTagName('a'), function(e){e.target = '_blank'})
|
||||
}
|
||||
}">
|
||||
<div class="log-entry">
|
||||
<span class="log-timestamp" data-bind="text: $root.getTimeString()"></span>
|
||||
<!-- ko template: { data: $data, name: function(l) { return 'log-' + l.type; } } -->
|
||||
<!-- /ko -->
|
||||
</div>
|
||||
</div>
|
||||
<form data-bind="submit: submitMessageBox">
|
||||
<input id="message-box" type="text" data-bind="
|
||||
attr: { placeholder: messageBoxHint }, textInput: messageBox">
|
||||
</form>
|
||||
</div>
|
||||
<script type="text/html" id="channel">
|
||||
<div class="channel" data-bind="
|
||||
click: $root.select,
|
||||
event: {
|
||||
dblclick: $root.requestMove.bind($root, $root.thisUser())
|
||||
},
|
||||
css: {
|
||||
selected: $root.selected() === $data,
|
||||
currentChannel: users.indexOf($root.thisUser()) !== -1
|
||||
}">
|
||||
<div class="channel-status">
|
||||
<img class="channel-description" data-bind="visible: description"
|
||||
alt="description" src="/svg/comment.svg">
|
||||
</div>
|
||||
<div data-bind="if: description">
|
||||
<div class="channel-description tooltip" data-bind="html: description"></div>
|
||||
</div>
|
||||
<img class="channel-icon" src="/svg/channel.svg"
|
||||
data-bind="visible: !linked() && $root.thisUser().channel() !== $data">
|
||||
<img class="channel-icon-active" src="/svg/channel_active.svg"
|
||||
data-bind="visible: $root.thisUser().channel() === $data">
|
||||
<img class="channel-icon-linked" src="/svg/channel_linked.svg"
|
||||
data-bind="visible: linked() && $root.thisUser().channel() !== $data">
|
||||
<div class="channel-name" data-bind="text: name"></div>
|
||||
</div>
|
||||
<!-- ko if: expanded -->
|
||||
<!-- ko foreach: users -->
|
||||
<div class="user-wrapper">
|
||||
<div class="user-tree"></div>
|
||||
<div class="user" data-bind="
|
||||
click: $root.select,
|
||||
css: {
|
||||
thisClient: $root.thisUser() === $data,
|
||||
selected: $root.selected() === $data
|
||||
}">
|
||||
<div class="user-status" data-bind="attr: { title: state }">
|
||||
<img class="user-comment" data-bind="visible: comment"
|
||||
alt="comment" src="/svg/comment.svg">
|
||||
<img class="user-server-mute" data-bind="visible: mute"
|
||||
alt="server mute" src="/svg/muted_server.svg">
|
||||
<img class="user-suppress-mute" data-bind="visible: suppress"
|
||||
alt="suppressed" src="/svg/muted_suppressed.svg">
|
||||
<img class="user-self-mute" data-bind="visible: selfMute"
|
||||
alt="self mute" src="/svg/muted_self.svg">
|
||||
<img class="user-server-deaf" data-bind="visible: deaf"
|
||||
alt="server deaf" src="/svg/deafened_server.svg">
|
||||
<img class="user-self-deaf" data-bind="visible: selfDeaf"
|
||||
alt="self deaf" src="/svg/deafened_self.svg">
|
||||
<img class="user-authenticated" data-bind="visible: uid"
|
||||
alt="authenticated" src="/svg/authenticated.svg">
|
||||
</div>
|
||||
<div data-bind="if: comment">
|
||||
<div class="user-comment tooltip" data-bind="html: comment"></div>
|
||||
</div>
|
||||
<img class="user-talk-off" data-bind="visible: talking() == 'off'"
|
||||
alt="talk off" src="/svg/talking_off.svg">
|
||||
<img class="user-talk-on" data-bind="visible: talking() == 'on'"
|
||||
alt="talk on" src="/svg/talking_on.svg">
|
||||
<img class="user-talk-whisper" data-bind="visible: talking() == 'whisper'"
|
||||
alt="whisper" src="/svg/talking_whisper.svg">
|
||||
<img class="user-talk-shout" data-bind="visible: talking() == 'shout'"
|
||||
alt="shout" src="/svg/talking_alt.svg">
|
||||
<div class="user-name" data-bind="text: name"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /ko -->
|
||||
<!-- ko foreach: channels -->
|
||||
<div class="channel-wrapper">
|
||||
<!-- ko ifnot: users().length || channels().length -->
|
||||
<div class="channel-tree"></div>
|
||||
<!-- /ko -->
|
||||
<div class="branch" data-bind="if: users().length || channels().length">
|
||||
<img class="branch-open" src="/svg/branch_open.svg"
|
||||
data-bind="click: expanded.bind($data, false), visible: expanded()">
|
||||
<img class="branch-closed" src="/svg/branch_closed.svg"
|
||||
data-bind="click: expanded.bind($data, true), visible: !expanded()">
|
||||
</div>
|
||||
<div class="channel-sub" data-bind="template: {name: 'channel', data: $data}"></div>
|
||||
</div>
|
||||
<!-- /ko -->
|
||||
<!-- /ko -->
|
||||
</script>
|
||||
<div class="channel-root-container" data-bind="if: root">
|
||||
<div class="channel-root" data-bind="template: {name: 'channel', data: root}"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<link rel="stylesheet" type="text/css" href="/main.css">
|
||||
<script src="index.js"></script>
|
||||
</html>
|
||||
512
app/index.js
Normal file
512
app/index.js
Normal file
|
|
@ -0,0 +1,512 @@
|
|||
import url from 'url'
|
||||
import mumbleConnect from 'mumble-client-websocket'
|
||||
import CodecsBrowser from 'mumble-client-codecs-browser'
|
||||
import BufferQueueNode from 'web-audio-buffer-queue'
|
||||
import MicrophoneStream from 'microphone-stream'
|
||||
import audioContext from 'audio-context'
|
||||
import chunker from 'stream-chunker'
|
||||
import Resampler from 'libsamplerate.js'
|
||||
import getUserMedia from 'getusermedia'
|
||||
import ko from 'knockout'
|
||||
import _dompurify from 'dompurify'
|
||||
|
||||
const dompurify = _dompurify(window)
|
||||
|
||||
function sanitize (html) {
|
||||
return dompurify.sanitize(html, {
|
||||
ALLOWED_TAGS: ['br', 'b', 'i', 'u', 'a', 'span', 'p']
|
||||
})
|
||||
}
|
||||
|
||||
// GUI
|
||||
|
||||
function ConnectDialog () {
|
||||
var self = this
|
||||
self.address = ko.observable('')
|
||||
self.port = ko.observable('443')
|
||||
self.token = ko.observable('')
|
||||
self.username = ko.observable('')
|
||||
self.visible = ko.observable(true)
|
||||
self.show = self.visible.bind(self.visible, true)
|
||||
self.hide = self.visible.bind(self.visible, false)
|
||||
self.connect = function () {
|
||||
self.hide()
|
||||
ui.connect(self.username(), self.address(), self.port(), self.token())
|
||||
}
|
||||
}
|
||||
|
||||
function ConnectionInfo () {
|
||||
var self = this
|
||||
self.visible = ko.observable(false)
|
||||
self.show = function () {
|
||||
self.visible(true)
|
||||
}
|
||||
}
|
||||
|
||||
function CommentDialog () {
|
||||
var self = this
|
||||
self.visible = ko.observable(false)
|
||||
self.show = function () {
|
||||
self.visible(true)
|
||||
}
|
||||
}
|
||||
|
||||
function SettingsDialog () {
|
||||
var self = this
|
||||
self.visible = ko.observable(false)
|
||||
self.show = function () {
|
||||
self.visible(true)
|
||||
}
|
||||
}
|
||||
|
||||
class GlobalBindings {
|
||||
constructor () {
|
||||
this.client = null
|
||||
this.connectDialog = new ConnectDialog()
|
||||
this.connectionInfo = new ConnectionInfo()
|
||||
this.commentDialog = new CommentDialog()
|
||||
this.settingsDialog = new SettingsDialog()
|
||||
this.log = ko.observableArray()
|
||||
this.thisUser = ko.observable()
|
||||
this.root = ko.observable()
|
||||
this.messageBox = ko.observable('')
|
||||
this.selected = ko.observable()
|
||||
|
||||
this.select = element => {
|
||||
this.selected(element)
|
||||
}
|
||||
|
||||
this.getTimeString = () => {
|
||||
return '[' + new Date().toLocaleTimeString('en-US') + ']'
|
||||
}
|
||||
|
||||
this.connect = (username, host, port, token) => {
|
||||
this.resetClient()
|
||||
|
||||
log('Connecting to server ', host)
|
||||
|
||||
// TODO: token
|
||||
mumbleConnect(`wss://${host}:${port}`, {
|
||||
username: username,
|
||||
codecs: CodecsBrowser
|
||||
}).done(client => {
|
||||
log('Connected!')
|
||||
|
||||
this.client = client
|
||||
|
||||
// Prepare for connection errors
|
||||
client.on('error', function (err) {
|
||||
log('Connection error:', err)
|
||||
this.resetClient()
|
||||
})
|
||||
|
||||
// Register all channels, recursively
|
||||
const registerChannel = channel => {
|
||||
this._newChannel(channel)
|
||||
channel.children.forEach(registerChannel)
|
||||
}
|
||||
registerChannel(client.root)
|
||||
|
||||
// Register all users
|
||||
client.users.forEach(user => this._newUser(user))
|
||||
|
||||
// Register future channels
|
||||
client.on('newChannel', channel => this._newChannel(channel))
|
||||
// Register future users
|
||||
client.on('newUser', user => this._newUser(user))
|
||||
|
||||
// Handle messages
|
||||
client.on('message', (sender, message, users, channels, trees) => {
|
||||
ui.log.push({
|
||||
type: 'chat-message',
|
||||
user: sender.__ui,
|
||||
channel: channels.length > 0,
|
||||
message: sanitize(message)
|
||||
})
|
||||
})
|
||||
|
||||
// Set own user and root channel
|
||||
this.thisUser(client.self.__ui)
|
||||
this.root(client.root.__ui)
|
||||
// Upate linked channels
|
||||
this._updateLinks()
|
||||
// Log welcome message
|
||||
if (client.welcomeMessage) {
|
||||
this.log.push({
|
||||
type: 'welcome-message',
|
||||
message: sanitize(client.welcomeMessage)
|
||||
})
|
||||
}
|
||||
}, err => {
|
||||
log('Connection error:', err)
|
||||
})
|
||||
}
|
||||
|
||||
this._newUser = user => {
|
||||
const simpleProperties = {
|
||||
uniqueId: 'uid',
|
||||
username: 'name',
|
||||
mute: 'mute',
|
||||
deaf: 'deaf',
|
||||
suppress: 'suppress',
|
||||
selfMute: 'selfMute',
|
||||
selfDeaf: 'selfDeaf',
|
||||
comment: 'comment'
|
||||
}
|
||||
var ui = user.__ui = {
|
||||
model: user,
|
||||
talking: ko.observable('off'),
|
||||
channel: ko.observable()
|
||||
}
|
||||
Object.entries(simpleProperties).forEach(key => {
|
||||
ui[key[1]] = ko.observable(user[key[0]])
|
||||
})
|
||||
ui.state = ko.pureComputed(userToState, ui)
|
||||
if (user.channel) {
|
||||
ui.channel(user.channel.__ui)
|
||||
ui.channel().users.push(ui)
|
||||
ui.channel().users.sort(compareUsers)
|
||||
}
|
||||
|
||||
user.on('update', (actor, properties) => {
|
||||
Object.entries(simpleProperties).forEach(key => {
|
||||
if (properties[key[0]] !== undefined) {
|
||||
ui[key[1]](properties[key[0]])
|
||||
}
|
||||
})
|
||||
if (properties.channel !== undefined) {
|
||||
if (ui.channel()) {
|
||||
ui.channel().users.remove(ui)
|
||||
}
|
||||
ui.channel(properties.channel.__ui)
|
||||
ui.channel().users.push(ui)
|
||||
ui.channel().users.sort(compareUsers)
|
||||
this._updateLinks()
|
||||
}
|
||||
}).on('remove', () => {
|
||||
if (ui.channel()) {
|
||||
ui.channel().users.remove(ui)
|
||||
}
|
||||
}).on('voice', stream => {
|
||||
console.log(`User ${user.username} started takling`)
|
||||
var userNode = new BufferQueueNode({
|
||||
audioContext: audioContext
|
||||
})
|
||||
userNode.connect(audioContext.destination)
|
||||
|
||||
var resampler = new Resampler({
|
||||
unsafe: true,
|
||||
type: Resampler.Type.ZERO_ORDER_HOLD,
|
||||
ratio: audioContext.sampleRate / 48000
|
||||
})
|
||||
resampler.pipe(userNode)
|
||||
|
||||
stream.on('data', data => {
|
||||
if (data.target === 'normal') {
|
||||
ui.talking('on')
|
||||
} else if (data.target === 'shout') {
|
||||
ui.talking('shout')
|
||||
} else if (data.target === 'whisper') {
|
||||
ui.talking('whisper')
|
||||
}
|
||||
resampler.write(Buffer.from(data.pcm.buffer))
|
||||
}).on('end', () => {
|
||||
console.log(`User ${user.username} stopped takling`)
|
||||
ui.talking('off')
|
||||
resampler.end()
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
this._newChannel = channel => {
|
||||
const simpleProperties = {
|
||||
position: 'position',
|
||||
name: 'name',
|
||||
description: 'description'
|
||||
}
|
||||
var ui = channel.__ui = {
|
||||
model: channel,
|
||||
expanded: ko.observable(true),
|
||||
parent: ko.observable(),
|
||||
channels: ko.observableArray(),
|
||||
users: ko.observableArray(),
|
||||
linked: ko.observable(false)
|
||||
}
|
||||
Object.entries(simpleProperties).forEach(key => {
|
||||
ui[key[1]] = ko.observable(channel[key[0]])
|
||||
})
|
||||
if (channel.parent) {
|
||||
ui.parent(channel.parent.__ui)
|
||||
ui.parent().channels.push(ui)
|
||||
ui.parent().channels.sort(compareChannels)
|
||||
}
|
||||
this._updateLinks()
|
||||
|
||||
channel.on('update', properties => {
|
||||
Object.entries(simpleProperties).forEach(key => {
|
||||
if (properties[key[0]] !== undefined) {
|
||||
ui[key[1]](properties[key[0]])
|
||||
}
|
||||
})
|
||||
if (properties.parent !== undefined) {
|
||||
if (ui.parent()) {
|
||||
ui.parent().channel.remove(ui)
|
||||
}
|
||||
ui.parent(properties.parent.__ui)
|
||||
ui.parent().channels.push(ui)
|
||||
ui.parent().channels.sort(compareChannels)
|
||||
}
|
||||
if (properties.links !== undefined) {
|
||||
this._updateLinks()
|
||||
}
|
||||
}).on('remove', () => {
|
||||
if (ui.parent()) {
|
||||
ui.parent().channels.remove(ui)
|
||||
}
|
||||
this._updateLinks()
|
||||
})
|
||||
}
|
||||
|
||||
this.resetClient = () => {
|
||||
if (this.client) {
|
||||
this.client.disconnect()
|
||||
}
|
||||
this.client = null
|
||||
this.thisUser(null).root(null).selected(null)
|
||||
}
|
||||
|
||||
this.connected = () => this.thisUser() != null
|
||||
|
||||
this.messageBoxHint = ko.pureComputed(() => {
|
||||
if (!this.thisUser()) {
|
||||
return '' // Not yet connected
|
||||
}
|
||||
var target = this.selected()
|
||||
if (!target) {
|
||||
target = this.thisUser()
|
||||
}
|
||||
if (target === this.thisUser()) {
|
||||
target = target.channel()
|
||||
}
|
||||
if (target.users) { // Channel
|
||||
return "Type message to channel '" + target.name() + "' here"
|
||||
} else { // User
|
||||
return "Type message to user '" + target.name() + "' here"
|
||||
}
|
||||
})
|
||||
|
||||
this.submitMessageBox = () => {
|
||||
this.sendMessage(this.selected(), this.messageBox())
|
||||
this.messageBox('')
|
||||
}
|
||||
|
||||
this.sendMessage = (target, message) => {
|
||||
if (this.connected()) {
|
||||
// If no target is selected, choose our own user
|
||||
if (!target) {
|
||||
target = this.thisUser()
|
||||
}
|
||||
// If target is our own user, send to our channel
|
||||
if (target === this.thisUser()) {
|
||||
target = target.channel()
|
||||
}
|
||||
// Send message
|
||||
target.model.sendMessage(message)
|
||||
if (target.users) { // Channel
|
||||
this.log.push({
|
||||
type: 'chat-message-self',
|
||||
message: sanitize(message),
|
||||
channel: target
|
||||
})
|
||||
} else { // User
|
||||
this.log.push({
|
||||
type: 'chat-message-self',
|
||||
message: sanitize(message),
|
||||
user: target
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.requestMove = (user, channel) => {
|
||||
if (this.connected()) {
|
||||
user.model.setChannel(channel.model)
|
||||
}
|
||||
}
|
||||
|
||||
this.requestMute = user => {
|
||||
if (this.connected()) {
|
||||
if (user === this.thisUser) {
|
||||
this.client.setSelfMute(true)
|
||||
} else {
|
||||
user.model.setMute(true)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.requestDeaf = user => {
|
||||
if (this.connected()) {
|
||||
if (user === this.thisUser) {
|
||||
this.client.setSelfDeaf(true)
|
||||
} else {
|
||||
user.model.setDeaf(true)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.requestUnmute = user => {
|
||||
if (this.connected()) {
|
||||
if (user === this.thisUser) {
|
||||
this.client.setSelfMute(false)
|
||||
} else {
|
||||
user.model.setMute(false)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.requestUndeaf = user => {
|
||||
if (this.connected()) {
|
||||
if (user === this.thisUser) {
|
||||
this.client.setSelfDeaf(false)
|
||||
} else {
|
||||
user.model.setDeaf(false)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this._updateLinks = () => {
|
||||
if (!this.thisUser()) {
|
||||
return
|
||||
}
|
||||
|
||||
var allChannels = getAllChannels(this.root(), [])
|
||||
var ownChannel = this.thisUser().channel().model
|
||||
var allLinked = findLinks(ownChannel, [])
|
||||
allChannels.forEach(channel => {
|
||||
channel.linked(allLinked.indexOf(channel.model) !== -1)
|
||||
})
|
||||
|
||||
function findLinks (channel, knownLinks) {
|
||||
knownLinks.push(channel)
|
||||
channel.links.forEach(next => {
|
||||
if (next && knownLinks.indexOf(next) === -1) {
|
||||
findLinks(next, knownLinks)
|
||||
}
|
||||
})
|
||||
allChannels.map(c => c.model).forEach(next => {
|
||||
if (next && knownLinks.indexOf(next) === -1 && next.links.indexOf(channel) !== -1) {
|
||||
findLinks(next, knownLinks)
|
||||
}
|
||||
})
|
||||
return knownLinks
|
||||
}
|
||||
|
||||
function getAllChannels (channel, channels) {
|
||||
channels.push(channel)
|
||||
channel.channels().forEach(next => getAllChannels(next, channels))
|
||||
return channels
|
||||
}
|
||||
}
|
||||
|
||||
this.openSourceCode = () => {
|
||||
var homepage = require('../package.json').homepage
|
||||
window.open(homepage, '_blank').focus()
|
||||
}
|
||||
}
|
||||
}
|
||||
var ui = new GlobalBindings()
|
||||
|
||||
// Used only for debugging
|
||||
window.mumbleUi = ui
|
||||
|
||||
window.onload = function () {
|
||||
var queryParams = url.parse(document.location.href, true).query
|
||||
if (queryParams.address) {
|
||||
ui.connectDialog.address(queryParams.address)
|
||||
}
|
||||
if (queryParams.port) {
|
||||
ui.connectDialog.port(queryParams.port)
|
||||
}
|
||||
if (queryParams.token) {
|
||||
ui.connectDialog.token(queryParams.token)
|
||||
}
|
||||
if (queryParams.username) {
|
||||
ui.connectDialog.username(queryParams.username)
|
||||
}
|
||||
ko.applyBindings(ui)
|
||||
}
|
||||
|
||||
function log () {
|
||||
console.log.apply(console, arguments)
|
||||
var args = []
|
||||
for (var i = 0; i < arguments.length; i++) {
|
||||
args.push(arguments[i])
|
||||
}
|
||||
ui.log.push({
|
||||
type: 'generic',
|
||||
value: args.join(' ')
|
||||
})
|
||||
}
|
||||
|
||||
function compareChannels (c1, c2) {
|
||||
if (c1.position() === c2.position()) {
|
||||
return c1.name() === c2.name() ? 0 : c1.name() < c2.name() ? -1 : 1
|
||||
}
|
||||
return c1.position() - c2.position()
|
||||
}
|
||||
|
||||
function compareUsers (u1, u2) {
|
||||
return u1.name() === u2.name() ? 0 : u1.name() < u2.name() ? -1 : 1
|
||||
}
|
||||
|
||||
function userToState () {
|
||||
var flags = []
|
||||
// TODO: Friend
|
||||
if (this.uid()) {
|
||||
flags.push('Authenticated')
|
||||
}
|
||||
// TODO: Priority Speaker, Recording
|
||||
if (this.mute()) {
|
||||
flags.push('Muted (server)')
|
||||
}
|
||||
if (this.deaf()) {
|
||||
flags.push('Deafened (server)')
|
||||
}
|
||||
// TODO: Local Ignore (Text messages), Local Mute
|
||||
if (this.selfMute()) {
|
||||
flags.push('Muted (self)')
|
||||
}
|
||||
if (this.selfDeaf()) {
|
||||
flags.push('Deafened (self)')
|
||||
}
|
||||
return flags.join(', ')
|
||||
}
|
||||
|
||||
// Audio input
|
||||
|
||||
var resampler = new Resampler({
|
||||
unsafe: true,
|
||||
type: Resampler.Type.SINC_FASTEST,
|
||||
ratio: 48000 / audioContext.sampleRate
|
||||
})
|
||||
|
||||
var voiceStream
|
||||
resampler.pipe(chunker(4 * 480)).on('data', function (data) {
|
||||
if (!voiceStream && ui.client) {
|
||||
voiceStream = ui.client.createVoiceStream()
|
||||
}
|
||||
if (voiceStream) {
|
||||
voiceStream.write(new Float32Array(data.buffer, data.byteOffset, data.byteLength / 4))
|
||||
}
|
||||
})
|
||||
|
||||
getUserMedia({ audio: true }, function (err, userMedia) {
|
||||
if (err) {
|
||||
log('Cannot initialize user media. Microphone will not work:', err)
|
||||
} else {
|
||||
var micStream = new MicrophoneStream(userMedia, { objectMode: true })
|
||||
micStream.on('data', function (data) {
|
||||
resampler.write(Buffer.from(data.getChannelData(0).buffer))
|
||||
})
|
||||
}
|
||||
})
|
||||
Loading…
Add table
Add a link
Reference in a new issue