Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | 1x 32x 32x 32x 32x 32x 32x 32x | import {useEffect, useRef, useState} from 'react'
import {AUTOPLAY} from '../settings/index.js'
const useScrollAutoplayEffect = ({
autoPlay,
muted,
ref,
intersectionObserverConfiguration: {root, rootMargin, threshold}
}) => {
/* eslint no-console: "off" */
if (!muted && autoPlay !== AUTOPLAY.FALSE) console.error('Autoplay is only available when muted is true')
const observer = useRef(null)
const [autoPlayState, setAutoPlayState] = useState(autoPlay !== AUTOPLAY.ON_VIEWPORT ? autoPlay : false)
const callback = (entries, observer) => {
entries.forEach(entry => {
setAutoPlayState(entry.isIntersecting)
})
}
useEffect(() => {
Eif (autoPlay !== AUTOPLAY.ON_VIEWPORT) return
if (observer.current === null)
observer.current = new IntersectionObserver(callback, {
root,
rootMargin,
threshold
})
if (ref.current !== null) observer.current.observe(ref.current)
return () => {
observer.current !== null && observer.current.disconnect()
}
}, [autoPlay, ref, root, rootMargin, threshold])
return autoPlayState
}
export default useScrollAutoplayEffect
|