Merge branch 'file_edit' into v16

CHANGELOG.md

@@ -9,6 +9,7 @@ Web UI version numbers should always match the corresponding version of LBRY App
 ## [Unreleased]
 ### Added
   * Added a tipping button to send LBRY Credits to the publisher
+  * Added edit button on published content / improved UX for editing claims.
   * File pages now show the time of a publish.
   * The "auth token" displayable on Help offers security warning
   * Added a new component for rendering dates and times. This component can render the date and time of a block height, as well.

ui/js/actions/file_info.js

@@ -13,7 +13,7 @@ import {
   selectTotalDownloadProgress,
 } from "selectors/file_info";
 import { doCloseModal } from "actions/app";
-import { doHistoryBack } from "actions/navigation";
+import { doNavigate, doHistoryBack } from "actions/navigation";
 import setProgressBar from "util/setProgressBar";
 import batchActions from "util/batchActions";
 
@@ -155,3 +155,9 @@ export function doFetchFileInfosAndPublishedClaims() {
     if (!isFetchingFileInfo) dispatch(doFileList());
   };
 }
+
+export function doEditClaim(fileInfo) {
+  return function(dispatch, getState) {
+    dispatch(doNavigate("/publish", fileInfo));
+  };
+}

ui/js/component/fileActions/index.js

@@ -10,11 +10,8 @@ import { makeSelectIsAvailableForUri } from "selectors/availability";
 import { makeSelectCostInfoForUri } from "selectors/cost_info";
 import { doCloseModal, doOpenModal } from "actions/app";
 import { doFetchAvailability } from "actions/availability";
-import { doOpenFileInShell, doOpenFileInFolder } from "actions/file_info";
-import {
-  makeSelectClaimForUriIsMine,
-  makeSelectClaimForUri,
-} from "selectors/claims";
+import { doOpenFileInShell, doOpenFileInFolder,   doEditClaim, } from "actions/file_info";
+import { makeSelectClaimForUri,makeSelectClaimForUriIsMine } from "selectors/claims";
 import { doPurchaseUri, doLoadVideo, doStartDownload } from "actions/content";
 import FileActions from "./view";
 
@@ -52,6 +49,7 @@ const perform = dispatch => ({
   startDownload: uri => dispatch(doPurchaseUri(uri, "affirmPurchase")),
   loadVideo: uri => dispatch(doLoadVideo(uri)),
   restartDownload: (uri, outpoint) => dispatch(doStartDownload(uri, outpoint)),
+  editClaim: fileInfo => dispatch(doEditClaim(fileInfo)),
 });
 
 export default connect(makeSelect, perform)(FileActions);

ui/js/component/fileActions/view.jsx

@@ -78,8 +78,13 @@ class FileActions extends React.PureComponent {
       loading,
       claimIsMine,
       claimInfo,
+      navigate,
+      editClaim,
     } = this.props;
 
+    const name = fileInfo ? fileInfo.name : null;
+    const channel = fileInfo ? fileInfo.channel_name : null;
+
     const metadata = fileInfo ? fileInfo.metadata : null,
       openInFolderMessage = platform.startsWith("Mac")
         ? __("Open in Finder")
@@ -185,6 +190,12 @@ class FileActions extends React.PureComponent {
                   onClick={() => openInFolder(fileInfo)}
                   label={openInFolderMessage}
                 />
+                {claimIsMine &&
+                <DropDownMenuItem
+                  key={1}
+                  onClick={() => editClaim({ name, channel })}
+                  label={__("Edit claim")}
+                />}
                 <DropDownMenuItem
                   key={1}
                   onClick={() => openModal(modals.CONFIRM_FILE_REMOVE)}

ui/js/component/publishForm/view.jsx

@@ -48,6 +48,7 @@ class PublishForm extends React.PureComponent {
       isFee: false,
       customUrl: false,
       source: null,
+      mode: "publish",
     };
   }
 
@@ -187,6 +188,14 @@ class PublishForm extends React.PureComponent {
     return !!myClaims.find(claim => claim.name === name);
   }
 
+  handleEditClaim() {
+    const isMine = this.myClaimExists();
+
+    if (isMine) {
+      this.handlePrefillClicked();
+    }
+  }
+
   topClaimIsMine() {
     const myClaimInfo = this.myClaimInfo();
     const { claimsByUri } = this.props;
@@ -226,6 +235,7 @@ class PublishForm extends React.PureComponent {
         name: "",
         uri: "",
         prefillDone: false,
+        mode: "publish",
       });
 
       return;
@@ -247,6 +257,7 @@ class PublishForm extends React.PureComponent {
       rawName: rawName,
       name: name,
       prefillDone: false,
+      mode: "publish",
       uri,
     });
 
@@ -275,6 +286,7 @@ class PublishForm extends React.PureComponent {
     } = claimInfo.value.stream.metadata;
 
     let newState = {
+      mode: "edit",
       meta_title: title,
       meta_thumbnail: thumbnail,
       meta_description: description,
@@ -375,6 +387,7 @@ class PublishForm extends React.PureComponent {
 
   handleChannelChange(channelName) {
     this.setState({
+      mode: "publish",
       channel: channelName,
     });
     const nameChanged = () => this.nameChanged(this.state.rawName);
@@ -410,8 +423,20 @@ class PublishForm extends React.PureComponent {
   }
 
   componentWillMount() {
+    let { name, channel } = this.props.params;
+
+    channel = channel || this.state.channel;
+
     this.props.fetchClaimListMine();
     this._updateChannelList();
+
+    if (name) {
+      this.setState({ name, rawName: name, channel });
+    }
+  }
+
+  componentDidMount() {
+    this.handleEditClaim();
   }
 
   onFileChange() {
@@ -455,7 +480,7 @@ class PublishForm extends React.PureComponent {
         <span>
           {__("You already have a claim with this name.")}{" "}
           <Link
-            label={__("Use data from my existing claim")}
+            label={__("Edit existing claim")}
             onClick={() => this.handlePrefillClicked()}
           />
         </span>
@@ -493,10 +518,18 @@ class PublishForm extends React.PureComponent {
   }
 
   render() {
+    const { mode, submitting } = this.state;
+
     const lbcInputHelp = __(
       "This LBC remains yours and the deposit can be undone at any time."
     );
 
+    let submitLabel = !submitting ? __("Publish") : __("Publishing...");
+
+    if (mode === "edit") {
+      submitLabel = !submitting ? __("Update") : __("Updating...");
+    }
+
     return (
       <main className="main--single-column">
         <form
@@ -839,9 +872,7 @@ class PublishForm extends React.PureComponent {
           <div className="card-series-submit">
             <Link
               button="primary"
-              label={
-                !this.state.submitting ? __("Publish") : __("Publishing...")
-              }
+              label={submitLabel}
               onClick={event => {
                 this.handleSubmit(event);
               }}

ui/js/selectors/claims.js

@@ -53,8 +53,7 @@ const selectClaimForUriIsMine = (state, props) => {
   const uri = lbryuri.normalize(props.uri);
   const claim = selectClaimsByUri(state)[uri];
   const myClaims = selectMyClaimsRaw(state);
-
-  return myClaims.has(claim.claim_id);
+  return myClaims && myClaims.has(claim.claim_id);
 };
 
 export const makeSelectClaimForUriIsMine = () => {