Shanty/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Lots of fixes for artist detail page and track management

Browse Source
This commit is contained in:
Connor Johnstone
2026-03-18 13:44:49 -04:00
parent 2314346925
commit a268ec4e56
12 changed files with 889 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
frontend/src/pages/album.rs
View File

@@ -1,26 +1,27 @@
use yew::prelude::*;
use crate::api;
use crate::types::AlbumDetail;
use crate::components::status_badge::StatusBadge;
use crate::types::MbAlbumDetail;
#[derive(Properties, PartialEq)]
pub struct Props {
pub id: i32,
pub mbid: String,
}
#[function_component(AlbumPage)]
pub fn album_page(props: &Props) -> Html {
let detail = use_state(|| None::<AlbumDetail>);
let detail = use_state(|| None::<MbAlbumDetail>);
let error = use_state(|| None::<String>);
let id = props.id;
let mbid = props.mbid.clone();
{
let detail = detail.clone();
let error = error.clone();
use_effect_with(id, move |id| {
let id = *id;
let mbid = mbid.clone();
use_effect_with(mbid.clone(), move |_| {
wasm_bindgen_futures::spawn_local(async move {
match api::get_album(id).await {
match api::get_album(&mbid).await {
Ok(d) => detail.set(Some(d)),
Err(e) => error.set(Some(e.0)),
}
@@ -33,17 +34,22 @@ pub fn album_page(props: &Props) -> Html {
}
let Some(ref d) = *detail else {
return html! { <p class="loading">{ "Loading..." }</p> };
return html! { <p class="loading">{ "Loading album from MusicBrainz..." }</p> };
};
// Format duration from ms
let fmt_duration = |ms: u64| -> String {
let secs = ms / 1000;
let mins = secs / 60;
let remaining = secs % 60;
format!("{mins}:{remaining:02}")
};
html! {
<div>
<div class="page-header">
<h2>{ &d.album.name }</h2>
<p class="text-muted">{ format!("by {}", d.album.album_artist) }</p>
if let Some(year) = d.album.year {
<p class="text-muted text-sm">{ format!("Year: {year}") }</p>
}
<h2>{ format!("Album") }</h2>
<p class="text-muted text-sm">{ format!("MBID: {}", d.mbid) }</p>
</div>
<h3 class="mb-1">{ format!("Tracks ({})", d.tracks.len()) }</h3>
@@ -52,16 +58,33 @@ pub fn album_page(props: &Props) -> Html {
} else {
<table>
<thead>
<tr><th>{ "#" }</th><th>{ "Title" }</th><th>{ "Artist" }</th><th>{ "Codec" }</th></tr>
<tr>
<th>{ "#" }</th>
<th>{ "Title" }</th>
<th>{ "Duration" }</th>
<th>{ "Status" }</th>
</tr>
</thead>
<tbody>
{ for d.tracks.iter().map(|t| html! {
<tr>
<td>{ t.track_number.map(|n| n.to_string()).unwrap_or_default() }</td>
<td>{ t.title.as_deref().unwrap_or("Unknown") }</td>
<td>{ t.artist.as_deref().unwrap_or("") }</td>
<td class="text-muted text-sm">{ t.codec.as_deref().unwrap_or("") }</td>
</tr>
{ for d.tracks.iter().map(|t| {
let duration = t.duration_ms
.map(|ms| fmt_duration(ms))
.unwrap_or_default();
html! {
<tr>
<td>{ t.track_number.map(|n| n.to_string()).unwrap_or_default() }</td>
<td>{ &t.title }</td>
<td class="text-muted">{ duration }</td>
<td>
if let Some(ref status) = t.status {
<StatusBadge status={status.clone()} />
} else {
<span class="text-muted text-sm">{ "—" }</span>
}
</td>
</tr>
}
})}
</tbody>
</table>

202
frontend/src/pages/artist.rs
View File

@@ -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>
}
}

26
frontend/src/pages/library.rs
View File

@@ -2,12 +2,13 @@ use yew::prelude::*;
use yew_router::prelude::*;
use crate::api;
use crate::components::watch_indicator::WatchIndicator;
use crate::pages::Route;
use crate::types::Artist;
use crate::types::ArtistListItem;
#[function_component(LibraryPage)]
pub fn library_page() -> Html {
let artists = use_state(|| None::<Vec<Artist>>);
let artists = use_state(|| None::<Vec<ArtistListItem>>);
let error = use_state(|| None::<String>);
{
@@ -15,7 +16,7 @@ pub fn library_page() -> Html {
let error = error.clone();
use_effect_with((), move |_| {
wasm_bindgen_futures::spawn_local(async move {
match api::list_artists(100, 0).await {
match api::list_artists(200, 0).await {
Ok(a) => artists.set(Some(a)),
Err(e) => error.set(Some(e.0)),
}
@@ -43,17 +44,30 @@ pub fn library_page() -> Html {
} else {
<table>
<thead>
<tr><th>{ "Name" }</th><th>{ "MusicBrainz ID" }</th></tr>
<tr>
<th>{ "Name" }</th>
<th>{ "Status" }</th>
</tr>
</thead>
<tbody>
{ for artists.iter().map(|a| html! {
<tr>
<td>
<Link<Route> to={Route::Artist { id: a.id }}>
<Link<Route> to={Route::Artist { id: a.id.to_string() }}>
{ &a.name }
</Link<Route>>
</td>
<td class="text-muted text-sm">{ a.musicbrainz_id.as_deref().unwrap_or("") }</td>
<td>
if a.total_items > 0 {
<span class="text-sm" style={
if a.total_owned == a.total_items { "color: var(--success);" }
else if a.total_owned > 0 { "color: var(--warning);" }
else { "color: var(--accent);" }
}>
{ format!("{}/{} owned", a.total_owned, a.total_items) }
</span>
}
</td>
</tr>
})}
</tbody>

8
frontend/src/pages/mod.rs
View File

@@ -18,9 +18,9 @@ pub enum Route {
#[at("/library")]
Library,
#[at("/artists/:id")]
Artist { id: i32 },
#[at("/albums/:id")]
Album { id: i32 },
Artist { id: String },
#[at("/albums/:mbid")]
Album { mbid: String },
#[at("/downloads")]
Downloads,
#[at("/settings")]
@@ -36,7 +36,7 @@ pub fn switch(route: Route) -> Html {
Route::Search => html! { <search::SearchPage /> },
Route::Library => html! { <library::LibraryPage /> },
Route::Artist { id } => html! { <artist::ArtistPage {id} /> },
Route::Album { id } => html! { <album::AlbumPage {id} /> },
Route::Album { mbid } => html! { <album::AlbumPage {mbid} /> },
Route::Downloads => html! { <downloads::DownloadsPage /> },
Route::Settings => html! { <settings::SettingsPage /> },
Route::NotFound => html! { <h2>{ "404 — Not Found" }</h2> },