vicrodh
a0f5cf2bf5
Smoke rounds 3-4 (owner feedback). Checkpoint during iteration. Ambient (the big one): rewrote ambient.wgsl from translating gaussian blobs to a METABALL field (r²/d² summed + smoothstep iso-surface) with 2-octave domain warp — lobes fuse/stretch/split like an amoeba / lava lamp (the Cider motion that was missing), faster clock, more contrast. Surfaces made background-aware (translucent when the dynamic background is on): - Search results view (root + toolbar), artist Network panel + its tab-row header (transparent to avoid double-translucent compounding), JUMP TO bar (JumpNavBar bar-bg passed in — can't import ShellState without a cycle). - Discover toolbars + tab pill + BrowseHeaderTools; SearchResultsView toolbar. - CircleAction (shared: playlist/album/artist/etc. action buttons) on-surface secondary fill goes glass; playlist Sort dropdown; QbzSelect closed control. - New app-background-bar-alpha knob (0.3, env QBZ_BG_BAR_ALPHA): thin bars go MORE transparent than panels (surface-alpha 0.5). - Content well: frosted tint (0.22) + 1px hairline border → distinct panel. - Album/Artist header gradient auto-suppressed under the dynamic background (they clashed); header text stays light on the dynamic backdrop. - Discover carousel edge-fade "shadows" hidden when active (Carousel / PlaylistCarousel / ArtistCarousel / PinnedCarousel). Base:76ea5a82. Prior checkpoint:4e405338. cc
238 lines
10 KiB
Plaintext
238 lines
10 KiB
Plaintext
// Discover "View all" full-list page — one album module (New Releases,
|
|
// Press Accolades, Ideal Discography, Qobuzissimes, Albums of the Week,
|
|
// Most Streamed) shown as a paginated full grid or list. Opened from a
|
|
// Carousel's "View all" link. Mirrors Tauri's DiscoverBrowseView: the
|
|
// back/forward NavButtons + title sit on the LEFT, the header tools
|
|
// (search, genre filter, grid/list toggle) float RIGHT on the same row.
|
|
// Pagination is infinite-scroll, driven by DiscoverBrowseState.has-more
|
|
// off the backend (no total); load-more is disabled while a search is
|
|
// active (Tauri does the same).
|
|
|
|
import { Theme } from "../foundation/semantic-colors.slint";
|
|
import { Typography } from "../foundation/typography.slint";
|
|
import { DiscoverBrowseState, DiscoverBrowseActions, GenreFilterState, GenreFilterActions, NavState, ShellState, AppearanceState } from "../state.slint";
|
|
import { AlbumCollectionView } from "AlbumCollectionView.slint";
|
|
import { BrowseSearch, GenreButton, ViewModeToggle } from "BrowseHeaderTools.slint";
|
|
import { GenreFilterPopup } from "GenreFilterPopup.slint";
|
|
import { LoadingSpinner } from "../primitives/LoadingSpinner.slint";
|
|
import { ListScrollbar } from "../primitives/ListScrollbar.slint";
|
|
import { NavButtons } from "../shell/NavButtons.slint";
|
|
|
|
export component DiscoverBrowseView inherits Rectangle {
|
|
callback open-album(string);
|
|
callback open-artist(string);
|
|
callback media-action(string, string, string);
|
|
|
|
property <length> album-w: 200px;
|
|
property <length> album-h: 266px;
|
|
property <length> gap: 24px;
|
|
property <length> list-row-h: 64px;
|
|
property <length> list-row-gap: 4px;
|
|
|
|
background: ShellState.app-background-active ? transparent : Theme.surface-main;
|
|
|
|
VerticalLayout {
|
|
spacing: 0px;
|
|
|
|
// --- Fixed header (always visible) -------------------------------
|
|
// NavButtons + section title on the LEFT (title inline, right after
|
|
// the nav buttons); search / genre / grid-list tools as one group
|
|
// floating RIGHT. Like the Discover toolbar: a fixed bar whose
|
|
// back/forward buttons keep the same screen position as every page
|
|
// (center at y=25 = 11px top + 14px half-button). Only the list
|
|
// below scrolls.
|
|
Rectangle {
|
|
height: 56px;
|
|
background: ShellState.app-background-active ? Theme.surface-main.with-alpha(AppearanceState.app-background-bar-alpha) : Theme.surface-main;
|
|
|
|
// Left cluster — nav buttons then the title, inline.
|
|
HorizontalLayout {
|
|
x: 32px;
|
|
y: 25px - self.height / 2;
|
|
width: self.preferred-width;
|
|
height: self.preferred-height;
|
|
spacing: 16px;
|
|
VerticalLayout {
|
|
alignment: center;
|
|
NavButtons { }
|
|
}
|
|
VerticalLayout {
|
|
alignment: center;
|
|
Text {
|
|
text: DiscoverBrowseState.title;
|
|
color: Theme.text-primary;
|
|
font-size: Typography.section;
|
|
font-weight: Typography.bold;
|
|
vertical-alignment: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Right cluster — the header tools as one group, anchored right.
|
|
HorizontalLayout {
|
|
x: parent.width - self.preferred-width - 32px;
|
|
y: 25px - self.height / 2;
|
|
width: self.preferred-width;
|
|
height: self.preferred-height;
|
|
spacing: 8px;
|
|
VerticalLayout {
|
|
alignment: center;
|
|
BrowseSearch {
|
|
text <=> DiscoverBrowseState.search-query;
|
|
edited => {
|
|
DiscoverBrowseActions.search-changed();
|
|
}
|
|
}
|
|
}
|
|
VerticalLayout {
|
|
alignment: center;
|
|
GenreButton {
|
|
clicked => {
|
|
GenreFilterActions.set-context("discover");
|
|
GenreFilterState.open = !GenreFilterState.open;
|
|
}
|
|
}
|
|
}
|
|
VerticalLayout {
|
|
alignment: center;
|
|
ViewModeToggle {
|
|
mode <=> DiscoverBrowseState.view-mode;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// --- Scrolling list (only the listing scrolls) ------------------
|
|
flick := Flickable {
|
|
vertical-stretch: 1;
|
|
viewport-width: self.width;
|
|
viewport-height: page.preferred-height;
|
|
// Scroll-position restore on back/forward (see nav::scope_for).
|
|
property <string> sr-armed: NavState.restore-scope;
|
|
function sr-restore() {
|
|
if (NavState.restore-scope == "discover-browse" && self.viewport-height > self.height) {
|
|
self.viewport-y = NavState.scroll-restore;
|
|
NavState.restore-scope = "";
|
|
}
|
|
}
|
|
init => { self.sr-restore(); }
|
|
changed sr-armed => { self.sr-restore(); }
|
|
changed viewport-height => { self.sr-restore(); }
|
|
|
|
// Infinite scroll — when the viewport nears the bottom of the
|
|
// content (within 600px), pull the next page. Guarded by
|
|
// has-more + the loading flags AND an empty search query, so a
|
|
// client-side search filter does not keep paging in the catalog.
|
|
changed viewport-y => {
|
|
NavState.report-scroll(self.viewport-y);
|
|
if (-self.viewport-y + self.height >= self.viewport-height - 600px
|
|
&& DiscoverBrowseState.has-more
|
|
&& !DiscoverBrowseState.loading-more
|
|
&& !DiscoverBrowseState.loading
|
|
&& DiscoverBrowseState.search-query == "") {
|
|
DiscoverBrowseActions.load-more();
|
|
}
|
|
}
|
|
|
|
page := VerticalLayout {
|
|
width: parent.width;
|
|
padding-left: 32px;
|
|
padding-right: 32px;
|
|
padding-top: 8px;
|
|
padding-bottom: 100px;
|
|
spacing: 0px;
|
|
alignment: start;
|
|
|
|
if DiscoverBrowseState.loading: HorizontalLayout {
|
|
alignment: center;
|
|
LoadingSpinner { size: 36px; }
|
|
}
|
|
|
|
// Empty-state when a search filters everything out.
|
|
if !DiscoverBrowseState.loading
|
|
&& DiscoverBrowseState.visible.length == 0
|
|
&& DiscoverBrowseState.search-query != "": HorizontalLayout {
|
|
alignment: center;
|
|
Text {
|
|
text: @tr("No results found.");
|
|
color: Theme.text-muted;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
// --- Album collection (grid / list) --------------------
|
|
if !DiscoverBrowseState.loading: AlbumCollectionView {
|
|
albums: DiscoverBrowseState.visible;
|
|
view-mode: DiscoverBrowseState.view-mode;
|
|
is-grouped: false;
|
|
show-source: false;
|
|
card-width: root.album-w;
|
|
card-height: root.album-h;
|
|
card-gap: root.gap;
|
|
list-row-gap: root.list-row-gap;
|
|
// Viewport windowing (Phase 1): only cards near the
|
|
// visible band mount. The offset is the page's
|
|
// padding-top (8px) — the spinner / empty branches are
|
|
// mutually exclusive with the grid, so nothing else
|
|
// sits above it; the grid's one-viewport margin absorbs
|
|
// any small error.
|
|
windowed: true;
|
|
visible-top: -flick.viewport-y;
|
|
visible-height: flick.height;
|
|
content-offset: 8px;
|
|
// Element windowing only; artwork stays per-page —
|
|
// pages arrive index-keyed with covers already on the
|
|
// model (id-keyed banding is a future migration).
|
|
open-album(id) => { root.open-album(id); }
|
|
open-artist(id) => { root.open-artist(id); }
|
|
media-action(kind, id, action) => {
|
|
root.media-action(kind, id, action);
|
|
}
|
|
}
|
|
|
|
// Bottom load-more spinner while the next page is in flight.
|
|
if DiscoverBrowseState.loading-more: HorizontalLayout {
|
|
alignment: center;
|
|
Rectangle { height: 24px; }
|
|
LoadingSpinner { size: 28px; }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Shared scrollbar in the right gutter (homologated cross-view). Sits
|
|
// below the fixed 56px header so it tracks only the scrolling list.
|
|
ListScrollbar {
|
|
x: parent.width - self.width - 4px;
|
|
y: 56px;
|
|
width: 14px;
|
|
height: parent.height - 56px;
|
|
viewport-height: flick.viewport-height;
|
|
visible-height: flick.height;
|
|
viewport-y <=> flick.viewport-y;
|
|
auto-hide: true;
|
|
hover-active: ShellState.pointer-in-window
|
|
&& ShellState.pointer-x >= flick.absolute-position.x
|
|
&& ShellState.pointer-x <= flick.absolute-position.x + flick.width
|
|
&& ShellState.pointer-y >= flick.absolute-position.y
|
|
&& ShellState.pointer-y <= flick.absolute-position.y + flick.height;
|
|
}
|
|
|
|
// --- Genre filter overlay --------------------------------------------
|
|
// Backdrop closes the popup on outside click; the panel anchors to
|
|
// the top-right under the Filter-by-genre button (mirrors HomeView).
|
|
if GenreFilterState.open: Rectangle {
|
|
width: 100%;
|
|
height: 100%;
|
|
TouchArea {
|
|
clicked => {
|
|
GenreFilterState.open = false;
|
|
}
|
|
}
|
|
}
|
|
if GenreFilterState.open: GenreFilterPopup {
|
|
x: root.width - self.width - 32px;
|
|
y: 56px;
|
|
}
|
|
}
|