pub / tw2html

commit c753c47be1f8d539fddad1e56d32e976177c1c8c
parent e9b80a621d88a6f660f69901b371b14b650c547b
Author: JayVii <jayvii[AT]posteo[DOT]de>
Date:   Sat, 24 Feb 2024 18:18:20 +0100

Add Readme

Diffstat:
A
README.md
 | 
22
++++++++++++++++++++++
M
assets/js/twitch.js
 | 
17
+++++++++++------

2 files changed, 33 insertions(+), 6 deletions(-)
diff --git a/README.md b/README.md
@@ -0,0 +1,22 @@
+# tw2html
+
+Checks online status of streams on twitch.tv and lets you watch them right here!
+
+
+## Usage:
+
+You can simply call the `?streams` endpoint with a comma-separated list of your favorite streams:
+
+* index.php?streams=gamingonlinux,linustechtips,...
+
+Assuming you host this service under the URL "https://tw2html.example.com", you can open up the streamlist like so:
+
+```
+https://tw2html.example.com/?streams=gamingonlinux,linustechtips
+```
+
+The site will show you a loading screen, while the status of streams are fetched in the background. Once the process is finished, the site refreshes by itself and shows you a list of online streams. You can watch them directly on tw2html via iframe-embedding (this transfers your IP and user-agent information to twitch.tv). Alternatively if your client can handle `streamlink://` schemes, you may open the stream via [streamlink](https://streamlink.github.io/) as well.
+
+## Requirements:
+
+- PHP-7.2 or higher
diff --git a/assets/js/twitch.js b/assets/js/twitch.js
@@ -8,15 +8,17 @@ function toggle_player(stream, img64) {
 		player.height = "100%";
 		player.frameborder = "0";
 		player.scrolling = "no";
-		player.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;'";
-		player.src = "https://player.twitch.tv/?channel=" + stream + "&parent=" + window.location.hostname;
+		player.class = "preview";
+		player.src = "https://player.twitch.tv/?channel=" +
+			stream +
+			"&parent=" +
+			window.location.hostname;
 		player.id = "play-" + stream;
 		img.replaceWith(player);
 	}
 	if (ply != null) {
 		var image = document.createElement("img");
-		image.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;'";
-		//image.src = "https://static-cdn.jtvnw.net/previews-ttv/live_user_" + stream + "-853x480.jpg";
+		image.class= "preview";
 		image.src = img64;
 		image.id = "img-" + stream;
 		ply.replaceWith(image);
@@ -36,8 +38,11 @@ function toggle_chat(stream) {
 		chatembed.height = "100vh";
 		chatembed.frameborder = "0";
 		chatembed.scrolling = "auto";
-		chatembed.style = "display:block;vertical-align:top;max-width:853px;max-height:853px;min-height:480px;margin-left:auto;margin-right:auto;margin-top:5px;margin-bottom:5px;'";
-		chatembed.src = "https://www.twitch.tv/embed/" + stream + "/chat?parent=" + window.location.hostname;
+		chatembed.class = "preview"; /* FIXME: not the correct class */
+		chatembed.src = "https://www.twitch.tv/embed/" +
+			stream +
+			"/chat?parent=" +
+			window.location.hostname;
 		chatembed.id = "chat-" + stream;
 		plho.replaceWith(chatembed);
 	}