refactor(slint): share album grid/list/grouped renderer
DiscoverBrowseView and LabelReleasesView each carried their own album grid column math, flat-list (AlbumListHeader + AlbumListRow loop), and LabelReleasesView additionally the group-by-section rendering. Extract all of it into a shared AlbumCollectionView (with an inner AlbumGrid), driven by albums / grouped / is-grouped / view-mode / show-source props. Both views now mount the one renderer; behavior is preserved (the empty length>0 guards mirror the previous per-block guards). Readies the same renderer for the Favorites albums tab. cc
This commit is contained in:
3 files changed
+159
-143
No files matched your search
@@ -0,0 +1,137 @@
|
||||
// Album collection content — renders a flat grid, a flat list, or
|
||||
// group-by sections (each a title + grid). The surrounding view owns the
|
||||
// toolbar and the loading / empty / load-more states; this component is
|
||||
// purely the rendered collection, so the grid column math and the list
|
||||
// header+rows live in one place. Shared by Discover Browse, Label
|
||||
// Releases, and Favorites albums.
|
||||
|
||||
import { Theme } from "../foundation/semantic-colors.slint";
|
||||
import { Typography } from "../foundation/typography.slint";
|
||||
import { AlbumCardItem, DiscoverSection } from "../state.slint";
|
||||
import { AlbumCard } from "AlbumCard.slint";
|
||||
import { AlbumListRow, AlbumListHeader } from "../primitives/AlbumListRow.slint";
|
||||
|
||||
// Wrapping album grid over a model — column math in one place, shared by
|
||||
// the flat grid and each group-by section.
|
||||
component AlbumGrid inherits Rectangle {
|
||||
in property <[AlbumCardItem]> albums;
|
||||
in property <length> card-width: 220px;
|
||||
in property <length> card-height: 266px;
|
||||
in property <length> card-gap: 24px;
|
||||
callback open-album(string);
|
||||
callback open-artist(string);
|
||||
callback media-action(string, string, string);
|
||||
|
||||
property <int> columns: Math.max(
|
||||
1,
|
||||
Math.floor((self.width + root.card-gap) / (root.card-width + root.card-gap)));
|
||||
property <int> rows: Math.ceil(root.albums.length / self.columns);
|
||||
height: self.rows > 0
|
||||
? self.rows * root.card-height + Math.max(0, self.rows - 1) * root.card-gap
|
||||
: 0px;
|
||||
|
||||
for album[i] in root.albums: AlbumCard {
|
||||
x: Math.mod(i, root.columns) * (root.card-width + root.card-gap);
|
||||
y: Math.floor(i / root.columns) * (root.card-height + root.card-gap);
|
||||
width: root.card-width;
|
||||
height: root.card-height;
|
||||
album: album;
|
||||
clicked(id) => {
|
||||
root.open-album(id);
|
||||
}
|
||||
media-action(kind, id, action) => {
|
||||
if (kind == "artist") {
|
||||
root.open-artist(id);
|
||||
} else {
|
||||
root.media-action(kind, id, action);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export component AlbumCollectionView inherits VerticalLayout {
|
||||
in property <[AlbumCardItem]> albums; // flat set (grid/list)
|
||||
in property <[DiscoverSection]> grouped; // group-by sections
|
||||
in property <bool> is-grouped: false;
|
||||
in property <string> view-mode: "grid"; // "grid" | "list"
|
||||
in property <bool> show-source: false;
|
||||
in property <length> card-width: 220px;
|
||||
in property <length> card-height: 266px;
|
||||
in property <length> card-gap: 24px;
|
||||
in property <length> list-row-gap: 4px;
|
||||
callback open-album(string);
|
||||
callback open-artist(string);
|
||||
callback media-action(string, string, string);
|
||||
|
||||
spacing: 0px;
|
||||
|
||||
// --- Grouped (sections; always grid within a section) --------------
|
||||
if root.is-grouped && root.grouped.length > 0: VerticalLayout {
|
||||
spacing: 0px;
|
||||
for section[s] in root.grouped: VerticalLayout {
|
||||
spacing: 12px;
|
||||
if s > 0: Rectangle { height: 24px; }
|
||||
Text {
|
||||
text: section.title;
|
||||
color: Theme.text-primary;
|
||||
font-size: Typography.heading;
|
||||
font-weight: Typography.semibold;
|
||||
}
|
||||
AlbumGrid {
|
||||
albums: section.albums;
|
||||
card-width: root.card-width;
|
||||
card-height: root.card-height;
|
||||
card-gap: root.card-gap;
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// --- Flat grid -----------------------------------------------------
|
||||
if !root.is-grouped && root.view-mode == "grid" && root.albums.length > 0: AlbumGrid {
|
||||
albums: root.albums;
|
||||
card-width: root.card-width;
|
||||
card-height: root.card-height;
|
||||
card-gap: root.card-gap;
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
// --- Flat list -----------------------------------------------------
|
||||
if !root.is-grouped && root.view-mode == "list" && root.albums.length > 0: VerticalLayout {
|
||||
spacing: root.list-row-gap;
|
||||
AlbumListHeader {
|
||||
show-source: root.show-source;
|
||||
}
|
||||
for album[i] in root.albums: AlbumListRow {
|
||||
album: album;
|
||||
index: i;
|
||||
show-source: root.show-source;
|
||||
clicked(id) => {
|
||||
root.open-album(id);
|
||||
}
|
||||
media-action(kind, id, action) => {
|
||||
if (kind == "artist") {
|
||||
root.open-artist(id);
|
||||
} else {
|
||||
root.media-action(kind, id, action);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -10,9 +10,8 @@
|
||||
|
||||
import { Theme } from "../foundation/semantic-colors.slint";
|
||||
import { Typography } from "../foundation/typography.slint";
|
||||
import { DiscoverBrowseState, DiscoverBrowseActions, GenreFilterState, AlbumCardItem } from "../state.slint";
|
||||
import { AlbumCard } from "AlbumCard.slint";
|
||||
import { AlbumListRow, AlbumListHeader } from "../primitives/AlbumListRow.slint";
|
||||
import { DiscoverBrowseState, DiscoverBrowseActions, GenreFilterState } from "../state.slint";
|
||||
import { AlbumCollectionView } from "AlbumCollectionView.slint";
|
||||
import { GenreFilterPopup } from "GenreFilterPopup.slint";
|
||||
import { LoadingSpinner } from "../primitives/LoadingSpinner.slint";
|
||||
import { ListScrollbar } from "../primitives/ListScrollbar.slint";
|
||||
@@ -289,56 +288,22 @@ export component DiscoverBrowseView inherits Rectangle {
|
||||
}
|
||||
}
|
||||
|
||||
// --- Album grid ----------------------------------------
|
||||
if !DiscoverBrowseState.loading
|
||||
&& DiscoverBrowseState.view-mode == "grid": grid := Rectangle {
|
||||
property <int> columns: Math.max(
|
||||
1,
|
||||
Math.floor((self.width + root.gap) / (root.album-w + root.gap)));
|
||||
property <int> rows: Math.ceil(DiscoverBrowseState.visible.length / self.columns);
|
||||
height: self.rows > 0
|
||||
? self.rows * root.album-h + Math.max(0, self.rows - 1) * root.gap
|
||||
: 0px;
|
||||
for album[i] in DiscoverBrowseState.visible: AlbumCard {
|
||||
x: Math.mod(i, grid.columns) * (root.album-w + root.gap);
|
||||
y: Math.floor(i / grid.columns) * (root.album-h + root.gap);
|
||||
width: root.album-w;
|
||||
height: root.album-h;
|
||||
album: album;
|
||||
clicked(id) => { root.open-album(id); }
|
||||
media-action(kind, id, action) => {
|
||||
if (kind == "artist") {
|
||||
root.open-artist(id);
|
||||
} else {
|
||||
root.media-action(kind, id, action);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// --- Album list ----------------------------------------
|
||||
// Reusable AlbumListRow; SOURCE column hidden (single-source
|
||||
// discover catalog). Header labels the columns.
|
||||
if !DiscoverBrowseState.loading
|
||||
&& DiscoverBrowseState.view-mode == "list": VerticalLayout {
|
||||
spacing: root.list-row-gap;
|
||||
AlbumListHeader {
|
||||
// --- Album collection (grid / list) --------------------
|
||||
if !DiscoverBrowseState.loading: AlbumCollectionView {
|
||||
albums: DiscoverBrowseState.visible;
|
||||
view-mode: DiscoverBrowseState.view-mode;
|
||||
is-grouped: false;
|
||||
show-source: false;
|
||||
}
|
||||
for album[i] in DiscoverBrowseState.visible: AlbumListRow {
|
||||
album: album;
|
||||
index: i;
|
||||
show-source: false;
|
||||
clicked(id) => { root.open-album(id); }
|
||||
card-width: root.album-w;
|
||||
card-height: root.album-h;
|
||||
card-gap: root.gap;
|
||||
list-row-gap: root.list-row-gap;
|
||||
open-album(id) => { root.open-album(id); }
|
||||
open-artist(id) => { root.open-artist(id); }
|
||||
media-action(kind, id, action) => {
|
||||
if (kind == "artist") {
|
||||
root.open-artist(id);
|
||||
} else {
|
||||
root.media-action(kind, id, action);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Bottom load-more spinner while the next page is in flight.
|
||||
if DiscoverBrowseState.loading-more: HorizontalLayout {
|
||||
|
||||
@@ -10,9 +10,8 @@
|
||||
import { Theme } from "../foundation/semantic-colors.slint";
|
||||
import { Typography } from "../foundation/typography.slint";
|
||||
import { Radius } from "../foundation/radius.slint";
|
||||
import { LabelState, LabelActions, AlbumCardItem, DiscoverSection } from "../state.slint";
|
||||
import { AlbumCard } from "../discover/AlbumCard.slint";
|
||||
import { AlbumListRow, AlbumListHeader } from "../primitives/AlbumListRow.slint";
|
||||
import { LabelState, LabelActions } from "../state.slint";
|
||||
import { AlbumCollectionView } from "../discover/AlbumCollectionView.slint";
|
||||
import { QbzIcon } from "../primitives/QbzIcon.slint";
|
||||
import { QbzSelect } from "../primitives/QbzSelect.slint";
|
||||
import { ExpandableSearch } from "../primitives/ExpandableSearch.slint";
|
||||
@@ -21,44 +20,6 @@ import { LoadingSpinner } from "../primitives/LoadingSpinner.slint";
|
||||
import { ToggleButton } from "../primitives/ToggleButton.slint";
|
||||
import { NavButtons } from "../shell/NavButtons.slint";
|
||||
|
||||
// Wrapping album grid over a model — shared by the flat view and each
|
||||
// group-by-artist section so the column math lives in one place.
|
||||
component AlbumGrid inherits Rectangle {
|
||||
in property <[AlbumCardItem]> albums;
|
||||
in property <length> card-width: 220px;
|
||||
in property <length> card-height: 266px;
|
||||
in property <length> card-gap: 24px;
|
||||
callback open-album(string);
|
||||
callback open-artist(string);
|
||||
callback media-action(string, string, string);
|
||||
|
||||
property <int> columns: Math.max(
|
||||
1,
|
||||
Math.floor((self.width + root.card-gap) / (root.card-width + root.card-gap)));
|
||||
property <int> rows: Math.ceil(root.albums.length / self.columns);
|
||||
height: self.rows > 0
|
||||
? self.rows * root.card-height + Math.max(0, self.rows - 1) * root.card-gap
|
||||
: 0px;
|
||||
|
||||
for album[i] in root.albums: AlbumCard {
|
||||
x: Math.mod(i, root.columns) * (root.card-width + root.card-gap);
|
||||
y: Math.floor(i / root.columns) * (root.card-height + root.card-gap);
|
||||
width: root.card-width;
|
||||
height: root.card-height;
|
||||
album: album;
|
||||
clicked(id) => {
|
||||
root.open-album(id);
|
||||
}
|
||||
media-action(kind, id, action) => {
|
||||
if (kind == "artist") {
|
||||
root.open-artist(id);
|
||||
} else {
|
||||
root.media-action(kind, id, action);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export component LabelReleasesView inherits Rectangle {
|
||||
callback open-album(string);
|
||||
callback open-artist(string);
|
||||
@@ -286,37 +247,14 @@ export component LabelReleasesView inherits Rectangle {
|
||||
}
|
||||
}
|
||||
|
||||
// --- Grouped by artist ---------------------------------------
|
||||
if LabelState.group-by-artist: VerticalLayout {
|
||||
spacing: 0px;
|
||||
for section[s] in LabelState.grouped: VerticalLayout {
|
||||
spacing: 12px;
|
||||
if s > 0: Rectangle { height: 24px; }
|
||||
Text {
|
||||
text: section.title;
|
||||
color: Theme.text-primary;
|
||||
font-size: Typography.heading;
|
||||
font-weight: Typography.semibold;
|
||||
}
|
||||
AlbumGrid {
|
||||
albums: section.albums;
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// --- Flat grid -----------------------------------------------
|
||||
if !LabelState.group-by-artist && LabelState.visible.length > 0
|
||||
&& LabelState.view-mode == "grid": AlbumGrid {
|
||||
// --- Album collection (grouped / flat grid / flat list) ------
|
||||
AlbumCollectionView {
|
||||
is-grouped: LabelState.group-by-artist;
|
||||
albums: LabelState.visible;
|
||||
grouped: LabelState.grouped;
|
||||
view-mode: LabelState.view-mode;
|
||||
show-source: false;
|
||||
list-row-gap: root.list-row-gap;
|
||||
open-album(id) => {
|
||||
root.open-album(id);
|
||||
}
|
||||
@@ -328,30 +266,6 @@ export component LabelReleasesView inherits Rectangle {
|
||||
}
|
||||
}
|
||||
|
||||
// --- Flat list -----------------------------------------------
|
||||
if !LabelState.group-by-artist && LabelState.visible.length > 0
|
||||
&& LabelState.view-mode == "list": VerticalLayout {
|
||||
spacing: root.list-row-gap;
|
||||
AlbumListHeader {
|
||||
show-source: false;
|
||||
}
|
||||
for album[i] in LabelState.visible: AlbumListRow {
|
||||
album: album;
|
||||
index: i;
|
||||
show-source: false;
|
||||
clicked(id) => {
|
||||
root.open-album(id);
|
||||
}
|
||||
media-action(kind, id, action) => {
|
||||
if (kind == "artist") {
|
||||
root.open-artist(id);
|
||||
} else {
|
||||
root.media-action(kind, id, action);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// --- Load more -----------------------------------------------
|
||||
// Driven by `has-more` — /label/getAlbums caps each page well
|
||||
// below the catalog, so `total` is an unreliable gate.
|
||||
|
||||
Reference in new issue
Block a user