diff --git a/frontend/src/components/artists-view/artists-view.ts b/frontend/src/components/artists-view/artists-view.ts index 89c1b53..24bc7de 100644 --- a/frontend/src/components/artists-view/artists-view.ts +++ b/frontend/src/components/artists-view/artists-view.ts @@ -10,6 +10,7 @@ import type { VisibilityChangedEvent, } from '@lit-labs/virtualizer'; import { grid } from '@lit-labs/virtualizer/layouts/grid.js'; +import { repeat } from 'lit/directives/repeat.js'; import { GetAlbumsByArtist, GetAlbumTracks, @@ -1216,15 +1217,13 @@ export class ArtistsView > - this.renderArtistCard( - entry, - )} .layout=${this.gridLayout} @visibilityChanged=${this.onVisibilityChanged} - > + >${repeat( + entries, + (entry) => entry.artist.ID, + (entry) => this.renderArtistCard(entry), + )} ${this.renderContextMenu()} `; diff --git a/frontend/src/components/cover-grid/cover-grid.ts b/frontend/src/components/cover-grid/cover-grid.ts index 43fa794..5a38346 100644 --- a/frontend/src/components/cover-grid/cover-grid.ts +++ b/frontend/src/components/cover-grid/cover-grid.ts @@ -11,6 +11,7 @@ import type { VisibilityChangedEvent, } from '@lit-labs/virtualizer'; import { grid } from '@lit-labs/virtualizer/layouts/grid.js'; +import { repeat } from 'lit/directives/repeat.js'; import { GetAlbumTracks } from '@go/library/Library'; import { library } from '@go/models'; import { LibraryController } from '@store/controllers/library-controller'; @@ -924,12 +925,6 @@ export class CoverGrid ); } - private gridKeyFunction = ( - entry: GridEntry, - ) => { - return `a-${entry.album.ID}`; - }; - /* ==================================================================== * Dropdown (expand/collapse) * ==================================================================== */ @@ -1853,15 +1848,17 @@ export class CoverGrid + >${repeat( + this.buildGridEntries(), + (entry) => entry.album.ID, + (entry) => this.renderGridEntry(entry), + )} `; } @@ -1880,15 +1877,17 @@ export class CoverGrid + >${repeat( + this.getBeforeEntries(), + (entry) => entry.album.ID, + (entry) => this.renderGridEntry(entry), + )} + >${repeat( + afterEntries, + (entry) => entry.album.ID, + (entry) => this.renderGridEntry(entry), + )} ` : nothing} `; diff --git a/frontend/src/components/genres-view/genres-view.ts b/frontend/src/components/genres-view/genres-view.ts index 7248385..5276d57 100644 --- a/frontend/src/components/genres-view/genres-view.ts +++ b/frontend/src/components/genres-view/genres-view.ts @@ -10,6 +10,7 @@ import type { VisibilityChangedEvent, } from '@lit-labs/virtualizer'; import { grid } from '@lit-labs/virtualizer/layouts/grid.js'; +import { repeat } from 'lit/directives/repeat.js'; import { GetTracksByGenre } from '@go/library/Library'; import type { library } from '@go/models'; import { LibraryController } from '@store/controllers/library-controller'; @@ -1168,13 +1169,13 @@ export class GenresView > - this.renderGenreCard(entry)} .layout=${this.gridLayout} @visibilityChanged=${this.onVisibilityChanged} - > + >${repeat( + entries, + (entry) => entry.genre.name, + (entry) => this.renderGenreCard(entry), + )} ${this.renderContextMenu()} `;