diff --git a/webui/static/video/video-detail.js b/webui/static/video/video-detail.js index 67a0c049..eff5c2f6 100644 --- a/webui/static/video/video-detail.js +++ b/webui/static/video/video-detail.js @@ -415,10 +415,10 @@ '" target="_blank" rel="noopener" title="Play on ' + sv + '">' + sicon + 'Play on ' + sv + ''; } - // Streaming providers (JustWatch via TMDB) link to the where-to-watch - // page. (TMDB only gives one aggregate link, so they share it.) Drop a - // provider that's the same service as your server tile (e.g. Plex), so - // it isn't listed twice. + // Streaming providers: TMDB only gives ONE aggregate 'where to watch' + // link (not per-provider), so showing N identical links is misleading. + // Render the logos as availability BADGES, then a single link to the + // watch page. (Drop a provider matching your server tile, e.g. Plex.) var link = ex.providers_link || ''; var srvName = (ex.server && ex.server.server || '').toLowerCase(); var provs = (ex.providers || []).filter(function (p) { @@ -428,11 +428,15 @@ html += provs.map(function (p) { var img = p.logo ? '' + esc(p.name) + '' : '' + esc((p.name || '?').charAt(0)) + ''; - var inner = img + '' + esc(p.name) + ''; - return link - ? '' + inner + '' - : '
' + inner + '
'; + return '
' + img + + '' + esc(p.name) + '
'; }).join(''); + if (link) { + html += '' + + '' + + 'Where to watch'; + } } ps.hidden = !html; ph.innerHTML = html; diff --git a/webui/static/video/video-side.css b/webui/static/video/video-side.css index 79d88fa3..0f776e45 100644 --- a/webui/static/video/video-side.css +++ b/webui/static/video/video-side.css @@ -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; } .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::-webkit-scrollbar { height: 8px; }