commit
999599ddb5
13 changed files with 179 additions and 130 deletions
|
@ -135,7 +135,7 @@
|
|||
"imagesloaded": "^4.1.4",
|
||||
"json-loader": "^0.5.4",
|
||||
"lbry-format": "https://github.com/lbryio/lbry-format.git",
|
||||
"lbry-redux": "lbryio/lbry-redux#f8ac5359d9d05fba2c3a536003a9d4c64b86c9f0",
|
||||
"lbry-redux": "lbryio/lbry-redux#e9d03635883fbe87f1835fca0bf28b402cca6696",
|
||||
"lbryinc": "lbryio/lbryinc#72eee35f5181940eb4a468a27ddb2a2a4e362fb0",
|
||||
"lint-staged": "^7.0.2",
|
||||
"localforage": "^1.7.1",
|
||||
|
|
|
@ -1236,5 +1236,11 @@
|
|||
"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",
|
||||
"Submitting": "Submitting",
|
||||
"Thumbnail Recommended ratio is 1:1": "Thumbnail Recommended ratio is 1:1",
|
||||
"Cover Recommended ratio is 6.25:1": "Cover Recommended ratio is 6.25:1"
|
||||
}
|
|
@ -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} />
|
||||
|
|
|
@ -8,6 +8,8 @@ import {
|
|||
doUpdateChannel,
|
||||
makeSelectAmountForUri,
|
||||
makeSelectClaimForUri,
|
||||
selectUpdateChannelError,
|
||||
selectUpdatingChannel,
|
||||
} from 'lbry-redux';
|
||||
import ChannelPage from './view';
|
||||
|
||||
|
@ -24,6 +26,8 @@ const select = (state, props) => ({
|
|||
languages: makeSelectMetadataItemForUri(props.uri, 'languages')(state),
|
||||
amount: makeSelectAmountForUri(props.uri)(state),
|
||||
claim: makeSelectClaimForUri(props.uri)(state),
|
||||
updateError: selectUpdateChannelError(state),
|
||||
updatingChannel: selectUpdatingChannel(state),
|
||||
});
|
||||
|
||||
const perform = dispatch => ({
|
||||
|
|
|
@ -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,12 @@ 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,
|
||||
updatingChannel: boolean,
|
||||
};
|
||||
|
||||
function ChannelForm(props: Props) {
|
||||
|
@ -41,10 +43,12 @@ function ChannelForm(props: Props) {
|
|||
locations,
|
||||
languages,
|
||||
amount,
|
||||
setEditing,
|
||||
doneEditing,
|
||||
updateChannel,
|
||||
updateThumb,
|
||||
updateCover,
|
||||
updateError,
|
||||
updatingChannel,
|
||||
} = props;
|
||||
const { claim_id: claimId } = claim;
|
||||
|
||||
|
@ -101,110 +105,123 @@ 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={updatingChannel ? __('Submitting...') : __('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>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -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} />;
|
||||
}
|
||||
|
|
|
@ -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 || '/');
|
||||
|
||||
|
|
|
@ -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 => ({
|
||||
|
|
|
@ -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)}
|
||||
/>
|
||||
|
|
|
@ -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),
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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));
|
||||
};
|
||||
|
|
|
@ -6347,9 +6347,9 @@ lazy-val@^1.0.4:
|
|||
yargs "^13.2.2"
|
||||
zstd-codec "^0.1.1"
|
||||
|
||||
lbry-redux@lbryio/lbry-redux#f8ac5359d9d05fba2c3a536003a9d4c64b86c9f0:
|
||||
lbry-redux@lbryio/lbry-redux#e9d03635883fbe87f1835fca0bf28b402cca6696:
|
||||
version "0.0.1"
|
||||
resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/f8ac5359d9d05fba2c3a536003a9d4c64b86c9f0"
|
||||
resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/e9d03635883fbe87f1835fca0bf28b402cca6696"
|
||||
dependencies:
|
||||
proxy-polyfill "0.1.6"
|
||||
reselect "^3.0.0"
|
||||
|
|
Loading…
Reference in a new issue