|
<!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="ee7a19054eb87597c4b8e4664823ebfd.png">
|
|
<link rel="icon" type="image/png" href="195ad531e2d729dbb80bb4524be18d78.png" sizes="32x32">
|
|
<link rel="icon" type="image/png" href="cf02aba975e911ef9823610d908b32f5.png" sizes="16x16">
|
|
<link rel="manifest" href="e72996a6d1ed5d1d7962c27c10c08fa6.json">
|
|
<link rel="mask-icon" href="18e00168e2eeff800227594e26818681.svg" color="#5bbad5">
|
|
<link rel="shortcut icon" href="7e20ba1e3b8980a164c5f557a0470919.ico">
|
|
<meta name="apple-mobile-web-app-title" content="Mumble">
|
|
<meta name="application-name" content="Mumble">
|
|
<meta name="msapplication-config" content="8b61e99b17ef88afd479b3fc990e5b9d.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">
|
|
Connexion au serveur
|
|
</div>
|
|
<form data-bind="submit: connect">
|
|
<table>
|
|
<tr data-bind="if: $root.config.connectDialog.address">
|
|
<td>Addresse</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>Jeton</td>
|
|
<td><input id="token" type="text" data-bind="value: token"></td>
|
|
</tr>
|
|
<tr data-bind="if: $root.config.connectDialog.username">
|
|
<td>Pseudo ou nom</td>
|
|
<td><input id="username" type="text" data-bind="value: username" required></td>
|
|
</tr>
|
|
<tr data-bind="if: $root.config.connectDialog.password">
|
|
<td>Mot de passe</td>
|
|
<td><input id="password" type="password" data-bind="value: password"></td>
|
|
</tr>
|
|
<tr data-bind="if: $root.config.connectDialog.channelName">
|
|
<td>Salon</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">
|
|
Information de connexion
|
|
</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">
|
|
Paramètres
|
|
</div>
|
|
<form data-bind="submit: $root.applySettings">
|
|
<table>
|
|
<tr>
|
|
<td>Transmission</td>
|
|
<td>
|
|
<select data-bind='value: voiceMode'>
|
|
<option value="cont">Continue</option>
|
|
<option value="vad">Activité vocale</option>
|
|
<option value="ptt">Appuyer pour parler</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>Combinaison de touches à utiliser</td>
|
|
<td>
|
|
<input type="button" data-bind="value: pttKeyDisplay, click: recordPttKey">
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Qualité audio</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 par paquet</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>,
|
|
Surcharge
|
|
<span data-bind="text: (overheadBandwidth()/1000).toFixed(1)"></span>)
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Afficher les avatars</td>
|
|
<td>
|
|
<select data-bind='value: showAvatars'>
|
|
<option value="always">Toujours</option>
|
|
<option value="own_channel">Même canal</option>
|
|
<option value="linked_channel">Canaux liés</option>
|
|
<option value="minimal_only">Vue minimale</option>
|
|
<option value="never">Jamais</option>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="2">
|
|
<input type="checkbox" data-bind="checked: userCountInChannelName">
|
|
Afficher le nombre d’utilisateurs et et utilisatrices après le nom du salon
|
|
</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() }">
|
|
Couper le son
|
|
</li>
|
|
<li data-bind="css: { disabled: !canChangeDeafen() }">
|
|
Mettre en sourdine
|
|
</li>
|
|
<li data-bind="css: { disabled: !canChangePrioritySpeaker() }">
|
|
Priorité de la personne qui parle
|
|
</li>
|
|
|
|
<li data-bind="css: { disabled: !canLocalMute() }">
|
|
Couper le son localement
|
|
</li>
|
|
<li data-bind="css: { disabled: !canIgnoreMessages() }">
|
|
Ignorer les messages
|
|
</li>
|
|
|
|
<li data-bind="css: { disabled: !canChangeComment() }, visible: comment">
|
|
Voir les commentaires
|
|
</li>
|
|
<!-- ko if: $data === $root.thisUser() -->
|
|
<li data-bind="css: { disabled: !canChangeComment() }, visible: true">
|
|
Modifier le commentaire
|
|
</li>
|
|
<!-- /ko -->
|
|
<!-- ko if: $data !== $root.thisUser() -->
|
|
<li data-bind="css: { disabled: !canChangeComment() }, visible: comment">
|
|
Effacer le commentaire
|
|
</li>
|
|
<!-- /ko -->
|
|
|
|
<li data-bind="css: { disabled: !canChangeAvatar() }, visible: texture,
|
|
click: viewAvatar">
|
|
Voir l’avatar
|
|
</li>
|
|
<!-- ko if: $data === $root.thisUser() -->
|
|
<li data-bind="css: { disabled: !canChangeAvatar() }, visible: true,
|
|
click: changeAvatar">
|
|
Modifier l'avatar
|
|
</li>
|
|
<!-- /ko -->
|
|
<li data-bind="css: { disabled: !canChangeAvatar() }, visible: texture,
|
|
click: removeAvatar">
|
|
Effacer l'avatar
|
|
</li>
|
|
|
|
<li data-bind="css: { disabled: true }, visible: true">
|
|
Envoyer message
|
|
</li>
|
|
<li data-bind="css: { disabled: true }, visible: true">
|
|
Information
|
|
</li>
|
|
|
|
<li data-bind="visible: $data === $root.thisUser(),
|
|
css: { checked: selfMute },
|
|
click: toggleMute">
|
|
Me couper le son
|
|
</li>
|
|
<li data-bind="visible: $data === $root.thisUser(),
|
|
css: { checked: selfDeaf },
|
|
click: toggleDeaf">
|
|
Me mettre en sourdine
|
|
</li>
|
|
|
|
<!-- ko if: $data !== $root.thisUser() -->
|
|
<li data-bind="css: { disabled: true }, visible: true">
|
|
Ajouter comme ami
|
|
</li>
|
|
<li data-bind="css: { disabled: true }, visible: false">
|
|
Retirer comme ami
|
|
</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())">
|
|
Rejoindre le salon
|
|
</li>
|
|
<li data-bind="css: { disabled: !canAdd() }">
|
|
Ajouter
|
|
</li>
|
|
<li data-bind="css: { disabled: !canEdit() }">
|
|
Modifier
|
|
</li>
|
|
<li data-bind="css: { disabled: !canRemove() }">
|
|
Retirer
|
|
</li>
|
|
|
|
<li data-bind="css: { disabled: !canLink() }">
|
|
Lien
|
|
</li>
|
|
<li data-bind="css: { disabled: !canUnlink() }">
|
|
Rompre le lien
|
|
</li>
|
|
<li data-bind="css: { disabled: !canUnlink() }">
|
|
Rompre tous les liens
|
|
</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>
|
|
<li data-bind="css: { disabled: true }">
|
|
Copier l’URL Mumble
|
|
</li>
|
|
<li data-bind="css: { disabled: true }">
|
|
Copier l’URL Mumble-Web
|
|
</li>
|
|
<li data-bind="css: { disabled: !canSendMessage() }">
|
|
Envoyer un 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="f2fc230fc7d9a9b8f6f03d342f6e94b2.svg"
|
|
data-bind="click: toggleToolbarOrientation">
|
|
<img class="handle-vertical" src="9ae3dac014f51d714254cf522602cec0.svg"
|
|
data-bind="click: toggleToolbarOrientation">
|
|
<img class="tb-connect" data-bind="visible: !connectDialog.joinOnly(),
|
|
click: connectDialog.show"
|
|
rel="connect" src="22ecf0ecde1ae2a6281265174b7fa355.svg">
|
|
<img class="tb-information" rel="information" src="82747b4bbd0cfe92292f74cd27f2763e.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="8f75583a16890ab851fc3f121fc63f89.svg">
|
|
<img class="tb-unmute tb-active" data-bind="visible: selfMute,
|
|
click: function () { requestUnmute(thisUser()) }"
|
|
rel="unmute" src="f54b0be1d559b03ad8d945e988ec8ed4.svg">
|
|
<img class="tb-deaf" data-bind="visible: !selfDeaf(),
|
|
click: function () { requestDeaf(thisUser()) }"
|
|
rel="deaf" src="0ce7650c4d5a52a5323868f75588e1c7.svg">
|
|
<img class="tb-undeaf tb-active" data-bind="visible: selfDeaf,
|
|
click: function () { requestUndeaf(thisUser()) }"
|
|
rel="undeaf" src="d5ba30b381ebc262ba3871eaed9d7102.svg">
|
|
<img class="tb-record" data-bind="click: function(){}"
|
|
rel="record" src="7b86c879d50808c66816ed3338f26557.svg">
|
|
<div class="divider"></div>
|
|
<img class="tb-comment" data-bind="click: commentDialog.show"
|
|
rel="comment" src="077f1c5bd335be073c48c340b01f58bc.svg">
|
|
<div class="divider"></div>
|
|
<img class="tb-settings" data-bind="click: openSettings"
|
|
rel="settings" src="50dddae19e7bf601b168f46a1303674b.svg">
|
|
<div class="divider"></div>
|
|
<img class="tb-sourcecode" data-bind="click: openSourceCode"
|
|
rel="Source Code" src="71edeaefdc2f5a19dc84298669af6962.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">
|
|
Message de bienvenue : <span data-bind="html: message"></span> <hr /> <br />Par défaut, pour pouvoir parler il faut appuyer et maintenir appuyées les touches Ctrl et Majuscule (shift) (c'est le mode Appuyer pour parler). Pour changer ce mode de transmission, pour passer par exemple en mode transmission continue, vous pouvez aller dans les paramètres (en cliquant sur la roue crantée).<br /><br />Pour rejoindre un salon il faut double-cliquer sur le nom du salon, ou faire clic-droit sur le nom du salon et choisir "Rejoindre le salon". Pour quitter un salon il faut double-cliquer sur April tout en haut. <br /><br />Vous pouvez consulter <a href='https://wiki.april.org/w/Mumble#Acc.C3.A8s_avec_un_navigateur_web'>une documentation</a>.
|
|
</script>
|
|
</p>
|
|
<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="077f1c5bd335be073c48c340b01f58bc.svg">
|
|
</div>
|
|
<div data-bind="if: description">
|
|
<div class="channel-description tooltip" data-bind="html: description"></div>
|
|
</div>
|
|
<img class="channel-icon" src="b78ed441778f2e4ce1201a75af76594e.svg"
|
|
data-bind="visible: !linked() && $root.thisUser().channel() !== $data">
|
|
<img class="channel-icon-active" src="b78ed441778f2e4ce1201a75af76594e.svg"
|
|
data-bind="visible: $root.thisUser().channel() === $data">
|
|
<img class="channel-icon-linked" src="86d4f1d7547270ff26f08a9271e7edcb.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="077f1c5bd335be073c48c340b01f58bc.svg">
|
|
<img class="user-server-mute" data-bind="visible: mute"
|
|
alt="server mute" src="296b612d2847da52749549f73d0c3664.svg">
|
|
<img class="user-suppress-mute" data-bind="visible: suppress"
|
|
alt="suppressed" src="00fd86fe12871b707998bf7214820fdd.svg">
|
|
<img class="user-self-mute" data-bind="visible: selfMute"
|
|
alt="self mute" src="9171288d67adc4805412883901d2f180.svg">
|
|
<img class="user-server-deaf" data-bind="visible: deaf"
|
|
alt="server deaf" src="e0c171776518ab302b54ccc71e59a582.svg">
|
|
<img class="user-self-deaf" data-bind="visible: selfDeaf"
|
|
alt="self deaf" src="d5ba30b381ebc262ba3871eaed9d7102.svg">
|
|
<img class="user-authenticated" data-bind="visible: uid"
|
|
alt="authenticated" src="6d73bb785aa06bf0c436ad6f7cc6262a.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="a65db861eecb8dcc62ad70fec489da3f.svg">
|
|
<img class="user-talk user-talk-on" data-bind="visible: talking() == 'on'"
|
|
alt="talk on" src="32785c1d21b0050be9168487542b8c3d.svg">
|
|
<img class="user-talk user-talk-whisper" data-bind="visible: talking() == 'whisper'"
|
|
alt="whisper" src="dbd9efebc73f884c5039cc3192a65dd8.svg">
|
|
<img class="user-talk user-talk-shout" data-bind="visible: talking() == 'shout'"
|
|
alt="shout" src="ec4d8b884ac39ef8494fb4aca6c6069f.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="d57d3d2918d0b72f0c24e9dc162c6c4a.svg"
|
|
data-bind="click: expanded.bind($data, false), visible: expanded()">
|
|
<img class="branch-closed" src="972a0ac8cf8526580a216210a364cc60.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>
|