twitch.js (5564B)
1 async function twitch_check_online(stream) {
2
3 // Construct request
4 const status_url = new Request(
5 "https://static-cdn.jtvnw.net/previews-ttv/live_user_" + stream +
6 "-853x480.jpg"
7 );
8
9 // Get HTTP status code of status_url
10 const response_url = await fetch(status_url).then((response) => {
11 return response;
12 });
13
14 // refer online status from whether a redirect happened
15 const status = (status_url.url === response_url.url);
16
17 // return online status
18 return(status);
19
20 }
21
22 async function tw2html_toggle_hidden(stream) {
23
24 // get stream section
25 var section = document.getElementById("stream_" + stream);
26
27 // check online status of stream
28 const status = await twitch_check_online(stream);
29
30 // Debug output
31 console.log("Stream: " + stream + " | Status: " + status);
32
33 // If stream is online, unhide it. If it is offline, hide it
34 if (status) {
35
36 // Unhide section
37 section.classList.remove("hidden");
38
39 // Check whether player exists
40 var player = section.querySelectorAll("#player_" + stream);
41
42 // Update preview image if player does NOT exist
43 if (player.length < 1) {
44 tw2html_update_preview(stream);
45 }
46
47 } else {
48
49 // Hide section
50 section.classList.add("hidden");
51
52 // Ensure iframe is removed
53 section.querySelectorAll("#player_" + stream).forEach(function(x) {
54 x.remove();
55 });
56
57 }
58
59 // Mark Loading indicator as done
60 tw2html_loading_indicator(stream, status);
61
62 }
63
64 function tw2html_update_preview(stream) {
65
66 // Construct current time
67 var now = new Date();
68
69 // Get image object
70 var img = document.getElementById("preview_" + stream);
71
72 // Update preview image
73 img.src = "https://static-cdn.jtvnw.net/previews-ttv/live_user_" + stream +
74 "-1280x720.jpg" +
75 "?t=" + now.getTime(); // Add some index to force reload of image
76
77 // Ensure preview image is visible
78 img.classList.remove("hidden");
79
80 }
81
82 function tw2html_toggle_player(stream) {
83
84 // get stream section
85 var section = document.getElementById("stream_" + stream);
86
87 // if player-iframe exists, remove it and unhide preview image
88 var player = section.querySelectorAll("#player_" + stream);
89
90 if (player.length > 0) {
91
92 // unhide and update preview image
93 tw2html_update_preview(stream);
94
95 // remove player
96 player.forEach(function(x) { x.remove(); });
97
98 // Hide player container
99 section.querySelector(".player_container").classList.add("hidden");
100
101 } else {
102
103 // hide preview image
104 section.querySelector("#preview_" + stream).classList.add("hidden");
105
106 // unhide player container
107 section.querySelector(".player_container").classList.remove("hidden");
108
109 // Construct player iframe
110 var player = document.createElement("iframe");
111 player.id = "player_" + stream;
112 player.classList.add("player");
113 player.allowFullscreen = "true";
114 player.width = "100%";
115 player.height = "100%";
116 player.frameborder = "0";
117 player.scrolling = "no";
118 player.src = "https://player.twitch.tv/?channel=" +
119 stream +
120 "&parent=" +
121 window.location.hostname +
122 "&muted=false&volume=1&quality=auto";
123
124 // inject player into stream container
125 section.querySelector(".player_container").prepend(player);
126
127 // Focus player
128 document.getElementById("player_" + stream).focus();
129
130 // Scroll to player
131 document.location = "#stream_" + stream;
132
133 }
134
135 }
136
137 function tw2html_toggle_chat(stream) {
138
139 // get stream section
140 var section = document.getElementById("stream_" + stream);
141
142 // get chat object if it exists
143 var chat = section.querySelectorAll("#chat_" + stream);
144
145 if (chat.length > 0) {
146 var chat = chat[0];
147 } else {
148 var chat = null;
149 }
150
151 if (chat !== null) {
152
153 chat.remove();
154
155 } else {
156
157 // Create chat iframe
158 var chat = document.createElement("iframe");
159 chat.id = "chat-" + stream;
160 chat.width = "100%";
161 chat.height = "100%";
162 chat.frameborder = "0";
163 chat.scrolling = "auto";
164 chat.src = "https://www.twitch.tv/embed/" +
165 stream +
166 "/chat?parent=" +
167 window.location.hostname;
168
169 // If dark mode is used, apply it to the chat as well
170 if (window.matchMedia('(prefers-color-scheme: dark)')) {
171 chat.src = chat.src + "&darkpopout";
172 }
173
174 // inject chat into chat container
175 section.querySelector(".chat_container").prepend(chat);
176 }
177
178 }
179
180 function tw2html_loading_indicator(stream, status) {
181
182 // Get loading indicator object
183 var indicator = document.getElementById("loading_indicator_" + stream);
184
185 // During Process
186 if (status == -1) {
187
188 // Unmark as online
189 indicator.classList.remove("online");
190
191 // Unmark as offline
192 indicator.classList.remove("offline");
193
194 }
195
196 // Online
197 if (status == 1) {
198
199 // Unmark as offnline
200 indicator.classList.remove("offline");
201
202 // Mark as online
203 indicator.classList.add("online");
204
205 }
206
207 // Offline
208 if (status == 0) {
209
210 // Unmark as online
211 indicator.classList.remove("online");
212
213 // Mark as offline
214 indicator.classList.add("offline");
215
216 }
217
218 }
219
220
221 function tw2html_reload() {
222
223 // Debug output
224 console.log("Reloading list of online streams...")
225
226 // gather list of sections (streams)
227 var sections = document.querySelectorAll(".streams");
228
229 // Loop through each section
230 for (i = 0; i < sections.length; i++) {
231
232 // Gather stream name
233 var stream = sections[i].id.replace("stream_", "");
234
235 // Mark as still processing
236 tw2html_loading_indicator(stream, -1)
237
238 // check online status and untoggle hidden class asynchronously
239 tw2html_toggle_hidden(stream);
240
241 }
242
243 }
244
245 function tw2html_daemon() {
246
247 // Run reload function initially
248 tw2html_reload();
249
250 // Recall daemon function after 5 minutes
251 setTimeout(tw2html_daemon, 60 * 5 * 1000);
252 }
