166 lines
7.2 KiB
Rust
166 lines
7.2 KiB
Rust
use std::collections::HashMap;
|
|
use yew::prelude::*;
|
|
|
|
use crate::api;
|
|
use crate::components::status_badge::StatusBadge;
|
|
use crate::types::{LyricsResult, MbAlbumDetail};
|
|
|
|
#[derive(Properties, PartialEq)]
|
|
pub struct Props {
|
|
pub mbid: String,
|
|
}
|
|
|
|
#[function_component(AlbumPage)]
|
|
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();
|
|
let error = error.clone();
|
|
let mbid = mbid.clone();
|
|
use_effect_with(mbid.clone(), move |_| {
|
|
wasm_bindgen_futures::spawn_local(async move {
|
|
match api::get_album(&mbid).await {
|
|
Ok(d) => detail.set(Some(d)),
|
|
Err(e) => error.set(Some(e.0)),
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
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 album from MusicBrainz..." }</p> };
|
|
};
|
|
|
|
let fmt_duration = |ms: u64| -> String {
|
|
let secs = ms / 1000;
|
|
let mins = secs / 60;
|
|
let remaining = secs % 60;
|
|
format!("{mins}:{remaining:02}")
|
|
};
|
|
|
|
let cover_url = format!("https://coverartarchive.org/release/{}/front-250", d.mbid);
|
|
|
|
html! {
|
|
<div>
|
|
<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>
|
|
if d.tracks.is_empty() {
|
|
<p class="text-muted">{ "No tracks found." }</p>
|
|
} else {
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>{ "#" }</th>
|
|
<th>{ "Title" }</th>
|
|
<th>{ "Duration" }</th>
|
|
<th>{ "Status" }</th>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{ for d.tracks.iter().map(|t| {
|
|
let duration = t.duration_ms
|
|
.map(&fmt_duration)
|
|
.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>
|
|
<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">{ "\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>
|
|
</table>
|
|
}
|
|
</div>
|
|
}
|
|
}
|