-
Notifications
You must be signed in to change notification settings - Fork 11
/
Copy pathindex.html
271 lines (269 loc) · 15.6 KB
/
index.html
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
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
<!doctype html>
<!-- The default settings can be found at the end of this file -->
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>Twitch Chat Monitor</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700&display=swap" rel="stylesheet" type="text/css"/>
<link href="style.css" rel="stylesheet" type="text/css"/>
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png"/>
<link rel="icon" type="image/png" sizes="16x16" href="img/favicon-16x16.png"/>
</head>
<body>
<div id="curtain" class="hidden">
<p>😴<br />Chat hidden - press Ctrl+Shift+H to reveal</p>
</div>
<div id="commands" class="hidden">
<div id="fullscreen" title="F11">🔍 Fullscreen</div>
<div id="settings-toggle" title="Ctrl+Shift+S">⚙ Settings</div>
</div>
<div id="fps" class="hidden"></div>
<div class="notifications">
<div id="chat-overload" class="hidden">🔥 Chat overload – <span id="chat-overload-count">0</span> messages skipped</div>
<div id="network-status" class="hidden">📡 Connection lost – attempting to reestablish</div>
</div>
<div id="settings" class="hidden">
<div>
<h3>Twitch</h3>
<div>
<form action="#">
<label>Twitch channel: <input type="text" id="settings-channel" required="required" placeholder="Name only (e.g. desertbus)" size="26"/></label>
<input type="submit" value="Join"/>
<span id="settings-channel-override" class="hidden">(Currently overridden by channel parameter in URL)</span>
</form>
</div>
<div><label class="disabled" id="settings-twitch-messaging"><input type="checkbox" id="settings-twitch-messagefield" disabled="disabled"/> Support sending messages</label>
<span class="help" title="More information" data-title="Show a text box that allows sending messages from the monitor. Requires the addition of an access token to work."></span>
<div class="subfield">
<label>Username: <input type="text" id="settings-twitch-username" placeholder="your Twitch username" size="26"/></label><br/>
<label>Access token: <input type="password" id="settings-twitch-token" placeholder="Twitch access token" size="26"/></label> (retrieve <a href="https://twitchapps.com/tmi/" target="_blank">here</a>)
</div>
</div>
</div>
<div>
<h3>Style</h3>
<div class="fields centered" id="styles"></div>
<div class="fields centered hidden" id="settings-custom-style">
<div>Background<br/><input type="color" id="settings-background-color"/></div>
<div>Odd rows background<br/><input type="color" id="settings-odd-background-color"/></div>
<div>Separator<br/><input type="color" id="settings-separator-color"/></div>
<div>Message text<br/><input type="color" id="settings-text-color"/></div>
<div>Username<br/><input type="color" id="settings-user-color"/></div>
<div>VIP<br/><input type="color" id="settings-vip-color"/></div>
<div>Staff<br/><input type="color" id="settings-staff-color"/></div>
<div>Admin<br/><input type="color" id="settings-admin-color"/></div>
<div>Moderator<br/><input type="color" id="settings-moderator-color"/></div>
<div>Channel highlight<br/><input type="color" id="settings-channel-color"/></div>
<div>Notice<br/><input type="color" id="settings-notice-color"/></div>
<div>Highlight<br/><input type="color" id="settings-highlight-color"/></div>
</div>
<div id="settings-custom-style-exchange"><label>Custom style import/export: <input size="48" type="text" id="settings-custom-style-exchange-field"/></label></div>
<div><label><input type="checkbox" id="settings-hide-cursor"/> Hide cursor when it hasn't moved for 4 seconds</label></div>
<div><label><input type="checkbox" id="settings-adjust-page-title"/> Show channel name in page title</label></div>
<div><label><input type="checkbox" id="settings-unread-counter-in-page-title"/> Show unread messages counter in page title</label></div>
<div><label>Font size: <input type="number" size="3" max="200" min="4" id="settings-font-size"/> pixels</label></div>
<div><label>Animate emoji:
<select id="settings-animate-emoji">
<option value="yes">Always animate</option>
<!--<option value="auto">Based on system performance</option>-->
<option value="no">Never animate</option>
</select></label>
</div>
</div>
<div>
<h3>Chat Behavior</h3>
<div>
<label><input type="checkbox" id="settings-limit-message-rate"/> Limit the rate at which messages appear</label>
<div class="subfield hidden">
<label>Amount of messages per second: <input type="number" size="2" max="50" min="1" id="settings-message-rate"/></label>
<span class="help" title="More information" data-title="Limit how many messages will be shown per second by putting new messages in a queue. Discards the oldest messages if the queue overflows."></span>
</div>
</div>
<div><label><input type="checkbox" id="settings-new-messages-on-top"/> New messages appear at the top</label></div>
<div>
<label><input type="checkbox" id="settings-smooth-scroll"/> Smooth scrolling</label>
<div class="subfield hidden">
<label>Time allowed for message to appear: <input type="number" size="5" max="10000" min="1" id="settings-smooth-scroll-duration"/> milliseconds</label>
<span class="help" title="More information" data-title="Determine how aggressive the scrolling should be for new or dequeued messages to fully appear."></span>
</div>
</div>
<div>
<label><input type="checkbox" id="settings-combine-messages"/> Combine messages with the same content</label>
<span class="help" title="More information" data-title="The previous chat message will show an increasing counter for each match and will be moved to the front of the chat again."></span>
</div>
<div>
<label><input type="checkbox" id="settings-enable-chat-delay"/> Artificial chat delay</label>
<div class="subfield hidden">
<label>Delay: <input type="number" size="4" max="1000" min="0" id="settings-chat-delay"/> seconds</label>
</div>
</div>
</div>
<div>
<h3>Message Handling</h3>
<div><label><input type="checkbox" id="settings-align-messages"/> Line up messages vertically</label></div>
<div><label><input type="checkbox" id="settings-format-urls"/> Turn URLs into clickable links</label></div>
<div>
<label><input type="checkbox" id="settings-shorten-urls"/> Shorten long URLs</label>
<span class="help" title="More information" data-title="To preserve space, try to limit the length of a link. Usually done by truncating the path."></span>
</div>
<div>
<label><input type="checkbox" id="settings-inline-images"/> Show any images linked to by users</label>
<span class="help" title="More information" data-title="Load the images linked to by other users in chat. Links must end with a known image extension or must point to Giphy or Imgur."></span>
<div class="subfield hidden"><label>Maximum image size: <input type="number" size="2" max="80" min="5" id="settings-inline-images-height"/>% of available screen height</label></div>
</div>
<div><label><input type="checkbox" id="settings-unfurl-twitter"/> Unfurl Twitter/X links</label></div>
<div><label><input type="checkbox" id="settings-unfurl-youtube"/> Unfurl YouTube links</label></div>
<div class="subfield hidden"><label><input type="checkbox" id="settings-play-youtube"/> Show and autoplay YouTube videos</label></div>
<div><label>Show timestamps:
<select id="settings-timestamps">
<option value="">None</option>
<option value="short">59:15 (minutes:seconds)</option>
<option value="short24">23:59 (hours:minutes)</option>
<option value="long24">23:59:15 (hours:minutes:seconds)</option>
<option value="short12">11:59 PM (hours:minutes AM/PM)</option>
<option value="long12">11:59:15 PM (hours:minutes:seconds AM/PM)</option>
</select></label>
</div>
<div>
<label>Highlight messages from <input type="text" placeholder="usernames separated by commas" id="settings-highlight-users" size="35"/></label>
<span class="help" title="More information" data-title="You can add multiple usernames by separating them with commas, like so: username1,username2"></span>
</div>
<div>
<label>Highlight messages containing <input type="text" placeholder="keyphrases separated by commas" id="settings-highlight-keyphrases" size="35"/></label>
<span class="help" title="More information" data-title="You can add multiple keyphrases by separating them with commas, like so: keyphrase1,keyphrase2"></span>
</div>
</div>
<div>
<h3>Message Types</h3>
<div class="fields">
<div><label><input type="checkbox" id="settings-show-subscriptions"/> Subscriptions</label></div>
<div><label><input type="checkbox" id="settings-show-bits"/> Bits</label></div>
<div><label><input type="checkbox" id="settings-show-mod-actions"/> Mod actions</label></div>
</div>
</div>
<div>
<h3>Stats for Nerds</h3>
<div class="fields">
<div><label><input type="checkbox" id="settings-show-fps"/> FPS</label></div>
</div>
</div>
<div>
<h3>Hotkeys overview</h3>
<div class="fields centered">
<div>Ctrl+Shift+H<br/>Hide/show chat</div>
<div>Ctrl+Shift+S<br/>Open/close settings</div>
<div>Ctrl+Shift+D<br/>Toggle artificial chat delay</div>
<div>F11<br/>Toggle fullscreen</div>
</div>
</div>
</div>
<div id="chat-container">
<div id="chat"></div>
</div>
<form action="#" id="message-entry">
<span id="message-username"></span>
<input type="text" class="message-field" placeholder="enter message" />
<input type="submit" value="Send"/>
</form>
<div style="width: 240px; height: 152px; background-color: var(--style-background); border: 1px solid #fff" class="hidden" id="style-template">
<div style="height: 8px; padding: 4px">
<div style="width: 40px; background-color: var(--style-user); height: 8px; float: left; margin-right: 4px"></div>
<div style="width: 40px; background-color: var(--style-text); height: 8px; float: left"></div>
</div>
<div style="height: 1px; background-color: var(--style-separator)"></div>
<div style="background-color: var(--style-odd-background); height: 8px; padding: 4px">
<div style="width: 28px; background-color: var(--style-user); height: 8px; float: left; margin-right: 4px"></div>
<div style="width: 144px; background-color: var(--style-text); height: 8px; float: left"></div>
</div>
<div style="height: 1px; background-color: var(--style-separator)"></div>
<div style="height: 8px; padding: 4px">
<div style="width: 48px; background-color: var(--style-moderator); height: 8px; float: left; margin-right: 4px"></div>
<div style="width: 100px; background-color: var(--style-text); height: 8px; float: left"></div>
</div>
<div style="height: 1px; background-color: var(--style-separator)"></div>
<div style="background-color: var(--style-notice-background); height: 8px; padding: 4px; border-left: 4px solid var(--style-notice)">
<div style="width: 116px; background-color: var(--style-text); height: 8px; float: left"></div>
</div>
<div style="height: 1px; background-color: var(--style-separator)"></div>
<div style="height: 8px; padding: 4px">
<div style="width: 40px; background-color: var(--style-user); height: 8px; float: left; margin-right: 4px"></div>
<div style="width: 96px; background-color: var(--style-text); height: 8px; float: left"></div>
</div>
<div style="height: 1px; background-color: var(--style-separator)"></div>
<div style="background-color: var(--style-channel-background); height: 8px; padding: 4px; border-left: 4px solid var(--style-channel)">
<div style="width: 32px; background-color: var(--style-user); height: 8px; float: left; margin-right: 4px"></div>
<div style="width: 76px; background-color: var(--style-text); height: 8px; float: left"></div>
</div>
<div style="height: 1px; background-color: var(--style-separator)"></div>
<div style="height: 8px; padding: 4px">
<div style="width: 56px; background-color: var(--style-user); height: 8px; float: left; margin-right: 4px"></div>
<div style="width: 122px; background-color: var(--style-text); height: 8px; float: left"></div>
</div>
<div style="height: 1px; background-color: var(--style-separator)"></div>
<div style="background-color: var(--style-odd-background); height: 8px; padding: 4px">
<div style="width: 32px; background-color: var(--style-user); height: 8px; float: left; margin-right: 4px"></div>
<div style="width: 104px; background-color: var(--style-text); height: 8px; float: left"></div>
</div>
<div style="height: 1px; background-color: var(--style-separator)"></div>
<div style="height: 8px; padding: 4px; border-left: 4px solid var(--style-highlight); background-color: var(--style-highlight-background)">
<div style="width: 42px; background-color: var(--style-user); height: 8px; float: left; margin-right: 4px"></div>
<div style="width: 120px; background-color: var(--style-text); height: 8px; float: left"></div>
</div>
</div>
<!-- Obtained from https://github.com/tmijs/tmi.js -->
<script src="tmi.min.js"></script>
<script>
// These values are only the initial values and can get overwritten
var defaultSettings = {
'channel': 'desertbus',
'limit-message-rate': true,
'message-rate': 10,
'new-messages-on-top': true,
'smooth-scroll': true,
'smooth-scroll-duration': 1000, // Time in milliseconds allowed for a message to appear
'combine-messages': false,
'enable-chat-delay': false,
'chat-delay': 20,
'format-urls': true,
'shorten-urls': true,
'inline-images': true,
'inline-images-height': '30vh',
'unfurl-twitter': true,
'unfurl-youtube': true,
'timestamps': '',
'style-preset': 'default',
'twitch-messagefield': false,
// Make sure to enter full rgb definitions here as the color input fields don't accept other values
'background-color': '#000000',
'odd-background-color': '#111111',
'separator-color': '#444444',
'text-color': '#eeeeee',
'user-color': '#008000',
'vip-color': '#4646f8',
'admin-color': '#a970ff',
'staff-color': '#a970ff',
'moderator-color': '#8383f9',
'channel-color': '#0d86ff',
'notice-color': '#eeeeee',
'highlight-color': '#731180',
'font-size': '32px',
'hide-cursor': true,
'adjust-page-title': true,
'unread-counter-in-page-title': true,
'align-messages': false,
'highlight-users': '',
'highlight-keyphrases': '',
'show-subscriptions': true,
'show-bits': true,
'show-mod-actions': false,
'show-fps': false,
'support-fullscreen': false,
'support-hotkeys': true,
'show-command-buttons': true,
'animate-emoji': 'yes'
};
</script>
<script src="main.js"></script>
</body>
</html>