Pause 'Autoplay': cleanup

1. Use a constant for the classname instead of being hardcoded.
2. Use existing 'debounce' function instead of introducing another.
3. Added changelog entry.

CHANGELOG.md

@@ -10,6 +10,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 - Add "tap to unmute" button for videos that start with audio muted _community pr!_ ([#4365](https://github.com/lbryio/lbry-desktop/pull/4365))
 - Allow upgrade bar to be dismissed per session _community pr!_ ([#4413](https://github.com/lbryio/lbry-desktop/pull/4413))
+- Pause the "autoplay next" timer when performing long operations such as Tipping, Supporting or commenting _community pr!_ ([4419](https://github.com/lbryio/lbry-desktop/pull/4419))  
 - Email notification management page ([#4409](https://github.com/lbryio/lbry-desktop/pull/4409))
 - Publish Page improvements to prevent accidental overwrites of existing claims _community pr!_ ([#4461](https://github.com/lbryio/lbry-desktop/pull/4416))
 

ui/component/autoplayCountdown/view.jsx

@@ -5,6 +5,10 @@ import UriIndicator from 'component/uriIndicator';
 import I18nMessage from 'component/i18nMessage';
 import { formatLbryUrlForWeb } from 'util/url';
 import { withRouter } from 'react-router';
+import debounce from 'util/debounce';
+
+const DEBOUNCE_SCROLL_HANDLER_MS = 150;
+const CLASSNAME_AUTOPLAY_COUNTDOWN = 'autoplay-countdown';
 
 type Props = {
   history: { push: string => void },
@@ -57,27 +61,13 @@ 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');
+      const elm = document.querySelector(`.${CLASSNAME_AUTOPLAY_COUNTDOWN}`);
       if (elm) {
         setTimerPaused(elm.getBoundingClientRect().top < 0);
       }
-    }, 150);
+    }, DEBOUNCE_SCROLL_HANDLER_MS);
 
     window.addEventListener('scroll', handleScroll);
     return () => window.removeEventListener('scroll', handleScroll);
@@ -111,7 +101,7 @@ function AutoplayCountdown(props: Props) {
 
   return (
     <div className="file-viewer__overlay">
-      <div className="autoplay-countdown">
+      <div className={CLASSNAME_AUTOPLAY_COUNTDOWN}>
         <div className="file-viewer__overlay-secondary">
           <I18nMessage tokens={{ channel: <UriIndicator link uri={nextRecommendedUri} /> }}>
             Up Next by %channel%