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

video enrichment: real TMDB/TVDB logos + music-style hover tooltips

Browse source 
- Logos (the URLs you gave) everywhere the services are listed: dashboard
  buttons, Manage-Workers modal rail, and the settings API-config frames —
  matching how music shows enrichment-service logos.
- Dashboard hover tooltips now reuse music's shared .tooltip-content/-header/
  -body/-status/-current/-progress classes + the same positioning, so they look
  identical to the music enrichment tooltips (Status / current item / Progress)
  instead of my bespoke style. Music CSS untouched (shared classes, reused).
This commit is contained in:
BoulderBadgeDad 2026-06-14 12:38:35 -07:00
parent 776afdd1fd
commit 0e58973d43
4 changed files with 42 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
webui/index.html
View file

@ -440,26 +440,34 @@
<div class="header-actions">
<div class="video-enrich-container">
<button class="video-enrich-button" type="button" data-video-enrich="tmdb" title="TMDB Enrichment" style="--ve-accent: 1 180 228;">
<span class="video-enrich-label">TMDB</span>
<img class="video-enrich-logo" src="https://www.themoviedb.org/assets/2/v4/logos/v2/blue_square_2-d537fb228cf3ded904ef09b136fe3fec72548ebc1fea3fbbd1ad9e36364db38b.svg" alt="TMDB">
<span class="video-enrich-spinner" aria-hidden="true"></span>
</button>
<div class="video-enrich-tooltip" data-video-enrich-tooltip="tmdb">
<div class="video-enrich-tt-title">TMDB Enrichment</div>
<div class="video-enrich-tt-status" data-video-enrich-status>Idle</div>
<div class="video-enrich-tt-current" data-video-enrich-current>No active matches</div>
<div class="video-enrich-tt-progress" data-video-enrich-progress>0 / 0</div>
<div class="tooltip-content">
<div class="tooltip-header">TMDB Enrichment</div>
<div class="tooltip-body">
<div class="tooltip-status">Status: <span data-video-enrich-status>Idle</span></div>
<div class="tooltip-current" data-video-enrich-current>No active matches</div>
<div class="tooltip-progress" data-video-enrich-progress>Progress: 0 / 0</div>
</div>
</div>
</div>
</div>
<div class="video-enrich-container">
<button class="video-enrich-button" type="button" data-video-enrich="tvdb" title="TVDB Enrichment" style="--ve-accent: 108 211 145;">
<span class="video-enrich-label">TVDB</span>
<img class="video-enrich-logo" src="https://www.svgrepo.com/show/443500/brand-tvdb.svg" alt="TVDB">
<span class="video-enrich-spinner" aria-hidden="true"></span>
</button>
<div class="video-enrich-tooltip" data-video-enrich-tooltip="tvdb">
<div class="video-enrich-tt-title">TVDB Enrichment</div>
<div class="video-enrich-tt-status" data-video-enrich-status>Idle</div>
<div class="video-enrich-tt-current" data-video-enrich-current>No active matches</div>
<div class="video-enrich-tt-progress" data-video-enrich-progress>0 / 0</div>
<div class="tooltip-content">
<div class="tooltip-header">TVDB Enrichment</div>
<div class="tooltip-body">
<div class="tooltip-status">Status: <span data-video-enrich-status>Idle</span></div>
<div class="tooltip-current" data-video-enrich-current>No active matches</div>
<div class="tooltip-progress" data-video-enrich-progress>Progress: 0 / 0</div>
</div>
</div>
</div>
</div>
<button class="video-manage-workers-btn" type="button" data-video-manage-workers title="Manage video enrichment workers">
@ -4844,6 +4852,7 @@
<div class="api-service-frame stg-service" data-video-service="tmdb">
<div class="stg-service-header" onclick="toggleStgService(this)">
<span class="stg-service-dot" style="color: #01b4e4;"></span>
<img class="video-svc-logo" src="https://www.themoviedb.org/assets/2/v4/logos/v2/blue_square_2-d537fb228cf3ded904ef09b136fe3fec72548ebc1fea3fbbd1ad9e36364db38b.svg" alt="">
<h4 class="service-title">TMDB</h4>
<span class="stg-service-chevron">›</span>
</div>
@ -4862,6 +4871,7 @@
<div class="api-service-frame stg-service" data-video-service="tvdb">
<div class="stg-service-header" onclick="toggleStgService(this)">
<span class="stg-service-dot" style="color: #6cd391;"></span>
<img class="video-svc-logo" src="https://www.svgrepo.com/show/443500/brand-tvdb.svg" alt="">
<h4 class="service-title">TVDB</h4>
<span class="stg-service-chevron">›</span>
</div>

6
webui/static/video/video-enrichment-manager.js
View file

@ -15,6 +15,10 @@
{ id: 'tmdb', name: 'TMDB' },
{ id: 'tvdb', name: 'TVDB' },
];
var LOGOS = {
tmdb: 'https://www.themoviedb.org/assets/2/v4/logos/v2/blue_square_2-d537fb228cf3ded904ef09b136fe3fec72548ebc1fea3fbbd1ad9e36364db38b.svg',
tvdb: 'https://www.svgrepo.com/show/443500/brand-tvdb.svg',
};
var GLYPH = { movie: '🎬', show: '📺' };
var KIND_LABEL = { movie: 'Movies', show: 'Shows' };
@ -94,7 +98,7 @@
var cov = pct == null ? '' :
'<span class="em-rail-cov"><span class="em-rail-cov-fill" style="width:' + pct + '%"></span></span>';
return '<button class="em-worker-row" data-em-select="' + w.id + '">' +
'<span class="em-worker-icon vem-icon">' + esc(w.name) + '</span>' +
'<span class="em-worker-icon"><img class="vem-logo" src="' + LOGOS[w.id] + '" alt=""></span>' +
'<span class="em-worker-meta"><span class="em-worker-name">' + esc(w.name) + '</span>' +
'<span class="em-worker-sub">' + esc(railSub(s)) + '</span>' + cov + '</span>' +
'<span class="em-dot em-dot--' + info.cls + '" title="' + info.label + '"></span></button>';

2
webui/static/video/video-enrichment.js
View file

@ -52,7 +52,7 @@
total += prog[k].total || 0;
}
}
setText(tip, '[data-video-enrich-progress]', matched + ' / ' + total);
setText(tip, '[data-video-enrich-progress]', 'Progress: ' + matched + ' / ' + total);
}
function pollOne(svc) {

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

@ -169,7 +169,7 @@ body[data-side="video"] .dashboard-header-sweep {
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.video-enrich-button:hover { transform: translateY(-1px); border-color: rgb(var(--ve-accent, 88 101 242)); }
.video-enrich-label { position: relative; z-index: 1; }
.video-enrich-logo { width: 26px; height: 26px; object-fit: contain; position: relative; z-index: 1; }
.video-enrich-spinner {
position: absolute;
inset: -2px;
@ -186,29 +186,24 @@ body[data-side="video"] .dashboard-header-sweep {
.video-enrich-button.disabled { opacity: 0.4; cursor: default; }
@keyframes video-enrich-spin { to { transform: rotate(360deg); } }
/* Positioning wrapper only — the content reuses music's shared .tooltip-content
/ .tooltip-header / .tooltip-body styling, so it looks identical to the music
enrichment tooltips. */
.video-enrich-tooltip {
position: absolute;
top: 54px;
left: 50%;
transform: translateX(-50%);
min-width: 190px;
padding: 10px 12px;
background: rgba(12, 12, 16, 0.97);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
top: calc(100% + 12px);
transform: translateX(-50%) translateY(-5px);
z-index: 5000;
opacity: 0;
visibility: hidden;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
transition: opacity 0.15s ease;
z-index: 60;
font-size: 12px;
text-align: left;
}
.video-enrich-container:hover .video-enrich-tooltip { opacity: 1; }
.video-enrich-tt-title { font-weight: 700; margin-bottom: 4px; color: var(--text-primary, #e8e8ea); }
.video-enrich-tt-status, .video-enrich-tt-current, .video-enrich-tt-progress {
color: var(--text-secondary, #9aa0aa);
line-height: 1.5;
.video-enrich-container:hover .video-enrich-tooltip {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
.video-manage-workers-btn {
@ -228,9 +223,12 @@ body[data-side="video"] .dashboard-header-sweep {
}
.video-manage-workers-btn:hover { transform: translateY(-1px); border-color: rgba(var(--accent-rgb, 88 101 242), 0.55); }
.video-manage-workers-icon img { width: 22px; height: 22px; display: block; }
/* Service logo in the settings API-config frame headers (TMDB/TVDB). */
.video-svc-logo { width: 18px; height: 18px; object-fit: contain; margin-right: 2px; }
/* ── Video Manage-Workers modal: only the bits not covered by music's global
.em-* classes, ALL scoped to #vem-overlay so music is never affected. ───── */
#vem-overlay .vem-logo { width: 22px; height: 22px; object-fit: contain; }
#vem-overlay .vem-icon {
width: 34px;
height: 34px;