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

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>