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 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 | 1x 63x 63x 32x 63x 63x 63x 63x 63x 32x 31x 1x 1x | import {createRef, forwardRef, Suspense, useEffect, useRef, useState} from 'react'
import PropTypes from 'prop-types'
import useDetectVideoType from './hooks/useDetectVideoType.js'
import useScrollAutoplayEffect from './hooks/useScrollAutoplayEffect.js'
import useVideoPlayer from './hooks/useVideoPlayer.js'
import {
AUTOPLAY,
AUTOPLAY_DEFAULT_VALUE,
AUTOPLAY_OPTIONS,
BASE_CLASS,
INTERSECTION_OBSERVER_DEFAULT_CONFIGURATION,
NO_OP,
UNKNOWN
} from './settings/index.js'
const AtomVideoPlayer = forwardRef(
(
{
autoPlay = AUTOPLAY_DEFAULT_VALUE,
controls = true,
fallbackComponent = null,
fallbackWhileNotOnViewport = false,
intersectionObserverConfiguration = INTERSECTION_OBSERVER_DEFAULT_CONFIGURATION,
muted = false,
onLoadVideo = NO_OP,
playsInline = false,
src = '',
timeLimit,
timeOffset,
title,
loop = false
},
forwardedRef = createRef()
) => {
// SSR-safe: Only render on client-side to avoid Suspense issues
const [isClient, setIsClient] = useState(false)
useEffect(() => {
setIsClient(true)
}, [])
const [Component, props] = useVideoPlayer({
autoPlay,
controls,
muted,
onLoadVideo,
playsInline,
src,
timeLimit,
title,
timeOffset,
loop
})
const componentRef = useRef(null)
const autoPlayState = useScrollAutoplayEffect({
autoPlay,
intersectionObserverConfiguration,
muted,
ref: componentRef
})
const needsToRenderFallbackComponent =
fallbackWhileNotOnViewport === true && autoPlay === AUTOPLAY.ON_VIEWPORT && !autoPlayState
// Don't render during SSR - only on client
if (!isClient) {
return (
<div ref={componentRef} className={BASE_CLASS}>
{fallbackComponent}
</div>
)
}
return (
<div ref={componentRef} className={BASE_CLASS}>
{needsToRenderFallbackComponent ? (
fallbackComponent
) : (
<Suspense fallback={fallbackComponent}>
<Component
{...{
...props,
autoPlay: autoPlayState,
ref: forwardedRef
}}
/>
</Suspense>
)}
</div>
)
}
)
AtomVideoPlayer.displayName = 'AtomVideoPlayer'
AtomVideoPlayer.propTypes = {
autoPlay: PropTypes.oneOf(AUTOPLAY_OPTIONS),
controls: PropTypes.bool,
fallbackComponent: PropTypes.node,
fallbackWhileNotOnViewport: PropTypes.bool,
intersectionObserverConfiguration: PropTypes.shape({
root: PropTypes.instanceOf(Element),
rootMargin: PropTypes.string,
threshold: PropTypes.number
}),
muted: PropTypes.bool,
onLoadVideo: PropTypes.func,
playsInline: PropTypes.bool,
src: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
timeLimit: PropTypes.number,
timeOffset: PropTypes.number,
title: PropTypes.string,
loop: PropTypes.bool
}
export default AtomVideoPlayer
export {AUTOPLAY, UNKNOWN, useDetectVideoType}
|