Pause 'Autoplay' when scrolled off screen.

Fixes #-4021.

## Changes:
When the autoplay overlay gets partially off-screen, the timer will be stopped. We can tweak how much down it needs to be scrolled.

When timer is paused, the countdown resets.

The pausing mechanism has no effect on the floating player (since the 'top' can never go negative). This behavior is the same as another big video platform.

static/app-strings.json

@@ -1199,6 +1199,8 @@
   "No information will be sent directly to LBRY, Inc. or third-parties about your usage. Note that as\n                peer-to-peer software, your IP address and potentially other system information can be sent to other\n                users, though this information is not stored permanently.": "No information will be sent directly to LBRY, Inc. or third-parties about your usage. Note that as\n                peer-to-peer software, your IP address and potentially other system information can be sent to other\n                users, though this information is not stored permanently.",
   "%view_count% Views": "%view_count% Views",
   "Tap to unmute": "Tap to unmute",
+  "Playing in %seconds_left% seconds...": "Playing in %seconds_left% seconds...",
+  "Autoplay timer paused.": "Autoplay timer paused.", 
   "0 Bytes": "0 Bytes",
   "Bytes": "Bytes",
   "KB": "KB",

ui/component/autoplayCountdown/view.jsx

@@ -31,6 +31,7 @@ function AutoplayCountdown(props: Props) {
 
   const [timer, setTimer] = React.useState(countdownTime);
   const [timerCanceled, setTimerCanceled] = React.useState(false);
+  const [timerPaused, setTimerPaused] = React.useState(false);
 
   let navigateUrl;
   if (nextTitle) {
@@ -52,22 +53,53 @@ function AutoplayCountdown(props: Props) {
     }
   }, [navigateUrl, nextRecommendedUri, isFloating, doSetPlayingUri, doPlayUri]);
 
+  function debounce(fn, time) {
+    let timeoutId;
+    return wrapper;
+    function wrapper(...args) {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+      timeoutId = setTimeout(() => {
+        timeoutId = null;
+        fn(...args);
+      }, time);
+    }
+  }
+
+  React.useEffect(() => {
+    const handleScroll = debounce(e => {
+      const elm = document.querySelector('.autoplay-countdown');
+      if (elm) {
+        setTimerPaused(elm.getBoundingClientRect().top < 0);
+      }
+    }, 150);
+
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
   React.useEffect(() => {
     let interval;
     if (!timerCanceled && nextRecommendedUri) {
-      interval = setInterval(() => {
-        const newTime = timer - 1;
-        if (newTime === 0) {
-          doNavigate();
-        } else {
-          setTimer(timer - 1);
-        }
-      }, 1000);
+      if (timerPaused) {
+        clearInterval(interval);
+        setTimer(countdownTime);
+      } else {
+        interval = setInterval(() => {
+          const newTime = timer - 1;
+          if (newTime === 0) {
+            doNavigate();
+          } else {
+            setTimer(timer - 1);
+          }
+        }, 1000);
+      }
     }
     return () => {
       clearInterval(interval);
     };
-  }, [timer, doNavigate, navigateUrl, push, timerCanceled, nextRecommendedUri]);
+  }, [timer, doNavigate, navigateUrl, push, timerCanceled, timerPaused, nextRecommendedUri]);
 
   if (timerCanceled || !nextRecommendedUri) {
     return null;
@@ -87,10 +119,17 @@ function AutoplayCountdown(props: Props) {
           <div className={'autoplay-countdown__button autoplay-countdown__button--' + (timer % 5)}>
             <Button onClick={doNavigate} iconSize={30} title={__('Play')} className="button--icon button--play" />
           </div>
-          <div className="file-viewer__overlay-secondary autoplay-countdown__counter">
-            {__('Playing in %seconds_left% seconds...', { seconds_left: timer })}{' '}
-            <Button label={__('Cancel')} button="link" onClick={() => setTimerCanceled(true)} />
-          </div>
+          {timerPaused && (
+            <div className="file-viewer__overlay-secondary autoplay-countdown__counter">
+              {__('Autoplay timer paused.')}{' '}
+            </div>
+          )}
+          {!timerPaused && (
+            <div className="file-viewer__overlay-secondary autoplay-countdown__counter">
+              {__('Playing in %seconds_left% seconds...', { seconds_left: timer })}{' '}
+              <Button label={__('Cancel')} button="link" onClick={() => setTimerCanceled(true)} />
+            </div>
+          )}
         </div>
       </div>
     </div>