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();
   }

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,
+      meta_title: "",
-      myClaimMetadata: null,
+      meta_thumbnail: "",
-      copyrightNotice: "",
+      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) {
+    let metadata = {};
-      // Pre-populate with existing metadata
-      var metadata = Object.assign({}, this.state.myClaimMetadata);
-      if (this.refs.file.getValue() !== "") {
-        delete metadata.sources;
-      }
-    } else {
-      var metadata = {};
-    }
 
-    for (let metaField of [
+    for (let metaField of ["title", "description", "thumbnail", "language"]) {
-      "title",
+      const value = this.state["meta_" + metaField];
-      "description",
+      if (value) {
-      "thumbnail",
-      "license",
-      "license_url",
-      "language",
-    ]) {
-      var value = this.refs["meta_" + metaField].getValue();
-      if (value !== "") {
         metadata[metaField] = value;
       }
     }
 
-    metadata.nsfw = parseInt(this.refs.meta_nsfw.getValue()) === 1;
+    metadata.license = this.getLicense();
-
+    metadata.licenseUrl = this.getLicenseUrl();
-    const licenseUrl = this.refs.meta_license_url.getValue();
+    metadata.nsfw = !!parseInt(this.state.meta_nsfw);
-    if (licenseUrl) {
-      metadata.license_url = licenseUrl;
-    }
 
     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) {
+  handleMetadataChange(event) {
-    var licenseType = event.target.options[
+    /**
-      event.target.selectedIndex
+     * This function is used for all metadata inputs that store the final value directly into state.
-    ].getAttribute("data-license-type");
+     * The only exceptions are inputs related to license description and license URL, which require
-    var newState = {
+     * more complex logic and the final value is determined at submit time.
-      copyrightChosen: licenseType == "copyright",
+     */
-      otherLicenseChosen: licenseType == "other",
+    this.setState({
-    };
+      ["meta_" + event.target.name]: event.target.value,
+    });
+  }
 
-    if (licenseType == "copyright") {
+  handleLicenseTypeChange(event) {
-      newState.copyrightNotice = __("All rights reserved.");
+    this.setState({
-    }
+      licenseType: event.target.value,
-
+    });
-    this.setState(newState);
   }
 
   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) {
+    switch (this.state.licenseType) {
-      return "";
+      case "copyright":
-    } else if (this.state.otherLicenseChosen) {
+        return "";
-      return this.state.otherLicenseUrl;
+      case "other":
-    } else {
+        return this.state.otherLicenseUrl;
-      return (
+      default:
-        this.refs.meta_license.getSelectedElement().getAttribute("data-url") ||
+        return this._meta_license.getSelectedElement().getAttribute("data-url");
-        ""
-      );
     }
   }
 
@@ -472,43 +513,54 @@ class PublishPage extends React.PureComponent {
                 }
               />
             </div>
-            {!this.state.hasFile
+            {!this.state.hasFile && !this.myClaimExists()
-              ? ""
+              ? null
               : <div>
                   <div className="card__content">
                     <FormRow
                       label={__("Title")}
                       type="text"
-                      ref="meta_title"
                       name="title"
-                      placeholder={__("Title")}
+                      value={this.state.meta_title}
+                      placeholder="Titular Title"
+                      onChange={event => {
+                        this.handleMetadataChange(event);
+                      }}
                     />
                   </div>
                   <div className="card__content">
                     <FormRow
                       type="text"
                       label={__("Thumbnail URL")}
-                      ref="meta_thumbnail"
                       name="thumbnail"
+                      value={this.state.meta_thumbnail}
                       placeholder="http://spee.ch/mylogo"
+                      onChange={event => {
+                        this.handleMetadataChange(event);
+                      }}
                     />
                   </div>
                   <div className="card__content">
                     <FormRow
                       label={__("Description")}
                       type="textarea"
-                      ref="meta_description"
                       name="description"
+                      value={this.state.meta_description}
                       placeholder={__("Description of your content")}
+                      onChange={event => {
+                        this.handleMetadataChange(event);
+                      }}
                     />
                   </div>
                   <div className="card__content">
                     <FormRow
                       label={__("Language")}
                       type="select"
-                      defaultValue="en"
+                      value={this.state.meta_language}
-                      ref="meta_language"
                       name="language"
+                      onChange={event => {
+                        this.handleMetadataChange(event);
+                      }}
                     >
                       <option value="en">{__("English")}</option>
                       <option value="zh">{__("Chinese")}</option>
@@ -523,9 +575,11 @@ class PublishPage extends React.PureComponent {
                     <FormRow
                       type="select"
                       label={__("Maturity")}
-                      defaultValue="en"
+                      value={this.state.meta_nsfw}
-                      ref="meta_nsfw"
                       name="nsfw"
+                      onChange={event => {
+                        this.handleMetadataChange(event);
+                      }}
                     >
                       {/* <option value=""></option> */}
                       <option value="0">{__("All Ages")}</option>
@@ -573,8 +627,7 @@ class PublishPage extends React.PureComponent {
                   placeholder="1.00"
                   min="0.01"
                   onChange={event => this.handleFeeAmountChange(event)}
-                />
+                />{" "}
-                {" "}
                 <FormField
                   type="select"
                   onChange={event => {
@@ -595,66 +648,71 @@ class PublishPage extends React.PureComponent {
               <FormRow
                 label="License"
                 type="select"
-                ref="meta_license"
+                value={this.state.licenseType}
-                name="license"
+                ref={row => {
+                  this._meta_license = row;
+                }}
                 onChange={event => {
-                  this.handleLicenseChange(event);
+                  this.handleLicenseTypeChange(event);
                 }}
               >
                 <option />
-                <option>{__("Public Domain")}</option>
+                <option value="publicDomain">{__("Public Domain")}</option>
-                <option data-url="https://creativecommons.org/licenses/by/4.0/legalcode">
+                <option
+                  value="cc-by"
+                  data-url="https://creativecommons.org/licenses/by/4.0/legalcode"
+                >
                   {__("Creative Commons Attribution 4.0 International")}
                 </option>
-                <option data-url="https://creativecommons.org/licenses/by-sa/4.0/legalcode">
+                <option
+                  value="cc-by-sa"
+                  data-url="https://creativecommons.org/licenses/by-sa/4.0/legalcode"
+                >
                   {__(
                     "Creative Commons Attribution-ShareAlike 4.0 International"
                   )}
                 </option>
-                <option data-url="https://creativecommons.org/licenses/by-nd/4.0/legalcode">
+                <option
+                  value="cc-by-nd"
+                  data-url="https://creativecommons.org/licenses/by-nd/4.0/legalcode"
+                >
                   {__(
                     "Creative Commons Attribution-NoDerivatives 4.0 International"
                   )}
                 </option>
-                <option data-url="https://creativecommons.org/licenses/by-nc/4.0/legalcode">
+                <option
+                  value="cc-by-nc"
+                  data-url="https://creativecommons.org/licenses/by-nc/4.0/legalcode"
+                >
                   {__(
                     "Creative Commons Attribution-NonCommercial 4.0 International"
                   )}
                 </option>
-                <option data-url="https://creativecommons.org/licenses/by-nc-sa/4.0/legalcode">
+                <option
+                  value="cc-by-nc-sa"
+                  data-url="https://creativecommons.org/licenses/by-nc-sa/4.0/legalcode"
+                >
                   {__(
                     "Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International"
                   )}
                 </option>
-                <option data-url="https://creativecommons.org/licenses/by-nc-nd/4.0/legalcode">
+                <option
+                  value="cc-by-nc-nd"
+                  data-url="https://creativecommons.org/licenses/by-nc-nd/4.0/legalcode"
+                >
                   {__(
                     "Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International"
                   )}
                 </option>
-                <option
+                <option value="copyright">
-                  data-license-type="copyright"
-                  {...(this.state.copyrightChosen
-                    ? { value: this.state.copyrightNotice }
-                    : {})}
-                >
                   {__("Copyrighted...")}
                 </option>
-                <option
+                <option value="other">
-                  data-license-type="other"
-                  {...(this.state.otherLicenseChosen
-                    ? { value: this.state.otherLicenseDescription }
-                    : {})}
-                >
                   {__("Other...")}
                 </option>
               </FormRow>
-              <FormField
+
-                type="hidden"
+              {this.state.licenseType == "copyright"
-                ref="meta_license_url"
-                name="license_url"
-                value={this.getLicenseUrl()}
-              />
-              {this.state.copyrightChosen
                 ? <FormRow
                     label={__("Copyright notice")}
                     type="text"
@@ -665,21 +723,25 @@ class PublishPage extends React.PureComponent {
                     }}
                   />
                 : null}
-              {this.state.otherLicenseChosen
+
+              {this.state.licenseType == "other"
                 ? <FormRow
                     label={__("License description")}
                     type="text"
                     name="other-license-description"
+                    value={this.state.otherLicenseDescription}
                     onChange={event => {
-                      this.handleOtherLicenseDescriptionChange();
+                      this.handleOtherLicenseDescriptionChange(event);
                     }}
                   />
                 : null}
-              {this.state.otherLicenseChosen
+
+              {this.state.licenseType == "other"
                 ? <FormRow
                     label={__("License URL")}
                     type="text"
                     name="other-license-url"
+                    value={this.state.otherLicenseUrl}
                     onChange={event => {
                       this.handleOtherLicenseUrlChange(event);
                     }}
@@ -718,6 +780,15 @@ class PublishPage extends React.PureComponent {
                 }}
                 helper={this.getNameBidHelpText()}
               />
+              {this.myClaimExists() && !this.state.prefillDone
+                ? <Notice>
+                    {__("You already have a claim with this name.")}{" "}
+                    <Link
+                      label={__("Use data from my existing claim")}
+                      onClick={() => this.handlePrefillClicked()}
+                    />
+                  </Notice>
+                : null}
             </div>
             {this.state.rawName
               ? <div className="card__content">
@@ -751,15 +822,11 @@ class PublishPage extends React.PureComponent {
                     <Link
                       href="https://www.lbry.io/termsofservice"
                       label={__("LBRY terms of service")}
-                      checked={this.state.TOSAgreed}
                     />
                   </span>
                 }
                 type="checkbox"
-                name="tos_agree"
+                checked={this.state.tosAgree}
-                ref={field => {
-                  this.refs.tos_agree = field;
-                }}
                 onChange={event => {
                   this.handleTOSChange(event);
                 }}