web/frontend/src/pages/album.rs

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