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:
parent
0d374725d6
commit
4b03a30121
1 changed files with 11 additions and 4 deletions
|
@ -61,18 +61,25 @@ function AutoplayCountdown(props: Props) {
|
||||||
}
|
}
|
||||||
}, [navigateUrl, nextRecommendedUri, isFloating, doSetPlayingUri, doPlayUri, push]);
|
}, [navigateUrl, nextRecommendedUri, isFloating, doSetPlayingUri, doPlayUri, push]);
|
||||||
|
|
||||||
|
function shouldPauseAutoplay() {
|
||||||
|
const elm = document.querySelector(`.${CLASSNAME_AUTOPLAY_COUNTDOWN}`);
|
||||||
|
return elm && elm.getBoundingClientRect().top < 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update 'setTimerPaused'.
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
|
// Ensure correct 'setTimerPaused' on initial render.
|
||||||
|
setTimerPaused(shouldPauseAutoplay());
|
||||||
|
|
||||||
const handleScroll = debounce(e => {
|
const handleScroll = debounce(e => {
|
||||||
const elm = document.querySelector(`.${CLASSNAME_AUTOPLAY_COUNTDOWN}`);
|
setTimerPaused(shouldPauseAutoplay());
|
||||||
if (elm) {
|
|
||||||
setTimerPaused(elm.getBoundingClientRect().top < 0);
|
|
||||||
}
|
|
||||||
}, 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) {
|
||||||
|
|
Loading…
Reference in a new issue