feat(slint): ArtistsByLocationView (Port 3 complete — third click target)
Wires the Origin section's location link to the scene-discovery
view. Completes the three artist-network click targets (Musician,
Label, Location).
Slint:
- ContentView gains `location`; NavEntry mirrors with the full
`Location { mbid, area_id, area_name, country, genres, tags }`
payload so back/forward replays the scene.
- LocationViewState / LocationViewActions globals carry the scene
header (label + genre summary) and a paginated artist grid
(LocationArtistItem: qobuz id, name, genres line, image).
- New `ui/location/ArtistsByLocationView.slint`: a scene header
(map-pin + location + genre summary) over a wrapping round-
portrait artist grid with load-more. open-artist routes the
card click to the artist page.
- AppShell routes ContentView.location; new map-pin.svg (Lucide).
Rust:
- `crate::location_view` controller — load_scene, apply_scene,
append_scene, reset_scene, artwork_jobs. Maps LocationCandidate
rows to the grid (qobuz_name fallback to mb_name).
- artwork::ArtworkTarget gains LocationArtist { index }.
- The Origin metadata load now caches LocationParams (area +
affinity seeds) in a cross-thread Mutex; reset_network_sidebar
clears it so a stale click can't fire for the wrong artist.
artist::location_params() exposes it to the click handler.
- main.rs: navigate_location + apply_entry route +
on_location_clicked (reads the cached params) +
LocationViewActions open-artist / load-more.
Backend (prior commit) supplied discover_artists_by_location;
this commit is the Slint + wiring layer.
cc
This commit is contained in:
11 files changed
+598
-10
No files matched your search
@@ -0,0 +1,201 @@
|
||||
// ArtistsByLocationView — "artists from the same place" scene
|
||||
// discovery, opened from the Origin section's location link. Mirrors
|
||||
// Tauri's ArtistsByLocationView.svelte core: a scene header
|
||||
// (location + genre summary) over a wrapping artist grid, with
|
||||
// load-more pagination. The progress bar / live event stream from
|
||||
// the Tauri view is replaced by a single loading flag.
|
||||
|
||||
import { Theme } from "../foundation/semantic-colors.slint";
|
||||
import { Typography } from "../foundation/typography.slint";
|
||||
import { LocationViewState, LocationViewActions, LocationArtistItem } from "../state.slint";
|
||||
import { QbzIcon } from "../primitives/QbzIcon.slint";
|
||||
import { LoadingSpinner } from "../primitives/LoadingSpinner.slint";
|
||||
import { NavButtons } from "../shell/NavButtons.slint";
|
||||
|
||||
component SceneArtistCard inherits Rectangle {
|
||||
in property <LocationArtistItem> item;
|
||||
callback clicked(string /* qobuz id */);
|
||||
|
||||
width: 160px;
|
||||
height: 210px;
|
||||
|
||||
VerticalLayout {
|
||||
spacing: 10px;
|
||||
alignment: start;
|
||||
// Round portrait.
|
||||
Rectangle {
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
x: (parent.width - self.width) / 2;
|
||||
border-radius: 70px;
|
||||
background: Theme.surface-elevated;
|
||||
drop-shadow-blur: 16px;
|
||||
drop-shadow-color: #00000050;
|
||||
drop-shadow-offset-y: 4px;
|
||||
clip: true;
|
||||
Image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
source: root.item.image;
|
||||
image-fit: cover;
|
||||
}
|
||||
if root.item.image-url == "": QbzIcon {
|
||||
source: @image-url("../assets/icons/user.svg");
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
x: (parent.width - self.width) / 2;
|
||||
y: (parent.height - self.height) / 2;
|
||||
tint: Theme.text-muted;
|
||||
}
|
||||
ta := TouchArea {
|
||||
mouse-cursor: pointer;
|
||||
clicked => {
|
||||
root.clicked(root.item.qobuz-id);
|
||||
}
|
||||
}
|
||||
}
|
||||
Text {
|
||||
text: root.item.name;
|
||||
color: Theme.text-primary;
|
||||
font-size: Typography.body;
|
||||
font-weight: Typography.medium;
|
||||
horizontal-alignment: center;
|
||||
overflow: elide;
|
||||
width: 160px;
|
||||
}
|
||||
if root.item.genres-line != "": Text {
|
||||
text: root.item.genres-line;
|
||||
color: Theme.text-muted;
|
||||
font-size: Typography.legal;
|
||||
horizontal-alignment: center;
|
||||
overflow: elide;
|
||||
width: 160px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export component ArtistsByLocationView inherits Rectangle {
|
||||
callback open-artist(string);
|
||||
|
||||
property <length> card-width: 160px;
|
||||
property <length> card-height: 210px;
|
||||
property <length> card-gap: 20px;
|
||||
|
||||
background: Theme.surface-main;
|
||||
|
||||
Flickable {
|
||||
viewport-width: self.width;
|
||||
viewport-height: page.preferred-height;
|
||||
|
||||
page := VerticalLayout {
|
||||
width: parent.width;
|
||||
padding-left: 32px;
|
||||
padding-right: 32px;
|
||||
padding-top: 11px;
|
||||
padding-bottom: 100px;
|
||||
spacing: 0px;
|
||||
alignment: start;
|
||||
|
||||
HorizontalLayout {
|
||||
alignment: start;
|
||||
NavButtons { }
|
||||
}
|
||||
|
||||
Rectangle { height: 22px; }
|
||||
|
||||
// --- Scene header ------------------------------------------
|
||||
VerticalLayout {
|
||||
spacing: 4px;
|
||||
HorizontalLayout {
|
||||
spacing: 10px;
|
||||
alignment: start;
|
||||
VerticalLayout {
|
||||
alignment: center;
|
||||
QbzIcon {
|
||||
source: @image-url("../assets/icons/map-pin.svg");
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
tint: Theme.accent;
|
||||
}
|
||||
}
|
||||
Text {
|
||||
text: LocationViewState.scene-label != ""
|
||||
? LocationViewState.scene-label
|
||||
: @tr("Scene");
|
||||
color: Theme.text-primary;
|
||||
font-size: Typography.title;
|
||||
font-weight: Typography.bold;
|
||||
vertical-alignment: center;
|
||||
}
|
||||
}
|
||||
if LocationViewState.genre-summary != "": Text {
|
||||
text: LocationViewState.genre-summary;
|
||||
color: Theme.text-muted;
|
||||
font-size: Typography.body;
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle { height: 28px; }
|
||||
|
||||
if LocationViewState.loading
|
||||
&& LocationViewState.artists.length == 0: HorizontalLayout {
|
||||
alignment: center;
|
||||
LoadingSpinner { size: 36px; }
|
||||
}
|
||||
if !LocationViewState.loading
|
||||
&& LocationViewState.artists.length == 0: Text {
|
||||
text: @tr("No artists found for this scene.");
|
||||
color: Theme.text-muted;
|
||||
font-size: Typography.body;
|
||||
}
|
||||
|
||||
// --- Artist grid -------------------------------------------
|
||||
if LocationViewState.artists.length > 0: grid := Rectangle {
|
||||
property <int> columns: Math.max(
|
||||
1,
|
||||
Math.floor((self.width + root.card-gap) / (root.card-width + root.card-gap)));
|
||||
property <int> rows: Math.ceil(LocationViewState.artists.length / self.columns);
|
||||
height: self.rows > 0
|
||||
? self.rows * root.card-height + Math.max(0, self.rows - 1) * root.card-gap
|
||||
: 0px;
|
||||
for item[i] in LocationViewState.artists: SceneArtistCard {
|
||||
x: Math.mod(i, grid.columns) * (root.card-width + root.card-gap);
|
||||
y: Math.floor(i / grid.columns) * (root.card-height + root.card-gap);
|
||||
item: item;
|
||||
clicked(id) => {
|
||||
if (id != "") {
|
||||
root.open-artist(id);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if LocationViewState.artists.length > 0
|
||||
&& LocationViewState.artists.length < LocationViewState.total: HorizontalLayout {
|
||||
alignment: center;
|
||||
Rectangle {
|
||||
width: load-more-text.preferred-width + 24px;
|
||||
height: 32px;
|
||||
load-more-text := Text {
|
||||
text: LocationViewState.load-more-loading
|
||||
? @tr("Loading…")
|
||||
: @tr("Load more");
|
||||
color: load-more-ta.has-hover
|
||||
? Theme.text-primary
|
||||
: Theme.text-secondary;
|
||||
font-size: 13px;
|
||||
x: (parent.width - self.width) / 2;
|
||||
y: (parent.height - self.height) / 2;
|
||||
}
|
||||
load-more-ta := TouchArea {
|
||||
mouse-cursor: pointer;
|
||||
enabled: !LocationViewState.load-more-loading;
|
||||
clicked => {
|
||||
LocationViewActions.load-more();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user