diff --git a/CHANGELOG.md b/CHANGELOG.md index c03d0bf8a..1ff9ee49e 100644 --- a/CHANGELOG.md +++ b/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. diff --git a/ui/js/actions/file_info.js b/ui/js/actions/file_info.js index 7d9d102c6..7f4f103a0 100644 --- a/ui/js/actions/file_info.js +++ b/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)); + }; +} diff --git a/ui/js/component/fileActions/index.js b/ui/js/component/fileActions/index.js index 02fb213da..179493408 100644 --- a/ui/js/component/fileActions/index.js +++ b/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); diff --git a/ui/js/component/fileActions/view.jsx b/ui/js/component/fileActions/view.jsx index 2642ea7e4..2012ec409 100644 --- a/ui/js/component/fileActions/view.jsx +++ b/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 && + editClaim({ name, channel })} + label={__("Edit claim")} + />} openModal(modals.CONFIRM_FILE_REMOVE)} diff --git a/ui/js/component/publishForm/view.jsx b/ui/js/component/publishForm/view.jsx index f770ae38e..aa05e4e43 100644 --- a/ui/js/component/publishForm/view.jsx +++ b/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 { {__("You already have a claim with this name.")}{" "} this.handlePrefillClicked()} /> @@ -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 (
{ this.handleSubmit(event); }} diff --git a/ui/js/selectors/claims.js b/ui/js/selectors/claims.js index 630e72c3e..f4b6344b5 100644 --- a/ui/js/selectors/claims.js +++ b/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 = () => {