diff --git a/webui/static/video/video-detail.js b/webui/static/video/video-detail.js index 689ebce2..4bedc654 100644 --- a/webui/static/video/video-detail.js +++ b/webui/static/video/video-detail.js @@ -980,12 +980,23 @@ esc(ep.title || 'Untitled') + '' + (meta.length ? '' + esc(meta.join(' · ')) + '' : '') + '' + (ep.overview ? '

' + esc(ep.overview) + '

' : '') + '' + - '' + + ytWishBtn(ep.youtube_id, wished, false) + '' + ''; } + // The per-video wishlist toggle — the app-standard watchlist-button chrome + // (icon + text, accent gradient) so it stops looking bespoke. iconOnly trims + // the label for the tight playlist-section cards. + function ytWishBtn(id, wished, iconOnly) { + return ''; + } + function episodeRow(ep) { if (data && data.source === 'youtube') return ytEpisodeRow(ep); var owned = ep.owned ? 'vd-ep--owned' : 'vd-ep--missing'; @@ -1611,8 +1622,9 @@ if (ytVideoMap[id]) ytVideoMap[id].wished = val; var r0 = root(), btns = r0 ? r0.querySelectorAll('[data-vd-yt-wish="' + id + '"]') : []; for (var i = 0; i < btns.length; i++) { - btns[i].classList.toggle('vd-yt-wish--on', val); - btns[i].textContent = val ? '✓ Wished' : '+ Wish'; + btns[i].classList.toggle('watching', val); + var ic = btns[i].querySelector('.watchlist-icon'); if (ic) ic.textContent = val ? '✓' : '+'; + var tx = btns[i].querySelector('.watchlist-text'); if (tx) tx.textContent = val ? 'In Wishlist' : 'Wishlist'; } var ep = ytFindEp(id); if (ep) { ep.owned = val; renderSeasonNav(); } document.dispatchEvent(new CustomEvent('soulsync:video-wishlist-changed')); @@ -1713,8 +1725,7 @@ '' + thumb + '' + '
' + esc(v.title || 'Untitled') + '
' + - ''; + ytWishBtn(v.youtube_id, v.wished, true) + ''; } function toggleYtPlaylist(el) { var pid = el.getAttribute('data-vd-yt-pl-toggle'); diff --git a/webui/static/video/video-side.css b/webui/static/video/video-side.css index 51709ebe..786afbc7 100644 --- a/webui/static/video/video-side.css +++ b/webui/static/video/video-side.css @@ -2885,11 +2885,16 @@ body[data-side="video"] #soulsync-toggle { display: none; } /* YouTube episode rows have no index/badge → 4 columns (thumb · info · wish · chev) */ .vd-ep--yt { grid-template-columns: 150px 1fr auto auto; } /* per-video Wish button inside an episode row */ -.vd-yt-wish { flex-shrink: 0; align-self: center; border: 1px solid rgba(255,255,255,0.14); cursor: pointer; - background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.78); font-size: 11.5px; font-weight: 800; - padding: 6px 13px; border-radius: 999px; transition: all 0.15s ease; white-space: nowrap; } -.vd-yt-wish:hover { background: rgba(255,59,59,0.18); border-color: rgba(255,59,59,0.5); color: #fff; } -.vd-yt-wish--on { background: rgba(108,211,145,0.16); border-color: rgba(108,211,145,0.4); color: #6cd391; } +/* Per-video wishlist toggle = the standard watchlist button (.library-artist- + watchlist-btn), shrunk for the dense rows; .watching → "on the wishlist" green. */ +.vd-yt-wishbtn { flex-shrink: 0; align-self: center; padding: 5px 12px; font-size: 11.5px; white-space: nowrap; } +.vd-yt-wishbtn--icon { padding: 5px 9px; } +.vd-yt-wishbtn.watching { color: #6cd391; + background: linear-gradient(135deg, rgba(108,211,145,0.2) 0%, rgba(108,211,145,0.07) 100%); + border-color: rgba(108,211,145,0.4); } +.vd-yt-wishbtn.watching:hover:not(:disabled) { + background: linear-gradient(135deg, rgba(108,211,145,0.3) 0%, rgba(108,211,145,0.12) 100%); + box-shadow: 0 4px 16px rgba(108,211,145,0.2); } /* playlist video chips */ .vd-yt-plvid { display: flex; flex-direction: column; } .vd-yt-plvid-thumb { position: relative; display: block; aspect-ratio: 16/9; border-radius: 9px; overflow: hidden; background: #16161d; } @@ -2898,7 +2903,7 @@ body[data-side="video"] #soulsync-toggle { display: none; } .vd-yt-plvid-thumb:hover .vd-yt-plvid-play { opacity: 0.9; } .vd-yt-plvid-title { font-size: 12px; font-weight: 700; color: #fff; line-height: 1.3; margin-top: 7px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } -.vd-yt-plvid .vd-yt-wish { align-self: flex-start; margin-top: 7px; } +.vd-yt-plvid .vd-yt-wishbtn { align-self: flex-start; margin-top: 7px; } /* YouTube search-results loading state (skeleton cards + "searching…" label) */ .vsr-yt-loading { margin-left: 10px; font-size: 12px; font-weight: 600; color: #ff8a8a; opacity: 0.85; }