-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
234 lines (178 loc) · 13.5 KB
/
Copy pathindex.html
File metadata and controls
234 lines (178 loc) · 13.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
<!DOCTYPE html>
<html lang="en">
<head>
<title>TS6 Client Viewer</title>
<link rel="shortcut icon" href="/resources/img/audio_input.svg" type="image/svg">
<link rel="manifest" href="/manifest.json">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/resources/font/roboto/font-family.css">
<link rel="stylesheet" href="/style.css">
<script type="module" src="/js/Main.js"></script>
</head>
<body>
<main>
<div id="viewer">
</div>
<div id="hint_screen">
<p>Connecting ...</p>
<p>If you are stuck on this screen, make sure to allow the Remote App in your TeamSpeak 6 Client. (see your notifications)</p>
<img src="/resources/img/hint/accept_authorization.png" alt="The Image shows an image the top left corner of a TeamSpeak 6 Client. The Notification Area is expanded and shows an authorization request from the Client Viewer.">
<p class="browser_only">If there is no notification, check your Remote App Settings in your TeamSpeak 6 Client.</p>
<img class="browser_only" src="/resources/img/hint/remote_app_settings.png" alt="The Image shows the Remote Apps Page in the TeamSpeak 6 Client Settings. The Settings 'Enabled' and 'Port' aswell ass the section 'Permission Requests' are outlined in red.">
</div>
<div id="interface">
<div id="interface_box">
<h2>Customization</h2>
<section>
<h3>App Settings</h3>
<div class="line">
<label for="app_custom_id">Custom ID</label>
<input type="checkbox" name="use_custom_id" id="use_custom_id">
<input type="number" name="custom_id" id="app_custom_id" disabled>
<div class="hint">If you have multiple instances of the Viewer open (e.g. in different browsers), they all need to have a unique ID.</div>
</div>
<div class="line">
<label for="app_port">Remote App Port</label>
<input type="number" name="app_port" id="app_port" value="5899" placeholder="Enter Remote App Port">
<div class="hint">Set this value to the same as your Remote App Port Setting in your TeamSpeak 6 Client (default: 5899)</div>
</div>
</section>
<section>
<h3>Viewer Settings</h3>
<section>
<h4>General</h4>
<div class="line">
<label for="display_mode">Display Mode</label>
<select name="display_mode" id="display_mode">
<option value="standalone">Standalone</option>
<option value="browser">With Interface</option>
</select>
<div class="hint">Set the Display Mode (With Interface = Customization Interface, Standalone = No Customization Interface).</div>
</div>
<div class="line">
<label for="mode">Viewer Mode</label>
<select name="mode" id="mode">
<option value="tree">Show Server Tree</option>
<option value="channel">Show Channel</option>
</select>
<div class="hint">Set whether to show the entire server tree or just your own channel.</div>
</div>
<div class="line">
<label for="server">Server Selection</label>
<select name="server" id="server">
<option value="active">Auto</option>
<option value="by_name">By Name</option>
</select>
<div class="hint">Set how the displayed server is chosen.</div>
</div>
<div class="line">
<label for="server_name">Server Name</label>
<input name="server_name" id="server_name" placeholder="Enter Server Name" disabled>
<select name="server_list" id="server_list" disabled>
<option value="">Select Server</option>
</select>
<div class="hint">The Server Name to use. Only if Server Selection is set to "By Name".</div>
</div>
<div class="line">
<label for="alignment">Alignment</label>
<select name="alignment" id="alignment">
<option value="start-top">Top Left</option>
<option value="end-top">Top Right</option>
<option value="start-bottom">Bottom Left</option>
<option value="end-bottom">Bottom Right</option>
</select>
<div class="hint">Which corner to align the Viewer with</div>
</div>
</section>
<section>
<h4>Channels</h4>
<div class="line hidden">
<label for="hide_channel">Hide Channel</label>
<input type="checkbox" name="hide_channel" id="hide_channel">
<div class="hint">Hides the Channel if ticked.<br>Only for Viewer Mode "Show Channel".</div>
</div>
<div class="line hidden">
<label for="show_subchannels">Show Subchannels</label>
<input type="checkbox" name="show_subchannels" id="show_subchannels">
<div class="hint">Shows Subchannels if ticked.<br>Only for Viewer Mode "Show Channel".</div>
</div>
<div class="line">
<label for="follow_channel">Follow Own Channel</label>
<input type="checkbox" name="follow_channel" id="follow_channel">
<div class="hint">Will always keep the Channel you're in as close to the top of the Viewer as possible by scrolling to it.<br>Only for Viewer Mode "Show Server Tree".</div>
</div>
<div class="line">
<label for="follow_specific_channel">Follow Specific Channel</label>
<input type="checkbox" name="follow_specific_channel" id="follow_specific_channel">
<input type="text" name="follow_channel_name" id="follow_channel_name" placeholder="Channel Name" disabled>
<div class="hint">Will always keep the selected Channel in as close to the top of the Viewer as possible by scrolling to it.<br>Only for Viewer Mode "Show Server Tree".</div>
</div>
<div class="line">
<label for="hide_empty">Hide empty Channels</label>
<input type="checkbox" name="hide_empty" id="hide_empty">
<div class="hint">Hides Channels without clients in them.</div>
</div>
<div class="line">
<label for="show_spacers">Show Spacer Channels</label>
<input type="checkbox" name="show_spacers" id="show_spacers">
<div class="hint">Shows Spacer Channels (does not support special formatting)</div>
</div>
</section>
<section>
<h4>Clients</h4>
<div class="line">
<label for="hide_status">Hide Status</label>
<input type="checkbox" name="hide_status" id="hide_status">
<div class="hint">Hides the Status of Clients. Only their name will appear.</div>
</div>
<div class="line">
<label for="hide_away_message">Hide Away Message</label>
<input type="checkbox" name="hide_away_message" id="hide_away_message">
<div class="hint">Hides the Away Message that Clients can set.</div>
</div>
<div class="line">
<label for="only_talking">Only show talking Clients</label>
<input type="checkbox" name="only_talking" id="only_talking">
<div class="hint">Only shows Clients that are talking.</div>
</div>
<div class="line">
<label for="show_avatars">Show myTeamSpeak Avatars</label>
<input type="checkbox" name="show_avatars" id="show_avatars">
<div class="hint">Whether to display myTeamSpeak Avatars instead of the Blue Dot.</div>
</div>
<div class="line">
<label for="hide_local_client">Hide local Client</label>
<input type="checkbox" name="hide_local_client" id="hide_local_client">
<div class="hint">Hides the local Client from the Viewer.</div>
</div>
<div class="line">
<label for="disable_local_client_color">Disable local Client Color</label>
<input type="checkbox" name="disable_local_client_color" id="disable_local_client_color">
<div class="hint">Shows local Client in same color as other Clients.</div>
</div>
<div class="line">
<label for="show_query_clients">Show Server Query Clients</label>
<input type="checkbox" name="show_query_clients" id="show_query_clients">
<div class="hint">Shows Server Query Clients.</div>
</div>
</section>
<div class="line">
<label for="scale">Scale</label>
<input type="range" name="scale_slider" id="scale_slider" min="0.1", max="4" step="0.1" value="1">
<input type="number" name="scale" id="scale" min="0" value="1">
<div class="hint">Scale the entire Viewer.</div>
</div>
</section>
<section>
<h3>Export</h3>
<p>Use this URL to view with the chosen settings. You can then use it in a Browser Source in OBS for example.</p>
<div id="interface_url_wrapper">
<output id="interface_generated_url"></output>
</div>
</section>
</div>
</div>
</main>
</body>
</html>