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.ts

@@ -1480,16 +1480,12 @@ export class CoverGrid
             source: 'cover-grid',
         });
 
-        // Single album: show its cover, badged with how many tracks are
-        // on the way -- an album is 1 track or 30 and the thumbnail is
-        // the same picture either way, so the number the drop is about
-        // was the one thing this drag did not say.
-        // Multiple albums: show the track-count badge alone.
+        // Single album: show cover art thumbnail.
+        // Multiple albums: show track-count badge.
         if (isSingleAlbum && hit.album.CoverArtPath) {
             this.dragImageEl =
                 createAlbumArtDragImage(
                     this.getCoverUrl(hit.album),
-                    filePaths.length,
                 );
         } else {
             this.dragImageEl = createDragImage(

frontend/src/utils/drag-image.ts

@@ -29,23 +29,11 @@ export function createDragImage(count: number): HTMLElement {
 }
 
 /**
- * Creates a drag image showing an album cover art thumbnail, with a
- * corner badge saying how many tracks are on the way.
- *
- * The count is not decoration. The cover says *what* is being dragged
- * and nothing said *how much* — an album is 1 track or 30 and the
- * thumbnail is identical either way, so the one number the drop is
- * about was the one thing the drag did not show. Every other drag in
- * the app says it (`createDragImage` is a count and nothing else);
- * this one was the exception because it had a picture to show instead.
- *
- * A count of 1 draws no badge: "1" over a single album cover is noise,
- * and the absence is unambiguous next to a badge that only ever
- * appears when there is more than one.
+ * Creates a drag image showing an album cover art thumbnail.
+ * Falls back to the track-count badge if the image fails to load.
  */
 export function createAlbumArtDragImage(
     coverUrl: string,
-    count = 1,
 ): HTMLElement {
     const size = 64;
     const wrapper = document.createElement('div');
@@ -56,12 +44,6 @@ export function createAlbumArtDragImage(
         'left: -1000px',
         'pointer-events: none',
         'z-index: 9999',
-        // The badge is positioned against this box, and the box stays
-        // exactly the cover's size: anything outside it risks being
-        // clipped out of the snapshot the browser takes, and padding
-        // it instead would move the cover away from the cursor.
-        `width: ${size}px`,
-        `height: ${size}px`,
     ].join(';');
 
     const img = document.createElement('img');
@@ -79,44 +61,11 @@ export function createAlbumArtDragImage(
     ].join(';');
 
     wrapper.appendChild(img);
-
-    if (count > 1) {
-        wrapper.appendChild(countBadge(count));
-    }
-
     document.body.appendChild(wrapper);
 
     return wrapper;
 }
 
-/** The corner badge on a multi-track drag image. */
-function countBadge(count: number): HTMLElement {
-    const badge = document.createElement('span');
-
-    badge.className = 'drag-count-badge';
-    badge.textContent = String(count);
-    badge.style.cssText = [
-        'position: absolute',
-        'top: 3px',
-        'right: 3px',
-        'min-width: 20px',
-        'height: 20px',
-        'padding: 0 5px',
-        'box-sizing: border-box',
-        'border-radius: 10px',
-        'background: #ffd43b',
-        'color: #000',
-        'font-size: 12px',
-        'font-weight: 600',
-        'font-family: inherit',
-        'line-height: 20px',
-        'text-align: center',
-        'box-shadow: 0 1px 4px rgba(0,0,0,0.5)',
-    ].join(';');
-
-    return badge;
-}
-
 /**
  * Creates a drag image styled like a queue track card showing the
  * track title and artist.  Used when dragging a single track.

frontend/test/components/drag-image.test.ts

@@ -1,71 +0,0 @@
-/**
- * A drag says how much it is carrying.
- *
- * Every drag in the app already did — `createDragImage` is a count and
- * nothing else — except the one with a picture to show instead. An
- * album dragged to the queue put its cover under the cursor and said
- * nothing about how many tracks that was, and an album is 1 track or 30
- * with the same thumbnail either way. The number is the thing the drop
- * is about.
- *
- * A count of 1 draws no badge: "1" over a single cover is noise, and
- * the absence reads unambiguously beside a badge that only ever appears
- * when there is more than one.
- */
-import { describe, expect, it, afterEach } from 'vitest';
-
-import {
-  createAlbumArtDragImage,
-  removeDragImage,
-} from '@utils/drag-image';
-
-const made: HTMLElement[] = [];
-
-function dragImage(count?: number): HTMLElement {
-  const el =
-    count === undefined
-      ? createAlbumArtDragImage('data:image/gif;base64,R0lGODlhAQABAAAAACw=')
-      : createAlbumArtDragImage(
-          'data:image/gif;base64,R0lGODlhAQABAAAAACw=',
-          count,
-        );
-
-  made.push(el);
-
-  return el;
-}
-
-const badge = (el: HTMLElement) =>
-  el.querySelector<HTMLElement>('.drag-count-badge');
-
-describe('the album drag image', () => {
-  afterEach(() => {
-    while (made.length > 0) removeDragImage(made.pop()!);
-  });
-
-  it('says how many tracks are being dragged', () => {
-    expect(badge(dragImage(12))?.textContent).toBe('12');
-  });
-
-  it('says nothing when there is only one track', () => {
-    expect(badge(dragImage(1))).toBeNull();
-  });
-
-  it('still draws a bare cover for a caller that gives no count', () => {
-    // The count is optional so the helper stays usable from a call site
-    // that has a cover and no list; it must not badge such a drag "1".
-    expect(badge(dragImage())).toBeNull();
-  });
-
-  it('keeps the badge inside the cover', () => {
-    // setDragImage snapshots the element, and anything outside its box
-    // risks being clipped out of that snapshot — while padding the box
-    // instead would move the cover away from the cursor.
-    const el = dragImage(30);
-    const outer = el.getBoundingClientRect();
-    const mark = badge(el)!.getBoundingClientRect();
-
-    expect(mark.right).toBeLessThanOrEqual(outer.right);
-    expect(mark.top).toBeGreaterThanOrEqual(outer.top);
-  });
-});

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');