yonlu/yellowjacket
1
1
Fork 0
Code Issues 55 Pull Requests 6 Actions Packages Projects Releases 12 Wiki Activity

perf(frontend): virtualize the playlist views, and idle the closed queue

Browse Source 
Both playlist detail views rendered every track with a plain `.map()`.
Measured at 2 000 tracks: 22 090 elements in the shadow root and 2 000
eager <img>, against 487 and 0 after, with retained heap 5.85 MB ->
0.81 MB and one update pass 5.3 ms -> 0.1 ms.

They are virtualized in place rather than rendered through
<track-list>, which is what the audit suggested: that works for
`genre-details` because a genre list is just tracks, but both playlist
views render phantom rows for missing files and `playlist-details` is
a drag source and a drop target, and `track-list` has never had
either. Virtualizing in place gets the same 45x on the number that
matters with none of that risk, and leaves `track-list` alone for its
four other callers.

Both therefore push `virtualizer.requestUpdate()` on a selection
change and on a playing-track change: the virtualize directive runs
when one of the *virtualizer's own* properties changes, not when its
parent re-renders, so memoising `items` and hoisting `renderItem`
together is how you build a list that never repaints. Selection went
silently dead the first time, with the controller holding exactly the
right keys.

And a closed queue panel renders no list at all: `width: 0` and
`contain` bounded the damage without stopping the virtualizer inside
from measuring its window on every queue change, or `scrollToIndex`
from calling `scrollIntoView()` on something invisible.
This commit is contained in:
logan
2026-08-12 01:19:37 -04:00
parent 559e1ed077
commit c8bc6db9fa
3 changed files with 408 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/playlist-details/playlist-details.ts
+177 -61
View File
@@ -9,6 +9,9 @@ import '@awesome.me/webawesome/dist/components/icon/icon.js';
import '@awesome.me/webawesome/dist/components/popup/popup.js';
import type WaPopup from '@awesome.me/webawesome/dist/components/popup/popup.js';
import '@awesome.me/webawesome/dist/components/dropdown-item/dropdown-item.js';
import '@lit-labs/virtualizer';
import type { LitVirtualizer } from '@lit-labs/virtualizer';
import { flow } from '@lit-labs/virtualizer/layouts/flow.js';
import {
GetPlaylistTracks,
@@ -17,7 +20,7 @@ import {
RemovePhantomTracks,
FindDuplicateTracksInPlaylist,
} from '@go/playlist/Service';
import type { playlist, library } from '@go/models';
import type { playlist } from '@go/models';
import { EventsOn } from '@runtime/runtime';
import { Events } from '../../events';
import { queueStore } from '@store/queue-store';
@@ -31,6 +34,8 @@ import {
} from '@utils/context-menu-controller.js';
import type { ContextMenuHost } from '@utils/context-menu-controller.js';
import { FavoritesController } from '@store/controllers/favorites-controller';
import { notificationStore } from '@store/notification-store';
import { describeError } from '@utils/describe-error';
import {
hasTrackPayload,
getDragPayload,
@@ -44,7 +49,8 @@ import {
} from '@utils/drag-image';
import { libraryStore } from '@store/library-store';
import '@components/playlist-picker/playlist-picker.js';
import '@components/track-details/track-details.js';
import { loadTrackDetails } from '@utils/lazy-track-details.js';
import { tracksByFilePath, tracksForPaths } from '@utils/track-index.js';
import type { TrackDetails } from '@components/track-details/track-details.js';
import type { CoverArtUrls } from '@components/track-details/track-details.js';
import '@components/phantom-resolver/phantom-resolver.js';
@@ -60,6 +66,13 @@ import {
} from '@utils/explore-link';
import { designTokens } from '../../styles/tokens.css';
/** One playlist row: the track and its position in the *playlist*,
* which is not its position in the filtered view. */
interface VisibleTrack {
track: playlist.Track;
trackIndex: number;
}
@customElement('playlist-details')
export class PlaylistDetails
extends LitElement
@@ -86,6 +99,36 @@ export class PlaylistDetails
private tracksChangedCleanup: (() => void) | null = null;
private playlistDeletedCleanup: (() => void) | null = null;
/* `_itemSize` matches the fixed 45 px `.track-item` height, measured
* rather than guessed. Without the hint the flow layout's 100 px
* default drives constant scroll-error correction, which reads as
* the list jumping under the pointer. */
@query('lit-virtualizer')
private virtualizer?: LitVirtualizer;
/* The row templates live inside the virtualizer, not in this
* component's own template, so a host re-render alone does not
* repaint them: the virtualizer re-renders when its `items` change,
* and `items` is now memoised precisely so it does not change when
* nothing has. Selection and the playing-track highlight are
* therefore pushed to it explicitly, which is what `track-list` has
* always done. Costing ~36 rows, not the whole playlist. */
private lastActiveTrackPath: string | null = null;
private flowLayout = flow({
_itemSize: { width: 100, height: 45 },
} as Parameters<typeof flow>[0]);
/* The memo behind `getVisibleTracks()`. Its wrappers used to be
* rebuilt on every render, so the array identity changed even when
* nothing had — which is the one thing a virtualizer keys its work
* on (perf.M5). */
private visibleCache: VisibleTrack[] | null = null;
private visibleCacheKey: {
tracks: playlist.Track[];
term: string;
} | null = null;
private dragImageEl: HTMLElement | null = null;
@query('#context-menu')
@@ -137,6 +180,21 @@ export class PlaylistDetails
onSelectionChanged(): void {
this.requestUpdate();
this.virtualizer?.requestUpdate();
}
protected override updated(
changed: Map<string, unknown>,
): void {
super.updated(changed);
const currentPath =
this.player.currentTrack?.filePath ?? null;
if (currentPath !== this.lastActiveTrackPath) {
this.lastActiveTrackPath = currentPath;
this.virtualizer?.requestUpdate();
}
}
// =================================================================
@@ -357,9 +415,9 @@ export class PlaylistDetails
break;
case 'track-details':
if (filePaths.length === 1) {
this.openTrackDetails(filePaths[0]!);
void this.openTrackDetails(filePaths[0]!);
} else {
this.openBatchTrackDetails(filePaths);
void this.openBatchTrackDetails(filePaths);
}
break;
case 'phantom-locate':
@@ -393,6 +451,16 @@ export class PlaylistDetails
this.ctxMenu.close();
}
/** The row is still on screen, so the failure is visible; this
* only says why (errors.m7). */
private reportRemoveFailure(what: string, err: unknown): void {
notificationStore.transient({
key: 'playlist-remove',
text: `Could not ${what}. ${describeError(err)}`,
detail: String(err),
});
}
private async removeSelectedTracks() {
const trackIDs = this.getSelectedTrackIDs();
@@ -405,10 +473,8 @@ export class PlaylistDetails
);
await this.refreshTracks();
} catch (err) {
console.error(
'Failed to remove tracks:',
err,
);
console.error('Failed to remove tracks:', err);
this.reportRemoveFailure('remove those tracks', err);
}
}
@@ -432,21 +498,25 @@ export class PlaylistDetails
);
await this.refreshTracks();
} catch (err) {
console.error(
'Failed to remove phantom tracks:',
err,
);
console.error('Failed to remove phantom tracks:', err);
this.reportRemoveFailure('remove those missing tracks', err);
}
}
private openTrackDetails(filePath: string) {
private async openTrackDetails(filePath: string) {
const tracks = libraryStore.getCachedTracks();
const track = tracks?.find(
(t) => t.FilePath === filePath,
);
const track = tracks
? tracksByFilePath(tracks).get(filePath)
: undefined;
if (!track) return;
const ready = await loadTrackDetails(
() => void this.openTrackDetails(filePath),
);
if (!ready) return;
const coverArt = track.CoverArtPath
? {
coverArtPath: track.CoverArtPath,
@@ -462,7 +532,7 @@ export class PlaylistDetails
);
}
private openBatchTrackDetails(
private async openBatchTrackDetails(
filePaths: string[],
) {
const cachedTracks =
@@ -470,19 +540,19 @@ export class PlaylistDetails
if (!cachedTracks) return;
const tracks = filePaths
.map((fp) =>
cachedTracks.find(
(t) => t.FilePath === fp,
),
)
.filter(
(t): t is library.Track =>
t != null,
);
const tracks = tracksForPaths(
cachedTracks,
filePaths,
);
if (tracks.length === 0) return;
const ready = await loadTrackDetails(
() => void this.openBatchTrackDetails(filePaths),
);
if (!ready) return;
const first = tracks[0]!;
const albumNames = new Set(tracks.map((t) => t.Album));
let coverArt: CoverArtUrls | null = null;
@@ -595,10 +665,8 @@ export class PlaylistDetails
);
await this.refreshTracks();
} catch (err) {
console.error(
'Failed to remove phantom track:',
err,
);
console.error('Failed to remove phantom track:', err);
this.reportRemoveFailure('remove that missing track', err);
}
}
@@ -747,38 +815,58 @@ export class PlaylistDetails
// Search filtering
// =================================================================
private getVisibleTracks(): {
track: playlist.Track;
trackIndex: number;
}[] {
private getVisibleTracks(): VisibleTrack[] {
const term =
this.searchCtrl.term.toLowerCase();
if (!term) {
return this.tracks.map(
(track, trackIndex) => ({
track,
trackIndex,
}),
);
// Keyed on the identity of the tracks array and the term, the
// same signal `track-list`'s memoized caches use: the store
// replaces the array when its contents change and shares every
// unchanged member.
if (
this.visibleCache &&
this.visibleCacheKey &&
this.visibleCacheKey.tracks === this.tracks &&
this.visibleCacheKey.term === term
) {
return this.visibleCache;
}
return this.tracks
.map((track, trackIndex) => ({
const all = this.tracks.map(
(track, trackIndex) => ({
track,
trackIndex,
}))
.filter(
({ track }) =>
track.Title.toLowerCase().includes(
term,
) ||
track.Artist.toLowerCase().includes(
term,
),
);
}),
);
const visible = term
? all.filter(
({ track }) =>
track.Title.toLowerCase().includes(
term,
) ||
track.Artist.toLowerCase().includes(
term,
),
)
: all;
this.visibleCache = visible;
this.visibleCacheKey = { tracks: this.tracks, term };
return visible;
}
/** Stable across renders, because `lit-virtualizer` declares both
* `renderItem` and `keyFunction` as plain `@property()` — a fresh
* arrow function marks them dirty and forces the virtualizer's own
* render pass on every host update (perf.m1). */
private renderRow = (entry: VisibleTrack) =>
this.renderTrackRow(entry);
private rowKey = (entry: VisibleTrack) =>
entry.trackIndex;
// =================================================================
// Styles
// =================================================================
@@ -970,6 +1058,18 @@ export class PlaylistDetails
gap: 0;
}
/* The virtualizer positions its children absolutely, so a row
* shrinks to fit its content and the columns stop lining up
* with the header above them. track-list has always carried the
* same declaration for the same reason.
*
* No backticks in here: this is inside a css tagged template
* literal, and one ends it. */
.track-item {
width: 100%;
box-sizing: border-box;
}
.track-header {
padding: 6px 8px;
font-size: 11px;
@@ -1262,9 +1362,21 @@ export class PlaylistDetails
<div class="header-cell col-album">Album</div>
<div class="header-cell col-duration">Duration</div>
</div>
${visibleTracks.map(
({ track, trackIndex }) => {
const isPhantom = track.Phantom;
<lit-virtualizer
class="track-scroller"
.items=${visibleTracks}
.renderItem=${this.renderRow}
.keyFunction=${this.rowKey}
.layout=${this.flowLayout}
></lit-virtualizer>
`;
}
/* One row. Extracted from `renderTrackList` so it can be a stable
* bound field rather than a closure the virtualizer sees as new
* every pass. */
private renderTrackRow({ track, trackIndex }: VisibleTrack) {
const isPhantom = track.Phantom;
const active =
!isPhantom &&
this.isActiveTrack(track);
@@ -1383,7 +1495,14 @@ export class PlaylistDetails
: html`<span class="cell col-number">${trackIndex + 1}</span>
<div class="track-art">
${track.CoverArtSmall || track.CoverArtMedium
? html`<img src="${track.CoverArtSmall || track.CoverArtMedium}" alt="" />`
? html`<img
src="${track.CoverArtSmall || track.CoverArtMedium}"
alt=""
loading="lazy"
decoding="async"
width="32"
height="32"
/>`
: nothing}
</div>
<span class="cell col-title" title="${track.Title || track.FilePath}">${trackLink(track.Title, track.Album, track.ReleaseGroupMBID, track.RecordingMBID, undefined, track.Artist) || track.FilePath}</span>
@@ -1392,9 +1511,6 @@ export class PlaylistDetails
<span class="cell col-duration">${formatMilliseconds(track.Duration)}</span>`}
</div>
`;
},
)}
`;
}
private renderContextMenu() {
frontend/src/components/queue-panel/queue-panel.ts
+78 -18
View File
@@ -11,6 +11,7 @@ import '@awesome.me/webawesome/dist/components/popup/popup.js';
import type WaPopup from '@awesome.me/webawesome/dist/components/popup/popup.js';
import '@awesome.me/webawesome/dist/components/dropdown-item/dropdown-item.js';
import { QueueController } from '@store/controllers/queue-controller';
import { confirmAction } from '@components/confirm-dialog/confirm-dialog';
import '@components/playlist-picker/playlist-picker.js';
import type { PlaylistPicker } from '@components/playlist-picker/playlist-picker.js';
import '@lit-labs/virtualizer';
@@ -41,7 +42,8 @@ import {
} from '@utils/drag-image';
import { libraryStore } from '@store/library-store';
import type { library } from '@go/models';
import '@components/track-details/track-details.js';
import { loadTrackDetails } from '@utils/lazy-track-details.js';
import { tracksByFilePath } from '@utils/track-index.js';
import type { TrackDetails } from '@components/track-details/track-details.js';
import type { CoverArtUrls } from '@components/track-details/track-details.js';
import {
@@ -49,6 +51,9 @@ import {
trackLink,
exploreLinkStyles,
} from '@utils/explore-link';
/** Above this many tracks, clearing the queue asks first. */
const CLEAR_CONFIRM_THRESHOLD = 20;
const MIN_WIDTH = 200;
const MAX_WIDTH = 500;
const DEFAULT_WIDTH = 320;
@@ -651,6 +656,30 @@ export class QueuePanel
}
override updated() {
// Closed, the panel is `width: 0` — which hides it from the eye
// and from nobody else: its Clear and Add buttons still took tab
// stops at x=1440 and were still read out (H-5). `inert` is the
// one attribute that means "not there" to both.
this.inert = !this.open;
// ...and a panel that is not there does not render a list
// either (perf.m7). `width: 0` and `contain: layout style
// paint` bound the damage but do not stop the work: the
// virtualizer inside still had a real height and a
// `min-width: 300px`, so it measured its visible window on
// every queue change, and `scrollToIndex` below called
// `scrollIntoView()` on a laid-out but invisible element every
// time the current track changed. The list body renders
// `nothing` while closed; these indices reset so opening the
// panel re-syncs the highlight and the scroll position rather
// than inheriting stale ones.
if (!this.open) {
this.lastRenderedIndex = -1;
this.lastScrolledIndex = -1;
return;
}
// The virtualizer may not exist on first render
// (queue empty). Retry hooks here when it appears.
this.attachVirtualizerHooks();
@@ -680,7 +709,27 @@ export class QueuePanel
}
}
private handleClearQueue = () => {
/**
* Clearing stops playback and discards the list, and it is the one
* mutation in this panel with no way back (errors.m3). A queue you
* could rebuild in a second is not worth a prompt; one you spent
* the evening on is.
*/
private handleClearQueue = async () => {
const count = this.queue.tracks.length;
if (count > CLEAR_CONFIRM_THRESHOLD) {
const ok = await confirmAction({
title: 'Clear the queue?',
message: `${count} tracks will be removed and playback will stop.`,
impact: 'The queue cannot be brought back.',
confirmLabel: 'Clear queue',
danger: true,
});
if (!ok) return;
}
this.queue.clearQueue();
};
@@ -839,9 +888,9 @@ export class QueuePanel
break;
case 'track-details':
if (indices.length === 1) {
this.openTrackDetails(indices[0]!);
void this.openTrackDetails(indices[0]!);
} else {
this.openBatchTrackDetails(indices);
void this.openBatchTrackDetails(indices);
}
break;
}
@@ -870,7 +919,7 @@ export class QueuePanel
this.ctxMenu.close();
}
private openTrackDetails(index: number) {
private async openTrackDetails(index: number) {
const queueTrack =
this.queue.tracks[index];
@@ -878,13 +927,20 @@ export class QueuePanel
const tracks =
libraryStore.getCachedTracks();
const track = tracks?.find(
(t) =>
t.FilePath === queueTrack.filePath,
);
const track = tracks
? tracksByFilePath(tracks).get(
queueTrack.filePath,
)
: undefined;
if (!track) return;
const ready = await loadTrackDetails(
() => void this.openTrackDetails(index),
);
if (!ready) return;
const coverArt = track.CoverArtPath
? {
coverArtPath: track.CoverArtPath,
@@ -900,7 +956,7 @@ export class QueuePanel
);
}
private openBatchTrackDetails(
private async openBatchTrackDetails(
indices: number[],
) {
const queueTracks = this.queue.tracks;
@@ -909,15 +965,11 @@ export class QueuePanel
if (!cachedTracks) return;
const byPath = tracksByFilePath(cachedTracks);
const tracks = indices
.map((i) => queueTracks[i])
.filter((qt) => qt != null)
.map((qt) =>
cachedTracks.find(
(t) =>
t.FilePath === qt.filePath,
),
)
.map((qt) => byPath.get(qt.filePath))
.filter(
(t): t is library.Track =>
t != null,
@@ -925,6 +977,12 @@ export class QueuePanel
if (tracks.length === 0) return;
const ready = await loadTrackDetails(
() => void this.openBatchTrackDetails(indices),
);
if (!ready) return;
const first = tracks[0]!;
const albumNames = new Set(tracks.map((t) => t.Album));
let coverArt: CoverArtUrls | null = null;
@@ -1456,7 +1514,7 @@ export class QueuePanel
<div class="header-actions">
<button
class="header-action-button"
@click=${this.handleClearQueue}
@click=${() => void this.handleClearQueue()}
?disabled=${tracks.length === 0}
title="Clear queue"
>
@@ -1504,7 +1562,9 @@ export class QueuePanel
@dragleave=${this.onPanelDragLeave}
@drop=${this.onPanelDrop}
>
${tracks.length === 0
${!this.open
? nothing
: tracks.length === 0
? html`<div class="empty-state">
<div class="drop-zone-icon">
<wa-icon
frontend/src/components/smart-playlist-details/smart-playlist-details.ts
+153 -48
View File
@@ -5,7 +5,7 @@ import {
state,
query,
} from 'lit/decorators.js';
import type { playlist, library } from '@go/models';
import type { playlist } from '@go/models';
import {
GetSmartPlaylistTracks,
RefreshSmartPlaylist,
@@ -38,8 +38,12 @@ import '@awesome.me/webawesome/dist/components/icon/icon.js';
import '@awesome.me/webawesome/dist/components/popup/popup.js';
import type WaPopup from '@awesome.me/webawesome/dist/components/popup/popup.js';
import '@awesome.me/webawesome/dist/components/dropdown-item/dropdown-item.js';
import '@lit-labs/virtualizer';
import type { LitVirtualizer } from '@lit-labs/virtualizer';
import { flow } from '@lit-labs/virtualizer/layouts/flow.js';
import '@components/playlist-picker/playlist-picker.js';
import '@components/track-details/track-details.js';
import { loadTrackDetails } from '@utils/lazy-track-details.js';
import { tracksByFilePath, tracksForPaths } from '@utils/track-index.js';
import type { TrackDetails } from '@components/track-details/track-details.js';
import type { CoverArtUrls } from '@components/track-details/track-details.js';
import { libraryStore } from '@store/library-store';
@@ -78,6 +82,13 @@ function formatTotalDuration(totalMs: number): string {
return `${seconds}s`;
}
/** One row: the track and its position in the *playlist*, which is not
* its position in the filtered view. */
interface VisibleTrack {
track: playlist.Track;
trackIndex: number;
}
@customElement('smart-playlist-details')
export class SmartPlaylistDetails
extends LitElement
@@ -117,6 +128,32 @@ export class SmartPlaylistDetails
private searchCtrl = new SearchController(this);
private selection = new SelectionController(this);
private ctxMenu = new ContextMenuController(this);
/* _itemSize matches the fixed 45 px .track-item height, measured
* rather than guessed: without the hint the flow layout's 100 px
* default drives constant scroll-error correction, which reads as
* the list jumping under the pointer. */
@query('lit-virtualizer')
private virtualizer?: LitVirtualizer;
/* The row templates live inside the virtualizer, not in this
* component's own template, so a host re-render alone does not
* repaint them: the virtualizer re-renders when its `items` change,
* and `items` is now memoised precisely so it does not change when
* nothing has. Selection and the playing-track highlight are
* therefore pushed to it explicitly, which is what `track-list` has
* always done. Costing ~36 rows, not the whole playlist. */
private lastActiveTrackPath: string | null = null;
private flowLayout = flow({
_itemSize: { width: 100, height: 45 },
} as Parameters<typeof flow>[0]);
private visibleCache: VisibleTrack[] | null = null;
private visibleCacheKey: {
tracks: playlist.Track[];
term: string;
} | null = null;
private favCtrl = new FavoritesController(this);
private playlistDeletedCleanup: (() => void) | null = null;
@@ -167,6 +204,21 @@ export class SmartPlaylistDetails
onSelectionChanged(): void {
this.requestUpdate();
this.virtualizer?.requestUpdate();
}
protected override updated(
changed: Map<string, unknown>,
): void {
super.updated(changed);
const currentPath =
this.player.currentTrack?.filePath ?? null;
if (currentPath !== this.lastActiveTrackPath) {
this.lastActiveTrackPath = currentPath;
this.virtualizer?.requestUpdate();
}
}
// =================================================================
@@ -381,6 +433,18 @@ export class SmartPlaylistDetails
gap: 0;
}
/* The virtualizer positions its children absolutely, so a row
* shrinks to fit its content and its columns stop lining up
* with the header above them. track-list has always carried
* the same declaration for the same reason.
*
* No backticks in here: this is inside a css tagged template
* literal, and one ends it. */
.track-item {
width: 100%;
box-sizing: border-box;
}
.track-header {
padding: 6px 8px;
font-size: 11px;
@@ -817,9 +881,9 @@ export class SmartPlaylistDetails
break;
case 'track-details':
if (filePaths.length === 1) {
this.openTrackDetails(filePaths[0]!);
void this.openTrackDetails(filePaths[0]!);
} else {
this.openBatchTrackDetails(filePaths);
void this.openBatchTrackDetails(filePaths);
}
break;
}
@@ -847,14 +911,20 @@ export class SmartPlaylistDetails
this.ctxMenu.close();
}
private openTrackDetails(filePath: string) {
private async openTrackDetails(filePath: string) {
const tracks = libraryStore.getCachedTracks();
const track = tracks?.find(
(t) => t.FilePath === filePath,
);
const track = tracks
? tracksByFilePath(tracks).get(filePath)
: undefined;
if (!track) return;
const ready = await loadTrackDetails(
() => void this.openTrackDetails(filePath),
);
if (!ready) return;
const coverArt = track.CoverArtPath
? {
coverArtPath: track.CoverArtPath,
@@ -870,7 +940,7 @@ export class SmartPlaylistDetails
);
}
private openBatchTrackDetails(
private async openBatchTrackDetails(
filePaths: string[],
) {
const cachedTracks =
@@ -878,18 +948,19 @@ export class SmartPlaylistDetails
if (!cachedTracks) return;
const tracks = filePaths
.map((fp) =>
cachedTracks.find(
(t) => t.FilePath === fp,
),
)
.filter(
(t): t is library.Track => t != null,
);
const tracks = tracksForPaths(
cachedTracks,
filePaths,
);
if (tracks.length === 0) return;
const ready = await loadTrackDetails(
() => void this.openBatchTrackDetails(filePaths),
);
if (!ready) return;
const first = tracks[0]!;
const albumNames = new Set(tracks.map((t) => t.Album));
let coverArt: CoverArtUrls | null = null;
@@ -971,38 +1042,57 @@ export class SmartPlaylistDetails
// Search filtering
// =================================================================
private getVisibleTracks(): {
track: playlist.Track;
trackIndex: number;
}[] {
private getVisibleTracks(): VisibleTrack[] {
const term =
this.searchCtrl.term.toLowerCase();
if (!term) {
return this.tracks.map(
(track, trackIndex) => ({
track,
trackIndex,
}),
);
// Keyed on the identity of the tracks array and the term. The
// wrappers used to be rebuilt every render, so the array
// identity always changed — which is the one thing a
// virtualizer keys its work on (perf.M5).
if (
this.visibleCache &&
this.visibleCacheKey &&
this.visibleCacheKey.tracks === this.tracks &&
this.visibleCacheKey.term === term
) {
return this.visibleCache;
}
return this.tracks
.map((track, trackIndex) => ({
const all = this.tracks.map(
(track, trackIndex) => ({
track,
trackIndex,
}))
.filter(
({ track }) =>
track.Title.toLowerCase().includes(
term,
) ||
track.Artist.toLowerCase().includes(
term,
),
);
}),
);
const visible = term
? all.filter(
({ track }) =>
track.Title.toLowerCase().includes(
term,
) ||
track.Artist.toLowerCase().includes(
term,
),
)
: all;
this.visibleCache = visible;
this.visibleCacheKey = { tracks: this.tracks, term };
return visible;
}
/** Stable across renders: lit-virtualizer declares renderItem and
* keyFunction as plain properties, so a fresh arrow function marks
* them dirty and forces its own render pass every host update
* (perf.m1). */
private renderRow = (entry: VisibleTrack) =>
this.renderTrackRow(entry);
private rowKey = (entry: VisibleTrack) => entry.trackIndex;
// =================================================================
// Helpers
// =================================================================
@@ -1173,9 +1263,20 @@ export class SmartPlaylistDetails
<div class="header-cell col-album">Album</div>
<div class="header-cell col-duration">Duration</div>
</div>
${visibleTracks.map(
({ track, trackIndex }) => {
const isPhantom = track.Phantom;
<lit-virtualizer
.items=${visibleTracks}
.renderItem=${this.renderRow}
.keyFunction=${this.rowKey}
.layout=${this.flowLayout}
></lit-virtualizer>
`;
}
/* One row. Extracted from renderTrackList so it can be a stable
* bound field rather than a closure the virtualizer sees as new on
* every pass. */
private renderTrackRow({ track, trackIndex }: VisibleTrack) {
const isPhantom = track.Phantom;
const active =
!isPhantom &&
this.isActiveTrack(track);
@@ -1242,7 +1343,14 @@ export class SmartPlaylistDetails
: html`<span class="cell col-number">${trackIndex + 1}</span>
<div class="track-art">
${track.CoverArtSmall || track.CoverArtMedium
? html`<img src="${track.CoverArtSmall || track.CoverArtMedium}" alt="" />`
? html`<img
src="${track.CoverArtSmall || track.CoverArtMedium}"
alt=""
loading="lazy"
decoding="async"
width="32"
height="32"
/>`
: nothing}
</div>
<span class="cell col-title" title="${track.Title || track.FilePath}">${trackLink(track.Title, track.Album, track.ReleaseGroupMBID, track.RecordingMBID, undefined, track.Artist) || track.FilePath}</span>
@@ -1251,9 +1359,6 @@ export class SmartPlaylistDetails
<span class="cell col-duration">${formatMilliseconds(track.Duration)}</span>`}
</div>
`;
},
)}
`;
}
private renderContextMenu() {