sandvich
/
hackathon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix carousel showing duplicate cards with few songs 

With only 4 songs, the carousel tried to show 5 positions, causing
the same song to appear twice (e.g. far-left and far-right wrapping
to the same index). Deduplicate display indices so each song only
renders once regardless of how many songs exist.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
main
Claude 2026-04-14 23:42:22 +00:00
parent 33504558ce
commit 5fbe74691d
1 changed files with 8 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/features/song-select/SongCarousel.tsx
View File

@ -43,11 +43,14 @@ export function SongCarousel({ songs, currentIndex, onSelectIndex }: SongCarouse
}
const center = songs[currentIndex]
const leftIndex = wrapIndex(currentIndex - 1, songs.length)
const rightIndex = wrapIndex(currentIndex + 1, songs.length)
const farLeftIndex = wrapIndex(currentIndex - 2, songs.length)
const farRightIndex = wrapIndex(currentIndex + 2, songs.length)
const displayIndexes = [farLeftIndex, leftIndex, currentIndex, rightIndex, farRightIndex]
const displayIndexes = [currentIndex]
const seen = new Set([currentIndex])
for (let d = 1; d <= 2; d++) {
const li = wrapIndex(currentIndex - d, songs.length)
const ri = wrapIndex(currentIndex + d, songs.length)
if (!seen.has(li)) { displayIndexes.unshift(li); seen.add(li) }
if (!seen.has(ri)) { displayIndexes.push(ri); seen.add(ri) }
}
return (
<section className="song-carousel" aria-label="Song carousel">