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

video discover: lift page-wide controls into a distinct 'Across Discover' bar

Browse source 
Hide-owned + language + my-services were inside the Browse-all filter panel, making them read
as grid-only when they actually affect every rail. Moved them into a labelled 'Across Discover'
strip above the Browse panel (JS finds them by data-attribute, so no logic change). Browse panel
now holds only its grid filters (kind/sort/genre/source/decade).
This commit is contained in:
BoulderBadgeDad 2026-06-23 09:19:19 -07:00
parent 5906576a13
commit dffc5c2e5d
2 changed files with 43 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
webui/index.html
View file

@ -1037,22 +1037,17 @@
<div class="vdsc-amb" data-vdsc-amb aria-hidden="true"></div> <div class="vdsc-amb" data-vdsc-amb aria-hidden="true"></div>
<button class="vdsc-ignore-btn" type="button" data-vdsc-ignore-open title="Manage your Not-interested list"><span aria-hidden="true">🚫</span> Ignore List</button> <button class="vdsc-ignore-btn" type="button" data-vdsc-ignore-open title="Manage your Not-interested list"><span aria-hidden="true">🚫</span> Ignore List</button>
<div class="vdsc-hero hidden" data-vdsc-hero></div> <div class="vdsc-hero hidden" data-vdsc-hero></div>
<div class="vdsc-browse">
<div class="vdsc-browse-top"> <!-- Page-wide controls — these affect the WHOLE Discover page (every rail),
<div class="vdsc-seg" data-vdsc-seg="kind" role="group" aria-label="Type"> not just the "Browse all" grid below. Kept out of the browse panel so
<button class="vdsc-seg-btn vdsc-seg-btn--on" type="button" data-val="movie">Movies</button> that's clear. -->
<button class="vdsc-seg-btn" type="button" data-val="show">TV Shows</button> <div class="vdsc-global">
</div> <span class="vdsc-global-label">Across Discover</span>
<div class="vdsc-seg" data-vdsc-seg="sort" role="group" aria-label="Sort">
<button class="vdsc-seg-btn vdsc-seg-btn--on" type="button" data-val="popularity.desc">Popular</button>
<button class="vdsc-seg-btn" type="button" data-val="vote_average.desc">Top Rated</button>
<button class="vdsc-seg-btn" type="button" data-val="vote_count.desc">Most Voted</button>
</div>
<label class="vdsc-toggle"> <label class="vdsc-toggle">
<input type="checkbox" data-vdsc-hideowned> <input type="checkbox" data-vdsc-hideowned>
<span>Hide owned</span> <span>Hide owned</span>
</label> </label>
<div class="vdsc-langs" data-vdsc-langs aria-label="Rail languages" title="Which original languages show in the general rails"> <div class="vdsc-langs" data-vdsc-langs aria-label="Rail languages" title="Which original languages show in the rails">
<span class="vdsc-langs-label">🌐</span> <span class="vdsc-langs-label">🌐</span>
<button class="vdsc-lang vdsc-lang--on" type="button" data-lang="en">EN</button> <button class="vdsc-lang vdsc-lang--on" type="button" data-lang="en">EN</button>
<button class="vdsc-lang" type="button" data-lang="ko">KO</button> <button class="vdsc-lang" type="button" data-lang="ko">KO</button>
@ -1064,7 +1059,7 @@
<button class="vdsc-lang" type="button" data-lang="it">IT</button> <button class="vdsc-lang" type="button" data-lang="it">IT</button>
</div> </div>
<div class="vdsc-langs" data-vdsc-myprov aria-label="My streaming services" title="Your streaming services power the 'On your streaming services' rail"> <div class="vdsc-langs" data-vdsc-myprov aria-label="My streaming services" title="Your streaming services power the 'On your streaming services' rail">
<span class="vdsc-langs-label">📺</span> <span class="vdsc-langs-label">📺 My services</span>
<button class="vdsc-lang" type="button" data-prov="8">Netflix</button> <button class="vdsc-lang" type="button" data-prov="8">Netflix</button>
<button class="vdsc-lang" type="button" data-prov="9">Prime</button> <button class="vdsc-lang" type="button" data-prov="9">Prime</button>
<button class="vdsc-lang" type="button" data-prov="337">Disney+</button> <button class="vdsc-lang" type="button" data-prov="337">Disney+</button>
@ -1075,6 +1070,19 @@
<button class="vdsc-lang" type="button" data-prov="386">Peacock</button> <button class="vdsc-lang" type="button" data-prov="386">Peacock</button>
</div> </div>
</div> </div>
<div class="vdsc-browse">
<div class="vdsc-browse-top">
<div class="vdsc-seg" data-vdsc-seg="kind" role="group" aria-label="Type">
<button class="vdsc-seg-btn vdsc-seg-btn--on" type="button" data-val="movie">Movies</button>
<button class="vdsc-seg-btn" type="button" data-val="show">TV Shows</button>
</div>
<div class="vdsc-seg" data-vdsc-seg="sort" role="group" aria-label="Sort">
<button class="vdsc-seg-btn vdsc-seg-btn--on" type="button" data-val="popularity.desc">Popular</button>
<button class="vdsc-seg-btn" type="button" data-val="vote_average.desc">Top Rated</button>
<button class="vdsc-seg-btn" type="button" data-val="vote_count.desc">Most Voted</button>
</div>
</div>
<div class="vdsc-chips" data-vdsc-chipset="genre" aria-label="Genre"> <div class="vdsc-chips" data-vdsc-chipset="genre" aria-label="Genre">
<button class="vdsc-chip vdsc-chip--on" type="button" data-val="">All genres</button> <button class="vdsc-chip vdsc-chip--on" type="button" data-val="">All genres</button>
</div> </div>

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

@ -2364,6 +2364,15 @@ body[data-side="video"] #soulsync-toggle { display: none; }
.vdsc-lang:hover { color: rgba(255, 255, 255, 0.85); } .vdsc-lang:hover { color: rgba(255, 255, 255, 0.85); }
.vdsc-lang--on { color: #fff; background: rgba(var(--accent-rgb, 88 101 242), 0.85); border-color: transparent; } .vdsc-lang--on { color: #fff; background: rgba(var(--accent-rgb, 88 101 242), 0.85); border-color: transparent; }
/* ── Page-wide Discover controls (sit above the Browse panel; affect every rail) ── */
.vdsc-global { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px;
padding: 11px 16px; margin: 14px 0 6px; border-radius: 14px;
background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); }
.vdsc-global-label { font-size: 10.5px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase;
color: rgba(255, 255, 255, 0.32); margin-right: 2px; }
.vdsc-global .vdsc-toggle { margin-left: 0; }
.vdsc-global .vdsc-langs { margin-left: 0; }
/* ── 'Not interested' card button ──────────────────────────────────────────── */ /* ── 'Not interested' card button ──────────────────────────────────────────── */
.vsr-card { position: relative; } .vsr-card { position: relative; }
.vsr-notint { position: absolute; top: 6px; left: 6px; z-index: 6; width: 24px; height: 24px; .vsr-notint { position: absolute; top: 6px; left: 6px; z-index: 6; width: 24px; height: 24px;