lbry-desktop/ui/js/page/publish/view.jsx

import React from 'react';
import lbry from 'lbry';
import lbryuri from 'lbryuri';
import { FormField, FormRow } from 'component/form.js';
import Link from 'component/link';
import rewards from 'rewards';
import Modal from 'component/modal';

class PublishPage extends React.Component {
	constructor(props) {
		super(props);

		this._requiredFields = ['meta_title', 'name', 'bid', 'tos_agree'];

		this.state = {
			channels: null,
			rawName: '',
			name: '',
			bid: 10,
			hasFile: false,
			feeAmount: '',
			feeCurrency: 'USD',
			channel: 'anonymous',
			newChannelName: '@',
			newChannelBid: 10,
			nameResolved: null,
			myClaimExists: null,
			topClaimValue: 0.0,
			myClaimValue: 0.0,
			myClaimMetadata: null,
			copyrightNotice: '',
			otherLicenseDescription: '',
			otherLicenseUrl: '',
			uploadProgress: 0.0,
			uploaded: false,
			errorMessage: null,
			submitting: false,
			creatingChannel: false,
			modal: null
		};
	}

	_updateChannelList(channel) {
		// Calls API to update displayed list of channels. If a channel name is provided, will select
		// that channel at the same time (used immediately after creating a channel)
		lbry.channel_list_mine().then(channels => {
			rewards.claimReward(rewards.TYPE_FIRST_CHANNEL).then(() => {}, () => {});
			this.setState({
				channels: channels,
				...(channel ? { channel } : {})
			});
		});
	}

	handleSubmit(event) {
		if (typeof event !== 'undefined') {
			event.preventDefault();
		}

		this.setState({
			submitting: true
		});

		let checkFields = this._requiredFields;
		if (!this.state.myClaimExists) {
			checkFields.unshift('file');
		}

		let missingFieldFound = false;
		for (let fieldName of checkFields) {
			const field = this.refs[fieldName];
			if (field) {
				if (field.getValue() === '' || field.getValue() === false) {
					field.showRequiredError();
					if (!missingFieldFound) {
						field.focus();
						missingFieldFound = true;
					}
				} else {
					field.clearError();
				}
			}
		}

		if (missingFieldFound) {
			this.setState({
				submitting: false
			});
			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 = {};
		}

		for (let metaField of [
			'title',
			'description',
			'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;

		const licenseUrl = this.refs.meta_license_url.getValue();
		if (licenseUrl) {
			metadata.license_url = licenseUrl;
		}

		var doPublish = () => {
			var publishArgs = {
				name: this.state.name,
				bid: parseFloat(this.state.bid),
				metadata: metadata,
				...(this.state.channel != 'new' && this.state.channel != 'anonymous'
					? { channel_name: this.state.channel }
					: {})
			};

			if (this.refs.file.getValue() !== '') {
				publishArgs.file_path = this.refs.file.getValue();
			}

			lbry.publish(
				publishArgs,
				message => {
					this.handlePublishStarted();
				},
				null,
				error => {
					this.handlePublishError(error);
				}
			);
		};

		if (this.state.isFee) {
			lbry.wallet_unused_address().then(address => {
				metadata.fee = {};
				metadata.fee[this.state.feeCurrency] = {
					amount: parseFloat(this.state.feeAmount),
					address: address
				};

				doPublish();
			});
		} else {
			doPublish();
		}
	}

	handlePublishStarted() {
		this.setState({
			modal: 'publishStarted'
		});
	}

	handlePublishStartedConfirmed() {
		this.props.navigate('/published');
	}

	handlePublishError(error) {
		this.setState({
			submitting: false,
			modal: 'error',
			errorMessage: error.message
		});
	}

	handleNameChange(event) {
		var rawName = event.target.value;

		if (!rawName) {
			this.setState({
				rawName: '',
				name: '',
				nameResolved: false
			});

			return;
		}

		if (!lbryuri.isValidName(rawName, false)) {
			this.refs.name.showError(
				__('LBRY names must contain only letters, numbers and dashes.')
			);
			return;
		}

		const name = rawName.toLowerCase();
		this.setState({
			rawName: rawName,
			name: name,
			nameResolved: null,
			myClaimExists: null
		});

		const myClaimInfo = Object.values(this.props.myClaims).find(
			claim => claim.name === name
		);

		this.setState({
			myClaimExists: !!myClaimInfo
		});
		lbry.resolve({ uri: name }).then(
			claimInfo => {
				if (name != this.state.name) {
					return;
				}

				if (!claimInfo) {
					this.setState({
						nameResolved: false
					});
				} else {
					const topClaimIsMine =
						myClaimInfo && myClaimInfo.amount >= claimInfo.amount;
					const newState = {
						nameResolved: true,
						topClaimValue: parseFloat(claimInfo.amount),
						myClaimExists: !!myClaimInfo,
						myClaimValue: myClaimInfo ? parseFloat(myClaimInfo.amount) : null,
						myClaimMetadata: myClaimInfo ? myClaimInfo.value : null,
						topClaimIsMine: topClaimIsMine
					};

					if (topClaimIsMine) {
						newState.bid = myClaimInfo.amount;
					} else if (this.state.myClaimMetadata) {
						// Just changed away from a name we have a claim on, so clear pre-fill
						newState.bid = '';
					}

					this.setState(newState);
				}
			},
			() => {
				// Assume an error means the name is available
				this.setState({
					name: name,
					nameResolved: false,
					myClaimExists: false
				});
			}
		);
	}

	handleBidChange(event) {
		this.setState({
			bid: event.target.value
		});
	}

	handleFeeAmountChange(event) {
		this.setState({
			feeAmount: event.target.value
		});
	}

	handleFeeCurrencyChange(event) {
		this.setState({
			feeCurrency: event.target.value
		});
	}

	handleFeePrefChange(feeEnabled) {
		this.setState({
			isFee: feeEnabled
		});
	}

	handleLicenseChange(event) {
		var licenseType = event.target.options[
			event.target.selectedIndex
		].getAttribute('data-license-type');
		var newState = {
			copyrightChosen: licenseType == 'copyright',
			otherLicenseChosen: licenseType == 'other'
		};

		if (licenseType == 'copyright') {
			newState.copyrightNotice = __('All rights reserved.');
		}

		this.setState(newState);
	}

	handleCopyrightNoticeChange(event) {
		this.setState({
			copyrightNotice: event.target.value
		});
	}

	handleOtherLicenseDescriptionChange(event) {
		this.setState({
			otherLicenseDescription: event.target.value
		});
	}

	handleOtherLicenseUrlChange(event) {
		this.setState({
			otherLicenseUrl: event.target.value
		});
	}

	handleChannelChange(event) {
		const channel = event.target.value;

		this.setState({
			channel: channel
		});
	}

	handleNewChannelNameChange(event) {
		const newChannelName = event.target.value.startsWith('@')
			? event.target.value
			: '@' + event.target.value;

		if (
			newChannelName.length > 1 &&
			!lbryuri.isValidName(newChannelName.substr(1), false)
		) {
			this.refs.newChannelName.showError(
				__('LBRY channel names must contain only letters, numbers and dashes.')
			);
			return;
		} else {
			this.refs.newChannelName.clearError();
		}

		this.setState({
			newChannelName: newChannelName
		});
	}

	handleNewChannelBidChange(event) {
		this.setState({
			newChannelBid: event.target.value
		});
	}

	handleTOSChange(event) {
		this.setState({
			TOSAgreed: event.target.checked
		});
	}

	handleCreateChannelClick(event) {
		if (this.state.newChannelName.length < 5) {
			this.refs.newChannelName.showError(
				__('LBRY channel names must be at least 4 characters in length.')
			);
			return;
		}

		this.setState({
			creatingChannel: true
		});

		const newChannelName = this.state.newChannelName;
		lbry
			.channel_new({
				channel_name: newChannelName,
				amount: parseInt(this.state.newChannelBid)
			})
			.then(
				() => {
					setTimeout(() => {
						this.setState({
							creatingChannel: false
						});

						this._updateChannelList(newChannelName);
					}, 5000);
				},
				error => {
					// TODO: better error handling
					this.refs.newChannelName.showError(
						__('Unable to create channel due to an internal error.')
					);
					this.setState({
						creatingChannel: false
					});
				}
			);
	}

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

	componentWillMount() {
		this._updateChannelList();
	}

	onFileChange() {
		if (this.refs.file.getValue()) {
			this.setState({ hasFile: true });
		} else {
			this.setState({ hasFile: false });
		}
	}

	getNameBidHelpText() {
		if (!this.state.name) {
			return __('Select a URL for this publish.');
		} else if (this.state.nameResolved === false) {
			return __('This URL is unused.');
		} else if (this.state.myClaimExists) {
			return __(
				'You have already used this URL. Publishing to it again will update your previous publish.'
			);
		} else if (this.state.topClaimValue) {
			return (
				<span>
					{__n(
						'A deposit of at least "%s" credit is required to win "%s". However, you can still get a permanent URL for any amount.',
						'A deposit of at least "%s" credits is required to win "%s". However, you can still get a permanent URL for any amount.',
						this.state.topClaimValue /*pluralization param*/,
						this.state.topClaimValue,
						this.state.name /*regular params*/
					)}
				</span>
			);
		} else {
			return '';
		}
	}

	closeModal() {
		this.setState({
			modal: null
		});
	}

	render() {
		if (this.state.channels === null) {
			return null;
		}

		const lbcInputHelp = __(
			'This LBC remains yours and the deposit can be undone at any time.'
		);

		return (
			<main className="main--single-column">
				<form
					onSubmit={event => {
						this.handleSubmit(event);
					}}
				>
					<section className="card">
						<div className="card__title-primary">
							<h4>{__('Content')}</h4>
							<div className="card__subtitle">
								{__('What are you publishing?')}
							</div>
						</div>
						<div className="card__content">
							<FormRow
								name="file"
								label="File"
								ref="file"
								type="file"
								onChange={event => {
									this.onFileChange(event);
								}}
								helper={
									this.state.myClaimExists
										? __(
												"If you don't choose a file, the file from your existing claim will be used."
											)
										: null
								}
							/>
						</div>
						{!this.state.hasFile
							? ''
							: <div>
									<div className="card__content">
										<FormRow
											label={__('Title')}
											type="text"
											ref="meta_title"
											name="title"
											placeholder={__('Title')}
										/>
									</div>
									<div className="card__content">
										<FormRow
											type="text"
											label={__('Thumbnail URL')}
											ref="meta_thumbnail"
											name="thumbnail"
											placeholder="http://spee.ch/mylogo"
										/>
									</div>
									<div className="card__content">
										<FormRow
											label={__('Description')}
											type="textarea"
											ref="meta_description"
											name="description"
											placeholder={__('Description of your content')}
										/>
									</div>
									<div className="card__content">
										<FormRow
											label={__('Language')}
											type="select"
											defaultValue="en"
											ref="meta_language"
											name="language"
										>
											<option value="en">{__('English')}</option>
											<option value="zh">{__('Chinese')}</option>
											<option value="fr">{__('French')}</option>
											<option value="de">{__('German')}</option>
											<option value="jp">{__('Japanese')}</option>
											<option value="ru">{__('Russian')}</option>
											<option value="es">{__('Spanish')}</option>
										</FormRow>
									</div>
									<div className="card__content">
										<FormRow
											type="select"
											label={__('Maturity')}
											defaultValue="en"
											ref="meta_nsfw"
											name="nsfw"
										>
											{/* <option value=""></option> */}
											<option value="0">{__('All Ages')}</option>
											<option value="1">{__('Adults Only')}</option>
										</FormRow>
									</div>
								</div>}
					</section>

					<section className="card">
						<div className="card__title-primary">
							<h4>{__('Access')}</h4>
							<div className="card__subtitle">
								{__('How much does this content cost?')}
							</div>
						</div>
						<div className="card__content">
							<div className="form-row__label-row">
								<label className="form-row__label">{__('Price')}</label>
							</div>
							<FormRow
								label={__('Free')}
								type="radio"
								name="isFree"
								value="1"
								onChange={() => {
									this.handleFeePrefChange(false);
								}}
								defaultChecked={!this.state.isFee}
							/>
							<FormField
								type="radio"
								name="isFree"
								label={!this.state.isFee ? __('Choose price...') : __('Price ')}
								onChange={() => {
									this.handleFeePrefChange(true);
								}}
								defaultChecked={this.state.isFee}
							/>
							<span className={!this.state.isFee ? 'hidden' : ''}>
								<FormField
									type="number"
									className="form-field__input--inline"
									step="0.01"
									placeholder="1.00"
									onChange={event => this.handleFeeAmountChange(event)}
								/>
								{' '}
								<FormField
									type="select"
									onChange={event => {
										this.handleFeeCurrencyChange(event);
									}}
								>
									<option value="USD">{__('US Dollars')}</option>
									<option value="LBC">{__('LBRY credits')}</option>
								</FormField>
							</span>
							{this.state.isFee
								? <div className="form-field__helper">
										{__(
											'If you choose to price this content in dollars, the number of credits charged will be adjusted based on the value of LBRY credits at the time of purchase.'
										)}
									</div>
								: ''}
							<FormRow
								label="License"
								type="select"
								ref="meta_license"
								name="license"
								onChange={event => {
									this.handleLicenseChange(event);
								}}
							>
								<option />
								<option>{__('Public Domain')}</option>
								<option 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">
									{__(
										'Creative Commons Attribution-ShareAlike 4.0 International'
									)}
								</option>
								<option 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">
									{__(
										'Creative Commons Attribution-NonCommercial 4.0 International'
									)}
								</option>
								<option 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">
									{__(
										'Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International'
									)}
								</option>
								<option
									data-license-type="copyright"
									{...(this.state.copyrightChosen
										? { value: this.state.copyrightNotice }
										: {})}
								>
									{__('Copyrighted...')}
								</option>
								<option
									data-license-type="other"
									{...(this.state.otherLicenseChosen
										? { value: this.state.otherLicenseDescription }
										: {})}
								>
									{__('Other...')}
								</option>
							</FormRow>
							<FormField
								type="hidden"
								ref="meta_license_url"
								name="license_url"
								value={this.getLicenseUrl()}
							/>
							{this.state.copyrightChosen
								? <FormRow
										label={__('Copyright notice')}
										type="text"
										name="copyright-notice"
										value={this.state.copyrightNotice}
										onChange={event => {
											this.handleCopyrightNoticeChange(event);
										}}
									/>
								: null}
							{this.state.otherLicenseChosen
								? <FormRow
										label={__('License description')}
										type="text"
										name="other-license-description"
										onChange={event => {
											this.handleOtherLicenseDescriptionChange();
										}}
									/>
								: null}
							{this.state.otherLicenseChosen
								? <FormRow
										label={__('License URL')}
										type="text"
										name="other-license-url"
										onChange={event => {
											this.handleOtherLicenseUrlChange(event);
										}}
									/>
								: null}
						</div>
					</section>

					<section className="card">
						<div className="card__title-primary">
							<h4>{__('Identity')}</h4>
							<div className="card__subtitle">
								{__('Who created this content?')}
							</div>
						</div>
						<div className="card__content">
							<FormRow
								type="select"
								tabIndex="1"
								onChange={event => {
									this.handleChannelChange(event);
								}}
								value={this.state.channel}
							>
								<option key="anonymous" value="anonymous">
									{__('Anonymous')}
								</option>
								{this.state.channels.map(({ name }) =>
									<option key={name} value={name}>{name}</option>
								)}
								<option key="new" value="new">{__('New identity...')}</option>
							</FormRow>
						</div>
						{this.state.channel == 'new'
							? <div className="card__content">
									<FormRow
										label={__('Name')}
										type="text"
										onChange={event => {
											this.handleNewChannelNameChange(event);
										}}
										ref={newChannelName => {
											this.refs.newChannelName = newChannelName;
										}}
										value={this.state.newChannelName}
									/>
									<FormRow
										label={__('Deposit')}
										postfix="LBC"
										step="0.01"
										type="number"
										helper={lbcInputHelp}
										onChange={event => {
											this.handleNewChannelBidChange(event);
										}}
										value={this.state.newChannelBid}
									/>
									<div className="form-row-submit">
										<Link
											button="primary"
											label={
												!this.state.creatingChannel
													? __('Create identity')
													: __('Creating identity...')
											}
											onClick={event => {
												this.handleCreateChannelClick(event);
											}}
											disabled={this.state.creatingChannel}
										/>
									</div>
								</div>
							: null}
					</section>

					<section className="card">
						<div className="card__title-primary">
							<h4>{__('Address')}</h4>
							<div className="card__subtitle">
								{__('Where should this content permanently reside?')}
								{' '}<Link
									label={__('Read more')}
									href="https://lbry.io/faq/naming"
								/>.
							</div>
						</div>
						<div className="card__content">
							<FormRow
								prefix="lbry://"
								type="text"
								ref="name"
								placeholder="myname"
								value={this.state.rawName}
								onChange={event => {
									this.handleNameChange(event);
								}}
								helper={this.getNameBidHelpText()}
							/>
						</div>
						{this.state.rawName
							? <div className="card__content">
									<FormRow
										ref="bid"
										type="number"
										step="0.01"
										label={__('Deposit')}
										postfix="LBC"
										onChange={event => {
											this.handleBidChange(event);
										}}
										value={this.state.bid}
										placeholder={
											this.state.nameResolved
												? this.state.topClaimValue + 10
												: 100
										}
										helper={lbcInputHelp}
									/>
								</div>
							: ''}
					</section>

					<section className="card">
						<div className="card__title-primary">
							<h4>{__('Terms of Service')}</h4>
						</div>
						<div className="card__content">
							<FormRow
								label={
									<span>
										{__('I agree to the')}
										{' '}<Link
											href="https://www.lbry.io/termsofservice"
											label={__('LBRY terms of service')}
											checked={this.state.TOSAgreed}
										/>
									</span>
								}
								type="checkbox"
								name="tos_agree"
								ref={field => {
									this.refs.tos_agree = field;
								}}
								onChange={event => {
									this.handleTOSChange(event);
								}}
							/>
						</div>
					</section>

					<div className="card-series-submit">
						<Link
							button="primary"
							label={
								!this.state.submitting ? __('Publish') : __('Publishing...')
							}
							onClick={event => {
								this.handleSubmit(event);
							}}
							disabled={this.state.submitting}
						/>
						<Link
							button="cancel"
							onClick={this.props.back}
							label={__('Cancel')}
						/>
						<input type="submit" className="hidden" />
					</div>
				</form>

				<Modal
					isOpen={this.state.modal == 'publishStarted'}
					contentLabel={__('File published')}
					onConfirmed={event => {
						this.handlePublishStartedConfirmed(event);
					}}
				>
					<p>
						{__('Your file has been published to LBRY at the address')}
						{' '}<code>lbry://{this.state.name}</code>!
					</p>
					<p>
						{__(
							'The file will take a few minutes to appear for other LBRY users. Until then it will be listed as "pending" under your published files.'
						)}
					</p>
				</Modal>
				<Modal
					isOpen={this.state.modal == 'error'}
					contentLabel={__('Error publishing file')}
					onConfirmed={event => {
						this.closeModal(event);
					}}
				>
					{__(
						'The following error occurred when attempting to publish your file'
					)}: {this.state.errorMessage}
				</Modal>
			</main>
		);
	}
}

export default PublishPage;