Joren/qbz
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(slint): add slim-card grid for Popular albums

Browse Source 
Add a compact "slim" card variant and a 4-column grid section that
renders it, used for the Popular albums row on Discover Home.

- SlimCard: 60px row with optional rank, 44px thumbnail, title/subtitle
- GridSection: 4-column grid; cards absolutely positioned since Slint
  GridLayout cannot host a `for`
- state.slint: SlimItem struct and HomeState.popular model
- home.rs: load_home now returns HomeData { sections, popular };
  map_slim maps the discover most-streamed container
- artwork pipeline: ArtworkTarget enum routes decoded covers to either
  a section card or a popular card

cc
This commit is contained in:
vicrodh committed 2026-05-18 16:08:42 -06:00
1 parent 4e143bbcd5
commit 1662b3824e
7 files changed
+279 -35
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

crates/qbz-slint/src/artwork.rs
+40 -16
View File
@@ -28,10 +28,18 @@ pub const MAX_CACHE_BYTES: u64 = 200 * 1024 * 1024;
/// — artwork then falls back to direct downloads.
pub type ImageCache = Arc<Mutex<Option<ImageCacheService>>>;
/// Which card an artwork download targets.
#[derive(Clone, Copy)]
pub enum ArtworkTarget {
/// A card in `HomeState.sections[section_idx].albums[album_idx]`.
Section { section_idx: usize, album_idx: usize },
/// A card in `HomeState.popular[idx]`.
Popular { idx: usize },
}
/// An artwork download job: which card, and the image URL.
pub struct ArtworkJob {
pub section_idx: usize,
pub album_idx: usize,
pub target: ArtworkTarget,
pub url: String,
}
@@ -75,8 +83,9 @@ pub fn spawn_loads(jobs: Vec<ArtworkJob>, window: slint::Weak<AppWindow>, cache:
let _permit = semaphore.acquire().await.ok()?;
let (pixels, width, height) =
fetch_and_decode(&job.url, &cache, DECODE_SIZE).await?;
let target = job.target;
let _ = window.upgrade_in_event_loop(move |w| {
apply_artwork(&w, job.section_idx, job.album_idx, &pixels, width, height);
apply_artwork(&w, target, &pixels, width, height);
});
Some(())
});
@@ -117,30 +126,45 @@ pub async fn fetch_and_decode(
Some((rgba.into_raw(), width, height))
}
/// Apply decoded pixels to a single card row. Runs on the Slint event loop.
/// Apply decoded pixels to a single card. Runs on the Slint event loop.
fn apply_artwork(
window: &AppWindow,
section_idx: usize,
album_idx: usize,
target: ArtworkTarget,
pixels: &[u8],
width: u32,
height: u32,
) {
let sections = window.global::<HomeState>().get_sections();
let Some(section) = sections.row_data(section_idx) else {
return;
};
let Some(mut item) = section.albums.row_data(album_idx) else {
return;
};
let mut buffer = slint::SharedPixelBuffer::<slint::Rgba8Pixel>::new(width, height);
let dst = buffer.make_mut_bytes();
if dst.len() != pixels.len() {
return;
}
dst.copy_from_slice(pixels);
let image = slint::Image::from_rgba8(buffer);
item.artwork = slint::Image::from_rgba8(buffer);
section.albums.set_row_data(album_idx, item);
let home = window.global::<HomeState>();
match target {
ArtworkTarget::Section {
section_idx,
album_idx,
} => {
let sections = home.get_sections();
let Some(section) = sections.row_data(section_idx) else {
return;
};
let Some(mut item) = section.albums.row_data(album_idx) else {
return;
};
item.artwork = image;
section.albums.set_row_data(album_idx, item);
}
ArtworkTarget::Popular { idx } => {
let popular = home.get_popular();
let Some(mut item) = popular.row_data(idx) else {
return;
};
item.artwork = image;
popular.set_row_data(idx, item);
}
}
}
crates/qbz-slint/src/home.rs
+72 -12
View File
@@ -1,9 +1,9 @@
//! Discover / Home controller.
//!
//! Fetches the Qobuz discover index through `QbzCore`, maps it into plain
//! (Send) section data on the worker thread, and — separately, on the
//! Slint event loop — converts that into Slint models pushed onto the
//! `HomeState` global. Domain types never reach the `.slint` files.
//! (Send) data on the worker thread, and — separately, on the Slint event
//! loop — converts that into Slint models pushed onto the `HomeState`
//! global. Domain types never reach the `.slint` files.
use std::sync::Arc;
@@ -12,9 +12,14 @@ use qbz_core::FrontendAdapter;
use qbz_models::{AlbumAward, DiscoverAlbum, DiscoverAudioInfo, DiscoverContainer};
use slint::{ComponentHandle, ModelRc, VecModel};
use crate::{AlbumCardItem, AppWindow, DiscoverSection, HomeState};
use crate::{AlbumCardItem, AppWindow, DiscoverSection, HomeState, SlimItem};
/// Plain, `Send` home data produced on the worker thread.
pub struct HomeData {
pub sections: Vec<SectionData>,
pub popular: Vec<SlimData>,
}
/// Plain, `Send` section data produced on the worker thread.
pub struct SectionData {
pub title: String,
pub albums: Vec<CardData>,
@@ -33,8 +38,17 @@ pub struct CardData {
pub artwork_url: String,
}
/// A compact ranked item for the slim grid sections.
pub struct SlimData {
pub id: String,
pub title: String,
pub subtitle: String,
pub rank: String,
pub artwork_url: String,
}
/// Fetch the discover index and map it into Home sections.
pub async fn load_home<A>(runtime: &Arc<AppRuntime<A>>) -> Result<Vec<SectionData>, String>
pub async fn load_home<A>(runtime: &Arc<AppRuntime<A>>) -> Result<HomeData, String>
where
A: FrontendAdapter + Send + Sync + 'static,
{
@@ -59,7 +73,17 @@ where
"Albums of the Week",
containers.album_of_the_week,
);
Ok(sections)
let popular = containers
.most_streamed
.map(|container| container.data.items)
.unwrap_or_default()
.into_iter()
.enumerate()
.map(|(index, album)| map_slim(index, album))
.collect();
Ok(HomeData { sections, popular })
}
fn push_section(
@@ -114,6 +138,27 @@ fn map_album(album: DiscoverAlbum) -> CardData {
}
}
fn map_slim(index: usize, album: DiscoverAlbum) -> SlimData {
let subtitle = album
.artists
.first()
.map(|a| a.name.clone())
.unwrap_or_default();
let artwork_url = album
.image
.thumbnail
.or(album.image.small)
.or(album.image.large)
.unwrap_or_default();
SlimData {
id: album.id,
title: album.title,
subtitle,
rank: (index + 1).to_string(),
artwork_url,
}
}
/// Pick the single award ribbon, mirroring `pickAlbumRibbon` in data.ts:
/// award id 151 = Album of the Week, 88 = Qobuzissime, otherwise the last
/// award becomes a generic "press" ribbon.
@@ -146,10 +191,11 @@ fn quality_tier(audio: Option<&DiscoverAudioInfo>) -> &'static str {
}
}
/// Convert worker-thread section data into Slint models and push them onto
/// Convert worker-thread home data into Slint models and push them onto
/// the `HomeState` global. Must run on the Slint event loop.
pub fn apply_sections(window: &AppWindow, data: Vec<SectionData>) {
pub fn apply_home(window: &AppWindow, data: HomeData) {
let sections: Vec<DiscoverSection> = data
.sections
.into_iter()
.map(|section| {
let albums: Vec<AlbumCardItem> = section
@@ -174,9 +220,23 @@ pub fn apply_sections(window: &AppWindow, data: Vec<SectionData>) {
}
})
.collect();
window
.global::<HomeState>()
.set_sections(ModelRc::new(VecModel::from(sections)));
let popular: Vec<SlimItem> = data
.popular
.into_iter()
.map(|slim| SlimItem {
id: slim.id.into(),
title: slim.title.into(),
subtitle: slim.subtitle.into(),
rank: slim.rank.into(),
artwork_url: slim.artwork_url.into(),
artwork: slint::Image::default(),
})
.collect();
let state = window.global::<HomeState>();
state.set_sections(ModelRc::new(VecModel::from(sections)));
state.set_popular(ModelRc::new(VecModel::from(popular)));
}
#[cfg(test)]
crates/qbz-slint/src/main.rs
+19 -7
View File
@@ -50,10 +50,10 @@ async fn enter_shell(
});
match home::load_home(&runtime).await {
Ok(sections) => {
// Collect artwork jobs before the data is consumed by
// apply_sections.
let jobs: Vec<artwork::ArtworkJob> = sections
Ok(data) => {
// Collect artwork jobs before the data is consumed by apply_home.
let mut jobs: Vec<artwork::ArtworkJob> = data
.sections
.iter()
.enumerate()
.flat_map(|(section_idx, section)| {
@@ -66,17 +66,29 @@ async fn enter_shell(
None
} else {
Some(artwork::ArtworkJob {
section_idx,
album_idx,
target: artwork::ArtworkTarget::Section {
section_idx,
album_idx,
},
url: card.artwork_url.clone(),
})
}
})
})
.collect();
jobs.extend(data.popular.iter().enumerate().filter_map(|(idx, slim)| {
if slim.artwork_url.is_empty() {
None
} else {
Some(artwork::ArtworkJob {
target: artwork::ArtworkTarget::Popular { idx },
url: slim.artwork_url.clone(),
})
}
}));
let weak_for_artwork = weak.clone();
let _ = weak.upgrade_in_event_loop(move |w| {
home::apply_sections(&w, sections);
home::apply_home(&w, data);
w.global::<HomeState>().set_loading(false);
});
artwork::spawn_loads(jobs, weak_for_artwork, image_cache);
crates/qbz-slint/ui/discover/GridSection.slint
+50
View File
@@ -0,0 +1,50 @@
// A Discover section that lays slim cards in a fixed 4-column grid
// (Popular albums, Recently Played). Non-paginated for now.
//
// GridLayout cannot host a `for`, so cards are absolutely positioned
// inside a Rectangle whose height is derived from the row count.
import { Theme } from "../foundation/semantic-colors.slint";
import { Typography } from "../foundation/typography.slint";
import { SlimItem } from "../state.slint";
import { SlimCard } from "SlimCard.slint";
export component GridSection inherits VerticalLayout {
in property <string> title;
in property <[SlimItem]> items;
callback item-clicked(string);
property <int> columns: 4;
property <length> gap: 8px;
property <length> row-height: 60px;
property <int> rows: Math.ceil(root.items.length / root.columns);
spacing: 12px;
Text {
text: root.title;
color: Theme.text-primary;
font-size: 18px;
font-weight: Typography.semibold;
}
grid := Rectangle {
property <length> cell-width:
(self.width - (root.columns - 1) * root.gap) / root.columns;
height: root.rows > 0
? root.rows * root.row-height + (root.rows - 1) * root.gap
: 0px;
for item[i] in root.items: SlimCard {
width: grid.cell-width;
height: root.row-height;
x: Math.mod(i, root.columns) * (grid.cell-width + root.gap);
y: Math.floor(i / root.columns) * (root.row-height + root.gap);
item: item;
clicked(id) => {
root.item-clicked(id);
}
}
}
}
crates/qbz-slint/ui/discover/HomeView.slint
+9
View File
@@ -10,6 +10,7 @@ import { Theme } from "../foundation/semantic-colors.slint";
import { Typography } from "../foundation/typography.slint";
import { HomeState } from "../state.slint";
import { Carousel } from "Carousel.slint";
import { GridSection } from "GridSection.slint";
import { QbzIcon } from "../primitives/QbzIcon.slint";
import { ScrollView } from "std-widgets.slint";
@@ -174,6 +175,14 @@ export component HomeView inherits Rectangle {
root.album-clicked(id);
}
}
if HomeState.popular.length > 0: GridSection {
title: @tr("Popular albums");
items: HomeState.popular;
item-clicked(id) => {
root.album-clicked(id);
}
}
}
}
}
crates/qbz-slint/ui/discover/SlimCard.slint
+77
View File
@@ -0,0 +1,77 @@
// Compact "slim" card — a 44px thumbnail with a title / subtitle, used
// in grid sections like Popular albums and Recently Played. Optionally
// rank-numbered on the left.
import { Theme } from "../foundation/semantic-colors.slint";
import { Typography } from "../foundation/typography.slint";
import { Radius } from "../foundation/radius.slint";
import { SlimItem } from "../state.slint";
export component SlimCard inherits Rectangle {
in property <SlimItem> item;
callback clicked(string);
height: 60px;
border-radius: Radius.sm;
background: ta.has-hover ? Theme.surface-hover : transparent;
HorizontalLayout {
padding-left: 8px;
padding-right: 8px;
spacing: 12px;
if root.item.rank != "": VerticalLayout {
alignment: center;
Text {
text: root.item.rank;
width: 20px;
color: Theme.text-muted;
font-size: Typography.body;
horizontal-alignment: center;
}
}
VerticalLayout {
alignment: center;
Rectangle {
width: 44px;
height: 44px;
border-radius: 4px;
background: Theme.surface-elevated;
clip: true;
Image {
width: 100%;
height: 100%;
source: root.item.artwork;
image-fit: cover;
}
}
}
VerticalLayout {
alignment: center;
horizontal-stretch: 1;
spacing: 2px;
Text {
text: root.item.title;
color: Theme.text-primary;
font-size: Typography.link;
font-weight: Typography.medium;
overflow: elide;
}
Text {
text: root.item.subtitle;
color: Theme.text-muted;
font-size: 12px;
overflow: elide;
}
}
}
ta := TouchArea {
mouse-cursor: pointer;
clicked => {
root.clicked(root.item.id);
}
}
}
crates/qbz-slint/ui/state.slint
+12
View File
@@ -21,9 +21,21 @@ export struct DiscoverSection {
albums: [AlbumCardItem],
}
// Compact "slim" card item — a small thumbnail with a title/subtitle,
// optionally rank-numbered (Popular albums, Recently Played).
export struct SlimItem {
id: string,
title: string,
subtitle: string,
rank: string, // "" = no rank
artwork-url: string,
artwork: image,
}
// Discover / Home screen state.
export global HomeState {
in property <[DiscoverSection]> sections: [];
in property <[SlimItem]> popular: [];
in property <bool> loading: false;
}