commit e9b80a621d88a6f660f69901b371b14b650c547b
parent 74f22e214c4daf0ac27e07b71d6837e07c994f78
Author: JayVii <jayvii[AT]posteo[DOT]de>
Date: Sat, 24 Feb 2024 18:06:57 +0100
cleanup
Diffstat:
3 files changed, 273 insertions(+), 59 deletions(-)
diff --git a/assets/css/custom.css b/assets/css/custom.css
@@ -4,12 +4,67 @@ html, body {
font-size: 105% !important;
scroll-behavior: smooth;
}
+
+/* Navigation Bar */
+#nav {
+ font-size: 1.5em !important;
+ position: absolute!important;
+}
+
+/* Stream Preview Image */
+.preview {
+ display: block;
+ vertical-align: top;
+ width: 100%;
+ max-width: 853px;
+ max-height: 480px;
+ aspect-ratio: 16/9;
+ margin-left: auto;
+ margin-right: auto;
+ margin-top: 5px;
+ margin-bottom: 5px;
+}
+
+/* Button Container */
+.buttons-outer {
+ display: block;
+ width: 100%;
+ margin: 10px;
+ margin-left: auto;
+ margin-right: auto;
+ max-width: 853px;
+}
+.buttons-inner {
+ display: flex;
+ width: 100%;
+ margin: 10px;
+ margin-left: auto;
+ margin-right: auto;
+ max-width: 830px;
+}
+
+/* Buttons */
.button {
+ display: inline-block;
+ margin: 3px;
+ width: 100%;
+ text-align: center;
background-color: #5a03b9 !important;
}
.button:hover {
background-color: #8144c4 !important;
}
+.button-img {
+ width: 100%;
+ max-height: calc(80px - 53.15px);
+ color: #fff;
+}
+#button-reload {
+ color: #fff;
+ padding-left: 0.5em;
+ padding-right: 0.5em;
+}
+
/* DarkMode */
@media (prefers-color-scheme: dark) {
html {
diff --git a/assets/css/all.css b/assets/css/miniport.css
diff --git a/index.php b/index.php
@@ -6,7 +6,10 @@
<link crossorigin="use-credentials" rel="manifest" href="/manifest.json">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
- <!--<link rel="stylesheet" href="assets/css/main.css" />-->
+ <link rel="stylesheet" href="/assets/css/miniport.css" />
+ <link rel="stylesheet" href="/assets/css/custom.css" />
+ <link rel="stylesheet" href="/assets/css/loading.css" />
+ <script async src="/assets/js/twitch.js"></script>
</head>
<?php
@@ -15,8 +18,6 @@
$time0 = time();
// Fetch GET and POST arguments
-// "streams" via GET -> Show Loading Screen
-// "Streams" via POST -> Load Streams
if (!is_null($_GET["streams"])) {
$loading_screen = true;
$channels = explode(",", $_GET["streams"]);
@@ -71,13 +72,25 @@ if (!$loading_screen) {
array_push($streams["status"], 1);
// Fetch HTML
- $html = file_get_contents("https://m.twitch.tv/" . $streams["stream"][$i]);
+ $html = file_get_contents(
+ "https://m.twitch.tv/" . $streams["stream"][$i]
+ );
$html = str_replace(array("\r", "\n"), "", $html);
// Parse Game Name
$pattern = '/^.*<p.*?Playing <a.*?>(.*?)<\/a>.*$/';
$replacement = '\1';
- $game = substr(strip_tags(preg_replace($pattern, $replacement, $html)), 0, 100);
+ $game = substr(
+ strip_tags(
+ preg_replace(
+ $pattern,
+ $replacement,
+ $html
+ )
+ ),
+ 0,
+ 100
+ );
// Parse Stream Description
$html = preg_replace('/<script.*<\/script>/', '', $html);
@@ -85,7 +98,17 @@ if (!$loading_screen) {
$desc_raw = implode("", preg_grep('/name="description"/', $html));
$pattern = '/^.*content="(.*?)".*$/';
$replacement = '\1';
- $desc = substr(strip_tags(preg_replace($pattern, $replacement, $desc_raw)), 0, 500);
+ $desc = substr(
+ strip_tags(
+ preg_replace(
+ $pattern,
+ $replacement,
+ $desc_raw
+ )
+ ),
+ 0,
+ 500
+ );
}
@@ -113,101 +136,237 @@ if (!$loading_screen) {
// Generate Content List
$content = "";
- $content_menu = "<h1>Streams</h1>";
for ($i = 0; $i < sizeof($streams["stream"]); $i++) {
if ($streams["status"][$i] > 0) {
- // $content_menu = $content_menu . "<li style='display:inline-block;'><a style='display:inline-block;margin:3px;text-align:center;' class='button' href='#" . $streams["stream"][$i] . "'>" . $streams["stream"][$i] . "</a></li>";
- $content = $content . "<div id='" . $streams["stream"][$i] . "'></div>";
- $content = $content . "<h2>" . $streams["stream"][$i] . "</h2>";
- $content = $content . "<p><span style='color:#3fa8d2;margin-right:1em;'>" . $streams["game"][$i] . "</span>" . $streams["desc"][$i] . "</p>";
- $content = $content . "<div>";
- $content = $content . "<img id='img-" . $streams["stream"][$i] . "' style='display:block;vertical-align:top;width:100%;max-width:853px;max-height:480px;aspect-ratio:16/9;margin-left:auto;margin-right:auto;margin-top:5px;margin-bottom:5px;' src='" . $streams["img"][$i] . "'>";
-
- $content = $content . "<div style='display:block;width:100%;margin:10px;margin-left:auto;margin-right:auto;max-width:853px;'>";
- $content = $content . "<div id='chat-placeholder-" . $streams["stream"][$i] . "'></div>";
- /* Stream-Embedding and Chat-Embedding */
- //$content = $content . "<a style='display:inline-block;margin:3px;margin-left:auto;margin-right:auto;width:100%;max-width:853px;text-align:center;' class='button' href='javascript:toggle_player(\"" . $streams["stream"][$i] . "\", \"" . $streams["img"][$i] . "\");toggle_chat(\"" . $streams["stream"][$i] . "\");' title='Player'><img style='width:100%;max-height:calc(80px - 53.15px);color:#fff;' src='/assets/img/play_mono.svg'></a>";
- /* Chat-Embedding */
- //$content = $content . "<a style='display:inline-block;margin:3px;margin-left:auto;margin-right:auto;width:100%;max-width:853px;text-align:center;' class='button' href='javascript:toggle_chat(\"" . $streams["stream"][$i] . "\")' title='Chat'><img style='width:100%;max-height:calc(80px - 53.15px);color:#fff;' src='/assets/img/chat_mono.svg'></a>";
- /* Multi-Row */
- $content = $content . "<div style='display:flex;width:100%;margin:10px;margin-left:auto;margin-right:auto;max-width:830px;'>";
- /* Stream-Embedding */
- $content = $content . "<a style='display:inline-block;margin:3px;width:100%;text-align:center;' class='button' href='javascript:toggle_player(\"" . $streams["stream"][$i] . "\", \"" . $streams["img"][$i] . "\")' title='Player'><img style='width:100%;max-height:calc(80px - 53.15px);color:#fff;' src='/assets/img/play_mono.svg'></a>";
- /* Stream (New Tab) */
- //$content = $content . "<a style='display:inline-block;margin:3px;width:100%;text-align:center;' class='button' target='_blank' href='https://m.twitch.tv/" . $streams["stream"][$i] . "' title='Twitch'><img style='width:100%;max-height:calc(80px - 53.15px);color:#fff;' src='/assets/img/twitch_mono.svg'></a>";
- /* Streamlink */
- $content = $content . "<a style='display:inline-block;margin:3px;width:100%;text-align:center;' class='button' href='streamlink://twitch.tv/" . $streams["stream"][$i] . "?title=" . rawurlencode($streams["desc"][$i]) . "' title='Streamlink'><img style='width:100%;max-height:calc(80px - 53.15px);color:#fff;' src='/assets/img/streamlink_mono.svg'></a>";
- /* Chat (New Tab) */
- $content = $content . "<a style='display:inline-block;margin:3px;width:100%;text-align:center;' class='button' target='_blank' href='https://m.twitch.tv/popout/" . $streams["stream"][$i] . "/chat' title='Chat'><img style='width:100%;max-height:calc(80px - 53.15px);color:#fff;' src='/assets/img/chat_mono.svg'></a>";
- /* Chat-Embedding */
- //$content = $content . "<a style='display:inline-block;margin:3px;width:100%;text-align:center;' class='button' href='javascript:toggle_chat(\"" . $streams["stream"][$i] . "\")' title='Chat'><img style='width:100%;max-height:calc(80px - 53.15px);color:#fff;' src='/assets/img/chat_mono.svg'></a>";
- $content = $content . "</div>";
- $content = $content . "</div><br>";
- $content = $content . "<hr>";
+ $content = $content .
+ // Stream-Channel
+ "<div id='" . $streams["stream"][$i] . "'></div>" .
+ // Headline
+ "<h2>" . $streams["stream"][$i] . "</h2>" .
+ // Stream-Type and Description
+ "<p><span style='color:#3fa8d2;margin-right:1em;'>" .
+ $streams["game"][$i] .
+ "</span>" .
+ $streams["desc"][$i] .
+ "</p>" .
+ // Inner Container
+ "<div>" .
+ // Stream Preview
+ "<img id='img-" . $streams["stream"][$i] . "' " .
+ "class='preview' " .
+ "src='" . $streams["img"][$i] . "'>" .
+ // Button outer container
+ "<div class='buttons-outer'>" .
+ // Chat-Placeholder (for Embedding)
+ /*"<div id='chat-placeholder-" .
+ $streams["stream"][$i] .
+ "'></div>" .*/
+ // Button inner container
+ "<div class='buttons-inner'>" .
+ // Stream (Embedding)
+ "<a " .
+ "class='button' ".
+ "href='javascript:toggle_player(\"" .
+ $streams["stream"][$i] . "\", \"" . $streams["img"][$i] .
+ "\")' " .
+ "title='Player'>" .
+ "<img " .
+ "class='button-img' " .
+ "src='/assets/img/play_mono.svg'>" .
+ "</a>" .
+ // Stream (New Tab)
+ /*"<a " .
+ "class='button' ".
+ "target='_blank' ".
+ "href='https://m.twitch.tv/" .
+ $streams["stream"][$i] . "' " .
+ "title='Twitch'>".
+ "<img class='button-img' " .
+ "src='/assets/img/twitch_mono.svg'>" .
+ "</a>" .*/
+ // Stream (Streamlink)
+ "<a " .
+ "class='button' " .
+ "href='streamlink://twitch.tv/" .
+ $streams["stream"][$i] .
+ "?title=" .
+ rawurlencode($streams["desc"][$i]) .
+ "' title='Streamlink'>" .
+ "<img class='button-img' " .
+ "src='/assets/img/streamlink_mono.svg'>" .
+ "</a>" .
+ /* Chat (New Tab) */
+ "<a ".
+ "class='button' ".
+ "target='_blank' ".
+ "href='https://m.twitch.tv/popout/" .
+ $streams["stream"][$i] .
+ "/chat' " .
+ "title='Chat'>" .
+ "<img class='button-img' " .
+ "src='/assets/img/chat_mono.svg'>" .
+ "</a>" .
+ /* Chat (Embedding) */
+ /*"<a " .
+ "class='button' ".
+ "href='javascript:toggle_chat(\"" .
+ $streams["stream"][$i] .
+ "\")' " .
+ "title='Chat'>" .
+ "<img class='button-img' " .
+ "src='/assets/img/chat_mono.svg'>" .
+ "</a>" .*/
+ /* Close inner button container */
+ "</div>" .
+ /* Close outer button container */
+ "</div>" .
+ /* Close Stream container */
+ "</div>" .
+ /* Divider */
+ "<br><hr>";
}
}
- $content = "<ul class='container'>" . $content_menu . "</ul><br>" . $content;
+ $content = "<ul class='container'>" .
+ $content_menu .
+ "</ul><br>" .
+ $content;
} else {
// Generate Loading Screen items
- $menu_items = "<li><strong style='color:#fff;'>Loading Twitch Streams <span style='color:#ff0;' class='pulse'>•</span></strong></li>";
- $content = "<h1 style='text-align:center;'>Please be patient</h1><p style='text-align:center;'>Loading " . sizeof($streams["stream"]) . " streams. This may take a moment.</p><br>";
- $content = $content . "<div class='wrapper-loading'><div class='box-wrap'><div class='box one'></div><div class='box two'></div><div class='box three'></div><div class='box four'></div><div class='box five'></div><div class='box six'></div></div></div>";
- $content = $content . "<form id='channels' action='/' method='post'><input type='hidden' id='streams' name='streams', value='" . serialize($streams["stream"]) . "'>";
- $content = $content . "<script>setTimeout(function(){document.querySelector('#channels').submit()}, 1000);</script>";
+ $menu_items = "<li>" .
+ "<strong style='color:#fff;'>" .
+ "Loading Twitch Streams " .
+ "<span style='color:#ff0;' class='pulse'>•</span>" .
+ "</strong>" .
+ "</li>";
+ $content = "<h1 style='text-align:center;'>Please be patient</h1>" .
+ "<p style='text-align:center;'>Loading " .
+ sizeof($streams["stream"]) .
+ " streams. This may take a moment.</p>" .
+ "<br>" .
+ /* Loading Screen Animation */
+ "<div class='wrapper-loading'>" .
+ "<div class='box-wrap'>" .
+ "<div class='box one'></div>" .
+ "<div class='box two'></div>" .
+ "<div class='box three'></div>" .
+ "<div class='box four'></div>" .
+ "<div class='box five'></div>" .
+ "<div class='box six'></div>" .
+ "</div>" .
+ "</div>" .
+ /* Streams-form */
+ "<form id='channels' action='/' method='post'>" .
+ "<input " .
+ "type='hidden' " .
+ "id='streams' " .
+ "name='streams' ".
+ "value='" . serialize($streams["stream"]) ."'" .
+ ">" .
+ /* Form Submitter */
+ "<script>" .
+ "setTimeout(" .
+ "function(){" .
+ "document.querySelector('#channels').submit()" .
+ "}, " .
+ "1000);" .
+ "</script>";
}
?>
+<!-- HTML -->
-<!--<body class="is-preload">-->
<body>
- <nav id="nav" style="font-size:1.5em!important;position:absolute!important;">
+ <!-- NAVIGATION BAR -->
+
+ <nav id="nav">
<ul class="container">
+
<?php
- echo "<li><a href=\"javascript:window.location = '/?streams=" . implode(",", $streams["stream"]) . "';\" title=\"Reload\" style=\"color:#fff;padding-left:0.5em;padding-right:0.5em;\">↻</a></li>";
+ /* Reload Button */
+ echo "<li>" .
+ "<a " .
+ "href=\"javascript:" .
+ "window.location='/?streams=" .
+ implode(",", $streams["stream"]) .
+ "';\"" .
+ "title='Reload' " .
+ "id='button-reload'>" .
+ "↻" .
+ "</a>" .
+ "</li>";
+ /* Other menu items */
echo $menu_items;
?>
</ul>
</nav>
-
- <!-- List -->
<article id="top" class="wrapper">
+
+ <!-- SITE CONTENT -->
+
<div class="container">
+
<?php
echo $content;
?>
+
</div>
+
+ <!-- DEVELOPER INFORMATION -->
+
<div class="container">
<details>
<summary>Developer Information</summary>
<?php
- echo "<p>⏱ " . ((time() -$time0) / sizeof($streams["stream"])) . "s</p>";
+ // Loading time
+ echo "<p>⏱ " .
+ ((time() -$time0) / sizeof($streams["stream"])) .
+ "s</p>";
?>
+
<table>
<thead>
- <tr><th></th><th>Username</th><th>Online</th><th>Time</th><th>Desription</th></tr>
+ <tr>
+ <th></th>
+ <th>Username</th>
+ <th>Online</th>
+ <th>Time</th>
+ <th>Desription</th>
+ </tr>
</thead>
<tbody>
+
<?php
+
+ // Streams Table
for ($i = 0; $i < sizeof($streams["stream"]); $i++) {
- echo "<tr>";
- echo "<td>" . ($i + 1) . "</td>";
- echo "<td><a href='https://twitch.tv/" . $streams["stream"][$i] . "'>" . $streams["stream"][$i] . "</a></td>";
- echo "<td>" . array("✘", "✓")[$streams["status"][$i]] . "</td>";
- echo "<td>" . $streams["time"][$i] . "</td>";
- echo "<td>" . $streams["desc"][$i] . "</td>";
- echo "</tr>";
+ echo "<tr>" .
+ // ID
+ "<td>" . ($i + 1) . "</td>" .
+ // Name & URL
+ "<td>" .
+ "<a href='https://twitch.tv/" . $streams["stream"][$i] . "'>" .
+ $streams["stream"][$i] .
+ "</a>" .
+ "</td>" .
+ // Status
+ "<td>" .
+ array("✘", "✓")[$streams["status"][$i]] .
+ "</td>" .
+ // Time
+ "<td>" . $streams["time"][$i] . "</td>" .
+ // Description
+ "<td>" . $streams["desc"][$i] . "</td>" .
+ "</tr>";
}
+
?>
+
</tbody>
</table>
</details>
</div>
</article>
</body>
-
</html>
-<?php
- exit;
-?>
