Lots of fixes for artist detail page and track management
This commit is contained in:
Connor Johnstone
@@ -2,28 +2,59 @@ use yew::prelude::*;
|
||||
use yew_router::prelude::*;
|
||||
|
||||
use crate::api;
|
||||
use crate::components::watch_indicator::WatchIndicator;
|
||||
use crate::pages::Route;
|
||||
use crate::types::ArtistDetail;
|
||||
use crate::types::FullArtistDetail;
|
||||
|
||||
#[derive(Properties, PartialEq)]
|
||||
pub struct Props {
|
||||
pub id: i32,
|
||||
pub id: String,
|
||||
}
|
||||
|
||||
#[function_component(ArtistPage)]
|
||||
pub fn artist_page(props: &Props) -> Html {
|
||||
let detail = use_state(|| None::<ArtistDetail>);
|
||||
let detail = use_state(|| None::<FullArtistDetail>);
|
||||
let error = use_state(|| None::<String>);
|
||||
let id = props.id;
|
||||
let message = use_state(|| None::<String>);
|
||||
let id = props.id.clone();
|
||||
|
||||
// Full fetch (with track counts) — used for refresh after actions
|
||||
let fetch = {
|
||||
let detail = detail.clone();
|
||||
let error = error.clone();
|
||||
Callback::from(move |id: String| {
|
||||
let detail = detail.clone();
|
||||
let error = error.clone();
|
||||
wasm_bindgen_futures::spawn_local(async move {
|
||||
match api::get_artist_full(&id).await {
|
||||
Ok(d) => detail.set(Some(d)),
|
||||
Err(e) => error.set(Some(e.0)),
|
||||
}
|
||||
});
|
||||
})
|
||||
};
|
||||
|
||||
// Two-phase load: quick first (release groups only), then enriched (with track counts)
|
||||
{
|
||||
let detail = detail.clone();
|
||||
let error = error.clone();
|
||||
use_effect_with(id, move |id| {
|
||||
let id = *id;
|
||||
let id = id.clone();
|
||||
use_effect_with(id.clone(), move |_| {
|
||||
wasm_bindgen_futures::spawn_local(async move {
|
||||
match api::get_artist(id).await {
|
||||
Ok(d) => detail.set(Some(d)),
|
||||
// Phase 1: quick load (instant for browsing artists)
|
||||
match api::get_artist_full_quick(&id).await {
|
||||
Ok(d) => {
|
||||
let needs_enrich = !d.enriched;
|
||||
detail.set(Some(d));
|
||||
|
||||
// Phase 2: if not enriched, fetch full data in background
|
||||
if needs_enrich {
|
||||
match api::get_artist_full(&id).await {
|
||||
Ok(full) => detail.set(Some(full)),
|
||||
Err(_) => {} // quick data is still showing, don't overwrite with error
|
||||
}
|
||||
}
|
||||
}
|
||||
Err(e) => error.set(Some(e.0)),
|
||||
}
|
||||
});
|
||||
@@ -35,41 +66,146 @@ pub fn artist_page(props: &Props) -> Html {
|
||||
}
|
||||
|
||||
let Some(ref d) = *detail else {
|
||||
return html! { <p class="loading">{ "Loading..." }</p> };
|
||||
return html! { <p class="loading">{ "Loading discography from MusicBrainz..." }</p> };
|
||||
};
|
||||
|
||||
html! {
|
||||
<div>
|
||||
<div class="page-header">
|
||||
<h2>{ &d.artist.name }</h2>
|
||||
if let Some(ref mbid) = d.artist.musicbrainz_id {
|
||||
<p class="text-muted text-sm">{ format!("MBID: {mbid}") }</p>
|
||||
if d.enriched {
|
||||
<p class="text-sm">
|
||||
<span style="color: var(--accent);">
|
||||
{ format!("{}/{} watched", d.total_watched_tracks, d.total_available_tracks) }
|
||||
</span>
|
||||
{ " · " }
|
||||
<span style="color: var(--success);">
|
||||
{ format!("{} owned", d.total_owned_tracks) }
|
||||
</span>
|
||||
</p>
|
||||
} else {
|
||||
<p class="text-sm text-muted loading">{ "Loading track counts..." }</p>
|
||||
}
|
||||
</div>
|
||||
|
||||
<h3 class="mb-1">{ format!("Albums ({})", d.albums.len()) }</h3>
|
||||
if d.albums.is_empty() {
|
||||
<p class="text-muted">{ "No albums found." }</p>
|
||||
} else {
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>{ "Name" }</th><th>{ "Year" }</th><th>{ "Genre" }</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{ for d.albums.iter().map(|a| html! {
|
||||
<tr>
|
||||
<td>
|
||||
<Link<Route> to={Route::Album { id: a.id }}>
|
||||
{ &a.name }
|
||||
</Link<Route>>
|
||||
</td>
|
||||
<td>{ a.year.map(|y| y.to_string()).unwrap_or_default() }</td>
|
||||
<td>{ a.genre.as_deref().unwrap_or("") }</td>
|
||||
</tr>
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
if let Some(ref msg) = *message {
|
||||
<div class="card" style="border-color: var(--success);">
|
||||
<p>{ msg }</p>
|
||||
</div>
|
||||
}
|
||||
|
||||
if d.albums.is_empty() {
|
||||
<p class="text-muted">{ "No releases found on MusicBrainz." }</p>
|
||||
}
|
||||
|
||||
// Group albums by type
|
||||
{ for ["Album", "EP", "Single"].iter().map(|release_type| {
|
||||
let type_albums: Vec<_> = d.albums.iter()
|
||||
.filter(|a| a.release_type.as_deref().unwrap_or("Album") == *release_type)
|
||||
.collect();
|
||||
if type_albums.is_empty() {
|
||||
return html! {};
|
||||
}
|
||||
html! {
|
||||
<div class="mb-2">
|
||||
<h3 class="mb-1">{ format!("{}s ({})", release_type, type_albums.len()) }</h3>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{ "Title" }</th>
|
||||
<th>{ "Date" }</th>
|
||||
<th>{ "Owned" }</th>
|
||||
<th>{ "Watched" }</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{ for type_albums.iter().map(|album| {
|
||||
let is_unwatched = album.status == "unwatched";
|
||||
let row_style = if is_unwatched { "opacity: 0.6;" } else { "" };
|
||||
|
||||
let album_link = html! {
|
||||
<Link<Route> to={Route::Album { mbid: album.mbid.clone() }}>
|
||||
{ &album.title }
|
||||
</Link<Route>>
|
||||
};
|
||||
|
||||
let tc = album.track_count;
|
||||
|
||||
// Watch button for unwatched albums
|
||||
let watch_btn = if is_unwatched {
|
||||
let artist_name = d.artist.name.clone();
|
||||
let album_title = album.title.clone();
|
||||
let album_mbid = album.mbid.clone();
|
||||
let message = message.clone();
|
||||
let error = error.clone();
|
||||
let fetch = fetch.clone();
|
||||
let artist_id = id.clone();
|
||||
html! {
|
||||
<button class="btn btn-sm btn-primary"
|
||||
onclick={Callback::from(move |_: MouseEvent| {
|
||||
let artist_name = artist_name.clone();
|
||||
let album_title = album_title.clone();
|
||||
let album_mbid = album_mbid.clone();
|
||||
let message = message.clone();
|
||||
let error = error.clone();
|
||||
let fetch = fetch.clone();
|
||||
let artist_id = artist_id.clone();
|
||||
wasm_bindgen_futures::spawn_local(async move {
|
||||
match api::add_album(&artist_name, &album_title, Some(&album_mbid)).await {
|
||||
Ok(s) => {
|
||||
message.set(Some(format!(
|
||||
"Added {} tracks from '{}'",
|
||||
s.tracks_added, album_title
|
||||
)));
|
||||
fetch.emit(artist_id);
|
||||
}
|
||||
Err(e) => error.set(Some(e.0)),
|
||||
}
|
||||
});
|
||||
})}>
|
||||
{ "Watch" }
|
||||
</button>
|
||||
}
|
||||
} else {
|
||||
html! {}
|
||||
};
|
||||
|
||||
html! {
|
||||
<tr style={row_style}>
|
||||
<td>{ album_link }</td>
|
||||
<td class="text-muted">{ album.date.as_deref().unwrap_or("") }</td>
|
||||
<td>
|
||||
if tc > 0 {
|
||||
<span class="text-sm" style={
|
||||
if album.owned_tracks >= tc { "color: var(--success);" }
|
||||
else if album.owned_tracks > 0 { "color: var(--warning);" }
|
||||
else { "color: var(--text-muted);" }
|
||||
}>
|
||||
{ format!("{}/{}", album.owned_tracks, tc) }
|
||||
</span>
|
||||
}
|
||||
</td>
|
||||
<td>
|
||||
if tc > 0 {
|
||||
<span class="text-sm" style={
|
||||
if album.watched_tracks >= tc { "color: var(--accent);" }
|
||||
else if album.watched_tracks > 0 { "color: var(--accent);" }
|
||||
else { "color: var(--text-muted);" }
|
||||
}>
|
||||
{ format!("{}/{}", album.watched_tracks, tc) }
|
||||
</span>
|
||||
}
|
||||
</td>
|
||||
<td>{ watch_btn }</td>
|
||||
</tr>
|
||||
}
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
}
|
||||
})}
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user