improve album artist favorite performance and search

This commit is contained in:
Kendall Garner
2026-02-13 09:29:00 -08:00
parent 78875572e9
commit d54baae3d9
2 changed files with 33 additions and 38 deletions
@@ -717,28 +717,32 @@ const AlbumArtistMetadataFavoriteSongs = ({ routeId }: AlbumArtistMetadataFavori
tableColumnsData={SONG_TABLE_COLUMNS} tableColumnsData={SONG_TABLE_COLUMNS}
/> />
</Group> </Group>
<ItemTableList {/* Restrict the height. Rendering all items in the DOM makes for a long delay */}
activeRowId={currentSongId} <div style={{ height: 50 + 64 * Math.min(songs.length, 5) }}>
autoFitColumns={tableConfig.autoFitColumns} <ItemTableList
CellComponent={ItemTableListColumn} activeRowId={currentSongId}
columns={columns} autoFitColumns={tableConfig.autoFitColumns}
data={filteredSongs} CellComponent={ItemTableListColumn}
enableAlternateRowColors={tableConfig.enableAlternateRowColors} columns={columns}
enableDrag data={filteredSongs}
enableDragScroll={false} enableAlternateRowColors={tableConfig.enableAlternateRowColors}
enableExpansion={false} enableDrag
enableHeader={tableConfig.enableHeader} enableDragScroll={false}
enableHorizontalBorders={tableConfig.enableHorizontalBorders} enableExpansion={false}
enableRowHoverHighlight={tableConfig.enableRowHoverHighlight} enableHeader={tableConfig.enableHeader}
enableSelection enableHorizontalBorders={tableConfig.enableHorizontalBorders}
enableSelectionDialog={false} enableRowHoverHighlight={tableConfig.enableRowHoverHighlight}
enableVerticalBorders={tableConfig.enableVerticalBorders} enableSelection
itemType={LibraryItem.SONG} enableSelectionDialog={false}
onColumnReordered={handleColumnReordered} enableVerticalBorders={tableConfig.enableVerticalBorders}
onColumnResized={handleColumnResized} itemType={LibraryItem.SONG}
overrideControls={overrideControls} onColumnReordered={handleColumnReordered}
size={tableConfig.size} onColumnResized={handleColumnResized}
/> overrideControls={overrideControls}
size={tableConfig.size}
/>
</div>
{!searchTerm.trim() && songs.length > 5 && !showAll && ( {!searchTerm.trim() && songs.length > 5 && !showAll && (
<Group justify="center" w="100%"> <Group justify="center" w="100%">
<Button onClick={() => setShowAll(true)} variant="subtle"> <Button onClick={() => setShowAll(true)} variant="subtle">
+7 -16
View File
@@ -124,23 +124,12 @@ export const createFuseForLibraryItem = <T extends FuseSearchableItem>(
}); });
} }
const sampleItem = items[0]; const stringKeys: string[] = [];
const stringKeys = Object.keys(sampleItem).filter(
(key) =>
typeof sampleItem[key as keyof T] === 'string' &&
!key.startsWith('_') &&
key !== 'id' &&
key !== 'albumId' &&
key !== 'streamUrl' &&
key !== 'serverId' &&
key !== 'ownerId',
) as string[];
const nestedKeys: Array<{ getFn: (item: T) => string; name: string }> = []; const nestedKeys: Array<{ getFn: (item: T) => string; name: string }> = [];
switch (itemType) { switch (itemType) {
case LibraryItem.ALBUM: { case LibraryItem.ALBUM: {
stringKeys.push('name', 'releaseType');
nestedKeys.push( nestedKeys.push(
{ {
getFn: (item) => { getFn: (item) => {
@@ -168,6 +157,7 @@ export const createFuseForLibraryItem = <T extends FuseSearchableItem>(
} }
case LibraryItem.ALBUM_ARTIST: { case LibraryItem.ALBUM_ARTIST: {
stringKeys.push('name');
nestedKeys.push({ nestedKeys.push({
getFn: (item) => { getFn: (item) => {
const aa = item as AlbumArtist; const aa = item as AlbumArtist;
@@ -181,9 +171,10 @@ export const createFuseForLibraryItem = <T extends FuseSearchableItem>(
case LibraryItem.ARTIST: case LibraryItem.ARTIST:
case LibraryItem.GENRE: case LibraryItem.GENRE:
case LibraryItem.RADIO_STATION: case LibraryItem.RADIO_STATION:
stringKeys.push('name');
break; break;
case LibraryItem.PLAYLIST: { case LibraryItem.PLAYLIST: {
stringKeys.push('name');
nestedKeys.push({ nestedKeys.push({
getFn: (item) => { getFn: (item) => {
const p = item as Playlist; const p = item as Playlist;
@@ -196,7 +187,8 @@ export const createFuseForLibraryItem = <T extends FuseSearchableItem>(
case LibraryItem.PLAYLIST_SONG: case LibraryItem.PLAYLIST_SONG:
case LibraryItem.QUEUE_SONG: case LibraryItem.QUEUE_SONG:
case LibraryItem.SONG: { case LibraryItem.SONG:
stringKeys.push('album', 'name');
nestedKeys.push( nestedKeys.push(
{ {
getFn: (item) => { getFn: (item) => {
@@ -214,7 +206,6 @@ export const createFuseForLibraryItem = <T extends FuseSearchableItem>(
}, },
); );
break; break;
}
} }
return new Fuse(items, { return new Fuse(items, {