index.php (7059B)
1 <!-- SPDX-License-Identifier: AGPL-3.0-or-later
2 SPDX-FileCopyrightText: 2024 JayVii <jayvii[AT]posteo[DOT]de>
3 -->
4
5 <!DOCTYPE html>
6 <html>
7
8 <head>
9 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
10 <title>Twitch Streams</title>
11 <link rel="icon" type="image/png" href="assets/img/twitch.png">
12 <link rel="icon" type="image/png" sizes="16x16" href="assets/img/twitch_16.png">
13 <link rel="icon" type="image/png" sizes="32x32" href="assets/img/twitch_32.png">
14 <link rel="icon" type="image/png" sizes="64x64" href="assets/img/twitch_64.png">
15 <link rel="icon" type="image/png" sizes="128x128" href="assets/img/twitch_128.png">
16 <link rel="apple-touch-icon" href="assets/img/twitch.png">
17 <link rel="stylesheet" type="text/css" href="assets/css/simple.min.css"/>
18 <link rel="stylesheet" href="assets/css/custom.css" />
19 <script async src="assets/js/twitch.js"></script>
20 <link crossorigin="use-credentials" rel="manifest" href="manifest.json">
21 <meta name="viewport" content="width=device-width, initial-scale=1.0">
22 </head>
23
24 <?php
25
26 /* Initilise streams array */
27 $streams = array();
28
29 // Fetch POST argument or the COOKIE
30 // Cookie should have lowest priority (fallback), POST first (intend)
31 if (!is_null($_COOKIE["streams"])) {
32 $streams = explode(",", $_COOKIE["streams"]);
33 }
34 if (!is_null($_POST["streams"])) {
35 $streams = urldecode($_POST["streams"]);
36 $streams = preg_replace('/[^a-z0-9\-\_\.\,]+/', '', $streams);
37 $streams = explode(",", $streams);
38 }
39
40 // Sort streams by alphabet and ensure each stream is unique
41 sort($streams);
42 $streams = array_unique($streams);
43
44 /* refresh cookie */
45 header(
46 "Set-Cookie: " .
47 "streams=" . implode(",", $streams) . ";" .
48 "Max-Age=" . 31536000 . "; " . /* 60 x 60 x 24 x 365 = 1 year */
49 "Domain=" . $_SERVER["SERVER_NAME"] . "; " .
50 "SameSite=Strict;"
51 );
52
53 ?>
54
55 <body onload="tw2html_daemon();">
56
57 <header>
58
59 <!-- Buttons -->
60 <nav>
61 <a href="#" onclick="tw2html_reload();">Reload</a>
62 <a href="#streams">Streams</a>
63 <a href="#about">About</a>
64 </nav>
65
66 <!-- Headline -->
67 <h1>Streams</h1>
68
69 <!-- Loading Indicator -->
70 <div id="loading_indicator">
71 <?php
72 foreach ($streams as $stream) {
73 ?>
74 <span
75 class="loading_indicator"
76 id="loading_indicator_<?php echo $stream; ?>"
77 title="<?php echo $stream; ?>"
78 >
79 ■
80 </span>
81 <?php
82 }
83 ?>
84 </div>
85
86 </header>
87
88 <!-- Search Bar -->
89 <form
90 action="https://www.twitch.tv/search"
91 method="GET"
92 target="_blank"
93 >
94 <input
95 id="searchbar"
96 type="text"
97 id="searchInput"
98 name="term"
99 placeholder="Search on twitch.tv"
100 >
101 </form>
102
103 <!-- Stream List Form -->
104 <details id="streams">
105 <summary>List of Streams</summary>
106 <p>
107 Please enter the Twitch.TV usernames of streams you want to check here, each
108 separated with a <code>,</code>:
109 </p>
110 <form action="/" method="POST">
111 <textarea
112 name="streams"
113 placeholder="streamerA, streamerB, ..."
114 ><?php echo implode("," . PHP_EOL, $streams); ?></textarea>
115 <input type="submit" value="Submit & Reload">
116 </form>
117 </details>
118
119 <!-- Streams List -->
120 <?php
121
122 foreach ($streams as $stream) {
123
124 ?>
125
126 <!-- Section for streamer <?php echo $stream; ?> (hidden by default) -->
127 <section class="hidden streams" id="stream_<?php echo $stream; ?>">
128
129 <!-- Headline: streamer name -->
130 <h3>
131 <a
132 href="https://www.twitch.tv/<?php echo $stream; ?>"
133 target="_blank"
134 >
135 <?php echo $stream; ?>
136 </a>
137 </h3>
138
139 <!-- Description line -->
140 <p id="description_<?php echo $stream;?>"></p>
141
142 <!-- player Container -->
143 <div class="player_container hidden">
144 <button onclick="tw2html_toggle_player('<?php echo $stream; ?>')">
145 Toggle Player
146 </button>
147 </div>
148
149 <!-- Preview Image -->
150 <div
151 id="preview_<?php echo $stream; ?>"
152 class="preview"
153 >
154 <img
155 src=""
156 loading="lazy"
157 >
158 <div
159 class="play_button"
160 onclick="tw2html_toggle_player('<?php echo $stream; ?>')"
161 >
162 </div>
163 </div>
164
165 <!-- Chat Collapsable -->
166 <details>
167 <summary onclick="tw2html_toggle_chat('<?php echo $stream; ?>');">
168 Chat
169 </summary>
170 <div class="chat_container"></div>
171 </details>
172
173 </section>
174
175 <?php
176
177 }
178
179 ?>
180
181 <footer>
182 <h3 id="about">About</h3>
183 <details>
184 <summary>What is this?</summary>
185 <p>
186 This web-application is a way to <em>follow</em> Twitch-Channels,
187 without using either the Twitch.tv website directly or requiring a
188 twitch account.
189 </p>
190 <p>
191 Instead, this utility uses simple polling techniques in order to check,
192 which of the specified Twitch-Channels are currently online and
193 streaming. Simply insert a comma-separated list of twitch-usernames in
194 the form at the top of the page and click "save".
195 </p>
196 <p>
197 For each channel, the current online-status is checked periodically
198 every 15 minutes. All online users are then served on this page as a
199 simple list, including the current stream title and the stream thumbnail
200 image directly from twitch.tv. You can click the thumbnail of a
201 stream-preview to start playback. This will embed the livestream
202 directly, i.e. your browser will connect to twitch.tv
203 </p>
204 </details>
205 <details>
206 <summary>How can I contribute?</summary>
207 <p>
208 All development happens at
209 <a href="https://src.jayvii.de/pub/tw2html/" target="_blank">
210 src.jayvii.de/pub/tw2html
211 </a>. If you want to contribute or would like to self-host tw2html,
212 please head over there.
213 </p>
214 </details>
215 <details>
216 <summary>Privacy Statement</summary>
217 <p>
218 Besides Access Information, no information of site visitors are
219 collected.
220 </p>
221 <p>
222 When submitting a list of twitch-channels in the form, a cookie storing
223 that list is set, so the service knows which channels to poll. Set
224 cookies are not part of the collected access information and are not
225 analysed.
226 </p>
227 <p>
228 Polling the online-status of channels, starting to watch a channel’s
229 livestream or opening the “Chat” box is done client-side. Your browser
230 will directly connect to www.twitch.tv, thereby transfering your IP
231 address as well as potentially other data, leaked by your webbrowser.
232 You can find <a href="https://www.twitch.tv/privacy" target="_blank">
233 Twitch’s privacy policy here
234 </a>.
235 </p>
236 <p>
237 No other data is shared with anyone.
238 </p>
239 </footer>
240
241 </body>
242
243 </html>
