2018-02-27 17:20:49 +01:00
|
|
|
<!DOCTYPE html>
|
|
|
|
<html lang="en">
|
|
|
|
<head>
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
<title>TeaSpeak-Web</title>
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="css/ts/tab.css" type="text/css">
|
|
|
|
<link rel="stylesheet" href="css/ts/chat.css" type="text/css">
|
|
|
|
<link rel="stylesheet" href="css/ts/client.css" type="text/css">
|
|
|
|
<link rel="stylesheet" href="css/ts/icons.css" type="text/css">
|
|
|
|
<link rel="stylesheet" href="css/general.css" type="text/css">
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
TeaSpeak-Web<br>
|
|
|
|
|
2018-03-07 19:06:52 +01:00
|
|
|
<div style="width: 600px; height: 450px; display: flex; flex-direction: column; resize: both; margin: 20px"> <!-- Container -->
|
2018-02-27 17:20:49 +01:00
|
|
|
<div style="height: 45px; width: 100%; border-radius: 2px 0px 0px 0px; border-bottom-width: 0px; background-color: lightgrey" class="main_container">
|
|
|
|
<div id="control_bar" class="control_bar">
|
2018-03-07 19:06:52 +01:00
|
|
|
<div class="button btn_connect"><div class="icon_x32 client-connect"></div></div>
|
|
|
|
<div style="border-left:2px solid gray;height: auto; margin-left: 5px; margin-right: 5px"></div>
|
2018-02-27 17:20:49 +01:00
|
|
|
<div class="button btn_client_away"><div class="icon_x32 client-away"></div></div>
|
|
|
|
<div class="button btn_mute_input"><div class="icon_x32 client-input_muted"></div></div>
|
|
|
|
<div class="button btn_mute_output"><div class="icon_x32 client-output_muted"></div></div>
|
|
|
|
<div style="width: 100%"></div>
|
2018-03-07 19:06:52 +01:00
|
|
|
<div class="button btn_open_settings"><div class="icon_x32 client-settings"></div></div>
|
2018-02-27 17:20:49 +01:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div style="flex-direction: row; height: 100%; width: 100%; display: flex">
|
|
|
|
<div style="width: 60%; flex-direction: column;">
|
2018-03-07 19:06:52 +01:00
|
|
|
<div style="height: 60%; border-radius: 0px 0px 0px 0px; border-right-width: 0px; overflow: auto; overflow-x: visible" class="main_container">
|
2018-02-27 17:20:49 +01:00
|
|
|
<div class="channelTree" id="channelTree">
|
|
|
|
<div class="server l"><div class="icon client-server_green"></div> TeaSpeak web!</div>
|
|
|
|
</div>
|
|
|
|
</div> <!-- Channel tree -->
|
|
|
|
<div style="height: 40%; border-radius: 0px 0px 0px 2px; border-top-width: 0px; border-right-width: 0px;" class="main_container">
|
|
|
|
<div id="chat">
|
|
|
|
<div class="messages">
|
|
|
|
<div class="message_box"></div>
|
|
|
|
</div>
|
|
|
|
<div class="chats"></div>
|
|
|
|
<div class="input">
|
|
|
|
<!--<div contentEditable="true" class="input_box"></div>-->
|
|
|
|
<textarea class="input_box"></textarea>
|
|
|
|
<button>Send</button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div> <!-- Chat window -->
|
|
|
|
</div>
|
|
|
|
<div style="width: 40%; border-radius: 0px 0px 2px 0px;" class="main_container">
|
|
|
|
<div id="select_info" class="select_info">
|
|
|
|
</div>
|
|
|
|
</div> <!-- Selection info -->
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<button id="test">Test Stuff</button>
|
|
|
|
<div id="contextMenu" class="contextMenu"></div>
|
|
|
|
|
|
|
|
<template id="tmpl_channel_edit">
|
|
|
|
<table style="margin-bottom: 20px">
|
|
|
|
<tr>
|
|
|
|
<td>Name:</td>
|
|
|
|
<td><input value="${channel_name}"/></td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td>Password:</td>
|
|
|
|
<td><input/></td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td>Topic:</td>
|
|
|
|
<td><input/></td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td>Description:</td>
|
|
|
|
<td><input/></td>
|
|
|
|
</tr>
|
|
|
|
</table>
|
|
|
|
<x-tab>
|
|
|
|
<x-entry>
|
|
|
|
<x-tag>Standard</x-tag>
|
|
|
|
<x-content>
|
|
|
|
<div style="display: flex; flex-direction: row; width: 100%; justify-content: space-evenly">
|
|
|
|
<div style="vertical-align: center; margin: 20px;">
|
|
|
|
<a>Channel Type</a><br>
|
|
|
|
<fieldset style="border: gray solid; border-width: 2px; border-radius: 0px 6px 6px 6px;">
|
|
|
|
<div><input type="radio" name="channel_type" id="temp" value="temp" checked> Temporary</div>
|
|
|
|
<div><input type="radio" name="channel_type" id="semi" value="semiperm"> Semi-Permanent</div>
|
|
|
|
<div><input type="radio" name="channel_type" id="perm" value="perm"> Permanent</div>
|
|
|
|
<hr style="width: 100%;">
|
|
|
|
<div><input type="checkbox" name="channel_default" id="default" value="def"> Default Channel</div>
|
|
|
|
</fieldset>
|
|
|
|
</div>
|
|
|
|
<div style="border-left:1px solid #000;height: auto;"></div>
|
|
|
|
<div style="flex-direction: column; align-content: stretch; vertical-align: center; margin: 20px;">
|
|
|
|
<div>
|
|
|
|
<div>Sort this channel after:</div>
|
|
|
|
<select class="order_id" style="width: 150px">
|
|
|
|
<option value="channel_3">Audi</option>
|
|
|
|
</select>
|
|
|
|
</div>
|
|
|
|
<div style="margin-top: 20px">
|
|
|
|
<div>Needed Talk Power:</div>
|
|
|
|
<input type="number" min="0" value="0" style="width: 150px">
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</x-content>
|
|
|
|
</x-entry>
|
|
|
|
<x-entry>
|
|
|
|
<x-tag>Audio</x-tag>
|
|
|
|
<x-content>TODO!</x-content>
|
|
|
|
</x-entry>
|
|
|
|
<x-entry>
|
|
|
|
<x-tag>Permissions</x-tag>
|
|
|
|
<x-content>
|
|
|
|
<div style="display: flex; justify-content: space-evenly">
|
|
|
|
<div>
|
|
|
|
Regular needed powers:
|
|
|
|
<table class="channel_perm_tbl">
|
|
|
|
<tr><td class="key">Join:</td><td><input type="number" min="0" value="0"></td></tr>
|
|
|
|
<tr><td class="key">Subscribe:</td><td><input type="number" min="0" value="0"></td></tr>
|
|
|
|
<tr><td class="key">Desc. view:</td><td><input type="number" min="0" value="0"></td></tr>
|
|
|
|
<tr><td class="key">Modify:</td><td><input type="number" min="0" value="0"></td></tr>
|
|
|
|
<tr><td class="key">Delete:</td><td><input type="number" min="0" value="0"></td></tr>
|
|
|
|
</table>
|
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
File transfare needed powers:
|
|
|
|
<table class="channel_perm_tbl">
|
|
|
|
<tr><td class="key">Join:</td><td><input type="number" min="0" value="0"></td></tr>
|
|
|
|
<tr><td class="key">Subscribe:</td><td><input type="number" min="0" value="0"></td></tr>
|
|
|
|
<tr><td class="key">Desc. view:</td><td><input type="number" min="0" value="0"></td></tr>
|
|
|
|
<tr><td class="key">Modify:</td><td><input type="number" min="0" value="0"></td></tr>
|
|
|
|
<tr><td class="key">Delete:</td><td><input type="number" min="0" value="0"></td></tr>
|
|
|
|
</table>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</x-content>
|
|
|
|
</x-entry>
|
|
|
|
<x-entry>
|
|
|
|
<x-tag>Advanced</x-tag>
|
|
|
|
<x-content>TODO!</x-content>
|
|
|
|
</x-entry>
|
|
|
|
</x-tab>
|
|
|
|
</template>
|
|
|
|
<template id="tmpl_connect">
|
|
|
|
<div style="margin-top: 5px;">
|
|
|
|
<div style="display: flex; flex-direction: row; width: 100%; justify-content: space-between">
|
|
|
|
<div style="width: 68%; margin-bottom: 5px">
|
|
|
|
<div>Remote address and port:</div>
|
|
|
|
<input type="text" style="width: 100%" class="connect_address" value="localhost"> <!-- ts.TeaSpeak.de -->
|
|
|
|
</div>
|
|
|
|
<div style="width: 20%">
|
|
|
|
<div>Server password:</div>
|
|
|
|
<input type="password" style="width: 100%" class="connect_password">
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<div>Nickname:</div>
|
|
|
|
<input type="text" style="width: 100%" class="connect_nickname" value="A TeaSpeak web user">
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
2018-03-07 19:06:52 +01:00
|
|
|
<template id="tmpl_settings">
|
|
|
|
<x-tab>
|
|
|
|
<x-entry>
|
|
|
|
<x-tag>General</x-tag>
|
|
|
|
<x-content>Didnt setuped yet!</x-content>
|
|
|
|
</x-entry>
|
|
|
|
<x-entry>
|
|
|
|
<x-tag>Voice</x-tag>
|
|
|
|
<x-content>
|
|
|
|
<div style="display: flex; flex-direction: row; width: 100%; justify-content: space-evenly" class="settings_voice">
|
|
|
|
<div style="vertical-align: center; margin: 20px; min-width: 175px">
|
|
|
|
<a>Voice Activity Detection</a>
|
|
|
|
<div>
|
|
|
|
<fieldset class="GroupBox">
|
|
|
|
<div><input type="radio" name="vad_type" value="pt" display="Always active"> Always active</div>
|
|
|
|
<div><input type="radio" name="vad_type" value="vad" display="Voice activity detection"> Voice activity detection</div>
|
|
|
|
<div><input type="radio" name="vad_type" value="ppt" display="Push to talk"> Push to talk</div>
|
|
|
|
</fieldset>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div style="border-left:1px solid #000;height: auto;"></div>
|
|
|
|
<div style="flex-direction: column; align-content: stretch; vertical-align: center; margin: 20px;">
|
|
|
|
<div class="vad_settings">
|
|
|
|
<div style="font-size: 14px; text-align: center"><a class="vad_type">Type[Unknown]</a> settings</div>
|
|
|
|
<div class="vad_type_settings vad_type_pt">There are no setting entries for an <b>always</b> online voice detection.</div>
|
|
|
|
<div class="vad_type_settings vad_type_ppt">
|
|
|
|
<a>Push to talk key:</a>
|
|
|
|
<button class="vat_ppt_key">Uninitialised</button>
|
|
|
|
</div>
|
|
|
|
<div class="vad_type_settings vad_type_vad">
|
|
|
|
<a>Voice activity threshold</a>
|
|
|
|
<div class="vad_threshold_selector">
|
|
|
|
<input type="range" min="0" max="100" value="50" class="vad_slider">
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</x-content>
|
|
|
|
</x-entry>
|
|
|
|
</x-tab>
|
|
|
|
</template>
|
2018-02-27 17:20:49 +01:00
|
|
|
|
|
|
|
<script src="vendor/jquery/jquery.min.js"></script>
|
|
|
|
<!--
|
|
|
|
<script src="vendor/jquery/jquery.min.js"></script>
|
|
|
|
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
|
|
|
|
-->
|
|
|
|
<script src="https://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
|
|
|
|
|
|
|
|
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
|
|
|
|
<script src="vendor/opus-recorder/recorder.js"></script>
|
|
|
|
<script src="vendor/aurora/aurora.js"></script>
|
|
|
|
|
|
|
|
<script src="js/utils/modal.js"></script>
|
2018-03-07 19:06:52 +01:00
|
|
|
<script src="js/ui/modal/ModalConnect.js"></script>
|
|
|
|
<script src="js/ui/modal/ModalSettings.js"></script>
|
|
|
|
<script src="js/ui/modal/ModalCreateChannel.js"></script>
|
2018-02-27 17:20:49 +01:00
|
|
|
<script src="js/utils/tab.js"></script>
|
|
|
|
|
|
|
|
<script src="js/proto.js"></script>
|
|
|
|
<script src="js/settings.js"></script>
|
|
|
|
<script src="js/contextMenu.js"></script>
|
|
|
|
<script src="js/connection.js"></script>
|
|
|
|
<script src="js/FileManager.js"></script>
|
|
|
|
<script src="js/client.js"></script>
|
|
|
|
<script src="js/chat.js"></script>
|
|
|
|
<script src="js/InfoBar.js"></script>
|
|
|
|
|
2018-03-07 19:06:52 +01:00
|
|
|
|
|
|
|
<script src="js/voice/VoiceHandler.js"></script>
|
|
|
|
<script src="js/voice/VoiceRecorder.js"></script>
|
|
|
|
<script src="js/voice/AudioResampler.js"></script>
|
|
|
|
<script src="js/voice/AudioController.js"></script>
|
|
|
|
|
2018-02-27 17:20:49 +01:00
|
|
|
<script src="js/permission/PermissionManager.js"></script>
|
|
|
|
<script src="js/permission/GroupManager.js"></script>
|
|
|
|
|
|
|
|
<script src="js/ui/server.js"></script>
|
|
|
|
<script src="js/ui/channel.js"></script>
|
|
|
|
<script src="js/ui/client.js"></script>
|
|
|
|
<script src="js/ui/view.js"></script>
|
|
|
|
<script src="js/ui/ControlBar.js"></script>
|
|
|
|
|
|
|
|
<script src="asm/generated/TeaWeb-Native.js"></script>
|
|
|
|
<script src="js/codec/Codec.js"></script>
|
|
|
|
|
|
|
|
<script src="js/main.js"></script>
|
|
|
|
<!-- <script src="generated/js/client.js"></script> -->
|
|
|
|
</body>
|
|
|
|
</html>
|