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

Wishlist TV: adopt the music 'Nebula' (show=orb, season=album, episode=track)

Browse source 
Ditched the filmstrip. The TV tab now renders the exact music wishlist nebula by
reusing its global wl-* classes: shows are glowing orbs sized by wanted-episode
count, click to expand into a season 'album fan' (tiles), click a season tile to
reveal its episodes; removes at episode/season + a show-remove × on the orb.
Everything's visible at once, no horizontal scrolling. Movies tab unchanged.

Only video-specific CSS is the show-remove button; behavior (orb/tile expand,
opens, removes) is wired via delegation in video-wishlist.js. Easy to tweak from
this shared base.
This commit is contained in:
BoulderBadgeDad 2026-06-16 17:05:51 -07:00
parent 1b456d548a
commit d90ae493dd
2 changed files with 60 additions and 94 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -2485,61 +2485,15 @@ body[data-side="video"] #soulsync-toggle { display: none; }
.vwsh-movie-title { display: block; font-size: 13.5px; font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vwsh-movie-meta { display: block; font-size: 11.5px; color: rgba(255, 255, 255, 0.45); margin-top: 2px; }
/* shows = filmstrip reels: poster + per-season film strips of episode cells */
.vwsh-grid--shows { display: flex; flex-direction: column; gap: 14px; }
.vwsh-reel { position: relative; display: flex; gap: 16px; padding: 16px; border-radius: 16px; overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.07); background: rgba(255, 255, 255, 0.02); }
.vwsh-reel::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
background: radial-gradient(120% 110% at 0% 0%, hsl(var(--vwsh-h, 230) 70% 45% / 0.12), transparent 55%); }
.vwsh-reel > * { position: relative; z-index: 1; }
.vwsh-reel-poster { width: 92px; flex-shrink: 0; aspect-ratio: 2 / 3; border-radius: 10px; overflow: hidden; cursor: pointer;
background: #16161d; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
transition: transform 0.18s ease, box-shadow 0.18s ease; }
.vwsh-reel-poster:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55), 0 0 22px hsl(var(--vwsh-h, 230) 70% 50% / 0.4); }
.vwsh-reel-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vwsh-reel-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 30px; opacity: 0.4; }
.vwsh-reel-body { flex: 1; min-width: 0; }
.vwsh-reel-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.vwsh-reel-titles { min-width: 0; cursor: pointer; }
.vwsh-reel-title { display: block; font-size: 17px; font-weight: 800; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vwsh-reel-titles:hover .vwsh-reel-title { color: hsl(var(--vwsh-h, 230) 80% 76%); }
.vwsh-reel-meta { display: block; font-size: 12.5px; color: rgba(255, 255, 255, 0.45); margin-top: 3px; }
.vwsh-reel-head .vwsh-rm { margin-left: auto; }
.vwsh-strips { display: flex; flex-direction: column; gap: 12px; }
.vwsh-strip { display: flex; align-items: stretch; gap: 10px; }
.vwsh-strip-label { flex-shrink: 0; align-self: center; display: inline-flex; align-items: center; gap: 4px;
min-width: 30px; font-size: 12px; font-weight: 800; color: rgba(255, 255, 255, 0.6); }
.vwsh-strip-label .vwsh-rm { width: 20px; height: 20px; font-size: 13px; opacity: 0; }
.vwsh-strip:hover .vwsh-strip-label .vwsh-rm { opacity: 1; }
/* the film band — dark with sprocket-hole borders top + bottom */
.vwsh-strip-track { position: relative; flex: 1; min-width: 0; display: flex; gap: 5px; overflow-x: auto;
padding: 12px 10px; border-radius: 7px; background: #0b0b0e; border: 1px solid rgba(255, 255, 255, 0.06); scrollbar-width: thin; }
.vwsh-strip-track::before, .vwsh-strip-track::after { content: ''; position: absolute; left: 8px; right: 8px; height: 6px;
pointer-events: none; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0 6px, transparent 6px 13px); }
.vwsh-strip-track::before { top: 3px; }
.vwsh-strip-track::after { bottom: 3px; }
.vwsh-strip-track::-webkit-scrollbar { height: 6px; }
.vwsh-strip-track::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.14); border-radius: 3px; }
/* episode = a film cell; hover widens it to reveal the title */
.vwsh-cell { position: relative; flex: 0 0 auto; width: 46px; height: 64px; border-radius: 4px;
display: flex; align-items: center; gap: 7px; padding: 0 9px; overflow: hidden;
background: linear-gradient(160deg, hsl(var(--vwsh-h, 230) 58% 30%), hsl(var(--vwsh-h, 230) 52% 15%));
border: 1px solid hsl(var(--vwsh-h, 230) 60% 50% / 0.35);
transition: width 0.22s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.15s ease, box-shadow 0.15s ease; }
.vwsh-cell:hover { width: 170px; transform: translateY(-2px); z-index: 3; box-shadow: 0 10px 24px hsl(var(--vwsh-h, 230) 70% 40% / 0.5); }
.vwsh-cell-num { flex-shrink: 0; font-size: 13px; font-weight: 900; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
.vwsh-cell-title { font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, 0.92); white-space: nowrap;
opacity: 0; overflow: hidden; text-overflow: ellipsis; transition: opacity 0.18s ease 0.05s; }
.vwsh-cell:hover .vwsh-cell-title { opacity: 1; }
.vwsh-cell .vwsh-rm { position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; font-size: 13px;
opacity: 0; background: rgba(0, 0, 0, 0.5); }
.vwsh-cell:hover .vwsh-rm { opacity: 1; }
.vwsh-cell--downloading { background: linear-gradient(160deg, #2a4a8f, #16243f); border-color: rgba(100, 149, 237, 0.5); }
.vwsh-cell--downloaded { background: linear-gradient(160deg, #1d6b3f, #0e3320); border-color: rgba(34, 197, 94, 0.5); }
.vwsh-cell--failed { background: linear-gradient(160deg, #7a2b2b, #3a1414); border-color: rgba(248, 113, 113, 0.5); }
/* shows = the "Nebula" (reuses the music wl-* orb/album/track design).
Only the show-remove button is video-specific. */
.wl-nebula-field .wl-orb-remove { position: absolute; top: 0; right: 0; z-index: 6; width: 22px; height: 22px;
border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(0, 0, 0, 0.62);
color: rgba(255, 255, 255, 0.7); font-size: 11px; line-height: 1; cursor: pointer;
display: flex; align-items: center; justify-content: center; opacity: 0; transition: all 0.15s ease; }
.wl-nebula-field .wl-orb-group:hover .wl-orb-remove,
.wl-nebula-field .wl-orb-group.expanded .wl-orb-remove { opacity: 1; }
.wl-nebula-field .wl-orb-remove:hover { background: rgba(239, 68, 68, 0.85); border-color: transparent; color: #fff; }
/* status pills + remove button */
.vwsh-st { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; padding: 3px 8px; border-radius: 6px; flex-shrink: 0; }
@ -2563,12 +2517,4 @@ body[data-side="video"] #soulsync-toggle { display: none; }
@media (max-width: 900px) {
.vwsh-head, .vwsh-toolbar, .vwsh-body { padding-left: 18px; padding-right: 18px; }
.vwsh-grid--movies { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 18px 14px; }
.vwsh-reel { gap: 12px; padding: 12px; }
.vwsh-reel-poster { width: 64px; }
.vwsh-cell:hover { width: 144px; }
}
@media (hover: none) {
.vwsh-cell { width: 150px; }
.vwsh-cell-title { opacity: 1; }
.vwsh-cell .vwsh-rm, .vwsh-strip-label .vwsh-rm { opacity: 1; }
}

82
webui/static/video/video-wishlist.js
View file

@ -53,53 +53,68 @@
'</div></div>';
}
// ── show reel (poster + per-season film strips of episode cells) ──────────
function reelCard(sh) {
// ── show orb (the "Nebula": show→artist, season→album, episode→track) ─────
function initials(s) {
var w = String(s || '').replace(/[^A-Za-z0-9 ]/g, '').split(' ').filter(Boolean);
var i = w.slice(0, 2).map(function (x) { return x[0]; }).join('');
return (i || String(s || '?').slice(0, 2)).toUpperCase();
}
function orbSize(n) { return n >= 10 ? 'orb-lg' : n >= 4 ? 'orb-md' : 'orb-sm'; }
function nebulaOrb(sh, idx) {
var src = sh.library_id != null ? 'library' : 'tmdb';
var openId = sh.library_id != null ? sh.library_id : sh.tmdb_id;
var hook = ' data-vwsh-open-show="1" data-vwsh-src="' + src + '" data-vwsh-id="' + esc(openId) + '"';
var poster = sh.poster_url
? '<img class="vwsh-reel-img" src="' + esc(sh.poster_url) + '" alt="" loading="lazy" onerror="this.style.display=\'none\'">'
: '<div class="vwsh-reel-ph">📺</div>';
var done = sh.done ? ' · ' + sh.done + ' done' : '';
var strips = (sh.seasons || []).map(function (se) {
var cells = (se.episodes || []).map(function (e) {
var st = STATUS[e.status] ? e.status : 'wanted';
var hue = hueOf(sh.title);
var total = sh.wanted || 0;
var img = sh.poster_url
? '<img class="wl-orb-img" src="' + esc(sh.poster_url) + '" alt="" ' +
'onerror="this.outerHTML=\'<div class=&quot;wl-orb-initials&quot;>' + esc(initials(sh.title)) + '</div>\'">'
: '<div class="wl-orb-initials">' + esc(initials(sh.title)) + '</div>';
var tiles = (sh.seasons || []).map(function (se) {
var n = se.episodes.length;
var art = sh.poster_url
? '<div class="wl-album-tile-art"><img src="' + esc(sh.poster_url) + '" alt=""></div>'
: '<div class="wl-album-tile-art"><div class="wl-album-tile-fallback">S' + se.season_number + '</div></div>';
var tracks = (se.episodes || []).map(function (e) {
var t = e.title || ('Episode ' + e.episode_number);
return '<div class="vwsh-cell vwsh-cell--' + st + '" title="S' + se.season_number + '·E' + e.episode_number + ' — ' + esc(t) + '">' +
'<span class="vwsh-cell-num">E' + e.episode_number + '</span>' +
'<span class="vwsh-cell-title">' + esc(t) + '</span>' +
rmBtn('episode', ' data-tmdb="' + esc(sh.tmdb_id) + '" data-s="' + se.season_number + '" data-e="' + e.episode_number + '"') +
return '<div class="wl-tile-track">' +
'<span class="wl-tile-track-name">E' + e.episode_number + ' · ' + esc(t) + '</span>' +
'<button class="wl-tile-track-remove" type="button" data-vwsh-rm="episode" ' +
'data-tmdb="' + esc(sh.tmdb_id) + '" data-s="' + se.season_number + '" data-e="' + e.episode_number + '" title="Remove">&#10005;</button>' +
'</div>';
}).join('');
return '<div class="vwsh-strip">' +
'<div class="vwsh-strip-label">S' + se.season_number +
rmBtn('season', ' data-tmdb="' + esc(sh.tmdb_id) + '" data-s="' + se.season_number + '"') +
return '<div class="wl-album-tile" data-vwsh-tile>' + art +
'<div class="wl-album-tile-info">' +
'<div class="wl-album-tile-name">Season ' + se.season_number + '</div>' +
'<div class="wl-album-tile-count">' + n + ' episode' + (n === 1 ? '' : 's') + '</div>' +
'</div>' +
'<div class="vwsh-strip-track">' + cells + '</div>' +
'<span class="wl-album-tile-badge">' + n + '</span>' +
'<button class="wl-album-tile-remove" type="button" data-vwsh-rm="season" ' +
'data-tmdb="' + esc(sh.tmdb_id) + '" data-s="' + se.season_number + '" title="Remove season">&#10005;</button>' +
'<div class="wl-tile-tracks">' + tracks + '</div>' +
'</div>';
}).join('');
return '<div class="vwsh-reel" style="--vwsh-h:' + hueOf(sh.title) + '">' +
'<div class="vwsh-reel-poster"' + hook + '>' + poster + '</div>' +
'<div class="vwsh-reel-body">' +
'<div class="vwsh-reel-head">' +
'<div class="vwsh-reel-titles"' + hook + '>' +
'<span class="vwsh-reel-title" title="' + esc(sh.title) + '">' + esc(sh.title) + '</span>' +
'<span class="vwsh-reel-meta">' + sh.wanted + ' wanted' + done + '</span>' +
'</div>' +
rmBtn('show', ' data-tmdb="' + esc(sh.tmdb_id) + '"') +
'</div>' +
'<div class="vwsh-strips">' + strips + '</div>' +
var eps = total + ' episode' + (total === 1 ? '' : 's');
return '<div class="wl-orb-group" data-vwsh-group style="animation-delay:' + Math.min(idx * 45, 700) + 'ms">' +
'<button class="wl-orb-remove" type="button" data-vwsh-rm="show" data-tmdb="' + esc(sh.tmdb_id) + '" title="Remove show">&#10005;</button>' +
'<div class="wl-orb-tooltip">' + esc(sh.title) + '<br><span>' + eps + '</span></div>' +
'<div class="wl-orb ' + orbSize(total) + '" style="--orb-hue:' + hue + '" data-vwsh-orb>' +
'<div class="wl-orb-glow"></div>' + img + '<div class="wl-orb-ring"></div>' +
'</div>' +
'<div class="wl-orb-label" data-vwsh-open-show data-vwsh-src="' + src + '" data-vwsh-id="' + esc(openId) + '" title="' + esc(sh.title) + '">' + esc(sh.title) + '</div>' +
'<div class="wl-orb-meta">' + eps + (sh.done ? ' · ' + sh.done + ' done' : '') + '</div>' +
'<div class="wl-orb-expanded"><div class="wl-album-fan">' + tiles + '</div></div>' +
'</div>';
}
function render(items) {
var grid = $('[data-vwsh-grid]'); if (!grid) return;
var shows = state.tab === 'show';
grid.classList.toggle('vwsh-grid--shows', shows);
grid.classList.toggle('wl-nebula-field', shows);
grid.classList.toggle('vwsh-grid--movies', !shows);
grid.innerHTML = items.map(shows ? reelCard : movieCard).join('');
grid.innerHTML = shows
? items.map(function (sh, i) { return nebulaOrb(sh, i); }).join('')
: items.map(movieCard).join('');
}
// ── counts / badges / pager ───────────────────────────────────────────────
@ -200,7 +215,12 @@
id: parseInt(open.getAttribute('data-vwsh-id'), 10),
source: open.getAttribute('data-vwsh-src') || 'tmdb' },
}));
return;
}
var tile = e.target.closest('[data-vwsh-tile]');
if (tile) { tile.classList.toggle('tile-expanded'); return; } // season → episodes
var orb = e.target.closest('[data-vwsh-orb]');
if (orb) { var g = orb.closest('.wl-orb-group'); if (g) g.classList.toggle('expanded'); } // show → seasons
}
function wire() {