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

Added better artist bio/pics/lyrics

Browse Source
This commit is contained in:
Connor Johnstone
2026-03-19 14:53:39 -04:00
parent f6b363c40f
commit 51bcf26482
9 changed files with 580 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
frontend/src/api.rs
View File

@@ -98,6 +98,11 @@ pub async fn delete_user(id: i32) -> Result<(), ApiError> {
delete(&format!("{BASE}/auth/users/{id}")).await
}
// --- Lyrics ---
pub async fn get_lyrics(artist: &str, title: &str) -> Result<LyricsResult, ApiError> {
get_json(&format!("{BASE}/lyrics?artist={artist}&title={title}")).await
}
// --- Status ---
pub async fn get_status() -> Result<Status, ApiError> {
get_json(&format!("{BASE}/status")).await
@@ -108,7 +113,11 @@ pub async fn search_artist(query: &str, limit: u32) -> Result<Vec<ArtistResult>,
get_json(&format!("{BASE}/search/artist?q={query}&limit={limit}")).await
}
pub async fn search_album(query: &str, artist: Option<&str>, limit: u32) -> Result<Vec<AlbumResult>, ApiError> {
pub async fn search_album(
query: &str,
artist: Option<&str>,
limit: u32,
) -> Result<Vec<AlbumResult>, ApiError> {
let mut url = format!("{BASE}/search/album?q={query}&limit={limit}");
if let Some(a) = artist {
url.push_str(&format!("&artist={a}"));
@@ -116,7 +125,11 @@ pub async fn search_album(query: &str, artist: Option<&str>, limit: u32) -> Resu
get_json(&url).await
}
pub async fn search_track(query: &str, artist: Option<&str>, limit: u32) -> Result<Vec<TrackResult>, ApiError> {
pub async fn search_track(
query: &str,
artist: Option<&str>,
limit: u32,
) -> Result<Vec<TrackResult>, ApiError> {
let mut url = format!("{BASE}/search/track?q={query}&limit={limit}");
if let Some(a) = artist {
url.push_str(&format!("&artist={a}"));
@@ -158,7 +171,11 @@ pub async fn add_artist(name: &str, mbid: Option<&str>) -> Result<AddSummary, Ap
post_json(&format!("{BASE}/artists"), &body).await
}
pub async fn add_album(artist: &str, album: &str, mbid: Option<&str>) -> Result<AddSummary, ApiError> {
pub async fn add_album(
artist: &str,
album: &str,
mbid: Option<&str>,
) -> Result<AddSummary, ApiError> {
let body = match mbid {
Some(m) => format!(r#"{{"artist":"{artist}","album":"{album}","mbid":"{m}"}}"#),
None => format!(r#"{{"artist":"{artist}","album":"{album}"}}"#),

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

@@ -1,8 +1,9 @@
use std::collections::HashMap;
use yew::prelude::*;
use crate::api;
use crate::components::status_badge::StatusBadge;
use crate::types::MbAlbumDetail;
use crate::types::{LyricsResult, MbAlbumDetail};
#[derive(Properties, PartialEq)]
pub struct Props {
@@ -14,6 +15,8 @@ pub fn album_page(props: &Props) -> Html {
let detail = use_state(|| None::<MbAlbumDetail>);
let error = use_state(|| None::<String>);
let mbid = props.mbid.clone();
let lyrics_cache: UseStateHandle<HashMap<String, LyricsResult>> = use_state(HashMap::new);
let active_lyrics = use_state(|| None::<String>);
{
let detail = detail.clone();
@@ -37,7 +40,6 @@ pub fn album_page(props: &Props) -> Html {
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;
@@ -45,11 +47,22 @@ pub fn album_page(props: &Props) -> Html {
format!("{mins}:{remaining:02}")
};
let cover_url = format!("https://coverartarchive.org/release/{}/front-250", d.mbid);
html! {
<div>
<div class="page-header">
<h2>{ format!("Album") }</h2>
<p class="text-muted text-sm">{ format!("MBID: {}", d.mbid) }</p>
<div class="album-header">
<img class="album-art-lg" 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();
}
})} />
<div>
<h2>{ "Album" }</h2>
<p class="text-muted text-sm">{ format!("MBID: {}", d.mbid) }</p>
</div>
</div>
<h3 class="mb-1">{ format!("Tracks ({})", d.tracks.len()) }</h3>
@@ -63,6 +76,7 @@ pub fn album_page(props: &Props) -> Html {
<th>{ "Title" }</th>
<th>{ "Duration" }</th>
<th>{ "Status" }</th>
<th></th>
</tr>
</thead>
<tbody>
@@ -71,7 +85,40 @@ pub fn album_page(props: &Props) -> Html {
.map(|ms| fmt_duration(ms))
.unwrap_or_default();
let track_key = t.recording_mbid.clone();
let is_active = active_lyrics.as_ref() == Some(&track_key);
let cached = lyrics_cache.get(&track_key).cloned();
let on_lyrics_click = {
let active = active_lyrics.clone();
let cache = lyrics_cache.clone();
let title = t.title.clone();
let key = track_key.clone();
Callback::from(move |_: MouseEvent| {
let active = active.clone();
let cache = cache.clone();
let title = title.clone();
let key = key.clone();
if active.as_ref() == Some(&key) {
active.set(None);
return;
}
active.set(Some(key.clone()));
if cache.contains_key(&key) {
return;
}
wasm_bindgen_futures::spawn_local(async move {
if let Ok(result) = api::get_lyrics("", &title).await {
let mut map = (*cache).clone();
map.insert(key, result);
cache.set(map);
}
});
})
};
html! {
<>
<tr>
<td>{ t.track_number.map(|n| n.to_string()).unwrap_or_default() }</td>
<td>{ &t.title }</td>
@@ -80,10 +127,34 @@ pub fn album_page(props: &Props) -> Html {
if let Some(ref status) = t.status {
<StatusBadge status={status.clone()} />
} else {
<span class="text-muted text-sm">{ "—" }</span>
<span class="text-muted text-sm">{ "\u{2014}" }</span>
}
</td>
<td>
<button class="btn btn-sm btn-secondary"
onclick={on_lyrics_click}>
{ if is_active { "Hide" } else { "Lyrics" } }
</button>
</td>
</tr>
if is_active {
<tr>
<td colspan="5">
{ match cached {
Some(ref lr) if lr.found => html! {
<pre class="lyrics">{ lr.synced_lyrics.as_deref().or(lr.lyrics.as_deref()).unwrap_or("") }</pre>
},
Some(_) => html! {
<p class="text-muted text-sm">{ "No lyrics found." }</p>
},
None => html! {
<p class="text-sm loading">{ "Loading lyrics..." }</p>
},
}}
</td>
</tr>
}
</>
}
})}
</tbody>

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

@@ -1,6 +1,6 @@
use std::rc::Rc;
use std::cell::Cell;
use gloo_timers::callback::Interval;
use std::cell::Cell;
use std::rc::Rc;
use yew::prelude::*;
use yew_router::prelude::*;
@@ -152,9 +152,53 @@ pub fn artist_page(props: &Props) -> Html {
<div>
<div class="page-header">
<div class="flex items-center justify-between">
<h2>{ &d.artist.name }</h2>
<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 }</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>
{ watch_all_btn }
</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);">
@@ -194,6 +238,7 @@ pub fn artist_page(props: &Props) -> Html {
<table>
<thead>
<tr>
<th style="width: 60px;"></th>
<th>{ "Title" }</th>
<th>{ "Date" }</th>
<th>{ "Owned" }</th>
@@ -206,6 +251,7 @@ pub fn artist_page(props: &Props) -> Html {
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 }
@@ -255,6 +301,15 @@ pub fn artist_page(props: &Props) -> 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>

35
frontend/src/pages/dashboard.rs
View File

@@ -62,7 +62,10 @@ pub fn dashboard() -> Html {
wasm_bindgen_futures::spawn_local(async move {
match api::sync_downloads().await {
Ok(s) => {
message.set(Some(format!("Synced: {} enqueued, {} skipped", s.enqueued, s.skipped)));
message.set(Some(format!(
"Synced: {} enqueued, {} skipped",
s.enqueued, s.skipped
)));
fetch.emit(());
}
Err(e) => error.set(Some(e.0)),
@@ -82,7 +85,10 @@ pub fn dashboard() -> Html {
wasm_bindgen_futures::spawn_local(async move {
match api::process_downloads().await {
Ok(t) => {
message.set(Some(format!("Downloads started (task: {})", &t.task_id[..8])));
message.set(Some(format!(
"Downloads started (task: {})",
&t.task_id[..8]
)));
fetch.emit(());
}
Err(e) => error.set(Some(e.0)),
@@ -101,7 +107,10 @@ pub fn dashboard() -> Html {
let fetch = fetch.clone();
wasm_bindgen_futures::spawn_local(async move {
match api::trigger_index().await {
Ok(t) => { message.set(Some(format!("Indexing started ({})", &t.task_id[..8]))); fetch.emit(()); }
Ok(t) => {
message.set(Some(format!("Indexing started ({})", &t.task_id[..8])));
fetch.emit(());
}
Err(e) => error.set(Some(e.0)),
}
});
@@ -118,7 +127,10 @@ pub fn dashboard() -> Html {
let fetch = fetch.clone();
wasm_bindgen_futures::spawn_local(async move {
match api::trigger_tag().await {
Ok(t) => { message.set(Some(format!("Tagging started ({})", &t.task_id[..8]))); fetch.emit(()); }
Ok(t) => {
message.set(Some(format!("Tagging started ({})", &t.task_id[..8])));
fetch.emit(());
}
Err(e) => error.set(Some(e.0)),
}
});
@@ -135,7 +147,10 @@ pub fn dashboard() -> Html {
let fetch = fetch.clone();
wasm_bindgen_futures::spawn_local(async move {
match api::trigger_organize().await {
Ok(t) => { message.set(Some(format!("Organizing started ({})", &t.task_id[..8]))); fetch.emit(()); }
Ok(t) => {
message.set(Some(format!("Organizing started ({})", &t.task_id[..8])));
fetch.emit(());
}
Err(e) => error.set(Some(e.0)),
}
});
@@ -153,7 +168,10 @@ pub fn dashboard() -> Html {
wasm_bindgen_futures::spawn_local(async move {
match api::trigger_pipeline().await {
Ok(p) => {
message.set(Some(format!("Pipeline started — {} tasks queued", p.task_ids.len())));
message.set(Some(format!(
"Pipeline started — {} tasks queued",
p.task_ids.len()
)));
fetch.emit(());
}
Err(e) => error.set(Some(e.0)),
@@ -170,7 +188,10 @@ pub fn dashboard() -> Html {
return html! { <p class="loading">{ "Loading..." }</p> };
};
let pipeline_active = s.tasks.iter().any(|t| t.status == "Pending" || t.status == "Running");
let pipeline_active = s
.tasks
.iter()
.any(|t| t.status == "Pending" || t.status == "Running");
html! {
<div>

34
frontend/src/types.rs
View File

@@ -61,6 +61,40 @@ pub struct FullArtistDetail {
pub total_owned_tracks: u32,
#[serde(default)]
pub enriched: bool,
#[serde(default)]
pub artist_info: Option<ArtistInfoFe>,
#[serde(default)]
pub artist_photo: Option<String>,
#[serde(default)]
pub artist_bio: Option<String>,
}
#[derive(Debug, Clone, PartialEq, Deserialize, Serialize)]
pub struct ArtistInfoFe {
pub name: String,
#[serde(default)]
pub disambiguation: Option<String>,
#[serde(default)]
pub country: Option<String>,
#[serde(default)]
pub artist_type: Option<String>,
#[serde(default)]
pub begin_year: Option<String>,
#[serde(default)]
pub urls: Vec<ArtistUrlFe>,
}
#[derive(Debug, Clone, PartialEq, Deserialize, Serialize)]
pub struct ArtistUrlFe {
pub url: String,
pub link_type: String,
}
#[derive(Debug, Clone, PartialEq, Deserialize)]
pub struct LyricsResult {
pub found: bool,
pub lyrics: Option<String>,
pub synced_lyrics: Option<String>,
}
#[derive(Debug, Clone, PartialEq, Deserialize, Serialize)]

86
frontend/style.css
View File

@@ -88,6 +88,92 @@ a:hover { color: var(--accent-hover); }
.stat-card .value { font-size: 2rem; font-weight: bold; color: var(--accent); }
.stat-card .label { font-size: 0.85rem; color: var(--text-secondary); }
/* Album art */
.album-art {
width: 48px;
height: 48px;
border-radius: 4px;
object-fit: cover;
background: var(--bg-card);
vertical-align: middle;
}
.album-art-lg {
width: 250px;
height: 250px;
border-radius: var(--radius);
object-fit: cover;
background: var(--bg-card);
}
.album-art-placeholder {
display: inline-block;
width: 48px;
height: 48px;
border-radius: 4px;
background: var(--bg-card);
}
.album-art-placeholder-lg {
display: block;
width: 250px;
height: 250px;
border-radius: var(--radius);
background: var(--bg-card);
}
.album-header {
display: flex;
gap: 1.5rem;
align-items: flex-start;
margin-bottom: 1.5rem;
}
.artist-meta {
display: flex;
gap: 0.75rem;
align-items: center;
flex-wrap: wrap;
margin-top: 0.25rem;
}
.artist-meta .tag {
font-size: 0.8rem;
padding: 0.1rem 0.5rem;
border-radius: 999px;
background: var(--bg-card);
color: var(--text-secondary);
}
.artist-links {
display: flex;
gap: 0.75rem;
margin-top: 0.5rem;
}
.artist-links a {
font-size: 0.8rem;
color: var(--text-secondary);
}
.artist-links a:hover { color: var(--accent); }
.artist-photo {
width: 120px;
height: 120px;
border-radius: var(--radius);
object-fit: cover;
flex-shrink: 0;
}
.artist-bio {
color: var(--text-secondary);
line-height: 1.6;
max-width: 800px;
margin-top: 0.5rem;
}
.lyrics {
font-family: inherit;
font-size: 0.85rem;
color: var(--text-secondary);
white-space: pre-wrap;
padding: 1rem;
background: var(--bg-card);
border-radius: var(--radius);
max-height: 400px;
overflow-y: auto;
margin: 0;
}
/* Tables */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 0.75rem; border-bottom: 1px solid var(--border); }