diff --git a/ui/js/page/publish.js b/ui/js/page/publish.js index e090d19f3..61773fb01 100644 --- a/ui/js/page/publish.js +++ b/ui/js/page/publish.js @@ -67,6 +67,7 @@ var PublishPage = React.createClass({ name: this.state.name, bid: parseFloat(this.state.bid), metadata: metadata, + ... this.state.channel != 'new' && this.state.channel != 'none' ? {channel_name: this.state.channel} : {}, }; if (this.refs.file.getValue() !== '') { @@ -96,11 +97,15 @@ var PublishPage = React.createClass({ }, getInitialState: function() { return { + channels: null, rawName: '', name: '', bid: '', feeAmount: '', feeCurrency: 'USD', + channel: 'none', + newChannelName: '@', + newChannelBid: '', nameResolved: false, topClaimValue: 0.0, myClaimValue: 0.0, @@ -113,6 +118,7 @@ var PublishPage = React.createClass({ uploaded: false, errorMessage: null, submitting: false, + creatingChannel: false, modal: null, }; }, @@ -247,6 +253,51 @@ var PublishPage = React.createClass({ otherLicenseUrl: event.target.value, }); }, + handleChannelChange: function (event) { + const channel = event.target.value; + + this.setState({ + channel: channel, + }); + }, + handleNewChannelNameChange: function (event) { + const newChannelName = (event.target.value.startsWith('@') ? event.target.value : '@' + event.target.value); + + if (newChannelName.length > 1 && !lbry.nameIsValid(newChannelName.substr(1), false)) { + this.refs.newChannelName.showAdvice('LBRY channel names must contain only letters, numbers and dashes.'); + return; + } + + this.setState({ + newChannelName: newChannelName, + }); + }, + handleNewChannelBidChange: function (event) { + this.setState({ + newChannelBid: event.target.value, + }); + }, + handleCreateChannelClick: function (event) { + this.setState({ + creatingChannel: true, + }); + + lbry.channel_new({channel_name: this.state.newChannelName, amount: parseInt(this.state.newChannelBid)}).then(() => { + this.setState({ + creatingChannel: false, + }); + + this.forceUpdate(); + this.setState({ + channel: name, + }); + }, (error) => { + // TODO: add error handling + this.setState({ + creatingChannel: false, + }); + }); + }, getLicenseUrl: function() { if (!this.refs.meta_license) { return ''; @@ -256,6 +307,13 @@ var PublishPage = React.createClass({ return this.refs.meta_license.getSelectedElement().getAttribute('data-url') || '' ; } }, + componentWillMount: function() { + lbry.channel_list_mine().then((channels) => { + this.setState({ + channels: channels, + }); + }); + }, componentDidMount: function() { document.title = "Publish"; }, @@ -263,6 +321,10 @@ var PublishPage = React.createClass({ }, // Also getting a type warning here too render: function() { + if (this.state.channels === null) { + return null; + } + return (
@@ -280,6 +342,26 @@ var PublishPage = React.createClass({ +
+

Channel

+
+ + + {this.state.channels.map(({name}) => )} + + + {this.state.channel == 'new' + ?
+ + + +
+ : null} +
What channel would you like to publish this file under?
+
+
+

Choose File