diff --git a/package.json b/package.json index d0e4af11d..211f98dc9 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/static/app-strings.json b/static/app-strings.json index 826936baf..a3cc41820 100644 --- a/static/app-strings.json +++ b/static/app-strings.json @@ -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" +} \ No newline at end of file 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..224072731 100644 --- a/ui/component/channelEdit/index.js +++ b/ui/component/channelEdit/index.js @@ -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 => ({ diff --git a/ui/component/channelEdit/view.jsx b/ui/component/channelEdit/view.jsx index 1311a1a3a..43b0b7ee0 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,12 @@ 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, + 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 ( -
- 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