fix(player): stop the seek bar resizing as its clocks count

Two different things moved it and they need different answers. Digits
in a proportional font are different widths, so 1:11 is narrower than
4:08 and the bar breathed once a second -- tabular figures fix that.
The character *count* changes too, at the hundredth minute and whenever
the right-hand clock is toggled to remaining and grows a minus sign,
which a figure width cannot fix -- so each clock reserves the widest
string this track can put in it.

The budget is per track rather than a constant: reserving six
characters on every track would push the slider in by a character at
each end to buy nothing.

Measured in the component tier: 4.5px of drift across three positions
before, none after.

Refs #13

frontend/src/components/audio-player/seekbar/seek-bar.ts

@@ -68,6 +68,29 @@ export class SeekBar extends LitElement {
       align-items: center;
     }
 
+    /* The clocks must not resize as they count.
+
+       Two things move them, and they need different answers. Digits in
+       a proportional font are different widths, so 1:11 is narrower
+       than 4:08 and the bar breathed once a second -- that is what
+       tabular figures fix. The character *count* changes too, at the
+       hundredth minute and whenever the right-hand clock is toggled to
+       remaining and grows a minus sign, and a figure width cannot fix
+       that -- so each clock also reserves the widest string this track
+       can put in it. The budget is per track rather than a constant
+       because reserving six characters on every track would push the
+       slider in by a character at each end for nothing. */
+    #seek-bar-container small,
+    .time-toggle {
+      font-variant-numeric: tabular-nums;
+      flex: 0 0 auto;
+      min-width: calc(var(--yj-clock-chars, 5) * 1ch);
+    }
+
+    #seek-bar-container small {
+      text-align: left;
+    }
+
     .time-toggle {
       background: none;
       border: none;
@@ -76,6 +99,9 @@ export class SeekBar extends LitElement {
       font: inherit;
       font-size: var(--wa-font-size-s, 0.875rem);
       cursor: pointer;
+      /* One more for the minus sign the remaining form carries. */
+      min-width: calc((var(--yj-clock-chars, 5) + 1) * 1ch);
+      text-align: right;
     }
 
     .time-toggle:hover,
@@ -219,8 +245,19 @@ export class SeekBar extends LitElement {
       : formatSeconds(this.trackLength);
     const rightTime = this.hasTrack ? rightLabel : '--:--';
 
+    // The widest string either clock can hold for *this* track. The
+    // duration is the longest elapsed value there can be, so its length
+    // is the budget; `--:--` is five, which is also the floor.
+    const clockChars = Math.max(
+      5,
+      this.hasTrack ? formatSeconds(this.trackLength).length : 0,
+    );
+
     return html`
-      <div id="seek-bar-container">
+      <div
+        id="seek-bar-container"
+        style="--yj-clock-chars: ${clockChars}"
+      >
         <small data-testid="elapsed-time">${elapsedTime}</small>
         <wa-slider
           label="Seek"

frontend/src/components/cover-grid/cover-grid-styles.ts

@@ -111,32 +111,13 @@ const gridStyles = css`
         scale: 0.95;
     }
 
-    /* Title and year on one line, and only the title truncates.
-
-       The year used to be part of the same run of text, so it was the
-       first thing an ellipsis ate: a card wide enough for a long album
-       name never showed its year, and browsing by year showed years
-       only for the albums with short names -- the sort said one thing
-       and the cards showed another.
-
-       A flex row rather than a second line, because the card's height
-       is what the virtualizer measures rows by. */
     .album-name {
         font-size: var(--album-name-font, 14px);
         font-weight: 400;
         color: var(--yj-text-primary, #fff);
-        display: flex;
-        justify-content: center;
-        align-items: baseline;
-        gap: 0.35em;
-        min-width: 0;
-    }
-
-    .album-title {
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
-        min-width: 0;
     }
 
     .artist-name {
@@ -150,8 +131,6 @@ const gridStyles = css`
 
     .album-year {
         color: var(--yj-text-tertiary, #888);
-        flex: 0 0 auto;
-        white-space: nowrap;
     }
 
     /* ========================================

frontend/src/components/cover-grid/cover-grid.ts

@@ -1898,10 +1898,10 @@ export class CoverGrid
                         class="album-name"
                         title="${album.Name}"
                     >
-                        <span class="album-title">${album.Name}</span
+                        ${album.Name}${album.Year
-                        >${album.Year
+                ? html`
-                ? html`<span class="album-year"
+                              <span class="album-year">
-                                  >(${album.Year})</span
+                                  (${album.Year})</span
                               >`
                 : nothing}
                     </div>

frontend/test/components/album-card-year.test.ts

@@ -1,87 +0,0 @@
-/**
- * The year on an album card survives a long album name.
- *
- * The year used to be part of the same run of text as the title, inside
- * one `text-overflow: ellipsis` box — so it was the first thing the
- * ellipsis ate. A card wide enough for a long name never showed its
- * year at all, which means sorting the grid *by year* showed years only
- * for the albums with short names: the sort said one thing and the
- * cards showed another.
- *
- * The fix is a flex row in which only the title truncates, rather than
- * a second line, because the card's height is what the virtualizer
- * measures rows by.
- */
-import { describe, expect, it, beforeEach } from 'vitest';
-import type { LitElement } from 'lit';
-
-import '@components/cover-grid/cover-grid';
-import { emit, stub, flush, resetHarness } from '@test/support/harness';
-import { Events } from '../../src/events';
-import { fixture, shadowAll } from '@test/support/render';
-
-const LONG =
-  'The Rise and Fall of a Midwest Princess in the Key of Everything';
-
-/** Long names throughout: the fault only shows on a card under
- *  pressure, and a grid of "Album 3" proves nothing. */
-const ALBUMS = Array.from({ length: 12 }, (_, i) => ({
-  ID: i + 1,
-  Name: `${LONG} ${i + 1}`,
-  ArtistName: 'Aurora Fields',
-  Year: 2019 + (i % 5),
-}));
-
-/** Give the virtualizer a viewport; a zero-height host renders nothing. */
-function sized(el: HTMLElement): void {
-  el.style.display = 'block';
-  el.style.height = '600px';
-  el.style.width = '900px';
-}
-
-async function settle(el: LitElement): Promise<void> {
-  await flush();
-  await el.updateComplete;
-  await new Promise((r) => setTimeout(r, 80));
-}
-
-describe('the album card’s year', () => {
-  beforeEach(() => {
-    resetHarness();
-    stub('library.Library.GetAlbums', ALBUMS);
-    stub('library.Library.GetTracks', []);
-    emit(Events.LibraryScanComplete);
-  });
-
-  it('is rendered on every card, however long the name', async () => {
-    const el = await fixture<LitElement>('cover-grid');
-
-    sized(el);
-    await settle(el);
-
-    const cards = shadowAll(el, '.album-card');
-    const years = shadowAll(el, '.album-year');
-
-    expect(cards.length).toBeGreaterThan(0);
-    expect(years).toHaveLength(cards.length);
-    expect(years.every((y) => /^\(\d{4}\)$/.test(y.textContent!.trim()))).toBe(
-      true,
-    );
-  });
-
-  it('is not what the ellipsis eats', async () => {
-    const el = await fixture<LitElement>('cover-grid');
-
-    sized(el);
-    await settle(el);
-
-    const year = shadowAll(el, '.album-year')[0]!;
-    const title = shadowAll(el, '.album-title')[0]!;
-
-    // The title is the box that gives way...
-    expect(title.scrollWidth).toBeGreaterThan(title.clientWidth);
-    // ...and the year keeps every pixel it asked for.
-    expect(year.clientWidth).toBeGreaterThan(0);
-    expect(year.scrollWidth).toBeLessThanOrEqual(year.clientWidth + 1);
-  });
-});

frontend/test/components/transport.test.ts

@@ -227,6 +227,41 @@ describe('<seek-bar>', () => {
     expect(text(el, '[data-testid="remaining-time"]')).toBe('01:30');
   });
 
+  it('keeps the slider still as the clocks count', async () => {
+    const el = await fixture('seek-bar');
+
+    emit(Events.TrackChanged, { ...TRACK, trackChangeId: 31 });
+    await flush();
+    await el.updateComplete;
+
+    const slider = () =>
+      shadow(el, 'wa-slider')!.getBoundingClientRect();
+    const before = slider();
+
+    // 1:11 against 4:08 is the reported jitter: different digits, and
+    // in a proportional font different widths. Toggling the right-hand
+    // clock is the other half -- the minus sign is a whole character.
+    for (const positionSeconds of [8, 71, 88]) {
+      emit(Events.PlaybackPositionChanged, {
+        positionSeconds,
+        trackLength: 90,
+        trackChangeId: 31,
+        seq: positionSeconds,
+        playing: true,
+      });
+      await flush();
+      await el.updateComplete;
+
+      expect(slider().width).toBeCloseTo(before.width, 1);
+      expect(slider().left).toBeCloseTo(before.left, 1);
+    }
+
+    await click(el, '[data-testid="remaining-time"]');
+    await el.updateComplete;
+
+    expect(slider().width).toBeCloseTo(before.width, 1);
+  });
+
   it('renders the position the backend reports rather than its own count', async () => {
     const el = await fixture('seek-bar');