lbry-desktop/ui/component/autoplayCountdown/view.jsx

77 lines
2.2 KiB
React
Raw Normal View History

2020-01-27 19:52:25 +01:00
// @flow
import React from 'react';
import Button from 'component/button';
import UriIndicator from 'component/uriIndicator';
2020-01-27 21:02:58 +01:00
import I18nMessage from 'component/i18nMessage';
2020-01-27 19:52:25 +01:00
import { formatLbryUrlForWeb } from 'util/url';
import { withRouter } from 'react-router';
type Props = {
history: { push: string => void },
nextRecommendedClaim: ?StreamClaim,
nextRecommendedUri: string,
2020-01-27 20:32:20 +01:00
setPlayingUri: (string | null) => void,
2020-01-27 19:52:25 +01:00
};
function AutoplayCountdown(props: Props) {
const {
nextRecommendedUri,
nextRecommendedClaim,
2020-01-27 20:32:20 +01:00
setPlayingUri,
2020-01-27 19:52:25 +01:00
history: { push },
} = props;
const nextTitle = nextRecommendedClaim && nextRecommendedClaim.value && nextRecommendedClaim.value.title;
const [timer, setTimer] = React.useState(5);
const [timerCanceled, setTimerCanceled] = React.useState(false);
let navigateUrl;
if (nextTitle) {
navigateUrl = formatLbryUrlForWeb(nextRecommendedUri);
}
React.useEffect(() => {
let interval;
if (!timerCanceled) {
interval = setInterval(() => {
const newTime = timer - 1;
if (newTime === 0) {
2020-01-27 20:32:20 +01:00
// Set the playingUri to null so the app doesn't try to make a floating window with the video that just finished
setPlayingUri(null);
2020-01-27 19:52:25 +01:00
push(navigateUrl);
} else {
setTimer(timer - 1);
}
}, 1000);
}
return () => {
clearInterval(interval);
};
2020-01-27 20:32:20 +01:00
}, [timer, navigateUrl, push, timerCanceled, setPlayingUri, nextRecommendedUri]);
2020-01-27 19:52:25 +01:00
if (timerCanceled) {
return null;
}
return (
<div className="video-overlay__wrapper">
2020-01-27 21:02:58 +01:00
<div className="video-overlay__subtitle">
<I18nMessage tokens={{ channel: <UriIndicator link uri={nextRecommendedUri} /> }}>
Up Next by %channel%
</I18nMessage>
</div>
2020-01-27 19:52:25 +01:00
<div className="video-overlay__title">{nextTitle}</div>
<div className="video-overlay__actions">
2020-01-27 20:32:20 +01:00
<div className="video-overlay__subtitle">
{__('Playing in %seconds_left% seconds', { seconds_left: timer })}
</div>
2020-01-27 19:52:25 +01:00
<div className="section__actions--centered">
2020-01-27 21:02:58 +01:00
<Button label={__('Cancel')} button="link" onClick={() => setTimerCanceled(true)} />
2020-01-27 19:52:25 +01:00
</div>
</div>
</div>
);
}
export default withRouter(AutoplayCountdown);