diff --git a/ui/js/component/form.js b/ui/js/component/form.js index 7ab78325c..90b24d164 100644 --- a/ui/js/component/form.js +++ b/ui/js/component/form.js @@ -90,6 +90,10 @@ export class FormField extends React.PureComponent { return this.refs.field.options[this.refs.field.selectedIndex]; } + getOptions() { + return this.refs.field.options; + } + render() { // Pass all unhandled props to the field element const otherProps = Object.assign({}, this.props), @@ -220,6 +224,10 @@ export class FormRow extends React.PureComponent { return this.refs.field.getSelectedElement(); } + getOptions() { + return this.refs.field.getOptions(); + } + focus() { this.refs.field.focus(); } diff --git a/ui/js/page/publish/view.jsx b/ui/js/page/publish/view.jsx index ea4f84dd6..0441ee458 100644 --- a/ui/js/page/publish/view.jsx +++ b/ui/js/page/publish/view.jsx @@ -5,13 +5,16 @@ import { FormField, FormRow } from "component/form.js"; import Link from "component/link"; import rewards from "rewards"; import Modal from "component/modal"; +import Notice from "component/notice"; import { BusyMessage } from "component/common"; class PublishPage extends React.PureComponent { constructor(props) { super(props); - this._requiredFields = ["meta_title", "name", "bid", "tos_agree"]; + this._requiredFields = ["name", "bid", "meta_title", "tosAgree"]; + + this._defaultCopyrightNotice = "All rights reserved."; this.state = { rawName: "", @@ -23,11 +26,17 @@ class PublishPage extends React.PureComponent { channel: "anonymous", newChannelName: "@", newChannelBid: 10, - myClaimValue: 0.0, - myClaimMetadata: null, - copyrightNotice: "", + meta_title: "", + meta_thumbnail: "", + meta_description: "", + meta_language: "en", + meta_nsfw: "0", + licenseType: "", + copyrightNotice: this._defaultCopyrightNotice, otherLicenseDescription: "", otherLicenseUrl: "", + tosAgree: false, + prefillDone: false, uploadProgress: 0.0, uploaded: false, errorMessage: null, @@ -80,36 +89,18 @@ class PublishPage extends React.PureComponent { return; } - if (this.state.nameIsMine) { - // Pre-populate with existing metadata - var metadata = Object.assign({}, this.state.myClaimMetadata); - if (this.refs.file.getValue() !== "") { - delete metadata.sources; - } - } else { - var metadata = {}; - } + let metadata = {}; - for (let metaField of [ - "title", - "description", - "thumbnail", - "license", - "license_url", - "language", - ]) { - var value = this.refs["meta_" + metaField].getValue(); - if (value !== "") { + for (let metaField of ["title", "description", "thumbnail", "language"]) { + const value = this.state["meta_" + metaField]; + if (value) { metadata[metaField] = value; } } - metadata.nsfw = parseInt(this.refs.meta_nsfw.getValue()) === 1; - - const licenseUrl = this.refs.meta_license_url.getValue(); - if (licenseUrl) { - metadata.license_url = licenseUrl; - } + metadata.license = this.getLicense(); + metadata.licenseUrl = this.getLicenseUrl(); + metadata.nsfw = !!parseInt(this.state.meta_nsfw); var doPublish = () => { var publishArgs = { @@ -208,6 +199,8 @@ class PublishPage extends React.PureComponent { } myClaimInfo() { + const { name } = this.state; + return Object.values(this.props.myClaims).find( claim => claim.name === name ); @@ -245,6 +238,7 @@ class PublishPage extends React.PureComponent { this.setState({ rawName: rawName, name: name, + prefillDone: false, uri, }); @@ -259,6 +253,43 @@ class PublishPage extends React.PureComponent { }); } + handlePrefillClicked() { + const {license, licenseUrl, title, thumbnail, description, + language, nsfw} = this.myClaimInfo().value.stream.metadata; + + let newState = { + meta_title: title, + meta_thumbnail: thumbnail, + meta_description: description, + meta_language: language, + meta_nsfw: nsfw, + }; + + if (license == this._defaultCopyrightNotice) { + newState.licenseType = "copyright"; + newState.copyrightNotice = this._defaultCopyrightNotice; + } else { + // If the license URL or description matches one of the drop-down options, use that + let licenseType = "other"; // Will be overridden if we find a match + for (let option of this._meta_license.getOptions()) { + if ( + option.getAttribute("data-url") === licenseUrl || + option.text === license + ) { + licenseType = option.value; + } + } + + if (licenseType == "other") { + newState.otherLicenseDescription = license; + newState.otherLicenseUrl = licenseUrl; + } + newState.licenseType = licenseType; + } + + this.setState(newState); + } + handleBidChange(event) { this.setState({ bid: event.target.value, @@ -283,20 +314,21 @@ class PublishPage extends React.PureComponent { }); } - handleLicenseChange(event) { - var licenseType = event.target.options[ - event.target.selectedIndex - ].getAttribute("data-license-type"); - var newState = { - copyrightChosen: licenseType == "copyright", - otherLicenseChosen: licenseType == "other", - }; + handleMetadataChange(event) { + /** + * This function is used for all metadata inputs that store the final value directly into state. + * The only exceptions are inputs related to license description and license URL, which require + * more complex logic and the final value is determined at submit time. + */ + this.setState({ + ["meta_" + event.target.name]: event.target.value, + }); + } - if (licenseType == "copyright") { - newState.copyrightNotice = __("All rights reserved."); - } - - this.setState(newState); + handleLicenseTypeChange(event) { + this.setState({ + licenseType: event.target.value, + }); } handleCopyrightNoticeChange(event) { @@ -327,7 +359,7 @@ class PublishPage extends React.PureComponent { handleTOSChange(event) { this.setState({ - TOSAgreed: event.target.checked, + tosAgree: event.target.checked, }); } @@ -371,16 +403,25 @@ class PublishPage extends React.PureComponent { ); } + getLicense() { + switch (this.state.licenseType) { + case "copyright": + return this.state.copyrightNotice; + case "other": + return this.state.otherLicenseDescription; + default: + return this._meta_license.getSelectedElement().text; + } + } + getLicenseUrl() { - if (!this.refs.meta_license) { - return ""; - } else if (this.state.otherLicenseChosen) { - return this.state.otherLicenseUrl; - } else { - return ( - this.refs.meta_license.getSelectedElement().getAttribute("data-url") || - "" - ); + switch (this.state.licenseType) { + case "copyright": + return ""; + case "other": + return this.state.otherLicenseUrl; + default: + return this._meta_license.getSelectedElement().getAttribute("data-url"); } } @@ -472,43 +513,54 @@ class PublishPage extends React.PureComponent { } /> - {!this.state.hasFile - ? "" + {!this.state.hasFile && !this.myClaimExists() + ? null :