Lots of fixes for artist detail page and track management

frontend/src/pages/album.rs

@@ -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>