diff --git a/webui/index.html b/webui/index.html
index ef0dab84..8f56489b 100644
--- a/webui/index.html
+++ b/webui/index.html
@@ -830,8 +830,11 @@
diff --git a/webui/static/video/video-detail.js b/webui/static/video/video-detail.js
index 372b21bc..3ae8da2a 100644
--- a/webui/static/video/video-detail.js
+++ b/webui/static/video/video-detail.js
@@ -14,10 +14,22 @@
'use strict';
var DETAIL_URL = '/api/video/detail/';
+ var TMDB_LOGO = 'https://www.themoviedb.org/assets/2/v4/logos/v2/blue_square_2-d537fb228cf3ded904ef09b136fe3fec72548ebc1fea3fbbd1ad9e36364db38b.svg';
+ var TVDB_LOGO = 'https://www.svgrepo.com/show/443500/brand-tvdb.svg';
var data = null;
var selectedSeason = null;
var menuOpen = false;
+ // Mirrors the music artist-hero badge: logo img with a short text fallback.
+ function badge(logo, fallback, title, url) {
+ var inner = logo
+ ? '
'
+ : '' + fallback + '';
+ return url
+ ? '' + inner + ''
+ : '' + inner + '
';
+ }
+
function esc(s) {
return String(s == null ? '' : s)
.replace(/&/g, '&').replace(//g, '>')
@@ -104,25 +116,29 @@
if (d.network) meta.push('' + esc(d.network) + '');
var m = q('[data-vd-meta]'); if (m) m.innerHTML = meta.join('');
- // actions — Netflix buttons + real external links
- var links = [];
- if (d.imdb_id) links.push(['IMDb', 'https://www.imdb.com/title/' + d.imdb_id + '/']);
- if (d.tmdb_id) links.push(['TMDB', 'https://www.themoviedb.org/tv/' + d.tmdb_id]);
- if (d.tvdb_id) links.push(['TVDB', 'https://thetvdb.com/?id=' + d.tvdb_id + '&tab=series']);
+ // Action buttons — reuse the EXACT music artist hero button styles.
var a = q('[data-vd-actions]');
if (a) {
a.innerHTML =
- '' +
- '' +
- links.map(function (l) {
- return '' +
- esc(l[0]) + ' ↗';
- }).join('');
+ '' +
+ '';
}
+
+ // External-source links as artist-hero-badge chips (logo + text fallback).
+ var l = q('[data-vd-links]');
+ if (l) {
+ var badges = [];
+ if (d.imdb_id) badges.push(badge('', 'IMDb', 'IMDb', 'https://www.imdb.com/title/' + d.imdb_id + '/'));
+ if (d.tmdb_id) badges.push(badge(TMDB_LOGO, 'TMDB', 'TMDB', 'https://www.themoviedb.org/tv/' + d.tmdb_id));
+ if (d.tvdb_id) badges.push(badge(TVDB_LOGO, 'TVDB', 'TVDB', 'https://thetvdb.com/?id=' + d.tvdb_id + '&tab=series'));
+ l.innerHTML = badges.join('');
+ }
+
var g = q('[data-vd-genres]');
- if (g) g.innerHTML = d.network ? '' : ''; // genres land with "capture everything"
+ if (g) g.innerHTML = ''; // genres land with "capture everything"
}
// ── season dropdown ───────────────────────────────────────────────────────
diff --git a/webui/static/video/video-side.css b/webui/static/video/video-side.css
index 35414859..96803130 100644
--- a/webui/static/video/video-side.css
+++ b/webui/static/video/video-side.css
@@ -491,22 +491,12 @@ body[data-side="video"] .dashboard-header-sweep {
text-shadow: 0 2px 12px rgba(0,0,0,0.6);
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
-.vd-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
-.vd-btn {
- display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border-radius: 8px;
- font-size: 14.5px; font-weight: 700; cursor: pointer; border: 1px solid transparent;
- text-decoration: none; transition: transform 0.18s ease, background 0.2s ease, box-shadow 0.2s ease;
-}
-.vd-btn:hover { transform: translateY(-2px); }
-.vd-btn-ic { font-size: 16px; line-height: 1; }
-.vd-btn--primary { background: rgb(var(--vd-accent-rgb)); color: #fff;
- box-shadow: 0 8px 24px rgba(var(--vd-accent-rgb), 0.45); }
-.vd-btn--primary:hover { box-shadow: 0 10px 30px rgba(var(--vd-accent-rgb), 0.6); filter: brightness(1.08); }
-.vd-btn--ghost { background: rgba(255,255,255,0.16); color: #fff; border-color: rgba(255,255,255,0.18); backdrop-filter: blur(6px); }
-.vd-btn--ghost:hover { background: rgba(255,255,255,0.26); }
-.vd-btn--link { background: rgba(0,0,0,0.35); color: rgba(255,255,255,0.85); border-color: rgba(255,255,255,0.16);
- font-size: 13px; padding: 10px 16px; backdrop-filter: blur(6px); }
-.vd-btn--link:hover { background: rgba(0,0,0,0.55); color: #fff; }
+/* Action buttons + source links reuse the music artist-detail classes verbatim
+ (.library-artist-watchlist-btn / .discog-download-btn / .artist-hero-badge);
+ only the billboard-specific bits live here. */
+.vd-actions { margin-bottom: 16px; }
+.vd-links { margin-bottom: 16px; }
+.vd-links .artist-hero-badge[title="TVDB"] img { filter: invert(1); }
.vd-loading { padding: 50px 0; text-align: center; color: rgba(255,255,255,0.55); }