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

215 lines
8.2 KiB
React
Raw Normal View History

// @flow
import { SITE_NAME } from 'config';
2020-09-03 22:05:38 +02:00
import * as ICONS from 'constants/icons';
import * as React from 'react';
2020-09-03 22:05:38 +02:00
import classnames from 'classnames';
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';
2020-09-03 22:05:38 +02:00
import Spinner from 'component/spinner';
import Icon from 'component/common/icon';
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]
2020-09-03 22:05:38 +02:00
alwaysShow: boolean,
addNewChannel?: boolean,
};
export default function YoutubeTransferStatus(props: Props) {
2019-10-01 06:53:33 +02:00
const {
youtubeChannels,
youtubeImportPending,
claimChannels,
videosImported,
checkYoutubeTransfer,
updateUser,
2020-09-03 22:05:38 +02:00
alwaysShow = false,
addNewChannel,
2019-10-01 06:53:33 +02:00
} = props;
2020-09-03 22:05:38 +02:00
const hasChannels = youtubeChannels && youtubeChannels.length > 0;
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(
2020-09-03 22:05:38 +02:00
status => status.transfer_state === YOUTUBE_STATUSES.YOUTUBE_SYNC_PENDING_TRANSFER
2019-10-01 06:53:33 +02:00
);
2019-10-03 23:40:54 +02:00
const isYoutubeTransferComplete =
2020-09-03 22:05:38 +02:00
hasChannels &&
youtubeChannels.every(
channel =>
channel.transfer_state === YOUTUBE_STATUSES.YOUTUBE_SYNC_COMPLETED_TRANSFER ||
channel.sync_status === YOUTUBE_STATUSES.YOUTUBE_SYNC_ABANDONDED
);
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) {
2020-09-03 22:05:38 +02:00
case YOUTUBE_STATUSES.YOUTUBE_SYNC_NOT_TRANSFERRED:
return syncStatus[0].toUpperCase() + syncStatus.slice(1);
2020-09-03 22:05:38 +02:00
case YOUTUBE_STATUSES.YOUTUBE_SYNC_PENDING_TRANSFER:
return __('Transfer in progress');
2020-09-03 22:05:38 +02:00
case YOUTUBE_STATUSES.YOUTUBE_SYNC_COMPLETED_TRANSFER:
return __('Completed transfer');
2020-09-03 22:05:38 +02:00
case YOUTUBE_STATUSES.YOUTUBE_SYNC_ABANDONDED:
return __('This channel not eligible to by synced');
}
} 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);
};
}
2020-09-03 22:05:38 +02:00
}, [hasPendingTransfers, checkYoutubeTransfer, updateUser, updateUser]);
return (
2020-09-03 22:05:38 +02:00
(alwaysShow || (hasChannels && !isYoutubeTransferComplete)) && (
<Card
title={
isYoutubeTransferComplete
2020-12-11 22:25:05 +01:00
? __('Transfer complete')
: youtubeChannels.length > 1
? __('Your YouTube channels')
: __('Your YouTube channel')
}
subtitle={
<span>
{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 &&
!isYoutubeTransferComplete &&
__('Please check back later. This may take up to 1 week.')}
{isYoutubeTransferComplete && __('View your channel or choose a new channel to sync.')}
</span>
}
body={
<section>
{youtubeChannels.map((channel, index) => {
const {
lbry_channel_name: channelName,
channel_claim_id: claimId,
sync_status: syncStatus,
total_subs: totalSubs,
total_videos: totalVideos,
} = channel;
const url = buildURI({ channelName, channelClaimId: claimId });
const transferState = getMessage(channel);
2020-09-03 22:05:38 +02:00
const isWaitingForSync =
syncStatus === YOUTUBE_STATUSES.YOUTUBE_SYNC_QUEUED ||
syncStatus === YOUTUBE_STATUSES.YOUTUBE_SYNC_PENDINGUPGRADE ||
syncStatus === YOUTUBE_STATUSES.YOUTUBE_SYNC_SYNCING;
const isNotEligible = syncStatus === YOUTUBE_STATUSES.YOUTUBE_SYNC_ABANDONDED;
return (
<div key={url} className="card--inline">
{claimId ? (
<ClaimPreview
uri={url}
actions={<span className="help">{transferState}</span>}
properties={false}
/>
) : (
<div className="section--padded">
2020-09-03 22:05:38 +02:00
{isNotEligible ? (
<div>{__('%channelName% is not eligible to be synced', { channelName })}</div>
) : (
<div className="progress">
<div className="progress__item">
{__('Claim your handle %handle%', { handle: channelName })}
<Icon icon={ICONS.COMPLETED} className="progress__complete-icon--completed" />
</div>
<div className="progress__item">
{__('Agree to sync')}{' '}
<Icon icon={ICONS.COMPLETED} className="progress__complete-icon--completed" />
</div>
<div className="progress__item">
{__('Wait for your videos to be synced')}
{isWaitingForSync ? (
<Spinner type="small" />
) : (
<Icon icon={ICONS.COMPLETED} className="progress__complete-icon--completed" />
)}
</div>
<div className="help--inline">
{__('Syncing %total_videos% videos from your channel with %total_subs% subscriptions.', {
total_videos: totalVideos,
total_subs: totalSubs,
})}
</div>
2020-09-03 22:05:38 +02:00
<div className="progress__item">
{__('Claim your channel')}
<Icon icon={ICONS.NOT_COMPLETED} className={classnames('progress__complete-icon')} />
</div>
</div>
)}
</div>
)}
</div>
);
})}
{videosImported && (
<div className="section help">{__('%complete% / %total% videos transferred', { complete, total })}</div>
)}
</section>
}
actions={
2020-09-03 22:05:38 +02:00
<>
<div className="section__actions">
{!isYoutubeTransferComplete && (
<Button
button="primary"
disabled={youtubeImportPending || !transferEnabled}
onClick={claimChannels}
label={youtubeChannels.length > 1 ? __('Claim Channels') : __('Claim Channel')}
/>
)}
<Button
button={isYoutubeTransferComplete ? 'primary' : 'link'}
label={__('Explore %SITE_NAME%', { SITE_NAME })}
navigate="/"
/>
</div>
2020-09-03 22:05:38 +02:00
<p className="help">
{youtubeChannels.length > 1
? __('You will be able to claim your channels once they finish syncing.')
: __('You will be able to claim your channel once it has finished syncing.')}{' '}
<Button button="link" label={__('Learn More')} href="https://lbry.com/faq/youtube#transfer" />{' '}
{addNewChannel && <Button button="link" label={__('Add Another Channel')} onClick={addNewChannel} />}
2020-09-03 22:05:38 +02:00
</p>
</>
}
/>
)
);
}