diff --git a/package.json b/package.json index a45af625f..e8569647a 100644 --- a/package.json +++ b/package.json @@ -124,7 +124,7 @@ "jsmediatags": "^3.8.1", "json-loader": "^0.5.4", "lbry-format": "https://github.com/lbryio/lbry-format.git", - "lbry-redux": "lbryio/lbry-redux#9a676ee311d573b84d11f402d918aeee77be76e1", + "lbry-redux": "lbryio/lbry-redux#efccab44cb025a14fd81ec05ffca0314710c8529", "lbryinc": "lbryio/lbryinc#43d382d9b74d396a581a74d87e4c53105e04f845", "lint-staged": "^7.0.2", "localforage": "^1.7.1", diff --git a/src/ui/component/channelForm/index.js b/src/ui/component/channelEdit/index.js similarity index 100% rename from src/ui/component/channelForm/index.js rename to src/ui/component/channelEdit/index.js diff --git a/src/ui/component/channelEdit/view.jsx b/src/ui/component/channelEdit/view.jsx new file mode 100644 index 000000000..1ecae9291 --- /dev/null +++ b/src/ui/component/channelEdit/view.jsx @@ -0,0 +1,204 @@ +// @flow +import React, { useState } from 'react'; +import { parseURI } from 'lbry-redux'; +import { Form, FormField } from 'component/common/form'; +import Button from 'component/button'; + +import SelectAsset from '../selectAsset/view'; + +type Props = { + uri: string, + + title: ?string, + amount: string, + cover: ?string, + thumbnail: ?string, + location: { search: string }, + description: string, + website: string, + email: string, + balance: number, + tags: Array, + locations: Array, + languages: Array, + + updateChannel: any => void, + + updateThumb: string => void, + updateCover: string => void, + setEditing: boolean => void, +}; + +function ChannelForm(props: Props) { + const { + uri, + title, + cover, + description, + website, + email, + thumbnail, + tags, + locations, + languages, + amount, + updateChannel, + setEditing, + updateThumb, + updateCover, + } = props; + const { claimId } = parseURI(uri); + + // fill this in with sdk data + const channelParams = { + website: website, + email: email, + languages: languages || [], + cover: cover, + description: description, + locations: locations || [], + title: title, + thumbnail: thumbnail, + tags: tags || [], + claim_id: claimId, + amount: amount, + }; + + const [params, setParams] = useState(channelParams); + const [bidError, setBidError] = useState(''); + + const MINIMUM_PUBLISH_BID = 0.00000001; + // If a user changes tabs, update the url so it stays on the same page if they refresh. + // We don't want to use links here because we can't animate the tab change and using links + // would alter the Tab label's role attribute, which should stay role="tab" to work with keyboards/screen readers. + + const handleBidChange = (bid: number) => { + const { balance, amount } = props; + const totalAvailableBidAmount = parseFloat(amount) + parseFloat(balance); + setParams({ ...params, amount: bid }); + setBidError(''); + if (bid <= 0.0 || isNaN(bid)) { + setBidError(__('Deposit cannot be 0')); + } else if (totalAvailableBidAmount === bid) { + setBidError(__('Please decrease your deposit to account for transaction fees')); + } else if (totalAvailableBidAmount < bid) { + setBidError(__('Deposit cannot be higher than your balance')); + } else if (bid <= MINIMUM_PUBLISH_BID) { + setBidError(__('Your deposit must be higher')); + } + }; + + const handleThumbnailChange = (url: string) => { + setParams({ ...params, thumbnail: url }); + updateThumb(url); + }; + + const handleCoverChange = (url: string) => { + setParams({ ...params, cover: url }); + updateCover(url); + }; + // TODO clear and bail after submit + return ( +
+
+

{__('We can explain...')}

+

+ {__( + "We know this page won't win any design awards, we just wanted to release a very very very basic version that just barely kinda works so people can use it right now. There is a much nicer version being worked on." + )} +

+
+
updateChannel(channelParams)}> +
+ handleThumbnailChange(v)} + currentValue={params.thumbnail} + assetName={'Thumbnail'} + recommended={'(400x400)'} + /> + + handleCoverChange(v)} + currentValue={params.cover} + assetName={'Cover'} + recommended={'(1000x300)'} + /> + + setParams({ ...params, title: e.target.value })} + /> + handleBidChange(parseFloat(event.target.value))} + placeholder={0.1} + /> + + setParams({ ...params, website: e.target.value })} + /> + + setParams({ ...params, email: e.target.value })} + /> + + setParams({ ...params, description: text })} + /> +
+
+
+
+
+ ); +} + +export default ChannelForm; diff --git a/src/ui/component/channelForm/view.jsx b/src/ui/component/channelForm/view.jsx deleted file mode 100644 index 418615c06..000000000 --- a/src/ui/component/channelForm/view.jsx +++ /dev/null @@ -1,208 +0,0 @@ -// @flow -import React, { useState } from 'react'; -import { parseURI } from 'lbry-redux'; -import { Form, FormField } from 'component/common/form'; -import Button from 'component/button'; - -import SelectAsset from '../../component/selectAsset/view'; - -type Props = { - uri: string, - - title: ?string, - amount: string, - cover: ?string, - thumbnail: ?string, - location: { search: string }, - description: string, - website: string, - email: string, - balance: number, - tags: Array, - locations: Array, - languages: Array, - - updateChannel: any => void, - - updateThumb: string => void, - updateCover: string => void, - setEditing: boolean => void, -}; - -function ChannelForm(props: Props) { - const { - uri, - title, - cover, - description, - website, - email, - thumbnail, - tags, - locations, - languages, - amount, - updateChannel, - setEditing, - updateThumb, - updateCover, - } = props; - const { claimId } = parseURI(uri); - - // fill this in with sdk data - const channelParams = { - website: website, - email: email, - languages: languages || [], - cover: cover, - description: description, - locations: locations || [], - title: title, - thumbnail: thumbnail, - tags: tags || [], - claim_id: claimId, - amount: amount, - }; - - const [params, setParams] = useState(channelParams); - const [bidError, setBidError] = useState(''); - - const MINIMUM_PUBLISH_BID = 0.00000001; - // If a user changes tabs, update the url so it stays on the same page if they refresh. - // We don't want to use links here because we can't animate the tab change and using links - // would alter the Tab label's role attribute, which should stay role="tab" to work with keyboards/screen readers. - - const handleBidChange = (bid: number) => { - const { balance, amount } = props; - const totalAvailableBidAmount = parseFloat(amount) + parseFloat(balance); - setParams({ ...params, amount: bid }); - setBidError(''); - if (bid <= 0.0 || isNaN(bid)) { - setBidError(__('Deposit cannot be 0')); - } else if (totalAvailableBidAmount === bid) { - setBidError(__('Please decrease your deposit to account for transaction fees')); - } else if (totalAvailableBidAmount < bid) { - setBidError(__('Deposit cannot be higher than your balance')); - } else if (bid <= MINIMUM_PUBLISH_BID) { - setBidError(__('Your deposit must be higher')); - } - }; - - const handleThumbnailChange = (url: string) => { - setParams({ ...params, thumbnail: url }); - updateThumb(url); - }; - - const handleCoverChange = (url: string) => { - setParams({ ...params, cover: url }); - updateCover(url); - }; - // TODO clear and bail after submit - return ( -
-
-
-
-

{__('Edit')}

-
-
-
-
-
updateChannel(channelParams)}> -
- handleThumbnailChange(v)} - currentValue={params.thumbnail} - assetName={'Thumbnail'} - recommended={'(400x400)'} - /> - - handleCoverChange(v)} - currentValue={params.cover} - assetName={'Cover'} - recommended={'(1000x300)'} - /> - - setParams({ ...params, title: e.target.value })} - /> - handleBidChange(parseFloat(event.target.value))} - placeholder={0.1} - // helper={ - // - // } - /> - - setParams({ ...params, website: e.target.value })} - /> - - setParams({ ...params, email: e.target.value })} - /> - - setParams({ ...params, description: text })} - /> -
-
-
-
-
-
- ); -} - -export default ChannelForm; diff --git a/src/ui/component/selectAsset/view.jsx b/src/ui/component/selectAsset/view.jsx index 09a511a4d..9596bd9d3 100644 --- a/src/ui/component/selectAsset/view.jsx +++ b/src/ui/component/selectAsset/view.jsx @@ -6,7 +6,7 @@ import FileSelector from 'component/common/file-selector'; import Button from 'component/button'; import fs from 'fs'; import path from 'path'; -import { v4 as uuidv4 } from 'uuid'; +import uuid from 'uuid/v4'; const filters = [ { @@ -61,7 +61,7 @@ function SelectAsset(props: Props) { setUploadStatus(SPEECH_UPLOADING); const data = new FormData(); - const name = uuidv4(); + const name = uuid(); const file = new File([thumbnail], fileName, { type: fileType }); data.append('name', name); data.append('file', file); diff --git a/src/ui/page/channel/view.jsx b/src/ui/page/channel/view.jsx index 907dda7f5..afcd2d665 100644 --- a/src/ui/page/channel/view.jsx +++ b/src/ui/page/channel/view.jsx @@ -11,7 +11,7 @@ import { formatLbryUriForWeb } from 'util/uri'; import ChannelContent from 'component/channelContent'; import ChannelAbout from 'component/channelAbout'; import ChannelThumbnail from 'component/channelThumbnail'; -import ChannelForm from 'component/channelForm'; +import ChannelEdit from 'component/channelEdit'; import * as ICONS from 'constants/icons'; const PAGE_VIEW_QUERY = `view`; @@ -43,7 +43,7 @@ function ChannelPage(props: Props) { // If a user changes tabs, update the url so it stays on the same page if they refresh. // We don't want to use links here because we can't animate the tab change and using links // would alter the Tab label's role attribute, which should stay role="tab" to work with keyboards/screen readers. - const tabIndex = currentView === ABOUT_PAGE ? 1 : 0; + const tabIndex = currentView === ABOUT_PAGE || editing ? 1 : 0; const onTabChange = newTabIndex => { let url = formatLbryUriForWeb(uri); let search = '?'; @@ -75,7 +75,7 @@ function ChannelPage(props: Props) {

{title || channelName} {channelIsMine && !editing && ( -

@@ -84,35 +84,34 @@ function ChannelPage(props: Props) {

- {!editing && ( - - - {__('Content')} - {__('About')} -
- - -
- + + + {__('Content')} + {editing ? __('Editing Your Channel') : __('About')} +
+ + +
+ - - - - - + + + + + + {editing ? ( + setThumbPreview(v)} + updateCover={v => setCoverPreview(v)} + /> + ) : ( - - - - )} - {editing && ( - setThumbPreview(v)} - updateCover={v => setCoverPreview(v)} - /> - )} + )} + + + ); diff --git a/src/ui/scss/component/_channel.scss b/src/ui/scss/component/_channel.scss index 2d8d7782d..b81abb78e 100644 --- a/src/ui/scss/component/_channel.scss +++ b/src/ui/scss/component/_channel.scss @@ -86,6 +86,12 @@ $metadata-z-index: 1; font-size: 3rem; font-weight: 800; margin-right: var(--spacing-large); + + // Quick hack to get this to work + // We should have a generic style for "header with button next to it" + .button { + margin-left: var(--spacing-medium); + } } .channel__url { diff --git a/static/locales/en.json b/static/locales/en.json index 0572b956c..86ebc1126 100644 --- a/static/locales/en.json +++ b/static/locales/en.json @@ -460,5 +460,24 @@ "LBRY names cannot contain that symbol ($, #, @)": "LBRY names cannot contain that symbol ($, #, @)", "Path copied.": "Path copied.", "Open Folder": "Open Folder", - "Create Backup": "Create Backup" -} + "Create Backup": "Create Backup", + "Submit": "Submit", + "Website": "Website", + "aprettygoodsite.com": "aprettygoodsite.com", + "yourstruly@example.com": "yourstruly@example.com", + "Thumbnail source": "Thumbnail source", + "Thumbnail (400x400)": "Thumbnail (400x400)", + "https://example.com/image.png": "https://example.com/image.png", + "Cover source": "Cover source", + "Cover (1000x300)": "Cover (1000x300)", + "Editing": "Editing", + "Edit Your Channel": "Edit Your Channel", + "Editing Your Channel": "Editing Your Channel", + "We can explain... We know this page won't win any design awards, we have a cool idea for channel edits in the future. We just wanted to release a very very very basic version that just barely kinda works so people can use it.": "We can explain... We know this page won't win any design awards, we have a cool idea for channel edits in the future. We just wanted to release a very very very basic version that just barely kinda works so people can use it.", + "We can explain... \n\n We know this page won't win any design awards, we have a cool idea for channel edits in the future. We just wanted to release a very very very basic version that just barely kinda works so people can use it.": "We can explain... \n\n We know this page won't win any design awards, we have a cool idea for channel edits in the future. We just wanted to release a very very very basic version that just barely kinda works so people can use it.", + "We can explain...": "We can explain...", + "We know this page won't win any design awards, we have a cool idea for channel edits in the future. We just wanted to release a very very very basic version that just barely kinda works so people can use": "We know this page won't win any design awards, we have a cool idea for channel edits in the future. We just wanted to release a very very very basic version that just barely kinda works so people can use", + "We know this page won't win any design awards, we just wanted to release a very very very basic version that just barely kinda works so people can use": "We know this page won't win any design awards, we just wanted to release a very very very basic version that just barely kinda works so people can use", + "We know this page won't win any design awards, we just wanted to release a very very very basic version that just barely kinda works so people can use it right now. There is a much nicer version in the works.": "We know this page won't win any design awards, we just wanted to release a very very very basic version that just barely kinda works so people can use it right now. There is a much nicer version in the works.", + "We know this page won't win any design awards, we just wanted to release a very very very basic version that just barely kinda works so people can use it right now. There is a much nicer version being worked on.": "We know this page won't win any design awards, we just wanted to release a very very very basic version that just barely kinda works so people can use it right now. There is a much nicer version being worked on." +} \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 4225997c4..1cc8f1644 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6646,9 +6646,9 @@ lazy-val@^1.0.3, lazy-val@^1.0.4: yargs "^13.2.2" zstd-codec "^0.1.1" -lbry-redux@lbryio/lbry-redux#9a676ee311d573b84d11f402d918aeee77be76e1: +lbry-redux@lbryio/lbry-redux#efccab44cb025a14fd81ec05ffca0314710c8529: version "0.0.1" - resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/9a676ee311d573b84d11f402d918aeee77be76e1" + resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/efccab44cb025a14fd81ec05ffca0314710c8529" dependencies: proxy-polyfill "0.1.6" reselect "^3.0.0"