website-gemompel/app/index.js

1002 lines
29 KiB
JavaScript
Raw Normal View History

import 'stream-browserify' // see https://github.com/ericgundrum/pouch-websocket-sync-example/commit/2a4437b013092cc7b2cd84cf1499172c84a963a3
import 'subworkers' // polyfill for https://bugs.chromium.org/p/chromium/issues/detail?id=31666
2016-11-27 16:43:59 +00:00
import url from 'url'
import ByteBuffer from 'bytebuffer'
import MumbleClient from 'mumble-client'
import WorkerBasedMumbleConnector from './worker-client'
2016-11-27 16:43:59 +00:00
import BufferQueueNode from 'web-audio-buffer-queue'
import audioContext from 'audio-context'
import ko from 'knockout'
import _dompurify from 'dompurify'
2017-09-19 20:40:54 +00:00
import keyboardjs from 'keyboardjs'
2016-11-27 16:43:59 +00:00
2017-09-20 13:16:49 +00:00
import { ContinuousVoiceHandler, PushToTalkVoiceHandler, VADVoiceHandler, initVoice } from './voice'
2016-11-27 16:43:59 +00:00
const dompurify = _dompurify(window)
function sanitize (html) {
return dompurify.sanitize(html, {
ALLOWED_TAGS: ['br', 'b', 'i', 'u', 'a', 'span', 'p']
})
}
function openContextMenu (event, contextMenu, target) {
contextMenu.posX(event.clientX)
contextMenu.posY(event.clientY)
contextMenu.target(target)
const closeListener = (event) => {
// Always close, no matter where they clicked
setTimeout(() => { // delay to allow click to be actually processed
contextMenu.target(null)
unregister()
})
}
const unregister = () => document.removeEventListener('click', closeListener)
document.addEventListener('click', closeListener)
event.stopPropagation()
event.preventDefault()
}
2016-11-27 16:43:59 +00:00
// GUI
function ContextMenu () {
var self = this
self.posX = ko.observable()
self.posY = ko.observable()
self.target = ko.observable()
}
2016-11-27 16:43:59 +00:00
function ConnectDialog () {
var self = this
self.address = ko.observable('')
self.port = ko.observable('')
2016-11-27 16:43:59 +00:00
self.token = ko.observable('')
self.username = ko.observable('')
2017-04-30 18:34:10 +00:00
self.password = ko.observable('')
self.joinOnly = ko.observable(false)
2016-11-27 16:43:59 +00:00
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()
2017-04-30 18:34:10 +00:00
ui.connect(self.username(), self.address(), self.port(), self.token(), self.password())
2016-11-27 16:43:59 +00:00
}
}
function ConnectErrorDialog (connectDialog) {
var self = this
self.type = ko.observable(0)
self.reason = ko.observable('')
self.username = connectDialog.username
self.password = connectDialog.password
self.joinOnly = connectDialog.joinOnly
self.visible = ko.observable(false)
self.show = self.visible.bind(self.visible, true)
self.hide = self.visible.bind(self.visible, false)
self.connect = () => {
self.hide()
connectDialog.connect()
}
}
2018-09-26 11:08:40 +00:00
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
2016-11-27 16:43:59 +00:00
}
}
function CommentDialog () {
var self = this
self.visible = ko.observable(false)
self.show = function () {
self.visible(true)
}
}
class SettingsDialog {
2017-09-19 20:40:54 +00:00
constructor (settings) {
this.voiceMode = ko.observable(settings.voiceMode)
this.pttKey = ko.observable(settings.pttKey)
this.pttKeyDisplay = ko.observable(settings.pttKey)
2017-09-20 13:16:49 +00:00
this.vadLevel = ko.observable(settings.vadLevel)
this.testVadLevel = ko.observable(0)
this.testVadActive = ko.observable(false)
this.showAvatars = ko.observable(settings.showAvatars())
this.userCountInChannelName = ko.observable(settings.userCountInChannelName())
// Need to wrap this in a pureComputed to make sure it's always numeric
let audioBitrate = ko.observable(settings.audioBitrate)
this.audioBitrate = ko.pureComputed({
read: audioBitrate,
write: (value) => audioBitrate(Number(value))
})
this.samplesPerPacket = ko.observable(settings.samplesPerPacket)
this.msPerPacket = ko.pureComputed({
read: () => this.samplesPerPacket() / 48,
write: (value) => this.samplesPerPacket(value * 48)
})
2017-09-20 13:16:49 +00:00
this._setupTestVad()
this.vadLevel.subscribe(() => this._setupTestVad())
}
_setupTestVad () {
if (this._testVad) {
this._testVad.end()
}
let dummySettings = new Settings({})
this.applyTo(dummySettings)
this._testVad = new VADVoiceHandler(null, dummySettings)
2017-09-20 13:16:49 +00:00
this._testVad.on('started_talking', () => this.testVadActive(true))
.on('stopped_talking', () => this.testVadActive(false))
.on('level', level => this.testVadLevel(level))
testVoiceHandler = this._testVad
}
2017-09-19 20:40:54 +00:00
applyTo (settings) {
settings.voiceMode = this.voiceMode()
settings.pttKey = this.pttKey()
2017-09-20 13:16:49 +00:00
settings.vadLevel = this.vadLevel()
settings.showAvatars(this.showAvatars())
settings.userCountInChannelName(this.userCountInChannelName())
settings.audioBitrate = this.audioBitrate()
settings.samplesPerPacket = this.samplesPerPacket()
2017-09-20 13:16:49 +00:00
}
end () {
this._testVad.end()
testVoiceHandler = null
2017-09-19 20:40:54 +00:00
}
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('> ? <')
}
totalBandwidth () {
return MumbleClient.calcEnforcableBandwidth(
this.audioBitrate(),
this.samplesPerPacket(),
true
)
}
positionBandwidth () {
return this.totalBandwidth() - MumbleClient.calcEnforcableBandwidth(
this.audioBitrate(),
this.samplesPerPacket(),
false
)
}
overheadBandwidth () {
return MumbleClient.calcEnforcableBandwidth(
0,
this.samplesPerPacket(),
false
)
}
}
class Settings {
constructor (defaults) {
const load = key => window.localStorage.getItem('mumble.' + key)
this.voiceMode = load('voiceMode') || defaults.voiceMode
this.pttKey = load('pttKey') || defaults.pttKey
this.vadLevel = load('vadLevel') || defaults.vadLevel
this.toolbarVertical = load('toolbarVertical') || defaults.toolbarVertical
this.showAvatars = ko.observable(load('showAvatars') || defaults.showAvatars)
this.userCountInChannelName = ko.observable(load('userCountInChannelName') || defaults.userCountInChannelName)
this.audioBitrate = Number(load('audioBitrate')) || defaults.audioBitrate
this.samplesPerPacket = Number(load('samplesPerPacket')) || defaults.samplesPerPacket
2017-09-19 20:40:54 +00:00
}
save () {
const save = (key, val) => window.localStorage.setItem('mumble.' + key, val)
save('voiceMode', this.voiceMode)
save('pttKey', this.pttKey)
2017-09-20 13:16:49 +00:00
save('vadLevel', this.vadLevel)
2018-09-23 13:38:11 +00:00
save('toolbarVertical', this.toolbarVertical)
save('showAvatars', this.showAvatars())
save('userCountInChannelName', this.userCountInChannelName())
save('audioBitrate', this.audioBitrate)
save('samplesPerPacket', this.samplesPerPacket)
2016-11-27 16:43:59 +00:00
}
}
class GlobalBindings {
constructor (config) {
this.config = config
this.settings = new Settings(config.settings)
this.connector = new WorkerBasedMumbleConnector()
2016-11-27 16:43:59 +00:00
this.client = null
this.userContextMenu = new ContextMenu()
this.channelContextMenu = new ContextMenu()
2016-11-27 16:43:59 +00:00
this.connectDialog = new ConnectDialog()
this.connectErrorDialog = new ConnectErrorDialog(this.connectDialog)
2018-09-26 11:08:40 +00:00
this.connectionInfo = new ConnectionInfo(this)
2016-11-27 16:43:59 +00:00
this.commentDialog = new CommentDialog()
2017-09-19 20:40:54 +00:00
this.settingsDialog = ko.observable()
2018-09-23 13:38:11 +00:00
this.minimalView = ko.observable(false)
2016-11-27 16:43:59 +00:00
this.log = ko.observableArray()
2018-09-26 11:08:40 +00:00
this.remoteHost = ko.observable()
this.remotePort = ko.observable()
2016-11-27 16:43:59 +00:00
this.thisUser = ko.observable()
this.root = ko.observable()
this.avatarView = ko.observable()
2016-11-27 16:43:59 +00:00
this.messageBox = ko.observable('')
2018-09-23 13:38:11 +00:00
this.toolbarHorizontal = ko.observable(!this.settings.toolbarVertical)
2016-11-27 16:43:59 +00:00
this.selected = ko.observable()
this.selfMute = ko.observable()
this.selfDeaf = ko.observable()
2016-11-27 16:43:59 +00:00
2017-09-20 14:55:11 +00:00
this.selfMute.subscribe(mute => {
if (voiceHandler) {
voiceHandler.setMute(mute)
}
})
2018-09-23 13:38:11 +00:00
this.toggleToolbarOrientation = () => {
this.toolbarHorizontal(!this.toolbarHorizontal())
this.settings.toolbarVertical = !this.toolbarHorizontal()
this.settings.save()
}
2016-11-27 16:43:59 +00:00
this.select = element => {
this.selected(element)
}
2017-09-19 20:40:54 +00:00
this.openSettings = () => {
this.settingsDialog(new SettingsDialog(this.settings))
}
this.applySettings = () => {
const settingsDialog = this.settingsDialog()
settingsDialog.applyTo(this.settings)
this._updateVoiceHandler()
this.settings.save()
2017-09-20 13:16:49 +00:00
this.closeSettings()
2017-09-19 20:40:54 +00:00
}
this.closeSettings = () => {
2017-09-20 13:16:49 +00:00
if (this.settingsDialog()) {
this.settingsDialog().end()
}
2017-09-19 20:40:54 +00:00
this.settingsDialog(null)
}
2016-11-27 16:43:59 +00:00
this.getTimeString = () => {
return '[' + new Date().toLocaleTimeString('en-US') + ']'
}
2017-04-30 18:34:10 +00:00
this.connect = (username, host, port, token, password) => {
2016-11-27 16:43:59 +00:00
this.resetClient()
2018-09-26 11:08:40 +00:00
this.remoteHost(host)
this.remotePort(port)
2016-11-27 16:43:59 +00:00
log('Connecting to server ', host)
// Note: This call needs to be delayed until the user has interacted with
// the page in some way (which at this point they have), see: https://goo.gl/7K7WLu
this.connector.setSampleRate(audioContext().sampleRate)
2016-11-27 16:43:59 +00:00
// TODO: token
this.connector.connect(`wss://${host}:${port}`, {
2016-11-27 16:43:59 +00:00
username: username,
password: password
2016-11-27 16:43:59 +00:00
}).done(client => {
log('Connected!')
this.client = client
// Prepare for connection errors
client.on('error', (err) => {
2016-11-27 16:43:59 +00:00
log('Connection error:', err)
this.resetClient()
})
// Make sure we stay open if we're running as Matrix widget
window.matrixWidget.setAlwaysOnScreen(true)
2016-11-27 16:43:59 +00:00
// 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) => {
sender = sender || { __ui: 'Server' }
2016-11-27 16:43:59 +00:00
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)
})
}
// Startup audio input processing
this._updateVoiceHandler()
// Tell server our mute/deaf state (if necessary)
if (this.selfDeaf()) {
this.client.setSelfDeaf(true)
} else if (this.selfMute()) {
this.client.setSelfMute(true)
}
2016-11-27 16:43:59 +00:00
}, err => {
if (err.$type && err.$type.name === 'Reject') {
this.connectErrorDialog.type(err.type)
this.connectErrorDialog.reason(err.reason)
this.connectErrorDialog.show()
} else {
log('Connection error:', err)
}
2016-11-27 16:43:59 +00:00
})
}
this._newUser = user => {
const simpleProperties = {
uniqueId: 'uid',
username: 'name',
mute: 'mute',
deaf: 'deaf',
suppress: 'suppress',
selfMute: 'selfMute',
selfDeaf: 'selfDeaf',
texture: 'rawTexture',
textureHash: 'textureHash',
2016-11-27 16:43:59 +00:00
comment: 'comment'
}
var ui = user.__ui = {
model: user,
talking: ko.observable('off'),
channel: ko.observable()
}
ui.texture = ko.pureComputed(() => {
let raw = ui.rawTexture()
if (!raw || raw.offset >= raw.limit) return null
return 'data:image/*;base64,' + ByteBuffer.wrap(raw).toBase64()
})
ui.show_avatar = () => {
let setting = this.settings.showAvatars()
switch (setting) {
case 'always':
break
case 'own_channel':
if (this.thisUser().channel() !== ui.channel()) return false
break
case 'linked_channel':
if (!ui.channel().linked()) return false
break
case 'minimal_only':
if (!this.minimalView()) return false
if (this.thisUser().channel() !== ui.channel()) return false
break
case 'never':
default: return false
}
if (!ui.texture()) {
if (ui.textureHash()) {
// The user has an avatar set but it's of sufficient size to not be
// included by default, so we need to fetch it explicitly now.
// mumble-client should make sure we only send one request per hash
user.requestTexture()
}
return false
}
return true
}
ui.openContextMenu = (_, event) => openContextMenu(event, this.userContextMenu, ui)
ui.canChangeMute = () => {
return false // TODO check for perms and implement
}
ui.canChangeDeafen = () => {
return false // TODO check for perms and implement
}
ui.canChangePrioritySpeaker = () => {
return false // TODO check for perms and implement
}
ui.canLocalMute = () => {
return false // TODO implement local mute
// return this.thisUser() !== ui
}
ui.canIgnoreMessages = () => {
return false // TODO implement ignore messages
// return this.thisUser() !== ui
}
ui.canChangeComment = () => {
return false // TODO implement changing of comments
// return this.thisUser() === ui // TODO check for perms
}
ui.canChangeAvatar = () => {
return this.thisUser() === ui // TODO check for perms
}
ui.toggleMute = () => {
if (ui.selfMute()) {
this.requestUnmute(ui)
} else {
this.requestMute(ui)
}
}
ui.toggleDeaf = () => {
if (ui.selfDeaf()) {
this.requestUndeaf(ui)
} else {
this.requestDeaf(ui)
}
}
ui.viewAvatar = () => {
this.avatarView(ui.texture())
}
ui.changeAvatar = () => {
let input = document.createElement('input')
input.type = 'file'
input.addEventListener('change', () => {
let reader = new window.FileReader()
reader.onload = () => {
this.client.setSelfTexture(reader.result)
}
reader.readAsArrayBuffer(input.files[0])
})
input.click()
}
ui.removeAvatar = () => {
user.clearTexture()
}
2016-11-27 16:43:59 +00:00
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()
}
if (properties.textureHash !== undefined) {
// Invalidate avatar texture when its hash has changed
// If the avatar is still visible, this will trigger a fetch of the new one.
ui.rawTexture(null)
}
2016-11-27 16:43:59 +00:00
}).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()
2016-11-27 16:43:59 +00:00
})
userNode.connect(audioContext().destination)
2016-11-27 16:43:59 +00:00
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')
}
userNode.write(data.buffer)
2016-11-27 16:43:59 +00:00
}).on('end', () => {
console.log(`User ${user.username} stopped takling`)
ui.talking('off')
userNode.end()
2016-11-27 16:43:59 +00:00
})
})
}
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)
}
ui.userCount = () => {
return ui.channels().reduce((acc, c) => acc + c.userCount(), ui.users().length)
}
ui.openContextMenu = (_, event) => openContextMenu(event, this.channelContextMenu, ui)
ui.canJoin = () => {
return true // TODO check for perms
}
ui.canAdd = () => {
return false // TODO check for perms and implement
}
ui.canEdit = () => {
return false // TODO check for perms and implement
}
ui.canRemove = () => {
return false // TODO check for perms and implement
}
ui.canLink = () => {
return false // TODO check for perms and implement
}
ui.canUnlink = () => {
return false // TODO check for perms and implement
}
ui.canSendMessage = () => {
return false // TODO check for perms and implement
}
2016-11-27 16:43:59 +00:00
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.selected(null).root(null).thisUser(null)
2016-11-27 16:43:59 +00:00
}
this.connected = () => this.thisUser() != null
this._updateVoiceHandler = () => {
if (!this.client) {
return
}
2017-09-19 18:53:48 +00:00
if (voiceHandler) {
voiceHandler.end()
voiceHandler = null
}
let mode = this.settings.voiceMode
if (mode === 'cont') {
voiceHandler = new ContinuousVoiceHandler(this.client, this.settings)
} else if (mode === 'ptt') {
voiceHandler = new PushToTalkVoiceHandler(this.client, this.settings)
} else if (mode === 'vad') {
voiceHandler = new VADVoiceHandler(this.client, this.settings)
} else {
log('Unknown voice mode:', mode)
2017-09-19 18:53:48 +00:00
return
}
2017-09-19 18:53:48 +00:00
voiceHandler.on('started_talking', () => {
if (this.thisUser()) {
this.thisUser().talking('on')
}
})
voiceHandler.on('stopped_talking', () => {
if (this.thisUser()) {
this.thisUser().talking('off')
}
})
2017-09-20 14:55:11 +00:00
if (this.selfMute()) {
voiceHandler.setMute(true)
}
this.client.setAudioQuality(
this.settings.audioBitrate,
this.settings.samplesPerPacket
)
}
2016-11-27 16:43:59 +00:00
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 (user === this.thisUser()) {
this.selfMute(true)
}
2016-11-27 16:43:59 +00:00
if (this.connected()) {
if (user === this.thisUser()) {
2016-11-27 16:43:59 +00:00
this.client.setSelfMute(true)
} else {
user.model.setMute(true)
}
}
}
this.requestDeaf = user => {
if (user === this.thisUser()) {
this.selfMute(true)
this.selfDeaf(true)
}
2016-11-27 16:43:59 +00:00
if (this.connected()) {
if (user === this.thisUser()) {
2016-11-27 16:43:59 +00:00
this.client.setSelfDeaf(true)
} else {
user.model.setDeaf(true)
}
}
}
this.requestUnmute = user => {
if (user === this.thisUser()) {
this.selfMute(false)
this.selfDeaf(false)
}
2016-11-27 16:43:59 +00:00
if (this.connected()) {
if (user === this.thisUser()) {
2016-11-27 16:43:59 +00:00
this.client.setSelfMute(false)
} else {
user.model.setMute(false)
}
}
}
this.requestUndeaf = user => {
if (user === this.thisUser()) {
this.selfDeaf(false)
}
2016-11-27 16:43:59 +00:00
if (this.connected()) {
if (user === this.thisUser()) {
2016-11-27 16:43:59 +00:00
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()
}
2018-09-23 13:38:11 +00:00
this.updateSize = () => {
this.minimalView(window.innerWidth < 320)
if (this.minimalView()) {
this.toolbarHorizontal(window.innerWidth < window.innerHeight)
} else {
this.toolbarHorizontal(!this.settings.toolbarVertical)
}
}
2016-11-27 16:43:59 +00:00
}
}
var ui = new GlobalBindings(window.mumbleWebConfig)
2016-11-27 16:43:59 +00:00
// Used only for debugging
window.mumbleUi = ui
window.onload = function () {
var queryParams = url.parse(document.location.href, true).query
queryParams = Object.assign({}, window.mumbleWebConfig.defaults, queryParams)
var useJoinDialog = queryParams.joinDialog
if (queryParams.matrix) {
useJoinDialog = true
}
2016-11-27 16:43:59 +00:00
if (queryParams.address) {
ui.connectDialog.address(queryParams.address)
} else {
useJoinDialog = false
2016-11-27 16:43:59 +00:00
}
if (queryParams.port) {
ui.connectDialog.port(queryParams.port)
} else {
useJoinDialog = false
2016-11-27 16:43:59 +00:00
}
if (queryParams.token) {
ui.connectDialog.token(queryParams.token)
}
if (queryParams.username) {
ui.connectDialog.username(queryParams.username)
} else {
useJoinDialog = false
2016-11-27 16:43:59 +00:00
}
2017-04-30 18:34:10 +00:00
if (queryParams.password) {
ui.connectDialog.password(queryParams.password)
}
if (queryParams.avatarurl) {
// Download the avatar and upload it to the mumble server when connected
let url = queryParams.avatarurl
console.log('Fetching avatar from', url)
let req = new window.XMLHttpRequest()
req.open('GET', url, true)
req.responseType = 'arraybuffer'
req.onload = () => {
let upload = (avatar) => {
if (req.response) {
console.log('Uploading user avatar to server')
ui.client.setSelfTexture(req.response)
}
}
// On any future connections
ui.thisUser.subscribe((thisUser) => {
if (thisUser) {
upload()
}
})
// And the current one (if already connected)
if (ui.thisUser()) {
upload()
}
}
req.send()
}
ui.connectDialog.joinOnly(useJoinDialog)
2016-11-27 16:43:59 +00:00
ko.applyBindings(ui)
}
2018-09-23 13:38:11 +00:00
window.onresize = () => ui.updateSize()
ui.updateSize()
2016-11-27 16:43:59 +00:00
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(', ')
}
var voiceHandler
2017-09-20 13:16:49 +00:00
var testVoiceHandler
2016-11-27 16:43:59 +00:00
initVoice(data => {
2017-09-20 13:16:49 +00:00
if (testVoiceHandler) {
testVoiceHandler.write(data)
}
if (!ui.client) {
2017-09-19 18:53:48 +00:00
if (voiceHandler) {
voiceHandler.end()
}
voiceHandler = null
} else if (voiceHandler) {
2017-09-20 13:16:49 +00:00
voiceHandler.write(data)
2016-11-27 16:43:59 +00:00
}
}, err => {
log('Cannot initialize user media. Microphone will not work:', err)
2016-11-27 16:43:59 +00:00
})