LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Merge pull request #1940 from lbryio/publish-overtake-amounts

Browse source 
Better messaging for takeover amounts on publish page
This commit is contained in:
Sean Yesmunt 2018-10-01 14:59:49 -04:00 committed by GitHub
commit 0b07ff61cf
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 171 additions and 116 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

72
src/renderer/component/publishForm/internal/bid-help-text.jsx
View file

@ -1,72 +1,36 @@
// @flow
import * as React from 'react';
import Button from 'component/button';
import { buildURI } from 'lbry-redux';
import type { Claim } from 'types/claim';
type Props = {
uri: ?string,
isResolvingUri: boolean,
winningBidForClaimUri: ?number,
myClaimForUri: ?Claim,
isStillEditing: boolean,
onEditMyClaim: (any, string) => void,
amountNeededForTakeover: ?number,
};
class BidHelpText extends React.PureComponent<Props> {
render() {
const {
uri,
isResolvingUri,
winningBidForClaimUri,
myClaimForUri,
onEditMyClaim,
isStillEditing,
} = this.props;
const { uri, isResolvingUri, amountNeededForTakeover } = this.props;
let bidHelpText;
if (!uri) {
return __('Create a URL for this content.');
if (uri) {
if (isResolvingUri) {
bidHelpText = __('Checking the winning claim amount...');
} else if (!amountNeededForTakeover) {
bidHelpText = __('Any amount will give you the winning bid.');
} else {
bidHelpText = `${__('If you bid more than')} ${amountNeededForTakeover} LBC, ${__(
'when someone navigates to'
)} ${uri} ${__('it will load your published content')}. ${__(
'However, you can get a longer version of this URL for any bid'
)}.`;
}
}
if (isStillEditing) {
return __(
'You are currently editing this claim. If you change the URL, you will need to reselect a file.'
);
}
if (isResolvingUri) {
return __('Checking the winning claim amount...');
}
if (myClaimForUri) {
const editUri = buildURI({
contentName: myClaimForUri.name,
claimId: myClaimForUri.claim_id,
});
return (
<React.Fragment>
{__('You already have a claim at')}
{` ${uri} `}
<Button
button="link"
label="Edit it"
onClick={() => onEditMyClaim(myClaimForUri, editUri)}
/>
<br />
{__('Publishing will update your existing claim.')}
</React.Fragment>
);
}
return winningBidForClaimUri ? (
return (
<React.Fragment>
{__('A deposit greater than')} {winningBidForClaimUri} {__('is needed to win')}
{` ${uri}. `}
{__('However, you can still get this URL for any amount.')}
{__('This LBC remains yours and the deposit can be undone at any time.')}
<div>{bidHelpText}</div>
</React.Fragment>
) : (
__('Any amount will give you the winning bid.')
);
}
}

49
src/renderer/component/publishForm/internal/name-help-text.jsx Normal file
View file

@ -0,0 +1,49 @@
// @flow
import * as React from 'react';
import Button from 'component/button';
import { buildURI } from 'lbry-redux';
import type { Claim } from 'types/claim';
type Props = {
uri: ?string,
myClaimForUri: ?Claim,
isStillEditing: boolean,
onEditMyClaim: (any, string) => void,
};
class NameHelpText extends React.PureComponent<Props> {
render() {
const { uri, myClaimForUri, onEditMyClaim, isStillEditing } = this.props;
let nameHelpText;
if (isStillEditing) {
nameHelpText = __(
'You are currently editing this claim. If you change the URL, you will need to reselect a file.'
);
} else if (uri && myClaimForUri) {
const editUri = buildURI({
contentName: myClaimForUri.name,
claimId: myClaimForUri.claim_id,
});
nameHelpText = (
<React.Fragment>
{__('You already have a claim at')}
{` ${uri} `}
<Button
button="link"
label="Edit it"
onClick={() => onEditMyClaim(myClaimForUri, editUri)}
/>
<br />
{__('Publishing will update your existing claim.')}
</React.Fragment>
);
}
return <React.Fragment>{nameHelpText || __('Create a URL for this content.')}</React.Fragment>;
}
}
export default NameHelpText;

56
src/renderer/component/publishForm/view.jsx
View file

@ -13,6 +13,7 @@ import { CHANNEL_NEW, CHANNEL_ANONYMOUS, MINIMUM_PUBLISH_BID } from 'constants/c
import * as icons from 'constants/icons';
import type { Claim } from 'types/claim';
import BidHelpText from './internal/bid-help-text';
import NameHelpText from './internal/name-help-text';
import LicenseType from './internal/license-type';
type Props = {
@ -53,8 +54,9 @@ type Props = {
clearPublish: () => void,
resolveUri: string => void,
scrollToTop: () => void,
prepareEdit: ({ }) => void,
prepareEdit: ({}) => void,
resetThumbnailStatus: () => void,
amountNeededForTakeover: ?number,
};
class PublishForm extends React.PureComponent<Props> {
@ -84,6 +86,7 @@ class PublishForm extends React.PureComponent<Props> {
// If they are midway through a channel creation, treat it as anonymous until it completes
const channelName = channel === CHANNEL_ANONYMOUS || channel === CHANNEL_NEW ? '' : channel;
// We are only going to store the full uri, but we need to resolve the uri with and without the channel name
let uri;
try {
uri = buildURI({ contentName: name, channelName });
@ -92,6 +95,11 @@ class PublishForm extends React.PureComponent<Props> {
}
if (uri) {
if (channelName) {
// resolve without the channel name so we know the winning bid for it
const uriLessChannel = buildURI({ contentName: name });
resolveUri(uriLessChannel);
}
resolveUri(uri);
return uri;
}
@ -295,8 +303,9 @@ class PublishForm extends React.PureComponent<Props> {
{name && nameError && <div>{__('The URL you created is not valid')}</div>}
{!bid && <div>{__('A bid amount is required')}</div>}
{!!bid && bidError && <div>{bidError}</div>}
{uploadThumbnailStatus === THUMBNAIL_STATUSES.IN_PROGRESS
&& <div>{__('Please wait for thumbnail to finish uploading')}</div>}
{uploadThumbnailStatus === THUMBNAIL_STATUSES.IN_PROGRESS && (
<div>{__('Please wait for thumbnail to finish uploading')}</div>
)}
{!tosAccepted && <div>{__('You must agree to the terms of service')}</div>}
{!!editingURI &&
!isStillEditing &&
@ -338,6 +347,7 @@ class PublishForm extends React.PureComponent<Props> {
thumbnailPath,
resetThumbnailStatus,
isStillEditing,
amountNeededForTakeover,
} = this.props;
const formDisabled = (!filePath && !editingURI) || publishing;
@ -350,19 +360,17 @@ class PublishForm extends React.PureComponent<Props> {
submitLabel = !publishing ? __('Publish') : __('Publishing...');
}
const shortUri = buildURI({ contentName: name });
return (
<Form onSubmit={this.handlePublish}>
<section className={classnames('card card--section', { 'card--disabled': publishing })}>
<div className="card__title">{__('Content')}</div>
<div className="card__subtitle">
{isStillEditing ? __('Editing a claim') : __('What are you publishing?')}
{' '}{__(
'Read our'
)}{' '}
{isStillEditing ? __('Editing a claim') : __('What are you publishing?')}{' '}
{__('Read our')}{' '}
<Button button="link" label={__('FAQ')} href="https://lbry.io/faq/how-to-publish" />{' '}
{__(
'to learn more.'
)}
{__('to learn more.')}
</div>
{(filePath || !!editingURI) && (
<div className="card-media__internal-links">
@ -420,12 +428,12 @@ class PublishForm extends React.PureComponent<Props> {
{uploadThumbnailStatus === THUMBNAIL_STATUSES.API_DOWN ? (
__('Enter a URL for your thumbnail.')
) : (
<React.Fragment>
{__('Upload your thumbnail (.png/.jpg/.jpeg/.gif) to')}{' '}
<Button button="link" label={__('spee.ch')} href="https://spee.ch/about" />.{' '}
{__('Recommended size: 800x450 (16:9)')}
</React.Fragment>
)}
<React.Fragment>
{__('Upload your thumbnail (.png/.jpg/.jpeg/.gif) to')}{' '}
<Button button="link" label={__('spee.ch')} href="https://spee.ch/about" />.{' '}
{__('Recommended size: 800x450 (16:9)')}
</React.Fragment>
)}
</div>
<SelectThumbnail
thumbnailPath={thumbnailPath}
@ -496,11 +504,12 @@ class PublishForm extends React.PureComponent<Props> {
<FormRow>
<FormField
stretch
label={__('Name')}
prefix={`lbry://${
!channel || channel === CHANNEL_ANONYMOUS || channel === CHANNEL_NEW
? ''
: `${channel}/`
}`}
}`}
type="text"
name="content_name"
placeholder="myname"
@ -508,12 +517,9 @@ class PublishForm extends React.PureComponent<Props> {
onChange={event => this.handleNameChange(event.target.value)}
error={nameError}
helper={
<BidHelpText
<NameHelpText
isStillEditing={isStillEditing}
uri={uri}
editingURI={editingURI}
isResolvingUri={isResolvingUri}
winningBidForClaimUri={winningBidForClaimUri}
myClaimForUri={myClaimForUri}
onEditMyClaim={this.editExistingClaim}
/>
@ -534,8 +540,14 @@ class PublishForm extends React.PureComponent<Props> {
min="0"
disabled={!name}
onChange={event => this.handleBidChange(parseFloat(event.target.value))}
helper={__('This LBC remains yours and the deposit can be undone at any time.')}
placeholder={winningBidForClaimUri ? winningBidForClaimUri + 0.1 : 0.1}
helper={
<BidHelpText
uri={shortUri}
isResolvingUri={isResolvingUri}
amountNeededForTakeover={amountNeededForTakeover}
/>
}
/>
</div>
</section>

1
src/renderer/page/file/view.jsx
View file

@ -81,6 +81,7 @@ class FilePage extends React.Component<Props> {
this.checkSubscription(this.props);
setViewed(uri);
console.log('claim', this.props.claim);
}
componentWillReceiveProps(nextProps: Props) {

53
src/renderer/page/publish/index.js
View file

@ -1,10 +1,12 @@
import { connect } from 'react-redux';
import { doResolveUri, selectClaimsByUri, selectResolvingUris, selectBalance } from 'lbry-redux';
import { doResolveUri, selectBalance } from 'lbry-redux';
import { doNavigate } from 'redux/actions/navigation';
import {
selectPublishFormValues,
selectIsStillEditing,
selectMyClaimForUri,
selectIsResolvingPublishUris,
selectTakeOverAmount,
} from 'redux/selectors/publish';
import {
doResetThumbnailStatus,
@ -15,43 +17,18 @@ import {
} from 'redux/actions/publish';
import PublishPage from './view';
const select = state => {
const isStillEditing = selectIsStillEditing(state);
const myClaimForUri = selectMyClaimForUri(state);
const publishState = selectPublishFormValues(state);
const { uri } = publishState;
const resolvingUris = selectResolvingUris(state);
let isResolvingUri = false;
if (uri) {
isResolvingUri = resolvingUris.includes(uri);
}
let claimForUri;
let winningBidForClaimUri;
if (!myClaimForUri) {
// if the uri isn't from a users claim, find the winning bid needed for the vanity url
// in the future we may want to display this on users claims
// ex: "you own this, for 5 more lbc you will win this claim"
const claimsByUri = selectClaimsByUri(state);
claimForUri = claimsByUri[uri];
winningBidForClaimUri = claimForUri ? claimForUri.effective_amount : null;
}
return {
...publishState,
isResolvingUri,
// The winning claim for a short lbry uri
claimForUri,
winningBidForClaimUri,
// My previously published claims under this short lbry uri
myClaimForUri,
// If I clicked the "edit" button, have I changed the uri?
// Need this to make it easier to find the source on previously published content
isStillEditing,
balance: selectBalance(state),
};
};
const select = state => ({
...selectPublishFormValues(state),
// The winning claim for a short lbry uri
amountNeededForTakeover: selectTakeOverAmount(state),
// My previously published claims under this short lbry uri
myClaimForUri: selectMyClaimForUri(state),
// If I clicked the "edit" button, have I changed the uri?
// Need this to make it easier to find the source on previously published content
isStillEditing: selectIsStillEditing(state),
balance: selectBalance(state),
isResolvingUri: selectIsResolvingPublishUris(state),
});
const perform = dispatch => ({
updatePublishForm: value => dispatch(doUpdatePublishForm(value)),

54
src/renderer/redux/selectors/publish.js
View file

@ -1,5 +1,12 @@
import { createSelector } from 'reselect';
import { parseURI, selectClaimsById, selectMyClaimsWithoutChannels } from 'lbry-redux';
import {
parseURI,
selectClaimsById,
selectMyClaimsWithoutChannels,
selectResolvingUris,
buildURI,
selectClaimsByUri,
} from 'lbry-redux';
const selectState = state => state.publish || {};
@ -93,3 +100,48 @@ export const selectMyClaimForUri = createSelector(
);
}
);
export const selectIsResolvingPublishUris = createSelector(
selectState,
selectResolvingUris,
({ uri, name }, resolvingUris) => {
if (uri) {
const isResolvingUri = resolvingUris.includes(uri);
const { isChannel } = parseURI(uri);
let isResolvingShortUri;
if (isChannel) {
const shortUri = buildURI({ contentName: name });
isResolvingShortUri = resolvingUris.includes(shortUri);
}
return isResolvingUri || isResolvingShortUri;
}
return false;
}
);
export const selectTakeOverAmount = createSelector(
selectState,
selectMyClaimForUri,
selectClaimsByUri,
({ name }, myClaimForUri, claimsByUri) => {
// We only care about the winning claim for the short uri
const shortUri = buildURI({ contentName: name });
const claimForShortUri = claimsByUri[shortUri];
if (!myClaimForUri && claimForShortUri) {
return claimForShortUri.effective_amount;
} else if (myClaimForUri && claimForShortUri) {
// https://github.com/lbryio/lbry/issues/1476
// We should check the current effective_amount on my claim to see how much additional lbc
// is needed to win the claim. Currently this is not possible during a takeover.
// With this, we could say something like, "You have x lbc in support, if you bid y additional LBC you will control the claim"
// For now just ignore supports. We will just show the winning claim's bid amount
return claimForShortUri.effective_amount || claimForShortUri.amount;
}
return null;
}
);

2
src/renderer/scss/component/_form-field.scss
View file

@ -97,7 +97,7 @@
.form-field__help {
color: var(--color-help);
padding-top: $spacing-vertical * 2/3;
padding-top: $spacing-vertical * 1/3;
}
.form-field__error {