From 261416fede558a8a287fa033b38f992c5d7f4073 Mon Sep 17 00:00:00 2001 From: BoulderBadgeDad Date: Tue, 16 Jun 2026 16:11:45 -0700 Subject: [PATCH] Video wishlist: the page (Movies grid + grouped TV tree) Tabbed Movies / TV page (mirrors the watchlist chrome). Movies render as a poster grid with status pill + hover remove. TV groups into collapsible show -> season -> episode rows with wanted/done roll-ups and a remove (x) at every level (episode / season / whole show). Server-paged + searchable; updates the nav + hero badges and listens for soulsync:video-wishlist-changed. Movie cards open detail. Wires the pre-existing Wishlist nav button (added its badge) + subpage container + .vwsh-* styles. --- webui/index.html | 50 ++++++ webui/static/video/video-side.css | 102 ++++++++++++ webui/static/video/video-wishlist.js | 236 +++++++++++++++++++++++++++ 3 files changed, 388 insertions(+) create mode 100644 webui/static/video/video-wishlist.js diff --git a/webui/index.html b/webui/index.html index a6b2311e..df4650a4 100644 --- a/webui/index.html +++ b/webui/index.html @@ -349,6 +349,7 @@ Wishlist + @@ -1038,6 +1039,53 @@ + + @@ -9658,6 +9706,8 @@ + + diff --git a/webui/static/video/video-side.css b/webui/static/video/video-side.css index 4ef749e2..a60c845b 100644 --- a/webui/static/video/video-side.css +++ b/webui/static/video/video-side.css @@ -2415,3 +2415,105 @@ body[data-side="video"] #soulsync-toggle { display: none; } /* keep the trailer close button on-screen (it sits above the frame on desktop) */ .vdsc-tr-close { top: 6px; right: 6px; background: rgba(0, 0, 0, 0.65); } } + +/* ══════════════════════════════════════════════════════════════════════════ + Wishlist page (.vwsh-*) — Movies grid + grouped TV show→season→episode tree + ══════════════════════════════════════════════════════════════════════════ */ +.vwsh-page { max-width: 1180px; margin: 0 auto; padding: 0 0 60px; } +.vwsh-head { position: relative; padding: 26px 0 16px; } +.vwsh-head-glow { position: absolute; top: -20px; left: 0; width: 320px; height: 180px; pointer-events: none; + background: radial-gradient(60% 80% at 0% 0%, rgba(var(--accent-rgb, 29, 185, 84), 0.16), transparent 70%); } +.vwsh-head-row { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; } +.vwsh-title { font-size: 30px; font-weight: 900; letter-spacing: -0.025em; color: #fff; margin: 0; } +.vwsh-sub { font-size: 14px; color: rgba(255, 255, 255, 0.5); margin: 6px 0 0; } +.vwsh-tabs { display: inline-flex; gap: 6px; background: rgba(255, 255, 255, 0.04); padding: 5px; + border-radius: 13px; border: 1px solid rgba(255, 255, 255, 0.07); } +.vwsh-tab { padding: 9px 18px; border: none; background: none; cursor: pointer; border-radius: 9px; + font-size: 13.5px; font-weight: 800; color: rgba(255, 255, 255, 0.55); transition: color 0.15s ease, background 0.15s ease; } +.vwsh-tab:hover { color: #fff; } +.vwsh-tab--on { color: #fff; background: rgba(var(--accent-rgb, 29, 185, 84), 0.9); + box-shadow: 0 6px 18px -6px rgba(var(--accent-rgb, 29, 185, 84), 0.7); } +.vwsh-tab-n { font-size: 11px; font-weight: 800; opacity: 0.7; margin-left: 4px; } + +.vwsh-toolbar { display: flex; gap: 12px; margin: 6px 0 22px; } +.vwsh-search { position: relative; flex: 1; max-width: 360px; } +.vwsh-search-ic { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: rgba(255, 255, 255, 0.35); } +.vwsh-search-input { width: 100%; padding: 11px 14px 11px 38px; border-radius: 11px; background: rgba(255, 255, 255, 0.05); + border: 1px solid rgba(255, 255, 255, 0.1); color: #fff; font-size: 13.5px; outline: none; transition: border-color 0.15s ease; } +.vwsh-search-input:focus { border-color: rgba(var(--accent-rgb, 29, 185, 84), 0.5); } + +.vwsh-loading { padding: 50px; text-align: center; } +.vwsh-state { padding: 70px 24px; text-align: center; } +.vwsh-state.hidden, .vwsh-loading.hidden, .vwsh-pagination.hidden { display: none; } +.vwsh-state-ic { font-size: 42px; margin-bottom: 12px; opacity: 0.8; } +.vwsh-state-title { font-size: 19px; font-weight: 800; color: #fff; margin-bottom: 7px; } +.vwsh-state-sub { font-size: 13.5px; color: rgba(255, 255, 255, 0.5); max-width: 430px; margin: 0 auto; line-height: 1.55; } + +.vwsh-pagination { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 26px; } +.vwsh-page-btn { padding: 9px 16px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); + border: 1px solid rgba(255, 255, 255, 0.1); color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; } +.vwsh-page-btn:disabled { opacity: 0.4; cursor: default; } +.vwsh-page-info { font-size: 13px; color: rgba(255, 255, 255, 0.5); } + +/* movies grid */ +.vwsh-grid--movies { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 22px 18px; } +.vwsh-movie { cursor: pointer; } +.vwsh-movie-art { position: relative; aspect-ratio: 2 / 3; border-radius: 12px; overflow: hidden; background: #16161d; + border: 1px solid rgba(255, 255, 255, 0.07); transition: border-color 0.18s ease, transform 0.18s ease; } +.vwsh-movie:hover .vwsh-movie-art { border-color: rgba(var(--accent-rgb, 29, 185, 84), 0.4); transform: translateY(-3px); } +.vwsh-movie-img { width: 100%; height: 100%; object-fit: cover; display: block; } +.vwsh-movie-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 34px; opacity: 0.4; } +.vwsh-movie-scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), transparent 45%); opacity: 0; transition: opacity 0.2s; } +.vwsh-movie:hover .vwsh-movie-scrim { opacity: 1; } +.vwsh-movie-info { padding: 8px 2px 0; } +.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 tree */ +.vwsh-grid--shows { display: flex; flex-direction: column; gap: 12px; } +.vwsh-show { border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 14px; background: rgba(255, 255, 255, 0.02); overflow: hidden; } +.vwsh-show-head { display: flex; align-items: center; gap: 13px; padding: 12px 14px; cursor: pointer; transition: background 0.15s; } +.vwsh-show-head:hover { background: rgba(255, 255, 255, 0.03); } +.vwsh-show-chev { color: rgba(255, 255, 255, 0.4); transition: transform 0.2s; font-size: 14px; } +.vwsh-show--open .vwsh-show-chev { transform: rotate(180deg); } +.vwsh-show-art { width: 42px; height: 60px; border-radius: 7px; overflow: hidden; flex-shrink: 0; background: #16161d; } +.vwsh-show-img { width: 100%; height: 100%; object-fit: cover; } +.vwsh-show-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 20px; opacity: 0.4; } +.vwsh-show-titles { flex: 1; min-width: 0; } +.vwsh-show-title { display: block; font-size: 15px; font-weight: 800; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } +.vwsh-show-meta { display: block; font-size: 12.5px; color: rgba(255, 255, 255, 0.45); margin-top: 3px; } +.vwsh-show-body { display: none; padding: 0 14px 10px; } +.vwsh-show--open .vwsh-show-body { display: block; } + +.vwsh-season { border-top: 1px solid rgba(255, 255, 255, 0.05); } +.vwsh-season-head { display: flex; align-items: center; gap: 10px; padding: 10px 4px; cursor: pointer; } +.vwsh-season-chev { color: rgba(255, 255, 255, 0.35); transition: transform 0.2s; font-size: 12px; } +.vwsh-season--open .vwsh-season-chev { transform: rotate(180deg); } +.vwsh-season-name { font-size: 13.5px; font-weight: 700; color: rgba(255, 255, 255, 0.9); } +.vwsh-season-meta { font-size: 12px; color: rgba(255, 255, 255, 0.4); margin-left: auto; } +.vwsh-season-eps { display: none; padding: 2px 0 6px; } +.vwsh-season--open .vwsh-season-eps { display: block; } +.vwsh-ep { display: flex; align-items: center; gap: 10px; padding: 7px 8px 7px 22px; border-radius: 8px; } +.vwsh-ep:hover { background: rgba(255, 255, 255, 0.03); } +.vwsh-ep-code { font-size: 11.5px; font-weight: 800; color: rgba(255, 255, 255, 0.4); min-width: 56px; flex-shrink: 0; } +.vwsh-ep-title { flex: 1; min-width: 0; font-size: 13px; color: rgba(255, 255, 255, 0.85); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } + +/* 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; } +.vwsh-st--wanted { background: rgba(var(--accent-rgb, 29, 185, 84), 0.16); color: rgb(var(--accent-rgb, 29, 185, 84)); } +.vwsh-st--searching { background: rgba(245, 158, 11, 0.16); color: #f59e0b; } +.vwsh-st--downloading { background: rgba(100, 149, 237, 0.18); color: #8ab0ff; } +.vwsh-st--done { background: rgba(34, 197, 94, 0.18); color: #4ade80; } +.vwsh-st--failed { background: rgba(248, 113, 113, 0.16); color: #f87171; } +.vwsh-movie-art .vwsh-st { position: absolute; top: 8px; left: 8px; z-index: 2; backdrop-filter: blur(6px); } + +.vwsh-rm { flex-shrink: 0; width: 26px; height: 26px; border-radius: 7px; border: 1px solid rgba(255, 255, 255, 0.12); + background: rgba(0, 0, 0, 0.35); color: rgba(255, 255, 255, 0.6); font-size: 17px; line-height: 1; cursor: pointer; + display: flex; align-items: center; justify-content: center; transition: all 0.15s ease; } +.vwsh-rm:hover { background: rgba(248, 113, 113, 0.85); border-color: transparent; color: #fff; } +.vwsh-rm:disabled { opacity: 0.4; cursor: default; } +.vwsh-movie-art .vwsh-rm { position: absolute; top: 8px; right: 8px; z-index: 3; opacity: 0; } +.vwsh-movie:hover .vwsh-movie-art .vwsh-rm { opacity: 1; } +.vwsh-season-head .vwsh-rm, .vwsh-ep .vwsh-rm { width: 24px; height: 24px; font-size: 15px; } +.vwsh-season-head .vwsh-rm { margin-left: 10px; } +@media (hover: none) { .vwsh-movie-art .vwsh-rm { opacity: 1; } } diff --git a/webui/static/video/video-wishlist.js b/webui/static/video/video-wishlist.js new file mode 100644 index 00000000..092f430d --- /dev/null +++ b/webui/static/video/video-wishlist.js @@ -0,0 +1,236 @@ +/* + * SoulSync — Video Wishlist page (isolated). + * + * The curated 'get this' list, split by a Movies / TV tab. Movies render as a + * poster grid; TV groups into collapsible show → season → episode rows with + * wanted/done roll-ups and a remove (✕) at every level. Server-paged + searchable + * like the other pages. Reads /api/video/wishlist; removes via /wishlist/remove. + * Self-contained IIFE, no globals. + */ +(function () { + 'use strict'; + + var PAGE_ID = 'video-wishlist'; + var LIMIT = 60; + var state = { loaded: false, tab: 'movie', search: '', page: 1, counts: { movie: 0, show: 0 } }; + var searchTimer = null; + + function $(s, r) { return (r || document).querySelector(s); } + function esc(s) { + return String(s == null ? '' : s) + .replace(/&/g, '&').replace(//g, '>').replace(/"/g, '"'); + } + + var STATUS = { + wanted: ['Wanted', 'vwsh-st--wanted'], searching: ['Searching', 'vwsh-st--searching'], + downloading: ['Downloading', 'vwsh-st--downloading'], downloaded: ['Done', 'vwsh-st--done'], + failed: ['Failed', 'vwsh-st--failed'], + }; + function statusPill(status) { + var s = STATUS[status] || STATUS.wanted; + return '' + s[0] + ''; + } + function rmBtn(scope, attrs) { + return ''; + } + + // ── movie card ──────────────────────────────────────────────────────────── + function movieCard(it) { + var owned = it.library_id != null; + var art = it.poster_url + ? '' + : '
🎬
'; + var meta = [it.year, owned ? 'In library' : null].filter(Boolean).join(' · '); + return '
' + + '
' + art + '
' + + statusPill(it.status) + rmBtn('movie', ' data-tmdb="' + esc(it.tmdb_id) + '"') + '
' + + '
' + + esc(it.title) + '' + (meta ? '' + esc(meta) + '' : '') + + '
'; + } + + // ── show group (collapsible show → season → episode) ────────────────────── + function showGroup(sh) { + var poster = sh.poster_url + ? '' + : '
📺
'; + var done = sh.done ? ' · ' + sh.done + ' done' : ''; + var seasons = (sh.seasons || []).map(function (se) { + var eps = (se.episodes || []).map(function (e) { + return '
' + + 'S' + se.season_number + '·E' + e.episode_number + '' + + '' + esc(e.title || ('Episode ' + e.episode_number)) + '' + + statusPill(e.status) + + rmBtn('episode', ' data-tmdb="' + esc(sh.tmdb_id) + '" data-s="' + se.season_number + '" data-e="' + e.episode_number + '"') + + '
'; + }).join(''); + return '
' + + '
' + + '' + + 'Season ' + se.season_number + '' + + '' + se.episodes.length + ' wanted' + + rmBtn('season', ' data-tmdb="' + esc(sh.tmdb_id) + '" data-s="' + se.season_number + '"') + + '
' + + '
' + eps + '
' + + '
'; + }).join(''); + return '
' + + '
' + + '' + + '
' + poster + '
' + + '
' + esc(sh.title) + '' + + '' + sh.wanted + ' wanted' + done + '
' + + rmBtn('show', ' data-tmdb="' + esc(sh.tmdb_id) + '"') + + '
' + + '
' + seasons + '
' + + '
'; + } + + 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('vwsh-grid--movies', !shows); + grid.innerHTML = items.map(shows ? showGroup : movieCard).join(''); + } + + // ── counts / badges / pager ─────────────────────────────────────────────── + function setCounts(counts) { + state.counts = { movie: (counts && counts.movie) || 0, show: (counts && counts.show) || 0 }; + var cm = $('[data-vwsh-count-movie]'); if (cm) cm.textContent = state.counts.movie; + var cs = $('[data-vwsh-count-show]'); if (cs) cs.textContent = state.counts.show; + updateBadges(counts && counts.total != null ? counts.total : (state.counts.movie + state.counts.show)); + } + function updateBadges(total) { + var n = total || 0; + ['[data-video-wishlist-badge]', '[data-video-badge="wishlist"]'].forEach(function (sel) { + document.querySelectorAll(sel).forEach(function (b) { + b.textContent = n; b.classList.toggle('hidden', !n); + }); + }); + } + function refreshBadge() { + fetch('/api/video/wishlist/counts', { headers: { Accept: 'application/json' } }) + .then(function (r) { return r.ok ? r.json() : null; }) + .then(function (d) { if (d && d.success) updateBadges(d.total); }) + .catch(function () { /* ignore */ }); + } + function updatePagination(p) { + var box = $('[data-vwsh-pagination]'), prev = $('[data-vwsh-prev]'), + next = $('[data-vwsh-next]'), info = $('[data-vwsh-pageinfo]'); + if (!box) return; + if (!p || p.total_pages <= 1) { box.classList.add('hidden'); return; } + if (prev) prev.disabled = !p.has_prev; + if (next) next.disabled = !p.has_next; + if (info) info.textContent = 'Page ' + p.page + ' of ' + p.total_pages; + box.classList.remove('hidden'); + } + function updateEmpty(total) { + var empty = $('[data-vwsh-empty]'); if (empty) empty.classList.toggle('hidden', total > 0); + var et = $('[data-vwsh-empty-title]'); + if (et && total === 0) { + et.textContent = state.search ? 'No matches' + : (state.tab === 'movie' ? 'No movies on your wishlist yet' : 'No TV episodes on your wishlist yet'); + } + } + + function load() { + state.loaded = true; + var ld = $('[data-vwsh-loading]'); if (ld) ld.classList.remove('hidden'); + var params = new URLSearchParams({ kind: state.tab, search: state.search, page: state.page, limit: LIMIT }); + fetch('/api/video/wishlist?' + params.toString(), { headers: { Accept: 'application/json' } }) + .then(function (r) { return r.ok ? r.json() : null; }) + .then(function (d) { + if (ld) ld.classList.add('hidden'); + if (!d || !d.success) { render([]); updatePagination(null); updateEmpty(0); return; } + setCounts(d.counts); + var p = d.pagination || { page: 1, total_pages: 1, total_count: (d.items || []).length }; + state.page = p.page; + render(d.items || []); + updatePagination(p); + updateEmpty(p.total_count); + }) + .catch(function () { if (ld) ld.classList.add('hidden'); render([]); updatePagination(null); updateEmpty(0); }); + } + + function setTab(tab) { + if (tab !== 'movie' && tab !== 'show') return; + state.tab = tab; state.page = 1; state.search = ''; + var si = $('[data-vwsh-search]'); if (si) si.value = ''; + var tabs = document.querySelectorAll('[data-vwsh-tab]'); + for (var i = 0; i < tabs.length; i++) + tabs[i].classList.toggle('vwsh-tab--on', tabs[i].getAttribute('data-vwsh-tab') === tab); + load(); + } + + // ── remove ──────────────────────────────────────────────────────────────── + function doRemove(btn) { + var scope = btn.getAttribute('data-vwsh-rm'); + var body = { scope: scope, tmdb_id: parseInt(btn.getAttribute('data-tmdb'), 10) }; + if (btn.hasAttribute('data-s')) body.season_number = parseInt(btn.getAttribute('data-s'), 10); + if (btn.hasAttribute('data-e')) body.episode_number = parseInt(btn.getAttribute('data-e'), 10); + btn.disabled = true; + fetch('/api/video/wishlist/remove', { method: 'POST', headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify(body) }) + .then(function (r) { return r.ok ? r.json() : null; }) + .then(function (d) { + if (!d || !d.success) { btn.disabled = false; return; } + if (typeof showToast === 'function') showToast('Removed from wishlist', 'info'); + load(); // re-render + counts + pager stay correct + }) + .catch(function () { btn.disabled = false; }); + } + + function onGridClick(e) { + var rm = e.target.closest('[data-vwsh-rm]'); + if (rm) { e.preventDefault(); e.stopPropagation(); doRemove(rm); return; } + var st = e.target.closest('[data-vwsh-season-toggle]'); + if (st) { st.parentNode.classList.toggle('vwsh-season--open'); return; } + var sh = e.target.closest('[data-vwsh-show-toggle]'); + if (sh) { sh.parentNode.classList.toggle('vwsh-show--open'); return; } + var mv = e.target.closest('[data-vwsh-open-movie]'); + if (mv) { + if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return; + document.dispatchEvent(new CustomEvent('soulsync:video-open-detail', { + detail: { kind: 'movie', id: parseInt(mv.getAttribute('data-vwsh-id'), 10), + source: mv.getAttribute('data-vwsh-src') || 'tmdb' }, + })); + } + } + + function wire() { + var tabs = document.querySelectorAll('[data-vwsh-tab]'); + for (var i = 0; i < tabs.length; i++) (function (b) { + b.addEventListener('click', function () { setTab(b.getAttribute('data-vwsh-tab')); }); + })(tabs[i]); + var grid = $('[data-vwsh-grid]'); if (grid) grid.addEventListener('click', onGridClick); + var search = $('[data-vwsh-search]'); + if (search) search.addEventListener('input', function () { + if (searchTimer) clearTimeout(searchTimer); + searchTimer = setTimeout(function () { state.search = search.value.trim(); state.page = 1; load(); }, 250); + }); + var prev = $('[data-vwsh-prev]'); + if (prev) prev.addEventListener('click', function () { if (state.page > 1) { state.page--; load(); } }); + var next = $('[data-vwsh-next]'); + if (next) next.addEventListener('click', function () { state.page++; load(); }); + // Adds elsewhere (the get-modal) refresh the badge + page if visible. + document.addEventListener('soulsync:video-wishlist-changed', function () { + var g = $('[data-vwsh-grid]'); + if (g && g.offsetParent !== null) load(); else refreshBadge(); + }); + } + + function onShown(e) { if (e && e.detail === PAGE_ID) { state.page = 1; load(); } } + + function init() { + wire(); + document.addEventListener('soulsync:video-page-shown', onShown); + refreshBadge(); + } + + if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init); + else init(); +})();