feat: finish the upload, playback, and test gaps from the docs

Quality upgrades, batch covers, staging preview, and resume after reload are in the queue. Loudness and crossfade work on web and Android, and the documented checks now have suites. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-10-21 09:37:53 +03:00
1 parent 2b76060ea3
commit 066ba24834
@@ -1,6 +1,7 @@
 import type { components } from '@pipu/api-client';
 import { Link } from '@tanstack/react-router';
-import { Fragment } from 'react';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { Fragment, useRef } from 'react';
 import { useTranslation } from 'react-i18next';

 import { formatDuration } from '../shared/lib/format';
@@ -129,82 +130,115 @@ export function TrackList({
  const { t } = useTranslation();
  const player = usePlayer();
  const { track: current, playing } = usePlayerState();
+  const listRef = useRef<HTMLDivElement>(null);
  const discs = new Set(tracks.map((tr) => tr.disc_no ?? 1));
+  const multiDisc = Boolean(numbered && discs.size > 1);
+  const virtual = tracks.length > 30 && !multiDisc;
+  const virtualizer = useVirtualizer({
+    count: virtual ? tracks.length : 0,
+    getScrollElement: () => listRef.current?.closest('main') ?? null,
+    estimateSize: () => 68,
+    overscan: 8,
+  });
+
+  const row = (tr: Track, i: number) => {
+    const isCurrent = current?.id === tr.id;
+    const play = () => tr.available && player.playList(tracks, i, context);
+    const liked = tr.reaction === 'like';
+    const meta = rowMeta?.(tr, i);
+    return (
+      <div
+        role="listitem"
+        tabIndex={tr.available ? 0 : -1}
+        aria-current={isCurrent || undefined}
+        className={cx(s.track, !tr.available && s.unavailable, isCurrent && s.current)}
+        title={tr.available ? undefined : t('catalog.unavailable')}
+        onClick={(e) => {
+          if (!(e.target as HTMLElement).closest('a, button')) play();
+        }}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' && e.target === e.currentTarget) play();
+        }}
+      >
+        {lead && <span className={s.lead}>{isCurrent ? <Equalizer playing={playing} /> : lead(tr, i)}</span>}
+        <span className={cx(s.num, disliked && s.dimmed)}>
+          {numbered ? (tr.track_no ?? i + 1) : <Cover album={tr.album} size={lead ? 44 : 40} />}
+          {tr.available && (
+            <span className={s.playHint} aria-hidden>
+              <Icon src={playIcon} size={20} />
+            </span>
+          )}
+        </span>
+        <span className={cx(s.trackMain, disliked && s.dimmed)}>
+          <span className={s.trackTitle}>{tr.title}</span>
+          <span className={s.trackArtists}>
+            <ArtistLinks artists={tr.artists} />
+            {meta && <span className={s.rowMeta}> · {meta}</span>}
+          </span>
+        </span>
+        {showAlbum && (
+          <Link to="/album/$id" params={{ id: tr.album.id }} className={cx(s.link, s.trackAlbum)}>
+            {tr.album.title}
+          </Link>
+        )}
+        <span className={s.end}>
+          {disliked ? (
+            <button
+              type="button"
+              className={cx(s.like, s.liked)}
+              aria-label={t('player.undislike')}
+              onClick={() => void player.react(tr, null).catch(() => undefined)}
+            >
+              <Icon src={undoIcon} size={18} />
+            </button>
+          ) : (
+            <button
+              type="button"
+              className={cx(s.like, liked && s.liked)}
+              aria-label={t(liked ? 'player.unlike' : 'player.like')}
+              aria-pressed={liked}
+              onClick={() => void player.react(tr, liked ? null : 'like').catch(() => undefined)}
+            >
+              <Icon src={liked ? likeFillIcon : likeIcon} size={18} />
+            </button>
+          )}
+          <span className={s.duration}>{formatDuration(tr.duration_ms)}</span>
+        </span>
+      </div>
+    );
+  };
+
  let lastDisc: number | null = null;
  return (
-    <div className={s.tracks} role="list" aria-label={t('search.tracks')}>
-      {tracks.map((tr, i) => {
-        const disc = tr.disc_no ?? 1;
-        const header = numbered && discs.size > 1 && disc !== lastDisc;
-        lastDisc = disc;
-        const isCurrent = current?.id === tr.id;
-        const play = () => tr.available && player.playList(tracks, i, context);
-        const liked = tr.reaction === 'like';
-        const meta = rowMeta?.(tr, i);
-        return (
-          <Fragment key={`${tr.id}-${i}`}>
-            {header && <div className={s.disc}>{t('catalog.disc', { n: disc })}</div>}
+    <div
+      ref={listRef}
+      className={s.tracks}
+      role="list"
+      aria-label={t('search.tracks')}
+      style={virtual ? { height: virtualizer.getTotalSize(), position: 'relative' } : undefined}
+    >
+      {virtual
+        ? virtualizer.getVirtualItems().map((vi) => (
            <div
-              role="listitem"
-              tabIndex={tr.available ? 0 : -1}
-              aria-current={isCurrent || undefined}
-              className={cx(s.track, !tr.available && s.unavailable, isCurrent && s.current)}
-              title={tr.available ? undefined : t('catalog.unavailable')}
-              onClick={(e) => {
-                if (!(e.target as HTMLElement).closest('a, button')) play();
-              }}
-              onKeyDown={(e) => {
-                if (e.key === 'Enter' && e.target === e.currentTarget) play();
-              }}
+              key={vi.key}
+              data-index={vi.index}
+              ref={virtualizer.measureElement}
+              style={{ position: 'absolute', top: 0, left: 0, width: '100%', transform: `translateY(${vi.start}px)` }}
            >
-              {lead && <span className={s.lead}>{isCurrent ? <Equalizer playing={playing} /> : lead(tr, i)}</span>}
-              <span className={cx(s.num, disliked && s.dimmed)}>
-                {numbered ? (tr.track_no ?? i + 1) : <Cover album={tr.album} size={lead ? 44 : 40} />}
-                {tr.available && (
-                  <span className={s.playHint} aria-hidden>
-                    <Icon src={playIcon} size={20} />
-                  </span>
-                )}
-              </span>
-              <span className={cx(s.trackMain, disliked && s.dimmed)}>
-                <span className={s.trackTitle}>{tr.title}</span>
-                <span className={s.trackArtists}>
-                  <ArtistLinks artists={tr.artists} />
-                  {meta && <span className={s.rowMeta}> · {meta}</span>}
-                </span>
-              </span>
-              {showAlbum && (
-                <Link to="/album/$id" params={{ id: tr.album.id }} className={cx(s.link, s.trackAlbum)}>
-                  {tr.album.title}
-                </Link>
-              )}
-              <span className={s.end}>
-                {disliked ? (
-                  <button
-                    type="button"
-                    className={cx(s.like, s.liked)}
-                    aria-label={t('player.undislike')}
-                    onClick={() => void player.react(tr, null).catch(() => undefined)}
-                  >
-                    <Icon src={undoIcon} size={18} />
-                  </button>
-                ) : (
-                  <button
-                    type="button"
-                    className={cx(s.like, liked && s.liked)}
-                    aria-label={t(liked ? 'player.unlike' : 'player.like')}
-                    aria-pressed={liked}
-                    onClick={() => void player.react(tr, liked ? null : 'like').catch(() => undefined)}
-                  >
-                    <Icon src={liked ? likeFillIcon : likeIcon} size={18} />
-                  </button>
-                )}
-                <span className={s.duration}>{formatDuration(tr.duration_ms)}</span>
-              </span>
+              {row(tracks[vi.index]!, vi.index)}
            </div>
-          </Fragment>
-        );
-      })}
+          ))
+        : tracks.map((tr, i) => {
+            const disc = tr.disc_no ?? 1;
+            const header = multiDisc && disc !== lastDisc;
+            lastDisc = disc;
+            return (
+              <Fragment key={`${tr.id}-${i}`}>
+                {header && <div className={s.disc}>{t('catalog.disc', { n: disc })}</div>}
+                {row(tr, i)}
+              </Fragment>
+            );
+          })}
    </div>
  );
 }