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

14
frontend/src/api.rs
View File

@@ -82,7 +82,7 @@ pub async fn search_track(query: &str, artist: Option<&str>, limit: u32) -> Resu
}
// --- Library ---
pub async fn list_artists(limit: u64, offset: u64) -> Result<Vec<Artist>, ApiError> {
pub async fn list_artists(limit: u64, offset: u64) -> Result<Vec<ArtistListItem>, ApiError> {
get_json(&format!("{BASE}/artists?limit={limit}&offset={offset}")).await
}
@@ -90,8 +90,16 @@ pub async fn get_artist(id: i32) -> Result<ArtistDetail, ApiError> {
get_json(&format!("{BASE}/artists/{id}")).await
}
pub async fn get_album(id: i32) -> Result<AlbumDetail, ApiError> {
get_json(&format!("{BASE}/albums/{id}")).await
pub async fn get_artist_full(id: &str) -> Result<FullArtistDetail, ApiError> {
get_json(&format!("{BASE}/artists/{id}/full")).await
}
pub async fn get_artist_full_quick(id: &str) -> Result<FullArtistDetail, ApiError> {
get_json(&format!("{BASE}/artists/{id}/full?quick=true")).await
}
pub async fn get_album(mbid: &str) -> Result<MbAlbumDetail, ApiError> {
get_json(&format!("{BASE}/albums/{mbid}")).await
}
pub async fn list_tracks(limit: u64, offset: u64) -> Result<Vec<Track>, ApiError> {

1
frontend/src/components/mod.rs
View File

@@ -1,2 +1,3 @@
pub mod navbar;
pub mod status_badge;
pub mod watch_indicator;

25
frontend/src/components/watch_indicator.rs Normal file
View File

@@ -0,0 +1,25 @@
use yew::prelude::*;
#[derive(Properties, PartialEq)]
pub struct Props {
pub status: String,
}
#[function_component(WatchIndicator)]
pub fn watch_indicator(props: &Props) -> Html {
let (icon, color, title) = match props.status.as_str() {
"owned" => ("●", "var(--success)", "Owned"),
"partial" => ("◐", "var(--warning)", "Partial"),
"wanted" => ("○", "var(--accent)", "Wanted"),
"downloading" => ("↓", "var(--accent)", "Downloading"),
"fully_watched" => ("●", "var(--accent)", "Fully watched"),
"unwatched" => ("○", "var(--text-muted)", "Not watched"),
_ => ("○", "var(--text-muted)", "Unknown"),
};
html! {
<span style={format!("color: {color}; font-size: 1.1em; cursor: help;")} title={title}>
{ icon }
</span>
}
}

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

57
frontend/src/types.rs
View File

@@ -9,6 +9,46 @@ pub struct Artist {
pub musicbrainz_id: Option<String>,
}
#[derive(Debug, Clone, PartialEq, Deserialize)]
pub struct ArtistListItem {
pub id: i32,
pub name: String,
pub musicbrainz_id: Option<String>,
pub total_watched: usize,
pub total_owned: usize,
pub total_items: usize,
}
#[derive(Debug, Clone, PartialEq, Deserialize)]
pub struct FullAlbumInfo {
pub mbid: String,
pub title: String,
pub release_type: Option<String>,
pub date: Option<String>,
pub track_count: u32,
pub local_album_id: Option<i32>,
pub watched_tracks: u32,
pub downloaded_tracks: u32,
pub owned_tracks: u32,
pub total_local_tracks: u32,
pub status: String,
}
#[derive(Debug, Clone, PartialEq, Deserialize)]
pub struct FullArtistDetail {
pub artist: Artist,
pub albums: Vec<FullAlbumInfo>,
pub artist_status: String,
#[serde(default)]
pub total_available_tracks: u32,
#[serde(default)]
pub total_watched_tracks: u32,
#[serde(default)]
pub total_owned_tracks: u32,
#[serde(default)]
pub enriched: bool,
}
#[derive(Debug, Clone, PartialEq, Deserialize, Serialize)]
pub struct Album {
pub id: i32,
@@ -44,6 +84,23 @@ pub struct AlbumDetail {
pub tracks: Vec<Track>,
}
/// Album detail from MusicBrainz (the primary album view).
#[derive(Debug, Clone, PartialEq, Deserialize)]
pub struct MbAlbumDetail {
pub mbid: String,
pub tracks: Vec<MbAlbumTrack>,
}
#[derive(Debug, Clone, PartialEq, Deserialize)]
pub struct MbAlbumTrack {
pub recording_mbid: String,
pub title: String,
pub track_number: Option<i32>,
pub disc_number: Option<i32>,
pub duration_ms: Option<u64>,
pub status: Option<String>,
}
// --- Search results ---
#[derive(Debug, Clone, PartialEq, Deserialize)]