LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

fix: deal with youtube channels that are queued to sync but haven't started yet

Browse source
This commit is contained in:
Sean Yesmunt 2019-10-01 13:50:34 -04:00
parent 8f7bfafae8
commit 6843d5ca07
10 changed files with 98 additions and 115 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/ui/component/header/view.jsx
View file

@ -71,6 +71,12 @@ const Header = (props: Props) => {
icon={ICONS.LBRY}
navigate="/"
/>
<Button
className="header__navigation-item header__navigation-item--lbry"
label={__('auth')}
icon={ICONS.LBRY}
navigate="/$/signin"
/>
{/* @if TARGET='app' */}
{!minimal && (

21
src/ui/component/userSignIn/view.jsx
View file

@ -8,9 +8,10 @@ import { DEFAULT_BID_FOR_FIRST_CHANNEL } from 'component/userFirstChannel/view';
import { rewards as REWARDS, YOUTUBE_STATUSES } from 'lbryinc';
import UserVerify from 'component/userVerify';
import Spinner from 'component/spinner';
import YoutubeTransferWelcome from 'component/youtubeTransferWelcome';
import YoutubeTransferStatus from 'component/youtubeTransferStatus';
import SyncPassword from 'component/syncPassword';
import useFetched from 'effects/use-fetched';
import Confetti from 'react-confetti';
type Props = {
user: ?User,
@ -59,9 +60,12 @@ function UserSignIn(props: Props) {
const channelCount = channels ? channels.length : 0;
const hasClaimedEmailAward = claimedRewards.some(reward => reward.reward_type === REWARDS.TYPE_CONFIRM_EMAIL);
const hasYoutubeChannels = youtubeChannels && Boolean(youtubeChannels.length);
const hasTransferrableYoutubeChannels = hasYoutubeChannels && youtubeChannels.some(channel => channel.transferable);
const hasPendingYoutubeTransfer =
hasYoutubeChannels && youtubeChannels.some(channel => channel.transfer_state === YOUTUBE_STATUSES.PENDING_TRANSFER);
// const hasTransferrableYoutubeChannels = hasYoutubeChannels && youtubeChannels.some(channel => channel.transferable);
// const hasPendingYoutubeTransfer =
// hasYoutubeChannels && youtubeChannels.some(channel => channel.transfer_state === YOUTUBE_STATUSES.PENDING_TRANSFER);
const isYoutubeTransferComplete =
hasYoutubeChannels &&
youtubeChannels.every(channel => channel.transfer_state === YOUTUBE_STATUSES.COMPLETED_TRANSFER);
// Complexity warning
// We can't just check if we are currently fetching something
@ -81,8 +85,7 @@ function UserSignIn(props: Props) {
const showSyncPassword = syncEnabled && getSyncError && !hasSynced;
const showChannelCreation =
hasVerifiedEmail && balance && balance > DEFAULT_BID_FOR_FIRST_CHANNEL && channelCount === 0 && !hasYoutubeChannels;
const showYoutubeTransfer =
hasVerifiedEmail && hasYoutubeChannels && (hasTransferrableYoutubeChannels || hasPendingYoutubeTransfer);
const showYoutubeTransfer = hasVerifiedEmail && hasYoutubeChannels && !isYoutubeTransferComplete;
const showLoadingSpinner =
canHijackSignInFlowWithSpinner && (isCurrentlyFetchingSomething || isWaitingForSomethingToFinish);
@ -109,7 +112,11 @@ function UserSignIn(props: Props) {
showSyncPassword && <SyncPassword />,
showChannelCreation && <UserFirstChannel />,
// @if TARGET='app'
showYoutubeTransfer && <YoutubeTransferWelcome />,
showYoutubeTransfer && (
<div>
<YoutubeTransferStatus /> <Confetti recycle={false} style={{ position: 'fixed' }} />
</div>
),
// @endif
showLoadingSpinner && (
<div className="main--empty">

52
src/ui/component/youtubeTransferStatus/view.jsx
View file

@ -1,10 +1,14 @@
// @flow
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';
import { YOUTUBE_STATUSES } from 'lbryinc';
import { buildURI } from 'lbry-redux';
import I18nMessage from 'component/i18nMessage';
const STATUS_URL = 'https://lbry.com/youtube/status/';
type Props = {
youtubeChannels: Array<any>,
@ -13,6 +17,7 @@ type Props = {
updateUser: () => void,
checkYoutubeTransfer: () => void,
videosImported: ?Array<number>, // [currentAmountImported, totalAmountToImport]
hideChannelLink: boolean,
};
export default function YoutubeTransferStatus(props: Props) {
@ -23,13 +28,15 @@ export default function YoutubeTransferStatus(props: Props) {
videosImported,
checkYoutubeTransfer,
updateUser,
hideChannelLink = false,
} = props;
const hasChannels = youtubeChannels && youtubeChannels.length;
const transferEnabled = youtubeChannels.some(status => status.transferable);
const hasPendingTransfers = youtubeChannels.some(
status => status.transfer_state === YOUTUBE_STATUSES.PENDING_TRANSFER
);
const isYoutubeTransferComplete =
hasChannels && youtubeChannels.every(channel => channel.transfer_state === YOUTUBE_STATUSES.COMPLETED_TRANSFER);
let total;
let complete;
@ -72,26 +79,49 @@ export default function YoutubeTransferStatus(props: Props) {
return (
hasChannels &&
(hasPendingTransfers || transferEnabled) && (
!isYoutubeTransferComplete && (
<div>
<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.')
: __('Your videos are ready to be transferred.')}
{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 } = channel;
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">
<ClaimPreview uri={url} actions={<span className="help">{transferState}</span>} properties={''} />
{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,
}}
>
%channelName% is not ready to be transferred. You can check the status %statusLink% or check
back later.
</I18nMessage>
</p>
)}
</div>
);
})}
@ -101,7 +131,7 @@ export default function YoutubeTransferStatus(props: Props) {
</section>
}
actions={
transferEnabled && (
transferEnabled ? (
<div className="card__actions">
<Button
button="primary"
@ -111,6 +141,12 @@ export default function YoutubeTransferStatus(props: Props) {
/>
<Button button="link" label={__('Learn more')} href="https://lbry.com/faq/youtube#transfer" />
</div>
) : !hideChannelLink ? (
<div className="card__actions">
<Button button="primary" navigate={`/$/${PAGES.CHANNELS}`} label={__('View Your Channels')} />
</div>
) : (
false
)
}
/>

25
src/ui/component/youtubeTransferWelcome/index.js
View file

@ -1,25 +0,0 @@
import { connect } from 'react-redux';
import {
selectYoutubeChannels,
selectYouTubeImportPending,
selectUserIsPending,
doClaimYoutubeChannels,
doUserFetch,
} from 'lbryinc';
import YoutubeChannelList from './view';
const select = state => ({
youtubeChannels: selectYoutubeChannels(state),
youtubeImportPending: selectYouTubeImportPending(state),
userFetchPending: selectUserIsPending(state),
});
const perform = dispatch => ({
claimChannels: () => dispatch(doClaimYoutubeChannels()),
updateUser: () => dispatch(doUserFetch()),
});
export default connect(
select,
perform
)(YoutubeChannelList);

72
src/ui/component/youtubeTransferWelcome/view.jsx
View file

@ -1,72 +0,0 @@
// @flow
import * as PAGES from 'constants/pages';
import React from 'react';
import classnames from 'classnames';
import ClaimPreview from 'component/claimPreview';
import Button from 'component/button';
import Confetti from 'react-confetti';
import { YOUTUBE_STATUSES } from 'lbryinc';
type Props = {
youtubeChannels: Array<{ lbry_channel_name: string, channel_claim_id: string, transfer_state: string }>,
claimChannels: () => void,
};
export default function UserYoutubeTransfer(props: Props) {
const { youtubeChannels, claimChannels } = props;
const hasYoutubeChannels = youtubeChannels && youtubeChannels.length;
const hasPendingYoutubeTransfer =
hasYoutubeChannels && youtubeChannels.some(channel => channel.transfer_state === YOUTUBE_STATUSES.PENDING_TRANSFER);
return (
<div>
<div className="section__header">
{!hasPendingYoutubeTransfer ? (
<React.Fragment>
<h1 className="section__title--large">{__('Welcome back!')}</h1>
<p className="section__subtitle">{__('Your channel is ready to be sent over.')}</p>
</React.Fragment>
) : (
<React.Fragment>
<h1 className="section__title--large">{__('Good To Go!')}</h1>
<p className="section__subtitle">
{__('You now control your channel and your videos are being transferred to your account.')}
</p>
</React.Fragment>
)}
</div>
<section className="section">
{youtubeChannels.map(({ lbry_channel_name: channelName, channel_claim_id: claimId }) => (
<div key={channelName} className={classnames('card--inline')}>
<ClaimPreview disabled onClick={() => {}} actions={false} uri={`lbry://${channelName}#${claimId}`} />
</div>
))}
</section>
{hasPendingYoutubeTransfer ? (
<section className="section">
<h1 className="section__title">{__('Transfer In Progress...')}</h1>
<p className="section__subtitle">{__('You can now publish and comment using your official channel.')}</p>
<div className="card__actions">
<Button
button="primary"
label={youtubeChannels.length > 1 ? __('View Your Channels') : __('View Your Channel')}
navigate={`/$/${PAGES.CHANNELS}`}
/>
</div>
</section>
) : (
<section className="section">
<h1 className="section__title">{__('Begin Transfer')}</h1>
<div className="section__actions">
<Button button="primary" label={__('Transfer')} onClick={claimChannels} />
</div>
</section>
)}
{hasPendingYoutubeTransfer && <Confetti recycle={false} style={{ position: 'fixed' }} />}
</div>
);
}

2
src/ui/page/channels/view.jsx
View file

@ -23,7 +23,7 @@ export default function ChannelsPage(props: Props) {
return (
<Page>
{/* @if TARGET='app' */}
{hasYoutubeChannels && <YoutubeTransferStatus />}
{hasYoutubeChannels && <YoutubeTransferStatus hideChannelLink />}
{/* @endif */}
{channels && channels.length ? (

5
src/ui/scss/component/_card.scss
View file

@ -40,6 +40,11 @@
.card--inline {
border: 1px solid $lbry-gray-1;
border-radius: var(--card-radius);
margin-bottom: var(--spacing-medium);
&:last-of-type {
margin-bottom: 0;
}
[data-mode='dark'] & {
border-color: var(--dm-color-03);

4
src/ui/scss/component/_main.scss
View file

@ -74,6 +74,10 @@
align-items: flex-start;
max-width: 40rem;
text-align: left;
& > * {
width: 100%;
}
}
.main--full-width {

2
src/ui/scss/component/section.scss
View file

@ -7,7 +7,7 @@
}
.section--padded {
padding: var(--spacing-large);
padding: var(--spacing-medium);
}
.section--small {

24
static/app-strings.json
View file

@ -746,5 +746,27 @@
"Transfer in progress": "Transfer in progress",
"%complete% / %total% videos transferred": "%complete% / %total% videos transferred",
"Available Rewards": "Available Rewards",
"You have %credit_amount% in unclaimed rewards.": "You have %credit_amount% in unclaimed rewards."
"You have %credit_amount% in unclaimed rewards.": "You have %credit_amount% in unclaimed rewards.",
"No Channels Created Yet": "No Channels Created Yet",
"Create A Channel": "Create A Channel",
"Something about it not being here": "Something about it not being here",
"%channelName% is not ready to be transferred. Please check back later.": "%channelName% is not ready to be transferred. Please check back later.",
"Here": "Here",
"'%channelName% is not ready to be transferred. You can check the status %link% or check back later.": "'%channelName% is not ready to be transferred. You can check the status %link% or check back later.",
"%channelName% is not ready to be transferred. You can check the status %link% or check back later.": "%channelName% is not ready to be transferred. You can check the status %link% or check back later.",
"here": "here",
"Live help is available most hours in the %channel% channel of our Discord chat room. Or you can always email us at help@lbry.com.": "Live help is available most hours in the %channel% channel of our Discord chat room. Or you can always email us at help@lbry.com.",
"Your LBRY credits are controllable by you and only you, via a wallet file stored locally on your computer.": "Your LBRY credits are controllable by you and only you, via a wallet file stored locally on your computer.",
"However, it is easy to back up manually. To backup your wallet, make a copy of the folder listed below:": "However, it is easy to back up manually. To backup your wallet, make a copy of the folder listed below:",
"Access to these files are equivalent to having access to your credits. Keep any copies you make of your wallet in a secure place. For more details on backing up and best practices %helpLink%.": "Access to these files are equivalent to having access to your credits. Keep any copies you make of your wallet in a secure place. For more details on backing up and best practices %helpLink%.",
"%channelName% is not ready to be transferred. You can check the status %statusLink% or check back later.": "%channelName% is not ready to be transferred. You can check the status %statusLink% or check back later.",
"Your videos are ready to be transferred.": "Your videos are ready to be transferred.",
"Ready to transfer": "Ready to transfer",
"Claim Channels": "Claim Channels",
"Please check back later": "Please check back later",
"Your YouTube Channel": "Your YouTube Channel",
"Claim Channel": "Claim Channel",
"auth": "auth",
"Your videos are currently being transferred. .": "Your videos are currently being transferred. .",
"Please check back later.": "Please check back later."
}