pub / tw2html

commit dab6293884900823cbd13b12cd194d03fcc93e66
parent 67e071ef8ac2c3d3eff2e00168fa3534bf79e85b
Author: JayVii <jayvii[AT]posteo[DOT]de>
Date:   Sat, 20 Apr 2024 13:33:50 +0200

Open Stream and Chat in external window

Diffstat:
M
assets/css/custom.css
 | 
23
+++++++++++++++++++++++
M
index.php
 | 
62
+++++++++++++++++++++++++++++++++++++++++++++++++++++++-------

2 files changed, 78 insertions(+), 7 deletions(-)
diff --git a/assets/css/custom.css b/assets/css/custom.css
@@ -11,6 +11,29 @@ html, body {
 	position: absolute!important;
 }
 
+/* External Player */
+#stream-window {
+	display: inline-block;
+	width: 100%;
+	min-width: 400px;
+	min-height: 225px;
+	aspect-ratio: 16/9;
+}
+#chat-window {
+	display: inline-block;
+	width: 100%;
+	min-width: 400px;
+	max-width: 500px;
+	height: 100vh;
+	min-height: 225px;
+}
+@media only screen and (min-width: 1000px) {
+	#stream-window {
+		width: calc(100% - 500px);
+	}
+}
+
+
 /* Stream Preview Image */
 .preview {
 	display: block;
diff --git a/index.php b/index.php
@@ -30,6 +30,12 @@ if (is_null($_POST["streams"])) {
 	$channels = unserialize($_POST["streams"]);
 }
 
+if (is_null($_GET["stream"])) {
+	$extplayer = false;
+} else {
+	$extplayer = true;
+}
+
 // Prepare streams array
 $streams = array(
 	"stream" => $channels,
@@ -166,17 +172,29 @@ if (!$loading_screen) {
 				"'></div>" .*/
 				// Button inner container
 				"<div class='buttons-inner'>" .
-				// Stream (Embedding)
+				// Stream (external Player)
 				"<a " .
-				"class='button' ".
-				"href='javascript:toggle_player(\"" .
-				$streams["stream"][$i] . "\", \"" . $streams["img"][$i] .
-				"\")' " .
-				"title='Player'>" .
+				"class='button' " .
+				// "target='_blank' " .
+				"href='/?stream=" . rawurlencode($streams["stream"][$i]) .
+				"&game=" . rawurlencode($streams["game"][$i]) .
+				"#player' " .
+				"title='External Player'>" .
 				"<img " .
 				"class='button-img' " .
 				"src='/assets/img/play_mono.svg'>" .
 				"</a>" .
+				// 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' ".
@@ -233,7 +251,7 @@ if (!$loading_screen) {
 		$content_menu .
 		"</ul><br>" .
 		$content;
-} else {
+} else if (!$extplayer) {
 	// Generate Loading Screen items
 	$menu_items = "<li>" .
 		"<strong style='color:#fff;'>" .
@@ -273,6 +291,36 @@ if (!$loading_screen) {
 		"}, " .
 		"1000);" .
 		"</script>";
+} else if ($extplayer) {
+
+	$menu_items = "<li>" . rawurldecode($_GET["stream"]) . " - " . rawurldecode($_GET["game"]);
+	$content = "<div id='player'>" .
+		"<div id='stream-window'>" .
+		"<iframe id='stream' allowfullscreen scrolling='no' " .
+		"src='https://player.twitch.tv/?channel=" . $_GET["stream"] .
+		"&parent=" . $_SERVER['SERVER_NAME'] . "' " .
+		"width='100%' height='100%'>" .
+		"</iframe>" .
+		"</div>" .
+		"<div id='chat-window'>" .
+		"<iframe scrolling='yes' " .
+		"src='https://www.twitch.tv/embed/" . $_GET["stream"] .
+		"/chat?parent=" . $_SERVER['SERVER_NAME'] . "'" .
+		" width='100%' height='100%'>" .
+		"</iframe>" .
+		"</div>" .
+		"</div>" .
+		// FIXME: make full width on desktop
+		"<script>setTimeout(function() { document.querySelector('div.container').style.width='100%'; }, 500);</script>" .
+		// FIXME: make chat full height
+		"<script>setTimeout(function() { document.querySelector('#chat-window').style.height=document.querySelector('#stream-window').offsetHeight + 'px'; }, 1000);</script>" .
+		// FIXME: scroll to player after load
+		"<script>setTimeout(function() { location.hash = '#player'; }, 1500);</script>";
+
+} else {
+
+	$menu_items = "<li><strong>Oh no!</strong></li>";
+	$content = "<p>You tried to do something that is not implemented (yet?)...";
 }
 ?>