From 5506155abe65bf641245333bd2c04b09f873a7c6 Mon Sep 17 00:00:00 2001
From: BoulderBadgeDad <batmanesignal@gmail.com>
Date: Wed, 17 Jun 2026 21:29:04 -0700
Subject: [PATCH] YouTube videos: play in-app (stream via the embed overlay)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Clicking a video thumbnail now plays it inline — the thumbnails are play buttons
(data-vd-yt-play) that reuse the existing trailer overlay (youtube.com/embed/<id>
?autoplay=1). Applies to channel + playlist video cards and the playlist-section
mini-cards (which previously just linked out to YouTube). The rest of the row
still expands to details.
---
 webui/static/video/video-detail.js | 9 ++++++---
 webui/static/video/video-side.css  | 4 ++++
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/webui/static/video/video-detail.js b/webui/static/video/video-detail.js
index 7789c03b..12c0f706 100644
--- a/webui/static/video/video-detail.js
+++ b/webui/static/video/video-detail.js
@@ -979,7 +979,8 @@
         if (ep.air_date) meta.push(fmtDate(ep.air_date));
         var wished = !!ep.owned;
         return '<div class="vd-ep vd-ep--yt" data-vd-ep-key="' + key + '" data-vd-yt-vid="' + esc(ep.youtube_id) + '">' +
-            '<div class="vd-ep-thumb">' + still + '<span class="vd-ep-thumb-ic">▶</span>' + dur + '</div>' +
+            '<div class="vd-ep-thumb vd-ep-thumb--play" data-vd-yt-play="' + esc(ep.youtube_id) + '" title="Play video">' +
+            still + '<span class="vd-ep-thumb-ic">▶</span>' + dur + '</div>' +
             '<div class="vd-ep-info"><div class="vd-ep-top"><span class="vd-ep-title">' +
             esc(ep.title || 'Untitled') + '</span>' +
             (meta.length ? '<span class="vd-ep-rt">' + esc(meta.join(' · ')) + '</span>' : '') + '</div>' +
@@ -1743,8 +1744,8 @@
         var thumb = v.thumbnail_url
             ? '<img src="' + esc(ytProx(v.thumbnail_url)) + '" alt="" loading="lazy">' : '';
         return '<div class="vd-yt-plvid">' +
-            '<a class="vd-yt-plvid-thumb" href="https://www.youtube.com/watch?v=' + esc(v.youtube_id) +
-                '" target="_blank" rel="noopener" data-vd-ext>' + thumb + '<span class="vd-yt-plvid-play">▶</span></a>' +
+            '<div class="vd-yt-plvid-thumb" data-vd-yt-play="' + esc(v.youtube_id) + '" title="Play video">' +
+                thumb + '<span class="vd-yt-plvid-play">▶</span></div>' +
             '<div class="vd-yt-plvid-title" title="' + esc(v.title) + '">' + esc(v.title || 'Untitled') + '</div>' +
             ytWishBtn(v.youtube_id, v.wished, true) + '</div>';
     }
@@ -1820,6 +1821,8 @@
         }
         // YouTube channel interactions (rendered in the show container)
         if (e.target.closest('[data-vd-ext]')) return;   // let watch links open
+        var ytPlay = e.target.closest('[data-vd-yt-play]');   // play the video inline (reuses the trailer player)
+        if (ytPlay && r.contains(ytPlay)) { e.preventDefault(); openTrailer(ytPlay.getAttribute('data-vd-yt-play')); return; }
         var ytWish = e.target.closest('[data-vd-yt-wish]');
         if (ytWish && r.contains(ytWish)) { e.preventDefault(); toggleYtWish(ytWish); return; }
         var ytPlW = e.target.closest('[data-vd-yt-pl-watch]');
diff --git a/webui/static/video/video-side.css b/webui/static/video/video-side.css
index 786afbc7..fbc395fb 100644
--- a/webui/static/video/video-side.css
+++ b/webui/static/video/video-side.css
@@ -570,6 +570,10 @@ body[data-side="video"] .dashboard-header-sweep {
     padding: 1px 5px; border-radius: 4px; font-size: 11px; font-weight: 700; line-height: 1.4;
     color: #fff; background: rgba(0, 0, 0, 0.82); letter-spacing: 0.02em;
 }
+/* YouTube video thumbnails are play buttons (stream in-app via the embed overlay) */
+.vd-ep-thumb--play, .vd-yt-plvid-thumb { cursor: pointer; }
+.vd-ep-thumb--play .vd-ep-thumb-ic { opacity: 0.92; transform: scale(1); }   /* always show the play hint */
+.vd-ep-thumb--play:hover .vd-ep-thumb-ic { opacity: 1; transform: scale(1.15); }
 
 /* Channel search + sort controls (above the year pills) */
 .vd-season-nav--yt { display: flex; flex-direction: column; gap: 14px; }