77 lines
2.2 KiB
JavaScript
77 lines
2.2 KiB
JavaScript
// @flow
|
|
import React from 'react';
|
|
import Button from 'component/button';
|
|
import UriIndicator from 'component/uriIndicator';
|
|
import I18nMessage from 'component/i18nMessage';
|
|
import { formatLbryUrlForWeb } from 'util/url';
|
|
import { withRouter } from 'react-router';
|
|
|
|
type Props = {
|
|
history: { push: string => void },
|
|
nextRecommendedClaim: ?StreamClaim,
|
|
nextRecommendedUri: string,
|
|
setPlayingUri: (string | null) => void,
|
|
};
|
|
|
|
function AutoplayCountdown(props: Props) {
|
|
const {
|
|
nextRecommendedUri,
|
|
nextRecommendedClaim,
|
|
setPlayingUri,
|
|
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) {
|
|
// Set the playingUri to null so the app doesn't try to make a floating window with the video that just finished
|
|
setPlayingUri(null);
|
|
push(navigateUrl);
|
|
} else {
|
|
setTimer(timer - 1);
|
|
}
|
|
}, 1000);
|
|
}
|
|
return () => {
|
|
clearInterval(interval);
|
|
};
|
|
}, [timer, navigateUrl, push, timerCanceled, setPlayingUri, nextRecommendedUri]);
|
|
|
|
if (timerCanceled) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className="video-overlay__wrapper">
|
|
<div className="video-overlay__subtitle">
|
|
<I18nMessage tokens={{ channel: <UriIndicator link uri={nextRecommendedUri} /> }}>
|
|
Up Next by %channel%
|
|
</I18nMessage>
|
|
</div>
|
|
<div className="video-overlay__title">{nextTitle}</div>
|
|
|
|
<div className="video-overlay__actions">
|
|
<div className="video-overlay__subtitle">
|
|
{__('Playing in %seconds_left% seconds', { seconds_left: timer })}
|
|
</div>
|
|
<div className="section__actions--centered">
|
|
<Button label={__('Cancel')} button="link" onClick={() => setTimerCanceled(true)} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default withRouter(AutoplayCountdown);
|