twitch.js (6086B)
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 // Fetch description text
48 var desc_txt = await tw2html_fetch_description(stream);
49
50 } else {
51
52 // Hide section
53 section.classList.add("hidden");
54
55 // Ensure iframe is removed
56 section.querySelectorAll("#player_" + stream).forEach(function(x) {
57 x.remove();
58 });
59
60 // Reset description text
61 var desc_txt = "";
62
63 }
64
65 // Insert description text into description field
66 section.querySelector("#description_" + stream).innerText = desc_txt;
67
68 // Mark Loading indicator as done
69 tw2html_loading_indicator(stream, status);
70
71 }
72
73 async function tw2html_fetch_description(stream) {
74
75 // description response
76 const desc_resp = await fetch ("/lib/fetch_description.php?stream=" + stream);
77
78 // extract text of response
79 var desc_txt = desc_resp.text();
80
81 // return result
82 return(desc_txt);
83
84 }
85
86 function tw2html_update_preview(stream) {
87
88 // Construct current time
89 var now = new Date();
90
91 // Get image object
92 var img = document.getElementById("preview_" + stream);
93
94 // Update preview image
95 img.src = "https://static-cdn.jtvnw.net/previews-ttv/live_user_" + stream +
96 "-1280x720.jpg" +
97 "?t=" + now.getTime(); // Add some index to force reload of image
98
99 // Ensure preview image is visible
100 img.classList.remove("hidden");
101
102 }
103
104 function tw2html_toggle_player(stream) {
105
106 // get stream section
107 var section = document.getElementById("stream_" + stream);
108
109 // if player-iframe exists, remove it and unhide preview image
110 var player = section.querySelectorAll("#player_" + stream);
111
112 if (player.length > 0) {
113
114 // unhide and update preview image
115 tw2html_update_preview(stream);
116
117 // remove player
118 player.forEach(function(x) { x.remove(); });
119
120 // Hide player container
121 section.querySelector(".player_container").classList.add("hidden");
122
123 } else {
124
125 // hide preview image
126 section.querySelector("#preview_" + stream).classList.add("hidden");
127
128 // unhide player container
129 section.querySelector(".player_container").classList.remove("hidden");
130
131 // Construct player iframe
132 var player = document.createElement("iframe");
133 player.id = "player_" + stream;
134 player.classList.add("player");
135 player.allowFullscreen = "true";
136 player.width = "100%";
137 player.height = "100%";
138 player.frameborder = "0";
139 player.scrolling = "no";
140 player.src = "https://player.twitch.tv/?channel=" +
141 stream +
142 "&parent=" +
143 window.location.hostname +
144 "&muted=false&volume=1&quality=auto";
145
146 // inject player into stream container
147 section.querySelector(".player_container").prepend(player);
148
149 // Focus player
150 document.getElementById("player_" + stream).focus();
151
152 // Scroll to player
153 document.location = "#stream_" + stream;
154
155 }
156
157 }
158
159 function tw2html_toggle_chat(stream) {
160
161 // get stream section
162 var section = document.getElementById("stream_" + stream);
163
164 // get chat object if it exists
165 var chat = section.querySelectorAll("#chat_" + stream);
166
167 if (chat.length > 0) {
168 var chat = chat[0];
169 } else {
170 var chat = null;
171 }
172
173 if (chat !== null) {
174
175 chat.remove();
176
177 } else {
178
179 // Create chat iframe
180 var chat = document.createElement("iframe");
181 chat.id = "chat_" + stream;
182 chat.width = "100%";
183 chat.height = "100%";
184 chat.frameborder = "0";
185 chat.scrolling = "auto";
186 chat.src = "https://www.twitch.tv/embed/" +
187 stream +
188 "/chat?parent=" +
189 window.location.hostname;
190
191 // If dark mode is used, apply it to the chat as well
192 if (window.matchMedia('(prefers-color-scheme: dark)')) {
193 chat.src = chat.src + "&darkpopout";
194 }
195
196 // inject chat into chat container
197 section.querySelector(".chat_container").prepend(chat);
198 }
199
200 }
201
202 function tw2html_loading_indicator(stream, status) {
203
204 // Get loading indicator object
205 var indicator = document.getElementById("loading_indicator_" + stream);
206
207 // During Process
208 if (status == -1) {
209
210 // Unmark as online
211 indicator.classList.remove("online");
212
213 // Unmark as offline
214 indicator.classList.remove("offline");
215
216 }
217
218 // Online
219 if (status == 1) {
220
221 // Unmark as offnline
222 indicator.classList.remove("offline");
223
224 // Mark as online
225 indicator.classList.add("online");
226
227 }
228
229 // Offline
230 if (status == 0) {
231
232 // Unmark as online
233 indicator.classList.remove("online");
234
235 // Mark as offline
236 indicator.classList.add("offline");
237
238 }
239
240 }
241
242 function tw2html_reload() {
243
244 // Debug output
245 console.log("Reloading list of online streams...")
246
247 // gather list of sections (streams)
248 var sections = document.querySelectorAll(".streams");
249
250 // Loop through each section
251 for (i = 0; i < sections.length; i++) {
252
253 // Gather stream name
254 var stream = sections[i].id.replace("stream_", "");
255
256 // Mark as still processing
257 tw2html_loading_indicator(stream, -1)
258
259 // check online status and untoggle hidden class asynchronously
260 tw2html_toggle_hidden(stream);
261
262 }
263
264 }
265
266 function tw2html_daemon() {
267
268 // Run reload function initially
269 tw2html_reload();
270
271 // Recall daemon function after 5 minutes
272 setTimeout(tw2html_daemon, 60 * 5 * 1000);
273 }
