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]);
|
||||
|
||||
React.useEffect(() => {
|
||||
const handleScroll = debounce(e => {
|
||||
function shouldPauseAutoplay() {
|
||||
const elm = document.querySelector(`.${CLASSNAME_AUTOPLAY_COUNTDOWN}`);
|
||||
if (elm) {
|
||||
setTimerPaused(elm.getBoundingClientRect().top < 0);
|
||||
return elm && 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);
|
||||
|
||||
window.addEventListener('scroll', handleScroll);
|
||||
return () => window.removeEventListener('scroll', handleScroll);
|
||||
}, []);
|
||||
|
||||
// Update countdown timer.
|
||||
React.useEffect(() => {
|
||||
let interval;
|
||||
if (!timerCanceled && nextRecommendedUri) {
|
||||
|
|
Loading…
Reference in a new issue