pub / tw2html

commit 1be7d69c8d68ffcfb02bfb03823f4d2ad168a69c
parent 6624b105a58b2e5bb09935a7a7bd42ddcc1914f9
Author: JayVii <jayvii[AT]posteo[DOT]de>
Date:   Thu, 11 Dec 2025 19:02:03 +0100

feat: toggle player via overlay

Diffstat:
M
assets/css/custom.css
 | 
26
++++++++++++++++++++++++++
M
assets/js/twitch.js
 | 
5
+++--
A
assets/motion-play.svg
 | 
2
++
M
index.php
 | 
45
++++++++++++++++++++++++---------------------

4 files changed, 55 insertions(+), 23 deletions(-)
diff --git a/assets/css/custom.css b/assets/css/custom.css
@@ -1,6 +1,7 @@
 * {
 	scroll-behavior: smooth;
 }
+
 .preview, .player, .player_container {
 	height: auto;
 	width: 100%;
@@ -9,6 +10,31 @@
 	margin-bottom: 1em;
 	border: 0; 
 }
+
+/* Put animated play button on top of thumbnails */
+.preview {
+	position: relative;
+}
+.preview > image {
+	display: block;
+}
+.play_button {
+	position: absolute;
+  top: 25%;
+  left: 25%;
+  height: 50%;
+  width: 50%;
+  background: url("/assets/motion-play.svg") #cccccc;
+  background-size: 100% 100%;
+  border: 2px solid;
+  border-radius: 25px;
+  opacity: 0.5;
+}
+.play_button:hover {
+  filter: invert(100%);
+  opacity: 1;
+}
+
 #searchbar {
   width: 100%;
   margin-top: 2em;
diff --git a/assets/js/twitch.js b/assets/js/twitch.js
@@ -89,7 +89,8 @@ function tw2html_update_preview(stream) {
 		var now = new Date();
 
 		// Get image object
-		var img = document.getElementById("preview_" + stream);
+		var prv = document.getElementById("preview_" + stream);
+		var img = prv.querySelector("img");
 
 		// Update preview image
 		img.src = "https://static-cdn.jtvnw.net/previews-ttv/live_user_" + stream +
@@ -97,7 +98,7 @@ function tw2html_update_preview(stream) {
 			"?t=" + now.getTime(); // Add some index to force reload of image
 
 		// Ensure preview image is visible
-		img.classList.remove("hidden");
+		prv.classList.remove("hidden");
 
 }
 
diff --git a/assets/motion-play.svg b/assets/motion-play.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22 12C22 6.46 17.54 2 12 2C10.83 2 9.7 2.19 8.62 2.56L9.32 4.5C10.17 4.16 11.06 3.97 12 3.97C16.41 3.97 20.03 7.59 20.03 12C20.03 16.41 16.41 20.03 12 20.03C7.59 20.03 3.97 16.41 3.97 12C3.97 11.06 4.16 10.12 4.5 9.28L2.56 8.62C2.19 9.7 2 10.83 2 12C2 17.54 6.46 22 12 22C17.54 22 22 17.54 22 12M5.47 3.97C6.32 3.97 7 4.68 7 5.47C7 6.32 6.32 7 5.47 7C4.68 7 3.97 6.32 3.97 5.47C3.97 4.68 4.68 3.97 5.47 3.97M18 12C18 8.67 15.33 6 12 6C8.67 6 6 8.67 6 12C6 15.33 8.67 18 12 18C15.33 18 18 15.33 18 12M15 12L10 15V9" /></svg>
+\ No newline at end of file
diff --git a/index.php b/index.php
@@ -129,37 +129,40 @@
   <section class="hidden streams" id="stream_<?php echo $stream; ?>">
 
     <!-- Headline: streamer name -->
-    <h2>
-      <?php echo $stream; ?>
-    </h2>
+    <h3>
+      <a
+        href="https://www.twitch.tv/<?php echo $stream; ?>"
+        target="_blank"
+      >
+        <?php echo $stream; ?>
+      </a>
+    </h3>
 
     <!-- Description line -->
     <p id="description_<?php echo $stream;?>"></p>
 
     <!-- player Container -->
-    <div class="player_container hidden"></div>
+    <div class="player_container hidden">
+      <button onclick="tw2html_toggle_player('<?php echo $stream; ?>')">
+        Toggle Player
+      </button>
+    </div>
 
     <!-- Preview Image -->
-    <img
+    <div
       id="preview_<?php echo $stream; ?>"
       class="preview"
-      src=""
-      loading="lazy"
-    >
-
-    <!-- Stream Button -->
-    <button onclick="tw2html_toggle_player('<?php echo $stream; ?>')">
-      Toggle Player
-    </button>
-    <a
-      class="button"
-      href="https://www.twitch.tv/<?php echo $stream; ?>"
-      target="_blank"
     >
-      Open on Twitch
-    </a>
-    
-
+      <img
+        src=""
+        loading="lazy"
+      >
+      <div
+        class="play_button"
+        onclick="tw2html_toggle_player('<?php echo $stream; ?>')"
+      >
+      </div>
+    </div>
 
     <!-- Chat Collapsable -->
     <details>