453 lines
21 KiB
Rust
453 lines
21 KiB
Rust
use gloo_timers::callback::Interval;
|
|
use std::cell::Cell;
|
|
use std::rc::Rc;
|
|
use yew::prelude::*;
|
|
use yew_router::prelude::*;
|
|
|
|
use crate::api;
|
|
use crate::pages::Route;
|
|
use crate::types::FullArtistDetail;
|
|
|
|
#[derive(Properties, PartialEq)]
|
|
pub struct Props {
|
|
pub id: String,
|
|
}
|
|
|
|
#[function_component(ArtistPage)]
|
|
pub fn artist_page(props: &Props) -> Html {
|
|
let detail = use_state(|| None::<FullArtistDetail>);
|
|
let error = use_state(|| None::<String>);
|
|
let message = use_state(|| None::<String>);
|
|
let id = props.id.clone();
|
|
|
|
// Flag to prevent the background enrichment from overwriting a user-triggered refresh
|
|
let user_acted: Rc<Cell<bool>> = use_memo((), |_| Cell::new(false));
|
|
|
|
// Full fetch (with track counts) — used for refresh after actions
|
|
let fetch = {
|
|
let detail = detail.clone();
|
|
let error = error.clone();
|
|
let user_acted = user_acted.clone();
|
|
Callback::from(move |id: String| {
|
|
user_acted.set(true);
|
|
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();
|
|
let id = id.clone();
|
|
let user_acted = user_acted.clone();
|
|
use_effect_with(id.clone(), move |_| {
|
|
user_acted.set(false);
|
|
wasm_bindgen_futures::spawn_local(async move {
|
|
// 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 && !user_acted.get() {
|
|
if let Ok(full) = api::get_artist_full(&id).await {
|
|
// Only apply if user hasn't triggered a refresh
|
|
if !user_acted.get() {
|
|
detail.set(Some(full));
|
|
}
|
|
}
|
|
}
|
|
}
|
|
Err(e) => error.set(Some(e.0)),
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
// Auto-refresh when background tasks complete (downloads, organize, etc.)
|
|
{
|
|
let fetch = fetch.clone();
|
|
let id = id.clone();
|
|
let had_tasks: Rc<Cell<bool>> = use_memo((), |_| Cell::new(false));
|
|
use_effect_with((), move |_| {
|
|
let interval = Interval::new(3_000, move || {
|
|
let fetch = fetch.clone();
|
|
let id = id.clone();
|
|
let had_tasks = had_tasks.clone();
|
|
wasm_bindgen_futures::spawn_local(async move {
|
|
if let Ok(status) = api::get_status().await {
|
|
let has_running = status.tasks.iter().any(|t| t.status == "Running");
|
|
if had_tasks.get() && !has_running {
|
|
// Tasks just finished — refresh artist data
|
|
fetch.emit(id);
|
|
}
|
|
had_tasks.set(has_running);
|
|
}
|
|
});
|
|
});
|
|
move || drop(interval)
|
|
});
|
|
}
|
|
|
|
if let Some(ref err) = *error {
|
|
return html! { <div class="error">{ format!("Error: {err}") }</div> };
|
|
}
|
|
|
|
let Some(ref d) = *detail else {
|
|
return html! { <p class="loading">{ "Loading discography from MusicBrainz..." }</p> };
|
|
};
|
|
|
|
let watch_all_btn = {
|
|
let artist_status = d.artist_status.clone();
|
|
let show = artist_status != "owned";
|
|
if show {
|
|
let artist_name = d.artist.name.clone();
|
|
let artist_mbid = d.artist.musicbrainz_id.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-success"
|
|
onclick={Callback::from(move |_: MouseEvent| {
|
|
let artist_name = artist_name.clone();
|
|
let artist_mbid = artist_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_artist(&artist_name, artist_mbid.as_deref()).await {
|
|
Ok(s) => {
|
|
message.set(Some(format!(
|
|
"Watching {}: added {} tracks ({} already owned)",
|
|
artist_name, s.tracks_added, s.tracks_already_owned
|
|
)));
|
|
fetch.emit(artist_id);
|
|
}
|
|
Err(e) => error.set(Some(e.0)),
|
|
}
|
|
});
|
|
})}>
|
|
{ "Watch All" }
|
|
</button>
|
|
}
|
|
} else {
|
|
html! {}
|
|
}
|
|
};
|
|
|
|
let monitor_btn = {
|
|
// Only show monitor toggle for artists that have a local DB ID (> 0)
|
|
let artist_id_num = d.artist.id;
|
|
let is_monitored = d.monitored;
|
|
if artist_id_num > 0 {
|
|
let message = message.clone();
|
|
let error = error.clone();
|
|
let fetch = fetch.clone();
|
|
let artist_id = id.clone();
|
|
let label = if is_monitored { "Unmonitor" } else { "Monitor" };
|
|
let btn_class = if is_monitored {
|
|
"btn btn-sm btn-secondary"
|
|
} else {
|
|
"btn btn-sm btn-primary"
|
|
};
|
|
html! {
|
|
<button class={btn_class}
|
|
onclick={Callback::from(move |_: MouseEvent| {
|
|
let new_state = !is_monitored;
|
|
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::set_artist_monitored(artist_id_num, new_state).await {
|
|
Ok(_) => {
|
|
let msg = if new_state {
|
|
"Monitoring enabled -- new releases will be auto-watched"
|
|
} else {
|
|
"Monitoring disabled"
|
|
};
|
|
message.set(Some(msg.to_string()));
|
|
fetch.emit(artist_id);
|
|
}
|
|
Err(e) => error.set(Some(e.0)),
|
|
}
|
|
});
|
|
})}>
|
|
{ label }
|
|
</button>
|
|
}
|
|
} else {
|
|
html! {}
|
|
}
|
|
};
|
|
|
|
html! {
|
|
<div>
|
|
if let Some(ref banner) = d.artist_banner {
|
|
<div class="artist-banner" style={format!("background-image: url('{banner}')")}>
|
|
</div>
|
|
}
|
|
<div class="page-header">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex gap-2 items-center">
|
|
if let Some(ref photo) = d.artist_photo {
|
|
<img class="artist-photo" src={photo.clone()} loading="lazy" />
|
|
}
|
|
<div>
|
|
<h2>
|
|
{ &d.artist.name }
|
|
if d.monitored {
|
|
<span class="badge badge-success" style="margin-left: 0.5rem; font-size: 0.7em; vertical-align: middle;">{ "Monitored" }</span>
|
|
}
|
|
</h2>
|
|
if let Some(ref info) = d.artist_info {
|
|
<div class="artist-meta">
|
|
if let Some(ref country) = info.country {
|
|
<span class="tag">{ country }</span>
|
|
}
|
|
if let Some(ref atype) = info.artist_type {
|
|
<span class="tag">{ atype }</span>
|
|
}
|
|
if let Some(ref year) = info.begin_year {
|
|
<span class="text-sm text-muted">{ format!("est. {year}") }</span>
|
|
}
|
|
if let Some(ref dis) = info.disambiguation {
|
|
<span class="text-sm text-muted">{ format!("({dis})") }</span>
|
|
}
|
|
</div>
|
|
if !info.urls.is_empty() {
|
|
<div class="artist-links">
|
|
{ for info.urls.iter().filter(|u|
|
|
["wikipedia", "official homepage", "discogs", "wikidata"].contains(&u.link_type.as_str())
|
|
).map(|u| {
|
|
let label = match u.link_type.as_str() {
|
|
"wikipedia" => "Wikipedia",
|
|
"official homepage" => "Official Site",
|
|
"discogs" => "Discogs",
|
|
"wikidata" => "Wikidata",
|
|
other => other,
|
|
};
|
|
html! {
|
|
<a href={u.url.clone()} target="_blank" rel="noopener">{ label }</a>
|
|
}
|
|
})}
|
|
</div>
|
|
}
|
|
}
|
|
</div>
|
|
</div>
|
|
<div class="flex gap-1">
|
|
{ watch_all_btn }
|
|
{ monitor_btn }
|
|
</div>
|
|
</div>
|
|
if let Some(ref bio) = d.artist_bio {
|
|
<p class="artist-bio text-sm">{ bio }</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>
|
|
|
|
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 (primary credit only)
|
|
{ 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 style="width: 60px;"></th>
|
|
<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 cover_url = format!("https://coverartarchive.org/release/{}/front-250", album.mbid);
|
|
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>
|
|
<img class="album-art" src={cover_url}
|
|
loading="lazy"
|
|
onerror={Callback::from(|e: web_sys::Event| {
|
|
if let Some(el) = e.target_dyn_into::<web_sys::HtmlElement>() {
|
|
el.set_attribute("style", "display:none").ok();
|
|
}
|
|
})} />
|
|
</td>
|
|
<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 > 0 { "color: var(--accent);" }
|
|
else { "color: var(--text-muted);" }
|
|
}>
|
|
{ format!("{}/{}", album.watched_tracks, tc) }
|
|
</span>
|
|
}
|
|
</td>
|
|
<td>{ watch_btn }</td>
|
|
</tr>
|
|
}
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
}
|
|
})}
|
|
|
|
// Featured releases (collapsible, pre-collapsed)
|
|
{ for ["Album", "EP", "Single"].iter().map(|release_type| {
|
|
let featured: Vec<_> = d.featured_albums.iter()
|
|
.filter(|a| a.release_type.as_deref().unwrap_or("Album") == *release_type)
|
|
.collect();
|
|
if featured.is_empty() {
|
|
return html! {};
|
|
}
|
|
html! {
|
|
<details class="mb-2">
|
|
<summary class="text-muted" style="cursor: pointer;">
|
|
{ format!("Featured {}s ({})", release_type, featured.len()) }
|
|
</summary>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 60px;"></th>
|
|
<th>{ "Title" }</th>
|
|
<th>{ "Date" }</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{ for featured.iter().map(|album| {
|
|
let cover_url = format!("https://coverartarchive.org/release/{}/front-250", album.mbid);
|
|
html! {
|
|
<tr style="opacity: 0.6;">
|
|
<td>
|
|
<img class="album-art" src={cover_url}
|
|
loading="lazy"
|
|
onerror={Callback::from(|e: web_sys::Event| {
|
|
if let Some(el) = e.target_dyn_into::<web_sys::HtmlElement>() {
|
|
el.set_attribute("style", "display:none").ok();
|
|
}
|
|
})} />
|
|
</td>
|
|
<td>
|
|
<Link<Route> to={Route::Album { mbid: album.mbid.clone() }}>
|
|
{ &album.title }
|
|
</Link<Route>>
|
|
</td>
|
|
<td class="text-muted">{ album.date.as_deref().unwrap_or("") }</td>
|
|
</tr>
|
|
}
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
</details>
|
|
}
|
|
})}
|
|
</div>
|
|
}
|
|
}
|