3b98f73a0f
Ticket: 1228 ## Code changes - Pass through `getTimeAgoStr` so that the value gets localized. - Pass the simpler `number` around instead of the `moment` object for better memoization. ## Notable differences Due to how `getTimeAgoStr` is written, we now get to see the time actually counting down, vs "in a few seconds" currently in production. I think the counting-down behavior was the original intentional, since a 1s timer was used (otherwise, a 1-minute timer could be used) ... or maybe not since streams may not start on the dot.
56 lines
1.7 KiB
JavaScript
56 lines
1.7 KiB
JavaScript
// @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';
|
|
import I18nMessage from 'component/i18nMessage';
|
|
import { getTimeAgoStr } from 'util/time';
|
|
|
|
type Props = {
|
|
releaseTimeMs: number,
|
|
};
|
|
|
|
export default function LivestreamScheduledInfo(props: Props) {
|
|
const { releaseTimeMs } = props;
|
|
const [startDateFromNow, setStartDateFromNow] = useState('');
|
|
const [inPast, setInPast] = useState('pending');
|
|
|
|
useEffect(() => {
|
|
const calcTime = () => {
|
|
const zeroDurationStr = '---';
|
|
const timeAgoStr = getTimeAgoStr(releaseTimeMs, true, true, zeroDurationStr);
|
|
|
|
if (timeAgoStr === zeroDurationStr) {
|
|
setInPast(true);
|
|
} else {
|
|
setStartDateFromNow(timeAgoStr);
|
|
setInPast(releaseTimeMs < Date.now());
|
|
}
|
|
};
|
|
|
|
const intervalId = setInterval(calcTime, 1000);
|
|
return () => clearInterval(intervalId);
|
|
}, [releaseTimeMs]);
|
|
|
|
const startDate = moment(releaseTimeMs).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>
|
|
<I18nMessage tokens={{ time_date: startDateFromNow }}>Live %time_date%</I18nMessage>
|
|
<br />
|
|
<span className={'livestream-scheduled__date'}>{startDate}</span>
|
|
</span>
|
|
)}
|
|
{inPast && <span>{__('Starting Soon')}</span>}
|
|
</p>
|
|
</div>
|
|
)
|
|
);
|
|
}
|