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.
This commit is contained in:
parent
2c695b8150
commit
b010325618
2 changed files with 8 additions and 17 deletions
|
@ -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))
|
||||
|
||||
|
|
|
@ -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%
|
||||
|
|
Loading…
Reference in a new issue