From f05e17ee3afdaa55218b0a4f09d5d5146c220113 Mon Sep 17 00:00:00 2001
From: Sijmen <me@vijf.life>
Date: Sat, 23 Dec 2023 06:27:11 +0100
Subject: [PATCH] Show track numbers

---
 src/mpd.rs             | 2 ++
 static/style.css       | 4 ++++
 templates/browser.html | 7 ++++++-
 3 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/mpd.rs b/src/mpd.rs
index 6f0d3d4..a2fdd10 100644
--- a/src/mpd.rs
+++ b/src/mpd.rs
@@ -25,6 +25,7 @@ pub struct QueueItem {
 #[derive(Debug)]
 pub enum Entry {
     Song {
+        track: Option<i32>,
         name: String,
         artist: String,
         path: String,
@@ -272,6 +273,7 @@ impl Mpd {
             .flat_map(|prop| {
                 if let Some(file) = prop.get("file") {
                     Some(Entry::Song {
+                        track: prop.get("Track").and_then(|track| track.parse().ok()),
                         name: prop.get("Title").unwrap_or(&get_filename(file)).clone(),
                         artist: prop.get("Artist").unwrap_or(&String::new()).clone(),
                         path: file.to_string(),
diff --git a/static/style.css b/static/style.css
index 189edc1..3ed4012 100644
--- a/static/style.css
+++ b/static/style.css
@@ -225,6 +225,10 @@ ul.dir li .material-symbols-outlined {
   object-fit: cover;
 }
 
+.track {
+  margin-right: 0.75rem;
+}
+
 .player {
   width: 25rem;
   padding: 1rem 1rem 0;
diff --git a/templates/browser.html b/templates/browser.html
index bcfca58..614908c 100644
--- a/templates/browser.html
+++ b/templates/browser.html
@@ -48,7 +48,7 @@
 <ul class="dir" hx-boost="true" tabindex="-1">
   {% for entry in entries %}
   {% match entry %}
-  {% when mpd::Entry::Song with { name, path, artist } %}
+  {% when mpd::Entry::Song with { track, name, path, artist } %}
   <li 
     hx-post="/queue?path={{ path|urlencode }}"
     hx-trigger="click,keyup[key=='Enter']"
@@ -64,6 +64,11 @@
         alt="Album art"
       >
     </div>
+    {% if let Some(track) = track %}
+    <div class="track">
+      {{ track }}.
+    </div>
+    {% endif %}
     <div class="song">
       <div class="song__name">{{ name }}</div>
       <div class="song__artist">{{ artist }}</div>