Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/FoxxMD/multi-scrobbler. Scrobble plays from multiple sources to multiple clients docs.multi-scrobbler.app
deezer docker jellyfin koito lastfm listenbrainz maloja mopidy mpris music music-assistant plex scrobble self-hosted spotify subsonic tautulli youtube-music
Something went wrong. Try again.
1.2 kB · 47 lines
TSX
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748import React, { useCallback, useEffect, useState } from 'react'import { EmblaCarouselType } from 'embla-carousel'
type UseSelectedSnapDisplayType = { selectedSnap: number snapCount: number}
export const useSelectedSnapDisplay = ( emblaApi: EmblaCarouselType | undefined): UseSelectedSnapDisplayType => { const [selectedSnap, setSelectedSnap] = useState(0) const [snapCount, setSnapCount] = useState(0)
const updateScrollSnapState = useCallback((emblaApi: EmblaCarouselType) => { setSnapCount(emblaApi.snapList().length) setSelectedSnap(emblaApi.selectedSnap()) }, [])
useEffect(() => { if (!emblaApi) return
updateScrollSnapState(emblaApi) emblaApi.on('select', updateScrollSnapState) emblaApi.on('reinit', updateScrollSnapState) }, [emblaApi, updateScrollSnapState])
return { selectedSnap, snapCount }}
type PropType = { selectedSnap: number snapCount: number}
export const SelectedSnapDisplay = (props: PropType) => { const { selectedSnap, snapCount } = props
return ( <div className="embla__selected-snap-display"> {selectedSnap + 1} / {snapCount} </div> )}