From 3382cd620836c48b74c9047b0297e9dfa9efdb99 Mon Sep 17 00:00:00 2001
From: Svilen Markov <7613769+svilenmarkov@users.noreply.github.com>
Date: Thu, 17 Oct 2024 21:53:07 +0100
Subject: [PATCH] Show twitch stream preview and title on avatar hover

---
 internal/assets/static/main.css                | 7 +++++++
 internal/assets/templates/twitch-channels.html | 8 +++++++-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/internal/assets/static/main.css b/internal/assets/static/main.css
index 362e257..d8152c5 100644
--- a/internal/assets/static/main.css
+++ b/internal/assets/static/main.css
@@ -1504,6 +1504,13 @@ details[open] .summary::after {
     border: 2px solid var(--color-widget-background);
 }
 
+.twitch-stream-preview {
+    width: 100%;
+    aspect-ratio: 16 / 9;
+    border-radius: var(--border-radius);
+    object-fit: cover;
+}
+
 .reddit-card-thumbnail {
     width: 100%;
     height: 100%;
diff --git a/internal/assets/templates/twitch-channels.html b/internal/assets/templates/twitch-channels.html
index aba7935..e8785d5 100644
--- a/internal/assets/templates/twitch-channels.html
+++ b/internal/assets/templates/twitch-channels.html
@@ -5,7 +5,13 @@
     {{ range .Channels }}
     <li>
         <div class="{{ if .IsLive }}twitch-channel-live {{ end }}flex gap-10 items-start thumbnail-parent">
-            <div class="twitch-channel-avatar-container">
+            <div class="twitch-channel-avatar-container"{{ if .IsLive }} data-popover-type="html" data-popover-position="above" data-popover-margin="0.15rem"{{ end }}>
+                {{ if .IsLive }}
+                <div data-popover-html>
+                    <img class="twitch-stream-preview" src="https://static-cdn.jtvnw.net/previews-ttv/live_user_{{ .Login }}-440x248.jpg" loading="lazy" alt="">
+                    <p class="margin-top-10 color-highlight text-truncate-3-lines">{{ .StreamTitle }}</p>
+                </div>
+                {{ end }}
                 {{ if .Exists }}
                 <a href="https://twitch.tv/{{ .Login }}" class="twitch-channel-avatar-link" target="_blank" rel="noreferrer">
                     <img class="twitch-channel-avatar thumbnail" src="{{ .AvatarUrl }}" alt="" loading="lazy">