diff --git a/src/features/song-select/SongCarousel.tsx b/src/features/song-select/SongCarousel.tsx index 70e5b70..018c14b 100644 --- a/src/features/song-select/SongCarousel.tsx +++ b/src/features/song-select/SongCarousel.tsx @@ -1,4 +1,4 @@ -import type { CSSProperties } from 'react' +import { useRef, type CSSProperties } from 'react' import { SongCard } from './SongCard' import type { Song } from './types' @@ -20,6 +20,28 @@ function getSignedOffset(currentIndex: number, index: number, length: number): n } export function SongCarousel({ songs, currentIndex, onSelectIndex }: SongCarouselProps) { + const touchStartX = useRef(0) + const swiped = useRef(false) + + const handleTouchStart = (e: React.TouchEvent) => { + touchStartX.current = e.touches[0].clientX + swiped.current = false + } + + const handleTouchMove = (e: React.TouchEvent) => { + if (swiped.current) return + const dx = e.touches[0].clientX - touchStartX.current + const threshold = 50 + if (Math.abs(dx) > threshold) { + swiped.current = true + if (dx < 0) { + onSelectIndex(wrapIndex(currentIndex + 1, songs.length)) + } else { + onSelectIndex(wrapIndex(currentIndex - 1, songs.length)) + } + } + } + const center = songs[currentIndex] const leftIndex = wrapIndex(currentIndex - 1, songs.length) const rightIndex = wrapIndex(currentIndex + 1, songs.length) @@ -29,7 +51,12 @@ export function SongCarousel({ songs, currentIndex, onSelectIndex }: SongCarouse return (
-
+
{displayIndexes.map((index) => { const offset = getSignedOffset(currentIndex, index, songs.length) return (