-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
192 lines (188 loc) · 8.27 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
<!DOCTYPE html>
<html>
<title>PSVR2 Twitch Chat</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-blue.css">
<style>
#lastError p {
display: none;
}
#lastError p:nth-last-of-type(-n+3) {
display: inherit;
}
form {
width:340px;
}
input[type=range] {
width:100%;
}
#nextMsg, #prevMsg {
line-height: 0;
padding: 11px;
}
</style>
<script type="text/javascript" src="scripts/tmi.js"></script>
<script type="text/javascript" src="scripts/main.js"></script>
<body class="w3-theme-d5">
<audio loop src="Sine10Hz30s.ogg"></audio>
<div class="w3-theme-d4 w3-bar">
<h2 class="w3-bar-item">PSVR2 Twitch Chat</h2>
<a href="https://github.com/Falcosc/PSVR2-Twitch#Why" target="_blank" class="w3-bar-item w3-button w3-right w3-theme">What is this and why does it exist?</a>
</div>
<div class="w3-container w3-padding-large">
<div class="w3-panel w3-red w3-display-container w3-small" id="lastError" style="display:none">
<span onclick="this.parentElement.style.display='none'"class="w3-button w3-large w3-display-topright">×</span>
<template id="errorLine">
<p class="w3-tiny">
<span class="w3-small"></span><br>
<span style="white-space: pre" ></span>
</p>
</template>
</div>
<script>
function displayErrorMsg(msg, stack){
const errorLine = document.querySelector("#errorLine").content.cloneNode(true);
let span = errorLine.querySelectorAll("span");
span[0].textContent = msg;
span[1].textContent = stack;
document.querySelector("#lastError").appendChild(errorLine);
document.querySelector("#lastError").style.display = 'block';
}
function handleError(source, lineno, colno, error, stack){
const file = source?.replace(/.*\//,'/').replace(/[?#].*/,'');
const time = (new Date()).toLocaleTimeString();
displayErrorMsg(`${time} ${file}:${lineno}:${colno} ${error}`, stack);
}
window.onerror = (event, source, lineno, colno, error) => {
handleError(source, lineno, colno, error, error?.stack);
}
window.addEventListener("unhandledrejection", (event) => {
handleError(event?.reason?.fileName, event?.reason?.lineNumber, event?.reason?.columnNumber, event?.reason?.message, event?.reason?.stack);
});
</script>
<div class="w3-panel w3-pale-yellow w3-border w3-small">
<h1 class="w3-large">Paid Messages are not tested!</h1>
<p>I am not sure if bits and sub messages do already work. But even if they do, currently they don't get priority and could get skipped on busy days like any normal chat message.</p>
</div>
<div class="w3-panel w3-pale-yellow w3-border w3-small" id="androidEdgeHack" hidden>
<h1 class="w3-large">Android Edge voice selection is broken</h1>
<p>To fix it: select any text and click on "read out loud" in the contect menu. After starting the reader it will detect Voices and close this message. If not, you can click finish to manually retry voice detection:
<button class="w3-button w3-red">finish hack</button>
</p>
</div>
<form id="connectionForm" class="w3-left w3-margin-right">
<a href="https://id.twitch.tv/oauth2/authorize?response_type=token&client_id=368mzno8zop311dlixwz4v7qvp0dgz&redirect_uri=https://falcosc.github.io/PSVR2-Twitch/&scope=chat:read&force_verify=true"
class="w3-button w3-deep-purple w3-large" style="width:100%">
<span id="authorizeLabel">☍ Connect</span>
<svg xmlns="http://www.w3.org/2000/svg" height="24" fill="currentColor" viewBox="0 0 16 16" style="vertical-align: middle">
<path d="M3.857 0 1 2.857v10.286h3.429V16l2.857-2.857H9.57L14.714 8V0zm9.714 7.429-2.285 2.285H9l-2 2v-2H4.429V1.143h9.142z"/>
<path d="M11.857 3.143h-1.143V6.57h1.143zm-3.143 0H7.571V6.57h1.143z"/>
</svg>
</a>
<p>
<label>Stream/Channel to Monitor</label>
<input class="w3-input" type="text" id="channel" disabled>
</p>
<button type="button" onclick="mediaBtnMap.classList.toggle('w3-show')" class="w3-button w3-block w3-theme-d3">Media Button Mapping</button>
<div id="mediaBtnMap" class="w3-hide">
<div><label>skip to next message</label>
<select class="w3-input w3-select" name="nextKey">
<option>play</option>
<option>pause</option>
<option>stop</option>
<option>seekbackward</option>
<option>seekforward</option>
<option>seekto</option>
<option>previoustrack</option>
<option selected>nexttrack</option>
<option>skipad</option>
<option>togglecamera</option>
<option>togglemicrophone</option>
<option>hangup</option>
</select></div>
<p><label>abort current and repeat previous message</label>
<select class="w3-input w3-select" name="prevKey">
<option>play</option>
<option>pause</option>
<option>stop</option>
<option>seekbackward</option>
<option>seekforward</option>
<option>seekto</option>
<option selected>previoustrack</option>
<option>nexttrack</option>
<option>skipad</option>
<option>togglecamera</option>
<option>togglemicrophone</option>
<option>hangup</option>
</select></p>
</div>
<button type="button" onclick="allSettings.classList.toggle('w3-show')" class="w3-button w3-block w3-theme-d3">Settings</button>
<div id="allSettings" class="w3-hide">
<span>Currently all timeouts are hardcoded, please tell us which settings need to be adjustable</span>
</div>
<p>
<button class="w3-button w3-green" id="startBtn" disabled>
<svg height="10" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 10 10"><polygon points="0,0 10,5 0,10"></polygon></svg>
<span>Start</span>
</button>
<button class="w3-button w3-red w3-margin-right" id="stopBtn" disabled>
<svg height="10" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 10 10"><polygon points="0,0 10,0 10,10 0,10"></polygon></svg>
<span>Stop</span>
</button>
<button type="button" class="w3-button" id="prevMsg" onclick="handlePrevMsg()">
<svg height="15" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 10 10"><polygon points="10,0 1,5 1,0 0,0 0,10 1,10 1,5 10,10"></polygon></svg>
</button>
<button type="button" class="w3-button" id="nextMsg" onclick="handleNextMsg()">
<svg height="15" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 10 10"><polygon points="0,0 9,5 9,0 10,0 10,10 9,10 9,5 0,10"></polygon></svg>
</button>
</p>
</form>
<div class="w3-left w3-card-4 w3-margin-right w3-margin-bottom">
<form id="statusVoice">
<div class="w3-container w3-theme-d3">
<h3>Stream/Channel Status Voice</h3>
</div>
<div class="w3-container">
<p><label>Voice</label>
<select class="w3-input w3-select" name="voice"></select></p>
<p><label>Volume</label>
<input type="range" min="0" max="1" step="0.01" value="1" name="volume"></p>
<p><label>Rate</label>
<input type="range" min="0.7" max="2" step="0.1" value="1" name="rate"></p>
<p><label>Pitch</label>
<input type="range" min="0" max="2" step="0.1" value="1" name="pitch"></p>
</div>
<button class="w3-button w3-theme w3-block" type="submit" value="Submit" disabled>🔊︎ Test Status Voice</button>
</form>
</div>
<div class="w3-left w3-card-4 w3-margin-bottom">
<form name="chatVoice">
<div class="w3-container w3-theme-d3">
<h3>Chat Message Voice</h3>
</div>
<div class="w3-container">
<p><label>Voice</label>
<select class="w3-input w3-select" name="voice"></select></p>
<p><label>Volume</label>
<input type="range" min="0" max="1" step="0.01" value="1" name="volume"></p>
<p><label>Rate</label>
<input type="range" min="0.7" max="2" step="0.1" value="1" name="rate"></p>
<p><label>Pitch</label>
<input type="range" min="0" max="2" step="0.1" value="1" name="pitch"></p>
</div>
<button class="w3-button w3-theme w3-block" type="submit" value="Submit" disabled>🔊︎ Test Chat Voice</button>
</form>
</div>
<div class="w3-left">
<header class="w3-container w3-theme-d3">
<h3>Ignored Messages</h3>
</header>
<div class="w3-container" id="ignoredMsgContainer">
<span>Messages will be skipped if another message is still been read.</span>
<span>If there are no new messages, skipped messages will be read most recent first.</span>
<span>Messages older then 30 seconds will be ignored.</span>
</div>
</div>
</body>
</html>