593 lines
26 KiB
HTML
593 lines
26 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<!-- 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">
|
|
|
|
<script src="config.js"></script>
|
|
<script src="config.local.js"></script>
|
|
<script src="theme.js"></script>
|
|
<script src="matrix.js"></script>
|
|
</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,
|
|
css: { minimal: minimalView }">
|
|
<!-- ko with: connectDialog -->
|
|
<div class="connect-dialog dialog" data-bind="visible: visible() && !joinOnly()">
|
|
<div class="dialog-header">
|
|
Connect to Server
|
|
</div>
|
|
<form data-bind="submit: connect">
|
|
<table>
|
|
<tr data-bind="if: $root.config.connectDialog.address">
|
|
<td>Address</td>
|
|
<td><input id="address" type="text" data-bind="value: address" required></td>
|
|
</tr>
|
|
<tr data-bind="if: $root.config.connectDialog.port">
|
|
<td>Port</td>
|
|
<td><input id="port" type="text" data-bind="value: port" required></td>
|
|
</tr>
|
|
<tr data-bind="if: $root.config.connectDialog.token">
|
|
<td>Token</td>
|
|
<td><input id="token" type="text" data-bind="value: token"></td>
|
|
</tr>
|
|
<tr data-bind="if: $root.config.connectDialog.username">
|
|
<td>Username</td>
|
|
<td><input id="username" type="text" data-bind="value: username" required></td>
|
|
</tr>
|
|
<tr data-bind="if: $root.config.connectDialog.password">
|
|
<td>Password</td>
|
|
<td><input id="password" type="password" data-bind="value: password"></td>
|
|
</tr>
|
|
<tr data-bind="if: $root.config.connectDialog.channelName">
|
|
<td>Channel</td>
|
|
<td><input id="channelName" type="text" data-bind="value: channelName"></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 -->
|
|
<!-- ko with: connectDialog -->
|
|
<div class="join-dialog dialog" data-bind="visible: visible() && joinOnly()">
|
|
<div class="dialog-header">
|
|
Mumble Voice Conference
|
|
</div>
|
|
<form data-bind="submit: connect">
|
|
<input class="dialog-submit" type="submit" value="Join Conference">
|
|
</form>
|
|
</div>
|
|
<!-- /ko -->
|
|
<!-- ko with: connectErrorDialog -->
|
|
<div class="connect-dialog error-dialog dialog" data-bind="visible: visible()">
|
|
<div class="dialog-header">
|
|
Failed to connect
|
|
</div>
|
|
<form data-bind="submit: connect">
|
|
<table>
|
|
<tr>
|
|
<td colspan=2>
|
|
<!-- ko if: type() == 0 || type() == 8 -->
|
|
The connection has been refused.
|
|
<!-- /ko -->
|
|
<!-- ko if: type() == 1 -->
|
|
The server uses an incompatible version.
|
|
<!-- /ko -->
|
|
<!-- ko if: type() == 2 -->
|
|
Your user name was rejected. Maybe try a different one?
|
|
<!-- /ko -->
|
|
<!-- ko if: type() == 3 -->
|
|
The given password is incorrect.
|
|
The user name you have chosen requires a special one.
|
|
<!-- /ko -->
|
|
<!-- ko if: type() == 4 -->
|
|
The given password is incorrect.
|
|
<!-- /ko -->
|
|
<!-- ko if: type() == 5 -->
|
|
The user name you have chosen is already in use.
|
|
<!-- /ko -->
|
|
<!-- ko if: type() == 6 -->
|
|
The server is full.
|
|
<!-- /ko -->
|
|
<!-- ko if: type() == 7 -->
|
|
The server requires you to provide a client certificate
|
|
which is not supported by this web application.
|
|
<!-- /ko -->
|
|
<br>
|
|
The server reports:
|
|
<br>
|
|
"<span class="connect-error-reason" data-bind="text: reason"></span>"
|
|
</td>
|
|
</tr>
|
|
<tr data-bind="if: type() == 2 || type() == 3 || type() == 5">
|
|
<td>Username</td>
|
|
<td><input id="username" type="text" data-bind="value: username" required></td>
|
|
</tr>
|
|
<tr data-bind="if: type() == 3 || type() == 4">
|
|
<td>Password</td>
|
|
<td><input id="password" type="password" data-bind="value: password" required></td>
|
|
</tr>
|
|
</table>
|
|
<div class="dialog-footer">
|
|
<input class="dialog-close" type="button" value="Cancel"
|
|
data-bind="click: hide, visible: !joinOnly()">
|
|
<input class="dialog-submit" type="submit" value="Retry">
|
|
</div>
|
|
</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">
|
|
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">Voice Activity</option>
|
|
<option value="ptt">Push To Talk</option>
|
|
</td>
|
|
</tr>
|
|
<tr data-bind="visible: voiceMode() == 'vad'">
|
|
<td colspan="2">
|
|
<div class="mic-volume-container">
|
|
<div class="mic-volume" data-bind="style: {
|
|
width: testVadLevel()*100 + '%',
|
|
background: testVadActive() ? 'green' : 'red'
|
|
}"></div>
|
|
</div>
|
|
<input type="range" min="0" max="1" step="0.01"
|
|
data-bind="value: vadLevel">
|
|
</td>
|
|
</tr>
|
|
<tr data-bind="visible: voiceMode() == 'ptt'">
|
|
<td>PTT Key</td>
|
|
<td>
|
|
<input type="button" data-bind="value: pttKeyDisplay, click: recordPttKey">
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Audio Quality</td>
|
|
<td><span data-bind="text: (audioBitrate()/1000).toFixed(1)"></span> kbit/s</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="2">
|
|
<input type="range" min="8000" max="96000" step="8"
|
|
data-bind="value: audioBitrate, valueUpdate: 'input'">
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Audio per packet</td>
|
|
<td><span data-bind="text: msPerPacket"></span> ms</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="2">
|
|
<input type="range" min="10" max="60" step="10"
|
|
data-bind="value: msPerPacket, valueUpdate: 'input'">
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="2" class="bandwidth-info">
|
|
<span data-bind="text: (totalBandwidth()/1000).toFixed(1)"></span>
|
|
kbit/s
|
|
(Audio
|
|
<span data-bind="text: (audioBitrate()/1000).toFixed(1)"></span>,
|
|
Position
|
|
<span data-bind="text: (positionBandwidth()/1000).toFixed(1)"></span>,
|
|
Overhead
|
|
<span data-bind="text: (overheadBandwidth()/1000).toFixed(1)"></span>)
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Show Avatars</td>
|
|
<td>
|
|
<select data-bind='value: showAvatars'>
|
|
<option value="always">Always</option>
|
|
<option value="own_channel">Same Channel</option>
|
|
<option value="linked_channel">Linked Channels</option>
|
|
<option value="minimal_only">Minimal View</option>
|
|
<option value="never">Never</option>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="2">
|
|
<input type="checkbox" data-bind="checked: userCountInChannelName">
|
|
Show user count after channel name
|
|
</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 -->
|
|
<img class="avatar-view" data-bind="visible: avatarView, attr: { src: avatarView },
|
|
click: function () { avatarView(null) }"></img>
|
|
<!-- ko with: userContextMenu -->
|
|
<ul class="context-menu" data-bind="if: target,
|
|
style: { left: posX() + 'px',
|
|
top: posY() + 'px' }">
|
|
|
|
<!-- ko with: target -->
|
|
<li data-bind="css: { disabled: !canChangeMute() }">
|
|
Mute
|
|
</li>
|
|
<li data-bind="css: { disabled: !canChangeDeafen() }">
|
|
Deafen
|
|
</li>
|
|
<li data-bind="css: { disabled: !canChangePrioritySpeaker() }">
|
|
Priority Speaker
|
|
</li>
|
|
|
|
<li data-bind="css: { disabled: !canLocalMute() }">
|
|
Local Mute
|
|
</li>
|
|
<li data-bind="css: { disabled: !canIgnoreMessages() }">
|
|
Ignore Messages
|
|
</li>
|
|
|
|
<li data-bind="css: { disabled: !canChangeComment() }, visible: comment">
|
|
View Comment
|
|
</li>
|
|
<!-- ko if: $data === $root.thisUser() -->
|
|
<li data-bind="css: { disabled: !canChangeComment() }, visible: true">
|
|
Change Comment
|
|
</li>
|
|
<!-- /ko -->
|
|
<!-- ko if: $data !== $root.thisUser() -->
|
|
<li data-bind="css: { disabled: !canChangeComment() }, visible: comment">
|
|
Reset Comment
|
|
</li>
|
|
<!-- /ko -->
|
|
|
|
<li data-bind="css: { disabled: !canChangeAvatar() }, visible: texture,
|
|
click: viewAvatar">
|
|
View Avatar
|
|
</li>
|
|
<!-- ko if: $data === $root.thisUser() -->
|
|
<li data-bind="css: { disabled: !canChangeAvatar() }, visible: true,
|
|
click: changeAvatar">
|
|
Change Avatar
|
|
</li>
|
|
<!-- /ko -->
|
|
<li data-bind="css: { disabled: !canChangeAvatar() }, visible: texture,
|
|
click: removeAvatar">
|
|
Reset Avatar
|
|
</li>
|
|
|
|
<li data-bind="css: { disabled: true }, visible: true">
|
|
Send Message
|
|
</li>
|
|
<li data-bind="css: { disabled: true }, visible: true">
|
|
Information
|
|
</li>
|
|
|
|
<li data-bind="visible: $data === $root.thisUser(),
|
|
css: { checked: selfMute },
|
|
click: toggleMute">
|
|
Self Mute
|
|
</li>
|
|
<li data-bind="visible: $data === $root.thisUser(),
|
|
css: { checked: selfDeaf },
|
|
click: toggleDeaf">
|
|
Self Deafen
|
|
</li>
|
|
|
|
<!-- ko if: $data !== $root.thisUser() -->
|
|
<li data-bind="css: { disabled: true }, visible: true">
|
|
Add Friend
|
|
</li>
|
|
<li data-bind="css: { disabled: true }, visible: false">
|
|
Remove Friend
|
|
</li>
|
|
<!-- /ko -->
|
|
|
|
<!-- /ko -->
|
|
</ul>
|
|
<!-- /ko -->
|
|
<!-- ko with: channelContextMenu -->
|
|
<ul class="context-menu" data-bind="if: target,
|
|
style: { left: posX() + 'px',
|
|
top: posY() + 'px' }">
|
|
|
|
<!-- ko with: target -->
|
|
<li data-bind="visible: users.indexOf($root.thisUser()) === -1,
|
|
css: { disabled: !canJoin() },
|
|
click: $root.requestMove.bind($root, $root.thisUser())">
|
|
Join Channel
|
|
</li>
|
|
<li data-bind="css: { disabled: !canAdd() }">
|
|
Add
|
|
</li>
|
|
<li data-bind="css: { disabled: !canEdit() }">
|
|
Edit
|
|
</li>
|
|
<li data-bind="css: { disabled: !canRemove() }">
|
|
Remove
|
|
</li>
|
|
|
|
<li data-bind="css: { disabled: !canLink() }">
|
|
Link
|
|
</li>
|
|
<li data-bind="css: { disabled: !canUnlink() }">
|
|
Unlink
|
|
</li>
|
|
<li data-bind="css: { disabled: !canUnlink() }">
|
|
Unlink All
|
|
</li>
|
|
|
|
<li data-bind="css: { disabled: true }">
|
|
Copy Mumble URL
|
|
</li>
|
|
<li data-bind="css: { disabled: true }">
|
|
Copy Mumble-Web URL
|
|
</li>
|
|
<li data-bind="css: { disabled: !canSendMessage() }">
|
|
Send Message
|
|
</li>
|
|
|
|
<!-- /ko -->
|
|
</ul>
|
|
<!-- /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" data-bind="css: { 'toolbar-horizontal': toolbarHorizontal(),
|
|
'toolbar-vertical': !toolbarHorizontal() }">
|
|
<img class="handle-horizontal" src="/svg/handle_horizontal.svg"
|
|
data-bind="click: toggleToolbarOrientation">
|
|
<img class="handle-vertical" src="/svg/handle_vertical.svg"
|
|
data-bind="click: toggleToolbarOrientation">
|
|
<img class="tb-connect" data-bind="visible: !connectDialog.joinOnly(),
|
|
click: connectDialog.show"
|
|
rel="connect" src="/svg/applications-internet.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()) }"
|
|
rel="mute" src="/svg/audio-input-microphone.svg">
|
|
<img class="tb-unmute tb-active" data-bind="visible: selfMute,
|
|
click: function () { requestUnmute(thisUser()) }"
|
|
rel="unmute" src="/svg/audio-input-microphone-muted.svg">
|
|
<img class="tb-deaf" data-bind="visible: !selfDeaf(),
|
|
click: function () { requestDeaf(thisUser()) }"
|
|
rel="deaf" src="/svg/audio-output.svg">
|
|
<img class="tb-undeaf tb-active" data-bind="visible: 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: openSettings"
|
|
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: {
|
|
contextmenu: openContextMenu,
|
|
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">
|
|
<span data-bind="text: name"></span>
|
|
<!-- ko if: $root.settings.userCountInChannelName() && userCount() !== 0 -->
|
|
(<span data-bind="text: userCount()"></span>)
|
|
<!-- /ko -->
|
|
</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,
|
|
event: {
|
|
contextmenu: openContextMenu
|
|
},
|
|
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>
|
|
<!-- ko if: show_avatar() -->
|
|
<img class="user-avatar" alt="avatar"
|
|
data-bind="attr: { src: texture },
|
|
css: { 'user-avatar-talk-off': talking() == 'off',
|
|
'user-avatar-talk-on': talking() == 'on',
|
|
'user-avatar-talk-whisper': talking() == 'whisper',
|
|
'user-avatar-talk-shout': talking() == 'shout' }">
|
|
<!-- /ko -->
|
|
<!-- ko ifnot: show_avatar() -->
|
|
<img class="user-talk user-talk-off" data-bind="visible: talking() == 'off'"
|
|
alt="talk off" src="/svg/talking_off.svg">
|
|
<img class="user-talk user-talk-on" data-bind="visible: talking() == 'on'"
|
|
alt="talk on" src="/svg/talking_on.svg">
|
|
<img class="user-talk user-talk-whisper" data-bind="visible: talking() == 'whisper'"
|
|
alt="whisper" src="/svg/talking_whisper.svg">
|
|
<img class="user-talk user-talk-shout" data-bind="visible: talking() == 'shout'"
|
|
alt="shout" src="/svg/talking_alt.svg">
|
|
<!-- /ko -->
|
|
<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, visible: !minimalView()">
|
|
<div class="channel-root" data-bind="template: {name: 'channel', data: root}"></div>
|
|
</div>
|
|
<div class="channel-root-container" data-bind="if: thisUser, visible: minimalView()">
|
|
<div class="channel-root" data-bind="template: {name: 'channel', data: thisUser().channel}"></div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
<script src="index.js"></script>
|
|
</html>
|