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

video: Where to Watch — provider logos are badges + one real link

Browse source 
TMDB only exposes a single aggregate 'where to watch' link (no per-provider deep
links), so N identical links read as broken. Streaming providers are now
non-clickable availability badges, followed by ONE accent 'Where to watch ↗'
link to the JustWatch/TMDB page. The Plex/Jellyfin tile keeps its real per-item
server deep link.
This commit is contained in:
BoulderBadgeDad 2026-06-15 11:00:15 -07:00
parent e0b9245ba3
commit 595ea2bfbd
2 changed files with 21 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -415,10 +415,10 @@
'" target="_blank" rel="noopener" title="Play on ' + sv + '">' + '" target="_blank" rel="noopener" title="Play on ' + sv + '">' +
sicon + '<span class="vd-prov-name">Play on ' + sv + '</span></a>'; sicon + '<span class="vd-prov-name">Play on ' + sv + '</span></a>';
} }
// Streaming providers (JustWatch via TMDB) link to the where-to-watch // Streaming providers: TMDB only gives ONE aggregate 'where to watch'
// page. (TMDB only gives one aggregate link, so they share it.) Drop a // link (not per-provider), so showing N identical links is misleading.
// provider that's the same service as your server tile (e.g. Plex), so // Render the logos as availability BADGES, then a single link to the
// it isn't listed twice. // watch page. (Drop a provider matching your server tile, e.g. Plex.)
var link = ex.providers_link || ''; var link = ex.providers_link || '';
var srvName = (ex.server && ex.server.server || '').toLowerCase(); var srvName = (ex.server && ex.server.server || '').toLowerCase();
var provs = (ex.providers || []).filter(function (p) { var provs = (ex.providers || []).filter(function (p) {
@ -428,11 +428,15 @@
html += provs.map(function (p) { html += provs.map(function (p) {
var img = p.logo ? '<img src="' + esc(p.logo) + '" alt="' + esc(p.name) + '" loading="lazy">' var img = p.logo ? '<img src="' + esc(p.logo) + '" alt="' + esc(p.name) + '" loading="lazy">'
: '<span class="vd-prov-ph">' + esc((p.name || '?').charAt(0)) + '</span>'; : '<span class="vd-prov-ph">' + esc((p.name || '?').charAt(0)) + '</span>';
var inner = img + '<span class="vd-prov-name">' + esc(p.name) + '</span>'; return '<div class="vd-prov vd-prov--badge" title="' + esc(p.name) + '">' + img +
return link '<span class="vd-prov-name">' + esc(p.name) + '</span></div>';
? '<a class="vd-prov" href="' + esc(link) + '" target="_blank" rel="noopener" title="Where to watch — ' + esc(p.name) + '">' + inner + '</a>'
: '<div class="vd-prov" title="' + esc(p.name) + '">' + inner + '</div>';
}).join(''); }).join('');
if (link) {
html += '<a class="vd-prov vd-prov--more" href="' + esc(link) +
'" target="_blank" rel="noopener" title="See where to watch (JustWatch)">' +
'<span class="vd-prov-ph vd-prov-more-ic">↗</span>' +
'<span class="vd-prov-name">Where to watch</span></a>';
}
} }
ps.hidden = !html; ps.hidden = !html;
ph.innerHTML = html; ph.innerHTML = html;

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

@ -775,6 +775,15 @@ a.vd-prov:hover img, a.vd-prov:hover .vd-prov-ph { border-color: rgba(var(--vd-a
border: 0; border-radius: 0; box-shadow: none; border: 0; border-radius: 0; box-shadow: none;
} }
.vd-prov--server .vd-prov-name { color: #6ee7a0; font-weight: 700; } .vd-prov--server .vd-prov-name { color: #6ee7a0; font-weight: 700; }
/* streaming providers are informational badges (no per-provider link exists) */
.vd-prov--badge { cursor: default; }
/* the single real "where to watch" link (JustWatch/TMDB aggregate page) */
.vd-prov--more .vd-prov-more-ic {
display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 800;
color: rgb(var(--vd-accent-rgb)); background: rgba(var(--vd-accent-rgb), 0.16);
border-color: rgba(var(--vd-accent-rgb), 0.4);
}
.vd-prov--more .vd-prov-name { color: rgb(var(--vd-accent-rgb)); font-weight: 700; }
.vd-similar { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 12px; scroll-snap-type: x proximity; } .vd-similar { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 12px; scroll-snap-type: x proximity; }
.vd-similar::-webkit-scrollbar { height: 8px; } .vd-similar::-webkit-scrollbar { height: 8px; }