LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Stop autoplay-next countdown when any input is in focus.

Browse source 
## Issue
On large screens, the comment field and autoplay countdown can both be visible at the same time. The currently code only stops the timer when the countdown component is not visible on screen.

The page annoyingly navigates away while typing.

## Change
When servicing the timer, check if the current active element is an input type. As far as I know, there is no React equivalent for this.
This commit is contained in:
infinite-persistence 2022-01-28 21:36:41 +08:00 committed by Thomas Zarebczan
parent 898376888d
commit 1d8105a84a
1 changed files with 9 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
ui/component/autoplayCountdown/view.jsx
View file

@ -45,9 +45,16 @@ function AutoplayCountdown(props: Props) {
const anyModalPresent = modal !== undefined && modal !== null;
const isTimerPaused = timerPaused || anyModalPresent;
function isAnyInputFocused() {
const activeElement = document.activeElement;
const inputTypes = ['input', 'select', 'textarea'];
return activeElement && inputTypes.includes(activeElement.tagName.toLowerCase());
}
function shouldPauseAutoplay() {
// TODO: use ref instead querySelector
const elm = document.querySelector(`.${CLASSNAME_AUTOPLAY_COUNTDOWN}`);
return elm && elm.getBoundingClientRect().top < 0;
return isAnyInputFocused() || (elm && elm.getBoundingClientRect().top < 0);
}
function getMsgPlayingNext() {
@ -75,7 +82,7 @@ function AutoplayCountdown(props: Props) {
React.useEffect(() => {
let interval;
if (!timerCanceled && nextRecommendedUri) {
if (isTimerPaused) {
if (isTimerPaused || isAnyInputFocused()) {
clearInterval(interval);
setTimer(countdownTime);
} else {