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

support channel pending state

Browse source
This commit is contained in:
jessop 2020-06-21 12:51:06 -04:00
parent 6ff1cfc91e
commit e065c81f88
11 changed files with 164 additions and 126 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
static/app-strings.json
View file

@ -1236,5 +1236,8 @@
"Loading your channels...": "Loading your channels...",
"Try Out the App!": "Try Out the App!",
"Download the app to track files you've viewed and downloaded.": "Download the app to track files you've viewed and downloaded.",
"Create a New Channel": "Create a New Channel"
"Create a New Channel": "Create a New Channel",
"Thumbnail source": "Thumbnail source",
"Cover source": "Cover source",
"Your changes will be live in a few minutes": "Your changes will be live in a few minutes"
}

1
ui/component/channelAbout/view.jsx
View file

@ -31,6 +31,7 @@ function ChannelAbout(props: Props) {
<div className="card">
<section className="section card--section">
<Fragment>
<label>{__('Description')}</label>
{description && (
<div className="media__info-text media__info-text--constrained">
<MarkdownPreview content={description} />

2
ui/component/channelEdit/index.js
View file

@ -8,6 +8,7 @@ import {
doUpdateChannel,
makeSelectAmountForUri,
makeSelectClaimForUri,
selectUpdateChannelError,
} from 'lbry-redux';
import ChannelPage from './view';
@ -24,6 +25,7 @@ const select = (state, props) => ({
languages: makeSelectMetadataItemForUri(props.uri, 'languages')(state),
amount: makeSelectAmountForUri(props.uri)(state),
claim: makeSelectClaimForUri(props.uri)(state),
updateError: selectUpdateChannelError(state),
});
const perform = dispatch => ({

207
ui/component/channelEdit/view.jsx
View file

@ -3,10 +3,10 @@ import React, { useState } from 'react';
import { FormField } from 'component/common/form';
import Button from 'component/button';
import SelectAsset from 'component/selectAsset';
import * as PAGES from 'constants/pages';
import { MINIMUM_PUBLISH_BID } from 'constants/claim';
import TagsSearch from 'component/tagsSearch';
import { FF_MAX_CHARS_IN_DESCRIPTION } from 'constants/form-field';
import ErrorText from 'component/common/error-text';
type Props = {
claim: ChannelClaim,
@ -22,10 +22,11 @@ type Props = {
tags: Array<string>,
locations: Array<string>,
languages: Array<string>,
updateChannel: any => void,
updateChannel: any => Promise<any>,
updateThumb: string => void,
updateCover: string => void,
setEditing: boolean => void,
doneEditing: () => void,
updateError: string,
};
function ChannelForm(props: Props) {
@ -41,10 +42,11 @@ function ChannelForm(props: Props) {
locations,
languages,
amount,
setEditing,
doneEditing,
updateChannel,
updateThumb,
updateCover,
updateError,
} = props;
const { claim_id: claimId } = claim;
@ -101,110 +103,119 @@ function ChannelForm(props: Props) {
};
const handleSubmit = () => {
updateChannel(params);
setEditing(false);
updateChannel(params).then(success => {
if (success) {
doneEditing();
}
});
};
// TODO clear and bail after submit
return (
<section className={'card--section'}>
<SelectAsset
onUpdate={v => handleThumbnailChange(v)}
currentValue={params.thumbnailUrl}
assetName={'Thumbnail'}
recommended={__('Recommended ratio is 1:1')}
/>
<div className="card">
<section className={'section card--section'}>
<SelectAsset
onUpdate={v => handleThumbnailChange(v)}
currentValue={params.thumbnailUrl}
assetName={'Thumbnail'}
recommended={__('Recommended ratio is 1:1')}
/>
<SelectAsset
onUpdate={v => handleCoverChange(v)}
currentValue={params.coverUrl}
assetName={'Cover'}
recommended={__('Recommended ratio is 6.25:1')}
/>
<SelectAsset
onUpdate={v => handleCoverChange(v)}
currentValue={params.coverUrl}
assetName={'Cover'}
recommended={__('Recommended ratio is 6.25:1')}
/>
<FormField
type="text"
name="channel_title2"
label={__('Title')}
placeholder={__('Titular Title')}
disabled={false}
value={params.title}
onChange={e => setParams({ ...params, title: e.target.value })}
/>
<FormField
className="form-field--price-amount"
type="number"
name="content_bid2"
step="any"
label={__('Deposit (LBC)')}
postfix="LBC"
value={params.amount}
error={bidError}
min="0.0"
disabled={false}
onChange={event => handleBidChange(parseFloat(event.target.value))}
placeholder={0.1}
/>
<FormField
type="text"
name="channel_title2"
label={__('Title')}
placeholder={__('Titular Title')}
disabled={false}
value={params.title}
onChange={e => setParams({ ...params, title: e.target.value })}
/>
<FormField
className="form-field--price-amount"
type="number"
name="content_bid2"
step="any"
label={__('Deposit (LBC)')}
postfix="LBC"
value={params.amount}
error={bidError}
min="0.0"
disabled={false}
onChange={event => handleBidChange(parseFloat(event.target.value))}
placeholder={0.1}
/>
<FormField
type="text"
name="channel_website2"
label={__('Website')}
placeholder={__('aprettygoodsite.com')}
disabled={false}
value={params.website}
onChange={e => setParams({ ...params, website: e.target.value })}
/>
<FormField
type="text"
name="channel_website2"
label={__('Website')}
placeholder={__('aprettygoodsite.com')}
disabled={false}
value={params.website}
onChange={e => setParams({ ...params, website: e.target.value })}
/>
<FormField
type="text"
name="content_email2"
label={__('Email')}
placeholder={__('yourstruly@example.com')}
disabled={false}
value={params.email}
onChange={e => setParams({ ...params, email: e.target.value })}
/>
<FormField
type="text"
name="content_email2"
label={__('Email')}
placeholder={__('yourstruly@example.com')}
disabled={false}
value={params.email}
onChange={e => setParams({ ...params, email: e.target.value })}
/>
<FormField
type="markdown"
name="content_description2"
label={__('Description')}
placeholder={__('Description of your content')}
value={params.description}
disabled={false}
onChange={text => setParams({ ...params, description: text })}
textAreaMaxLength={FF_MAX_CHARS_IN_DESCRIPTION}
/>
<FormField
type="markdown"
name="content_description2"
label={__('Description')}
placeholder={__('Description of your content')}
value={params.description}
disabled={false}
onChange={text => setParams({ ...params, description: text })}
textAreaMaxLength={FF_MAX_CHARS_IN_DESCRIPTION}
/>
<TagsSearch
suggestMature
disableAutoFocus
tagsPassedIn={params.tags || []}
label={__('Tags Selected')}
onRemove={clickedTag => {
const newTags = params.tags.slice().filter(tag => tag.name !== clickedTag.name);
setParams({ ...params, tags: newTags });
}}
onSelect={newTags => {
newTags.forEach(newTag => {
if (!params.tags.map(savedTag => savedTag.name).includes(newTag.name)) {
setParams({ ...params, tags: [...params.tags, newTag] });
} else {
// If it already exists and the user types it in, remove it
setParams({ ...params, tags: params.tags.filter(tag => tag.name !== newTag.name) });
}
});
}}
/>
<div className={'section__actions'}>
<Button button="primary" label={__('Submit')} onClick={handleSubmit} />
<Button button="link" label={__('Cancel')} navigate={`$/${PAGES.CHANNELS}`} />
</div>
<p className="help">
{__('After submitting, you will not see the changes immediately. Please check back in a few minutes.')}
</p>
</section>
<TagsSearch
suggestMature
disableAutoFocus
tagsPassedIn={params.tags || []}
label={__('Tags Selected')}
onRemove={clickedTag => {
const newTags = params.tags.slice().filter(tag => tag.name !== clickedTag.name);
setParams({ ...params, tags: newTags });
}}
onSelect={newTags => {
newTags.forEach(newTag => {
if (!params.tags.map(savedTag => savedTag.name).includes(newTag.name)) {
setParams({ ...params, tags: [...params.tags, newTag] });
} else {
// If it already exists and the user types it in, remove it
setParams({ ...params, tags: params.tags.filter(tag => tag.name !== newTag.name) });
}
});
}}
/>
<div className={'section__actions'}>
<Button button="primary" label={__('Submit')} onClick={handleSubmit} />
<Button button="link" label={__('Cancel')} onClick={doneEditing} />
</div>
{updateError && updateError.length ? (
<ErrorText>{updateError}</ErrorText>
) : (
<p className="help">
{__('After submitting, you will not see the changes immediately. Please check back in a few minutes.')}
</p>
)}
</section>
</div>
);
}

5
ui/component/claimAbandonButton/view.jsx
View file

@ -8,14 +8,15 @@ type Props = {
doOpenModal: (string, {}) => void,
claim: StreamClaim,
abandonActionCallback: any => void,
iconSize: number,
};
export default function ClaimAbandonButton(props: Props) {
const { doOpenModal, claim, abandonActionCallback } = props;
const { doOpenModal, claim, abandonActionCallback, iconSize } = props;
function abandonClaim() {
doOpenModal(MODALS.CONFIRM_CLAIM_REVOKE, { claim: claim, cb: abandonActionCallback });
}
return <Button button="secondary" icon={ICONS.DELETE} onClick={abandonClaim} />;
return <Button disabled={!claim} button="alt" iconSize={iconSize} icon={ICONS.DELETE} onClick={abandonClaim} />;
}

2
ui/component/claimPreviewTile/view.jsx
View file

@ -61,7 +61,7 @@ function ClaimPreviewTile(props: Props) {
const isRepost = claim && claim.repost_channel_url;
const shouldFetch = claim === undefined;
const thumbnailUrl = useGetThumbnail(uri, claim, streamingUrl, getFile, placeholder) || thumbnail;
const claimsInChannel = (claim && claim.meta.claims_in_channel) || 0;
const claimsInChannel = (claim && claim.meta && claim.meta.claims_in_channel) || 0;
const canonicalUrl = claim && claim.canonical_url;
const navigateUrl = formatLbryUrlForWeb(canonicalUrl || uri || '/');

2
ui/page/channel/index.js
View file

@ -7,6 +7,7 @@ import {
selectCurrentChannelPage,
makeSelectClaimForUri,
selectChannelIsBlocked,
makeSelectClaimIsPending,
} from 'lbry-redux';
import { selectBlackListedOutpoints, doFetchSubCount, makeSelectSubCountForUri } from 'lbryinc';
import { makeSelectIsSubscribed } from 'redux/selectors/subscriptions';
@ -23,6 +24,7 @@ const select = (state, props) => ({
channelIsBlocked: selectChannelIsBlocked(props.uri)(state),
blackListedOutpoints: selectBlackListedOutpoints(state),
subCount: makeSelectSubCountForUri(props.uri)(state),
pending: makeSelectClaimIsPending(props.uri)(state),
});
const perform = dispatch => ({

32
ui/page/channel/view.jsx
View file

@ -46,6 +46,7 @@ type Props = {
}>,
fetchSubCount: string => void,
subCount: number,
pending: boolean,
};
function ChannelPage(props: Props) {
@ -64,6 +65,7 @@ function ChannelPage(props: Props) {
blackListedOutpoints,
fetchSubCount,
subCount,
pending,
} = props;
const { channelName } = parseURI(uri);
@ -98,6 +100,12 @@ function ChannelPage(props: Props) {
history.push(`${url}${search}`);
}
function doneEditing() {
setEditing(false);
setThumbPreview(thumbnail);
setCoverPreview(cover);
}
useEffect(() => {
Lbryio.call('yt', 'get_youtuber', { channel_claim_id: claimId }).then(response => {
if (response.is_verified_youtuber) {
@ -176,11 +184,27 @@ function ChannelPage(props: Props) {
<HelpLink href="https://lbry.com/faq/views" />
</span>
{channelIsMine && !editing && (
<>
{pending ? (
<span>{__('Your changes will be live in a few minutes')}</span>
) : (
<Button
button="alt"
title={__('Edit')}
onClick={() => setEditing(!editing)}
icon={ICONS.EDIT}
iconSize={18}
disabled={pending}
/>
)}
</>
)}
{channelIsMine && editing && (
<Button
button="alt"
title={__('Edit')}
onClick={() => setEditing(!editing)}
icon={ICONS.EDIT}
title={__('Cancel')}
onClick={() => doneEditing()}
icon={ICONS.REMOVE}
iconSize={18}
/>
)}
@ -203,7 +227,7 @@ function ChannelPage(props: Props) {
{editing ? (
<ChannelEdit
uri={uri}
setEditing={setEditing}
doneEditing={doneEditing}
updateThumb={v => setThumbPreview(v)}
updateCover={v => setCoverPreview(v)}
/>

8
ui/page/channels/index.js
View file

@ -1,10 +1,16 @@
import { connect } from 'react-redux';
import { selectMyChannelClaims, doFetchChannelListMine, selectFetchingMyChannels } from 'lbry-redux';
import {
selectMyChannelClaims,
selectMyChannelUrls,
doFetchChannelListMine,
selectFetchingMyChannels,
} from 'lbry-redux';
import { selectYoutubeChannels } from 'redux/selectors/user';
import { doOpenModal } from 'redux/actions/app';
import ChannelsPage from './view';
const select = state => ({
channelUrls: selectMyChannelUrls(state),
channels: selectMyChannelClaims(state),
fetchingChannels: selectFetchingMyChannels(state),
youtubeChannels: selectYoutubeChannels(state),

22
ui/page/channels/view.jsx
View file

@ -11,6 +11,7 @@ import Card from 'component/common/card';
type Props = {
channels: Array<ChannelClaim>,
channelUrls: Array<string>,
fetchChannelListMine: () => void,
fetchingChannels: boolean,
youtubeChannels: ?Array<any>,
@ -18,30 +19,19 @@ type Props = {
};
export default function ChannelsPage(props: Props) {
const { channels, fetchChannelListMine, fetchingChannels, youtubeChannels, openModal } = props;
const { channels, channelUrls, fetchChannelListMine, fetchingChannels, youtubeChannels, openModal } = props;
const hasYoutubeChannels = youtubeChannels && Boolean(youtubeChannels.length);
const hasPendingChannels = channels && channels.some(channel => channel.confirmations < 0);
useEffect(() => {
fetchChannelListMine();
let interval;
if (hasPendingChannels) {
interval = setInterval(() => {
fetchChannelListMine();
}, 5000);
}
return () => {
clearInterval(interval);
};
}, [fetchChannelListMine, hasPendingChannels]);
return (
<Page>
{hasYoutubeChannels && <YoutubeTransferStatus hideChannelLink />}
{channels && Boolean(channels.length) && (
{channelUrls && Boolean(channelUrls.length) && (
<Card
title={__('Your Channels')}
titleActions={
@ -53,12 +43,10 @@ export default function ChannelsPage(props: Props) {
/>
}
isBodyList
body={
<ClaimList isCardBody loading={fetchingChannels} uris={channels.map(channel => channel.permanent_url)} />
}
body={<ClaimList isCardBody loading={fetchingChannels} uris={channelUrls} />}
/>
)}
{!(channels && channels.length) && (
{!(channelUrls && channelUrls.length) && (
<React.Fragment>
{!fetchingChannels ? (
<section className="main--empty">

4
ui/redux/actions/publish.js
View file

@ -6,7 +6,7 @@ import {
batchActions,
selectMyClaims,
doPublish,
doCheckPendingPublishes,
doCheckPendingClaims,
doCheckReflectingFiles,
ACTIONS as LBRY_REDUX_ACTIONS,
} from 'lbry-redux';
@ -101,5 +101,5 @@ export const doCheckPendingPublishesApp = () => (dispatch: Dispatch, getState: G
};
}
};
return dispatch(doCheckPendingPublishes(onConfirmed));
return dispatch(doCheckPendingClaims(onConfirmed));
};