0ab5ca080e
## Issue In the `Autoplay` case, if the `WaitUntilOnPage` has already opened the gates previously, the next video's Related will be loaded regardless of scroll position. ## Changes Add a `lastUpdateDate` prop to `WaitUntilOnPage` to allow the parent to reset the gating state. I don't really like the `lastUpdateDate` prop since it's purpose is not intuitive. Is there a standard way to do a "one-time trigger" from the parent?
49 lines
1.3 KiB
JavaScript
49 lines
1.3 KiB
JavaScript
// @flow
|
|
import React from 'react';
|
|
import debounce from 'util/debounce';
|
|
|
|
const DEBOUNCE_SCROLL_HANDLER_MS = 300;
|
|
|
|
type Props = {
|
|
children: any,
|
|
lastUpdateDate?: any,
|
|
};
|
|
|
|
export default function WaitUntilOnPage(props: Props) {
|
|
const ref = React.useRef();
|
|
const [shouldRender, setShouldRender] = React.useState(false);
|
|
|
|
React.useEffect(() => {
|
|
setShouldRender(false);
|
|
}, [props.lastUpdateDate]);
|
|
|
|
React.useEffect(() => {
|
|
const handleDisplayingRef = debounce(e => {
|
|
const element = ref && ref.current;
|
|
if (element) {
|
|
const bounding = element.getBoundingClientRect();
|
|
if (
|
|
bounding.top >= 0 &&
|
|
bounding.left >= 0 &&
|
|
// $FlowFixMe
|
|
bounding.right <= (window.innerWidth || document.documentElement.clientWidth) &&
|
|
// $FlowFixMe
|
|
bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight)
|
|
) {
|
|
setShouldRender(true);
|
|
}
|
|
}
|
|
|
|
if (element && !shouldRender) {
|
|
window.addEventListener('scroll', handleDisplayingRef);
|
|
return () => window.removeEventListener('scroll', handleDisplayingRef);
|
|
}
|
|
}, DEBOUNCE_SCROLL_HANDLER_MS);
|
|
|
|
if (ref) {
|
|
handleDisplayingRef();
|
|
}
|
|
}, [ref, setShouldRender, shouldRender]);
|
|
|
|
return <div ref={ref}>{shouldRender && props.children}</div>;
|
|
}
|