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

Pause 'Autoplay' when a Modal is present.

Browse source
This commit is contained in:
infiinte-persistence 2020-06-22 16:34:39 +08:00 • committed by Sean Yesmunt
parent 39db18046f
commit 2c695b8150
2 changed files with 10 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ui/component/autoplayCountdown/index.js
View file

@ -6,6 +6,7 @@ import { makeSelectIsPlayerFloating, makeSelectNextUnplayedRecommended } from 'r
import { makeSelectClientSetting } from 'redux/selectors/settings'; import { makeSelectClientSetting } from 'redux/selectors/settings';
import { doSetPlayingUri, doPlayUri } from 'redux/actions/content'; import { doSetPlayingUri, doPlayUri } from 'redux/actions/content';
import AutoplayCountdown from './view'; import AutoplayCountdown from './view';
import { selectModal } from 'redux/selectors/app';
/* /*
AutoplayCountdown does not fetch it's own next content to play, it relies on <RecommendedContent> being rendered. This is dumb but I'm just the guy who noticed AutoplayCountdown does not fetch it's own next content to play, it relies on <RecommendedContent> being rendered. This is dumb but I'm just the guy who noticed
@ -17,6 +18,7 @@ const select = (state, props) => {
nextRecommendedClaim: makeSelectClaimForUri(nextRecommendedUri)(state), nextRecommendedClaim: makeSelectClaimForUri(nextRecommendedUri)(state),
isFloating: makeSelectIsPlayerFloating(props.location)(state), isFloating: makeSelectIsPlayerFloating(props.location)(state),
autoplay: makeSelectClientSetting(SETTINGS.AUTOPLAY)(state), autoplay: makeSelectClientSetting(SETTINGS.AUTOPLAY)(state),
modal: selectModal(state),
}; };
}; };

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

@ -13,6 +13,7 @@ type Props = {
isFloating: boolean, isFloating: boolean,
doSetPlayingUri: (string | null) => void, doSetPlayingUri: (string | null) => void,
doPlayUri: string => void, doPlayUri: string => void,
modal: { id: string, modalProps: {} },
}; };
function AutoplayCountdown(props: Props) { function AutoplayCountdown(props: Props) {
@ -23,6 +24,7 @@ function AutoplayCountdown(props: Props) {
doPlayUri, doPlayUri,
isFloating, isFloating,
history: { push }, history: { push },
modal,
} = props; } = props;
const nextTitle = nextRecommendedClaim && nextRecommendedClaim.value && nextRecommendedClaim.value.title; const nextTitle = nextRecommendedClaim && nextRecommendedClaim.value && nextRecommendedClaim.value.title;
@ -32,6 +34,8 @@ function AutoplayCountdown(props: Props) {
const [timer, setTimer] = React.useState(countdownTime); const [timer, setTimer] = React.useState(countdownTime);
const [timerCanceled, setTimerCanceled] = React.useState(false); const [timerCanceled, setTimerCanceled] = React.useState(false);
const [timerPaused, setTimerPaused] = React.useState(false); const [timerPaused, setTimerPaused] = React.useState(false);
const anyModalPresent = modal !== undefined && modal !== null;
const isTimerPaused = timerPaused || anyModalPresent;
let navigateUrl; let navigateUrl;
if (nextTitle) { if (nextTitle) {
@ -82,7 +86,7 @@ function AutoplayCountdown(props: Props) {
React.useEffect(() => { React.useEffect(() => {
let interval; let interval;
if (!timerCanceled && nextRecommendedUri) { if (!timerCanceled && nextRecommendedUri) {
if (timerPaused) { if (isTimerPaused) {
clearInterval(interval); clearInterval(interval);
setTimer(countdownTime); setTimer(countdownTime);
} else { } else {
@ -99,7 +103,7 @@ function AutoplayCountdown(props: Props) {
return () => { return () => {
clearInterval(interval); clearInterval(interval);
}; };
}, [timer, doNavigate, navigateUrl, push, timerCanceled, timerPaused, nextRecommendedUri]); }, [timer, doNavigate, navigateUrl, push, timerCanceled, isTimerPaused, nextRecommendedUri]);
if (timerCanceled || !nextRecommendedUri) { if (timerCanceled || !nextRecommendedUri) {
return null; return null;
@ -119,12 +123,12 @@ function AutoplayCountdown(props: Props) {
<div className={'autoplay-countdown__button autoplay-countdown__button--' + (timer % 5)}> <div className={'autoplay-countdown__button autoplay-countdown__button--' + (timer % 5)}>
<Button onClick={doNavigate} iconSize={30} title={__('Play')} className="button--icon button--play" /> <Button onClick={doNavigate} iconSize={30} title={__('Play')} className="button--icon button--play" />
</div> </div>
{timerPaused && ( {isTimerPaused && (
<div className="file-viewer__overlay-secondary autoplay-countdown__counter"> <div className="file-viewer__overlay-secondary autoplay-countdown__counter">
{__('Autoplay timer paused.')}{' '} {__('Autoplay timer paused.')}{' '}
</div> </div>
)} )}
{!timerPaused && ( {!isTimerPaused && (
<div className="file-viewer__overlay-secondary autoplay-countdown__counter"> <div className="file-viewer__overlay-secondary autoplay-countdown__counter">
{__('Playing in %seconds_left% seconds...', { seconds_left: timer })}{' '} {__('Playing in %seconds_left% seconds...', { seconds_left: timer })}{' '}
<Button label={__('Cancel')} button="link" onClick={() => setTimerCanceled(true)} /> <Button label={__('Cancel')} button="link" onClick={() => setTimerCanceled(true)} />