diff --git a/static/app-strings.json b/static/app-strings.json index 826936baf..b06566896 100644 --- a/static/app-strings.json +++ b/static/app-strings.json @@ -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" } diff --git a/ui/component/channelAbout/view.jsx b/ui/component/channelAbout/view.jsx index c18b651f3..98acce7cb 100644 --- a/ui/component/channelAbout/view.jsx +++ b/ui/component/channelAbout/view.jsx @@ -31,6 +31,7 @@ function ChannelAbout(props: Props) {
+ {description && (
diff --git a/ui/component/channelEdit/index.js b/ui/component/channelEdit/index.js index e40609668..eaebfb91f 100644 --- a/ui/component/channelEdit/index.js +++ b/ui/component/channelEdit/index.js @@ -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 => ({ diff --git a/ui/component/channelEdit/view.jsx b/ui/component/channelEdit/view.jsx index 1311a1a3a..784d039ef 100644 --- a/ui/component/channelEdit/view.jsx +++ b/ui/component/channelEdit/view.jsx @@ -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, locations: Array, languages: Array, - updateChannel: any => void, + updateChannel: any => Promise, 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 ( -
- handleThumbnailChange(v)} - currentValue={params.thumbnailUrl} - assetName={'Thumbnail'} - recommended={__('Recommended ratio is 1:1')} - /> +
+
+ handleThumbnailChange(v)} + currentValue={params.thumbnailUrl} + assetName={'Thumbnail'} + recommended={__('Recommended ratio is 1:1')} + /> - handleCoverChange(v)} - currentValue={params.coverUrl} - assetName={'Cover'} - recommended={__('Recommended ratio is 6.25:1')} - /> + handleCoverChange(v)} + currentValue={params.coverUrl} + assetName={'Cover'} + recommended={__('Recommended ratio is 6.25:1')} + /> - setParams({ ...params, title: e.target.value })} - /> - handleBidChange(parseFloat(event.target.value))} - placeholder={0.1} - /> + setParams({ ...params, title: e.target.value })} + /> + handleBidChange(parseFloat(event.target.value))} + placeholder={0.1} + /> - setParams({ ...params, website: e.target.value })} - /> + setParams({ ...params, website: e.target.value })} + /> - setParams({ ...params, email: e.target.value })} - /> + setParams({ ...params, email: e.target.value })} + /> - setParams({ ...params, description: text })} - textAreaMaxLength={FF_MAX_CHARS_IN_DESCRIPTION} - /> + setParams({ ...params, description: text })} + textAreaMaxLength={FF_MAX_CHARS_IN_DESCRIPTION} + /> - { - 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) }); - } - }); - }} - /> -
-
-

- {__('After submitting, you will not see the changes immediately. Please check back in a few minutes.')} -

-
+ { + 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) }); + } + }); + }} + /> +
+
+ {updateError && updateError.length ? ( + {updateError} + ) : ( +

+ {__('After submitting, you will not see the changes immediately. Please check back in a few minutes.')} +

+ )} +
+
); } diff --git a/ui/component/claimAbandonButton/view.jsx b/ui/component/claimAbandonButton/view.jsx index 52d5c37a0..1730e13a0 100644 --- a/ui/component/claimAbandonButton/view.jsx +++ b/ui/component/claimAbandonButton/view.jsx @@ -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