danvics/soulsync
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

YouTube videos: play in-app (stream via the embed overlay)

Browse source 
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.
This commit is contained in:
BoulderBadgeDad 2026-06-17 21:29:04 -07:00
parent 4788b54c91
commit 5506155abe
2 changed files with 10 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
webui/static/video/video-detail.js
View file

@ -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]');

4
webui/static/video/video-side.css
View file

@ -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; }