Fix initial pause state for the Autoplay Countdown

## Issue
5204: Don't autoplay when commenting/video off screen

## Change
Previously, the checking was only done during a scroll event. We also need to check if the user has already scroll down before the component was invoked.
This commit is contained in:
infiinte-persistence 2020-12-19 01:34:58 +08:00 committed by Sean Yesmunt
parent 0d374725d6
commit 4b03a30121

View file

@ -61,18 +61,25 @@ function AutoplayCountdown(props: Props) {
} }
}, [navigateUrl, nextRecommendedUri, isFloating, doSetPlayingUri, doPlayUri, push]); }, [navigateUrl, nextRecommendedUri, isFloating, doSetPlayingUri, doPlayUri, push]);
React.useEffect(() => { function shouldPauseAutoplay() {
const handleScroll = debounce(e => {
const elm = document.querySelector(`.${CLASSNAME_AUTOPLAY_COUNTDOWN}`); const elm = document.querySelector(`.${CLASSNAME_AUTOPLAY_COUNTDOWN}`);
if (elm) { return elm && elm.getBoundingClientRect().top < 0;
setTimerPaused(elm.getBoundingClientRect().top < 0);
} }
// Update 'setTimerPaused'.
React.useEffect(() => {
// Ensure correct 'setTimerPaused' on initial render.
setTimerPaused(shouldPauseAutoplay());
const handleScroll = debounce(e => {
setTimerPaused(shouldPauseAutoplay());
}, DEBOUNCE_SCROLL_HANDLER_MS); }, DEBOUNCE_SCROLL_HANDLER_MS);
window.addEventListener('scroll', handleScroll); window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll); return () => window.removeEventListener('scroll', handleScroll);
}, []); }, []);
// Update countdown timer.
React.useEffect(() => { React.useEffect(() => {
let interval; let interval;
if (!timerCanceled && nextRecommendedUri) { if (!timerCanceled && nextRecommendedUri) {