2019-09-26 18:28:08 +02:00
|
|
|
// @flow
|
2019-10-03 23:40:54 +02:00
|
|
|
import * as PAGES from 'constants/pages';
|
2019-09-26 18:28:08 +02:00
|
|
|
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/';
|
2019-09-26 18:28:08 +02:00
|
|
|
|
|
|
|
type Props = {
|
|
|
|
youtubeChannels: Array<any>,
|
2019-10-01 06:53:33 +02:00
|
|
|
youtubeImportPending: boolean,
|
2019-09-26 18:28:08 +02:00
|
|
|
claimChannels: () => void,
|
|
|
|
updateUser: () => void,
|
|
|
|
checkYoutubeTransfer: () => void,
|
|
|
|
videosImported: ?Array<number>, // [currentAmountImported, totalAmountToImport]
|
2019-10-03 23:40:54 +02:00
|
|
|
hideChannelLink: boolean,
|
2019-09-26 18:28:08 +02:00
|
|
|
};
|
|
|
|
|
|
|
|
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;
|
2019-09-26 18:28:08 +02:00
|
|
|
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);
|
2019-09-26 18:28:08 +02:00
|
|
|
|
|
|
|
let total;
|
|
|
|
let complete;
|
2019-09-30 21:52:53 +02:00
|
|
|
if (hasPendingTransfers && videosImported) {
|
2019-09-26 18:28:08 +02:00
|
|
|
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:
|
2019-09-26 18:28:08 +02:00
|
|
|
return syncStatus[0].toUpperCase() + syncStatus.slice(1);
|
2019-10-01 06:53:33 +02:00
|
|
|
case YOUTUBE_STATUSES.PENDING_TRANSFER:
|
2019-09-26 18:28:08 +02:00
|
|
|
return __('Transfer in progress');
|
2019-10-01 06:53:33 +02:00
|
|
|
case YOUTUBE_STATUSES.COMPLETED_TRANSFER:
|
2019-09-26 18:28:08 +02:00
|
|
|
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) {
|
2019-09-26 18:28:08 +02:00
|
|
|
checkYoutubeTransfer();
|
|
|
|
|
|
|
|
let interval = setInterval(() => {
|
|
|
|
checkYoutubeTransfer();
|
|
|
|
updateUser();
|
|
|
|
}, 60 * 1000);
|
|
|
|
|
|
|
|
return () => {
|
|
|
|
clearInterval(interval);
|
|
|
|
};
|
|
|
|
}
|
2019-09-30 21:52:53 +02:00
|
|
|
}, [hasPendingTransfers, checkYoutubeTransfer, updateUser]);
|
2019-09-26 18:28:08 +02:00
|
|
|
|
|
|
|
return (
|
|
|
|
hasChannels &&
|
2019-10-03 23:40:54 +02:00
|
|
|
!isYoutubeTransferComplete && (
|
2020-06-30 07:51:15 +02:00
|
|
|
<Card
|
|
|
|
title={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 && __('Please check back later.')}
|
|
|
|
</span>
|
|
|
|
}
|
|
|
|
body={
|
|
|
|
<section>
|
|
|
|
{youtubeChannels.map((channel, index) => {
|
|
|
|
const { lbry_channel_name: channelName, channel_claim_id: claimId, status_token: statusToken } = channel;
|
|
|
|
const url = buildURI({ channelName, channelClaimId: claimId });
|
|
|
|
const transferState = getMessage(channel);
|
|
|
|
return (
|
|
|
|
<div key={url} className="card--inline">
|
|
|
|
{claimId ? (
|
|
|
|
<ClaimPreview
|
|
|
|
uri={url}
|
|
|
|
actions={<span className="help">{transferState}</span>}
|
|
|
|
properties={false}
|
|
|
|
/>
|
|
|
|
) : (
|
|
|
|
<div className="section--padded">
|
|
|
|
<p>
|
|
|
|
<I18nMessage
|
|
|
|
tokens={{
|
|
|
|
channelName,
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
%channelName% is not yet ready to be transferred. Please allow up to one week, though it is
|
|
|
|
frequently faster.
|
|
|
|
</I18nMessage>
|
|
|
|
</p>
|
|
|
|
<p className="help">
|
|
|
|
<I18nMessage
|
|
|
|
tokens={{
|
|
|
|
statusLink: <Button button="link" href={STATUS_URL + statusToken} label={__('here')} />,
|
|
|
|
faqLink: <Button button="link" label={__('FAQ')} href="https://lbry.com/faq/youtube" />,
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
You can check your status %statusLink%. This %faqLink% explains the program in more detail.
|
|
|
|
</I18nMessage>
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
})}
|
|
|
|
{videosImported && (
|
|
|
|
<div className="section help">{__('%complete% / %total% videos transferred', { complete, total })}</div>
|
|
|
|
)}
|
|
|
|
</section>
|
|
|
|
}
|
|
|
|
actions={
|
|
|
|
transferEnabled ? (
|
|
|
|
<div className="card__actions">
|
|
|
|
<Button
|
|
|
|
button="primary"
|
|
|
|
disabled={youtubeImportPending}
|
|
|
|
onClick={claimChannels}
|
|
|
|
label={youtubeChannels.length > 1 ? __('Claim Channels') : __('Claim Channel')}
|
|
|
|
/>
|
|
|
|
<Button button="link" label={__('Learn more')} href="https://lbry.com/faq/youtube#transfer" />
|
|
|
|
</div>
|
|
|
|
) : !hideChannelLink ? (
|
|
|
|
<div className="card__actions">
|
2020-08-26 22:28:33 +02:00
|
|
|
<Button button="primary" navigate={`/$/${PAGES.CHANNELS}`} label={__('View your channels')} />
|
2020-06-30 07:51:15 +02:00
|
|
|
</div>
|
|
|
|
) : (
|
|
|
|
false
|
|
|
|
)
|
|
|
|
}
|
|
|
|
/>
|
2019-09-26 18:28:08 +02:00
|
|
|
)
|
|
|
|
);
|
|
|
|
}
|