cba2ccf1cb
## Issue Closes 3964 `Add Youtuber info to file page` ## Changes (1) Refactor the YT-info query into `YoutubeBadge` component. (2) For the File Page case, don't show "- last sync <date>" since the date has nothing to do with the file. ## Test [x] YT Channel page [x] YT Channel's claim page [x] Non YT Channel page [x] Non YT Channel's claim page [x] No channel (anonymous) claim page [x] Various RENDER_MODES
50 lines
1.4 KiB
JavaScript
50 lines
1.4 KiB
JavaScript
// @flow
|
|
import * as ICONS from 'constants/icons';
|
|
import * as React from 'react';
|
|
import DateTime from 'component/dateTime';
|
|
import Icon from 'component/common/icon';
|
|
import { Lbryio } from 'lbryinc';
|
|
|
|
type Props = {
|
|
channelClaimId: string,
|
|
includeSyncDate: boolean,
|
|
};
|
|
|
|
export default function YoutubeBadge(props: Props) {
|
|
const { channelClaimId, includeSyncDate = true } = props;
|
|
|
|
const [isVerified, setIsVerified] = React.useState();
|
|
const [lastYtSyncDate, setLastYtSyncDate] = React.useState();
|
|
|
|
React.useEffect(() => {
|
|
if (channelClaimId) {
|
|
Lbryio.call('yt', 'get_youtuber', { channel_claim_id: channelClaimId }).then(response => {
|
|
if (response.is_verified_youtuber) {
|
|
setIsVerified(true);
|
|
setLastYtSyncDate(response.last_synced);
|
|
} else {
|
|
setIsVerified(false);
|
|
setLastYtSyncDate(undefined);
|
|
}
|
|
});
|
|
} else {
|
|
setIsVerified(false);
|
|
setLastYtSyncDate(undefined);
|
|
}
|
|
}, [channelClaimId]);
|
|
|
|
if (isVerified) {
|
|
const str =
|
|
includeSyncDate && lastYtSyncDate
|
|
? __('Official YouTube Creator - Last updated %time_ago%', { time_ago: DateTime.getTimeAgoStr(lastYtSyncDate) })
|
|
: __('Official YouTube Creator');
|
|
return (
|
|
<div className="media__uri--right">
|
|
<Icon icon={ICONS.VALIDATED} size={12} />
|
|
{str}
|
|
</div>
|
|
);
|
|
} else {
|
|
return null;
|
|
}
|
|
}
|