50 lines
1.3 KiB
React
50 lines
1.3 KiB
React
|
// @flow
|
||
|
|
|
||
|
|
import React, { useState, useEffect } from 'react';
|
||
|
|
import * as ICONS from 'constants/icons';
|
||
|
|
import Icon from 'component/common/icon';
|
||
|
|
import moment from 'moment';
|
||
|
|
import 'scss/component/livestream-scheduled-info.scss';
|
||
|
|
|
||
|
|
type Props = {
|
||
|
|
release: any,
|
||
|
|
};
|
||
|
|
|
||
|
|
export default function LivestreamScheduledInfo(props: Props) {
|
||
|
|
const { release } = props;
|
||
|
|
const [startDateFromNow, setStartDateFromNow] = useState(release.fromNow());
|
||
|
|
const [inPast, setInPast] = useState('pending');
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const calcTime = () => {
|
||
|
|
setStartDateFromNow(release.fromNow());
|
||
|
|
setInPast(release.isBefore(moment()));
|
||
|
|
};
|
||
|
|
calcTime();
|
||
|
|
const intervalId = setInterval(calcTime, 1000);
|
||
|
|
return () => {
|
||
|
|
clearInterval(intervalId);
|
||
|
|
};
|
||
|
|
}, [release]);
|
||
|
|
|
||
|
|
const startDate = release.format('MMMM Do, h:mm a');
|
||
|
|
|
||
|
|
return (
|
||
|
|
inPast !== 'pending' && (
|
||
|
|
<div className={'livestream-scheduled'}>
|
||
|
|
<Icon icon={ICONS.LIVESTREAM_SOLID} size={32} />
|
||
|
|
<p className={'livestream-scheduled__time'}>
|
||
|
|
{!inPast && (
|
||
|
|
<span>
|
||
|
|
<span>Live {startDateFromNow}</span>
|
||
|
|
<br />
|
||
|
|
<span className={'livestream-scheduled__date'}>{startDate}</span>
|
||
|
|
</span>
|
||
|
|
)}
|
||
|
|
{inPast && <span>{__('Starting Soon')}</span>}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
);
|
||
|
|
}
|