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

157 lines
5.4 KiB
React
Raw Normal View History

// @flow
2019-10-03 23:40:54 +02:00
import * as PAGES from 'constants/pages';
import * as React from 'react';
import Button from 'component/button';
import ClaimPreview from 'component/claimPreview';
import Card from 'component/common/card';
2019-10-01 06:53:33 +02:00
import { YOUTUBE_STATUSES } from 'lbryinc';
import { buildURI } from 'lbry-redux';
2019-10-03 23:40:54 +02:00
import I18nMessage from 'component/i18nMessage';
const STATUS_URL = 'https://lbry.com/youtube/status/';
type Props = {
youtubeChannels: Array<any>,
2019-10-01 06:53:33 +02:00
youtubeImportPending: boolean,
claimChannels: () => void,
updateUser: () => void,
checkYoutubeTransfer: () => void,
videosImported: ?Array<number>, // [currentAmountImported, totalAmountToImport]
2019-10-03 23:40:54 +02:00
hideChannelLink: boolean,
};
export default function YoutubeTransferStatus(props: Props) {
2019-10-01 06:53:33 +02:00
const {
youtubeChannels,
youtubeImportPending,
claimChannels,
videosImported,
checkYoutubeTransfer,
updateUser,
2019-10-03 23:40:54 +02:00
hideChannelLink = false,
2019-10-01 06:53:33 +02:00
} = props;
const hasChannels = youtubeChannels && youtubeChannels.length;
2019-09-30 21:52:53 +02:00
const transferEnabled = youtubeChannels.some(status => status.transferable);
2019-10-01 06:53:33 +02:00
const hasPendingTransfers = youtubeChannels.some(
status => status.transfer_state === YOUTUBE_STATUSES.PENDING_TRANSFER
);
2019-10-03 23:40:54 +02:00
const isYoutubeTransferComplete =
hasChannels && youtubeChannels.every(channel => channel.transfer_state === YOUTUBE_STATUSES.COMPLETED_TRANSFER);
let total;
let complete;
2019-09-30 21:52:53 +02:00
if (hasPendingTransfers && videosImported) {
complete = videosImported[0];
total = videosImported[1];
}
function getMessage(channel) {
const { transferable, transfer_state: transferState, sync_status: syncStatus } = channel;
if (!transferable) {
switch (transferState) {
2019-10-01 06:53:33 +02:00
case YOUTUBE_STATUSES.NOT_TRANSFERRED:
return syncStatus[0].toUpperCase() + syncStatus.slice(1);
2019-10-01 06:53:33 +02:00
case YOUTUBE_STATUSES.PENDING_TRANSFER:
return __('Transfer in progress');
2019-10-01 06:53:33 +02:00
case YOUTUBE_STATUSES.COMPLETED_TRANSFER:
return __('Completed transfer');
}
} else {
return __('Ready to transfer');
}
}
React.useEffect(() => {
2019-10-13 19:41:51 +02:00
// If a channel is transferable, there's nothing to check
2019-09-30 21:52:53 +02:00
if (hasPendingTransfers) {
checkYoutubeTransfer();
let interval = setInterval(() => {
checkYoutubeTransfer();
updateUser();
}, 60 * 1000);
return () => {
clearInterval(interval);
};
}
2019-09-30 21:52:53 +02:00
}, [hasPendingTransfers, checkYoutubeTransfer, updateUser]);
return (
hasChannels &&
2019-10-03 23:40:54 +02:00
!isYoutubeTransferComplete && (
<div>
<Card
2019-09-27 20:56:15 +02:00
title={youtubeChannels.length > 1 ? __('Your YouTube Channels') : __('Your YouTube Channel')}
subtitle={
<span>
2019-10-03 23:40:54 +02:00
{hasPendingTransfers &&
__('Your videos are currently being transferred. There is nothing else for you to do.')}
{transferEnabled && !hasPendingTransfers && __('Your videos are ready to be transferred.')}
{!transferEnabled && !hasPendingTransfers && __('Please check back later.')}
</span>
}
body={
<section>
2019-09-27 20:56:15 +02:00
{youtubeChannels.map((channel, index) => {
2019-10-03 23:40:54 +02:00
const {
lbry_channel_name: channelName,
channel_claim_id: claimId,
status_token: statusToken,
} = channel;
2019-10-01 06:53:33 +02:00
const url = buildURI({ channelName, channelClaimId: claimId });
const transferState = getMessage(channel);
return (
2019-09-27 20:56:15 +02:00
<div key={url} className="card--inline">
2019-10-03 23:40:54 +02:00
{claimId ? (
<ClaimPreview
uri={url}
actions={<span className="help">{transferState}</span>}
properties={false}
/>
) : (
<p className="section--padded">
<I18nMessage
tokens={{
statusLink: <Button button="link" href={STATUS_URL + statusToken} label={__('here')} />,
channelName,
}}
>
2019-12-27 01:00:07 +01:00
%channelName% has not finished syncing and is not ready to be transferred to your account. You
can check the status %statusLink% or check back later.
2019-10-03 23:40:54 +02:00
</I18nMessage>
</p>
)}
</div>
);
})}
{videosImported && (
2019-10-01 06:53:33 +02:00
<div className="section help">{__('%complete% / %total% videos transferred', { complete, total })}</div>
)}
</section>
}
actions={
2019-10-03 23:40:54 +02:00
transferEnabled ? (
<div className="card__actions">
2019-09-30 21:52:53 +02:00
<Button
button="primary"
2019-10-01 06:53:33 +02:00
disabled={youtubeImportPending}
2019-09-30 21:52:53 +02:00
onClick={claimChannels}
label={youtubeChannels.length > 1 ? __('Claim Channels') : __('Claim Channel')}
/>
<Button button="link" label={__('Learn more')} href="https://lbry.com/faq/youtube#transfer" />
</div>
2019-10-03 23:40:54 +02:00
) : !hideChannelLink ? (
<div className="card__actions">
<Button button="primary" navigate={`/$/${PAGES.CHANNELS}`} label={__('View Your Channels')} />
</div>
) : (
false
)
}
/>
</div>
)
);
}