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 + '' + : '' + 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); }