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.
2.9 kB · 96 lines
TSX
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697import React, { ComponentPropsWithRef, useCallback, useEffect, useState} from 'react'import { EmblaCarouselType } from 'embla-carousel'
type UsePrevNextButtonsType = { prevBtnDisabled: boolean nextBtnDisabled: boolean onPrevButtonClick: () => void onNextButtonClick: () => void}
export const usePrevNextButtons = ( emblaApi: EmblaCarouselType | undefined): UsePrevNextButtonsType => { const [prevBtnDisabled, setPrevBtnDisabled] = useState(true) const [nextBtnDisabled, setNextBtnDisabled] = useState(true)
const onPrevButtonClick = useCallback(() => { if (!emblaApi) return emblaApi.goToPrev() }, [emblaApi])
const onNextButtonClick = useCallback(() => { if (!emblaApi) return emblaApi.goToNext() }, [emblaApi])
const onSelect = useCallback((emblaApi: EmblaCarouselType) => { setPrevBtnDisabled(!emblaApi.canGoToPrev()) setNextBtnDisabled(!emblaApi.canGoToNext()) }, [])
useEffect(() => { if (!emblaApi) return
onSelect(emblaApi) emblaApi.on('reinit', onSelect).on('select', onSelect) }, [emblaApi, onSelect])
return { prevBtnDisabled, nextBtnDisabled, onPrevButtonClick, onNextButtonClick }}
type PropType = ComponentPropsWithRef<'button'>
export const PrevButton = (props: PropType) => { const { children, disabled, ...restProps } = props
return ( <button className={'embla__button embla__button--prev'.concat( disabled ? ' embla__button--disabled' : '' )} type="button" {...restProps} > <svg className="embla__button__svg" viewBox="0 0 532 532"> <path fill="currentColor" d="M355.66 11.354c13.793-13.805 36.208-13.805 50.001 0 13.785 13.804 13.785 36.238 0 50.034L201.22 266l204.442 204.61c13.785 13.805 13.785 36.239 0 50.044-13.793 13.796-36.208 13.796-50.002 0a5994246.277 5994246.277 0 0 0-229.332-229.454 35.065 35.065 0 0 1-10.326-25.126c0-9.2 3.393-18.26 10.326-25.2C172.192 194.973 332.731 34.31 355.66 11.354Z" /> </svg> {children} </button> )}
export const NextButton = (props: PropType) => { const { children, disabled, ...restProps } = props
return ( <button className={'embla__button embla__button--next'.concat( disabled ? ' embla__button--disabled' : '' )} type="button" {...restProps} > <svg className="embla__button__svg" viewBox="0 0 532 532"> <path fill="currentColor" d="M176.34 520.646c-13.793 13.805-36.208 13.805-50.001 0-13.785-13.804-13.785-36.238 0-50.034L330.78 266 126.34 61.391c-13.785-13.805-13.785-36.239 0-50.044 13.793-13.796 36.208-13.796 50.002 0 22.928 22.947 206.395 206.507 229.332 229.454a35.065 35.065 0 0 1 10.326 25.126c0 9.2-3.393 18.26-10.326 25.2-45.865 45.901-206.404 206.564-229.332 229.52Z" /> </svg> {children} </button> )}