davideisinger.com

commit 0ec62439205a3ebe8d12394f0a3e96ee6d66a841
parent b8b480193befb97ec246f75c2d562ab2f91fd7ba
Author: David Eisinger <[email protected]>
Date:   Sun, 11 Oct 2026 08:48:08 -0400

Tweak music styles

Diffstat:
M
themes/v2/assets/css/style.scss
 | 
29
++++++++++++++++++++++++++++-
M
themes/v2/assets/js/player.js
 | 
23
+++++++++++++++++------
M
themes/v2/layouts/partials/header.html
 | 
2
+-

3 files changed, 46 insertions(+), 8 deletions(-)
diff --git a/themes/v2/assets/css/style.scss b/themes/v2/assets/css/style.scss
@@ -377,7 +377,14 @@ pre {
 // AUDIO
 
 .track-toggle {
-  flex: 0 0 104px;
+  flex: 0 0 96px;
+  display: inline-grid;
+  grid-template-columns: 1.25em 1fr;
+  align-items: center;
+  column-gap: 0;
+  box-sizing: border-box;
+  width: 96px;
+  text-align: center;
   padding: 8px 12px;
   border: 1px solid #ccc;
   border-radius: 4px;
@@ -387,6 +394,11 @@ pre {
   font-size: 14px;
   cursor: pointer;
 
+  .track-toggle-icon {
+    text-align: center;
+    line-height: 1;
+  }
+
   &:hover {
     background: #e3e3e3;
   }
@@ -401,6 +413,9 @@ pre {
   display: block;
   color: #666;
   font-size: 14px;
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+  white-space: nowrap;
 }
 
 .music-track {
@@ -409,6 +424,18 @@ pre {
   gap: 2ch;
   padding: 2ch 0;
 
+  > div {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .track-heading {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) 13ch;
+    align-items: baseline;
+    column-gap: 1ch;
+  }
+
   .track-title {
     font-weight: bold;
     margin: 0;
diff --git a/themes/v2/assets/js/player.js b/themes/v2/assets/js/player.js
@@ -20,11 +20,13 @@
       const selected = player.src === track.url;
       const active = selected && playing;
       track.row.toggleAttribute('data-current-track', selected);
-      track.button.textContent = active ? 'Ⅱ Pause' : '▶ Play';
+      track.icon.textContent = active ? '⏸' : '▶';
+      track.label.textContent = active ? 'Pause' : 'Play';
       track.button.setAttribute('aria-label', `${active ? 'Pause' : 'Play'} ${track.title}`);
       track.state.textContent = selected
-        ? `${player.error ? 'Unable to play' : player.ended ? 'Finished' : playing ? 'Playing' : player.currentTime > 0 ? 'Paused' : 'Ready'} · ${timestamp(player.currentTime)}`
+        ? (player.error ? 'Error' : `${timestamp(player.currentTime)} / ${Number.isFinite(player.duration) ? timestamp(player.duration) : '–:––'}`)
         : '';
+      track.state.title = selected && player.error ? 'Unable to play. Try the player above.' : '';
     }
   }
 
@@ -47,7 +49,8 @@
     } catch (error) {
       if (request !== playRequest || error.name === 'AbortError') return;
       // Keep the native header controls available for retrying blocked playback.
-      track.state.textContent = `Unable to play ${track.title}. Try the player above.`;
+      track.state.textContent = 'Error';
+      track.state.title = `Unable to play ${track.title}. Try the player above.`;
     }
   }
 
@@ -61,14 +64,22 @@
       const button = document.createElement('button');
       button.type = 'button';
       button.className = 'track-toggle';
+      const icon = document.createElement('span');
+      icon.className = 'track-toggle-icon';
+      icon.setAttribute('aria-hidden', 'true');
+      const label = document.createElement('span');
+      button.append(icon, label);
       const state = document.createElement('span');
       state.className = 'track-playback';
-      const track = { row, button, state, url: audio.src, title: trackTitle.textContent,
+      const track = { row, button, icon, label, state, url: audio.src, title: trackTitle.textContent,
         sourceTitle: trackSource.textContent, sourceURL: trackSource.href };
       button.addEventListener('click', () => select(track));
       audio.hidden = true;
       audio.before(button);
-      trackSource.closest('div').append(state);
+      const heading = document.createElement('div');
+      heading.className = 'track-heading';
+      trackTitle.before(heading);
+      heading.append(trackTitle, state);
       controls.push(track);
     });
     update();
@@ -78,7 +89,7 @@
     heading.textContent = 'Now playing';
     update();
   });
-  for (const event of ['pause', 'ended', 'timeupdate', 'loadedmetadata', 'emptied', 'error']) {
+  for (const event of ['pause', 'ended', 'timeupdate', 'loadedmetadata', 'durationchange', 'emptied', 'error']) {
     player.addEventListener(event, update);
   }
   document.addEventListener('play', event => {
diff --git a/themes/v2/layouts/partials/header.html b/themes/v2/layouts/partials/header.html
@@ -23,7 +23,7 @@
     <div class="home-music home-music-cell" role="group" aria-labelledby="latest-track-heading">
       <p class="track-title">{{ $title }}</p>
       <p class="track-source">From <a href="{{ .page.RelPermalink }}">{{ .page.Title }}</a></p>
-      <audio controls preload="none" aria-label="{{ $title }}" src="{{ .track.RelPermalink }}"></audio>
+      <audio controls preload="metadata" aria-label="{{ $title }}" src="{{ .track.RelPermalink }}"></audio>
     </div>
     <p class="more-music home-music-cell"><a href="/music/">More music →</a></p>
   {{ end }}