lbry-desktop/ui/js/component/fileActions/view.jsx

import React from 'react';
import { Icon, BusyMessage } from 'component/common';
import FilePrice from 'component/filePrice';
import { Modal } from 'component/modal';
import { FormField } from 'component/form';
import Link from 'component/link';
import { ToolTip } from 'component/tooltip';
import { DropDownMenu, DropDownMenuItem } from 'component/menu';

class FileActions extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			forceShowActions: false,
			deleteChecked: false
		};
	}

	componentWillMount() {
		this.checkAvailability(this.props.uri);
	}

	componentWillReceiveProps(nextProps) {
		this.checkAvailability(nextProps.uri);
	}

	checkAvailability(uri) {
		if (!this._uri || uri !== this._uri) {
			this._uri = uri;
			this.props.checkAvailability(uri);
		}
	}

	onShowFileActionsRowClicked() {
		this.setState({
			forceShowActions: true
		});
	}

	handleDeleteCheckboxClicked(event) {
		this.setState({
			deleteChecked: event.target.checked
		});
	}

	onAffirmPurchase() {
		this.props.closeModal();
		this.props.loadVideo(this.props.uri);
	}

	render() {
		const {
			fileInfo,
			isAvailable,
			platform,
			downloading,
			uri,
			deleteFile,
			openInFolder,
			openInShell,
			modal,
			openModal,
			closeModal,
			startDownload,
			costInfo,
			loading
		} = this.props;

		const deleteChecked = this.state.deleteChecked,
			metadata = fileInfo ? fileInfo.metadata : null,
			openInFolderMessage = platform.startsWith('Mac')
				? __('Open in Finder')
				: __('Open in Folder'),
			showMenu = fileInfo && Object.keys(fileInfo).length > 0,
			title = metadata ? metadata.title : uri;

		let content;

		if (loading || downloading) {
			const progress = fileInfo && fileInfo.written_bytes
				? fileInfo.written_bytes / fileInfo.total_bytes * 100
				: 0,
				label = fileInfo
					? progress.toFixed(0) + __('% complete')
					: __('Connecting...'),
				labelWithIcon = (
					<span className="button__content">
						<Icon icon="icon-download" /><span>{label}</span>
					</span>
				);

			content = (
				<div className="faux-button-block file-actions__download-status-bar button-set-item">
					<div
						className="faux-button-block file-actions__download-status-bar-overlay"
						style={{ width: progress + '%' }}
					>
						{labelWithIcon}
					</div>
					{labelWithIcon}
				</div>
			);
		} else if (!fileInfo && isAvailable === undefined) {
			content = <BusyMessage message={__('Checking availability')} />;
		} else if (!fileInfo && !isAvailable && !this.state.forceShowActions) {
			content = (
				<div>
					<div className="button-set-item empty">
						{__('Content unavailable.')}
					</div>
					<ToolTip
						label={__('Why?')}
						body={__(
							'The content on LBRY is hosted by its users. It appears there are no users connected that have this file at the moment.'
						)}
						className="button-set-item"
					/>
					<Link
						label={__('Try Anyway')}
						onClick={this.onShowFileActionsRowClicked.bind(this)}
						className="button-text button-set-item"
					/>
				</div>
			);
		} else if (fileInfo === null && !downloading) {
			if (!costInfo) {
				content = <BusyMessage message={__('Fetching cost info')} />;
			} else {
				content = (
					<Link
						button="text"
						label={__('Download')}
						icon="icon-download"
						onClick={() => {
							startDownload(uri);
						}}
					/>
				);
			}
		} else if (fileInfo && fileInfo.download_path) {
			content = (
				<Link
					label={__('Open')}
					button="text"
					icon="icon-folder-open"
					onClick={() => openInShell(fileInfo)}
				/>
			);
		} else {
			console.log('handle this case of file action props?');
		}

		return (
			<section className="file-actions">
				{content}
				{showMenu
					? <DropDownMenu>
							<DropDownMenuItem
								key={0}
								onClick={() => openInFolder(fileInfo)}
								label={openInFolderMessage}
							/>
							<DropDownMenuItem
								key={1}
								onClick={() => openModal('confirmRemove')}
								label={__('Remove...')}
							/>
						</DropDownMenu>
					: ''}
				<Modal
					type="confirm"
					isOpen={modal == 'affirmPurchase'}
					contentLabel={__('Confirm Purchase')}
					onConfirmed={this.onAffirmPurchase.bind(this)}
					onAborted={closeModal}
				>
					{__('This will purchase')} <strong>{title}</strong> {__('for')}
					{' '}<strong><FilePrice uri={uri} look="plain" /></strong>
					{' '}{__('credits')}.
				</Modal>
				<Modal
					isOpen={modal == 'notEnoughCredits'}
					contentLabel={__('Not enough credits')}
					onConfirmed={closeModal}
				>
					{__("You don't have enough LBRY credits to pay for this stream.")}
				</Modal>
				<Modal
					isOpen={modal == 'timedOut'}
					contentLabel={__('Download failed')}
					onConfirmed={closeModal}
				>
					{__('LBRY was unable to download the stream')} <strong>{uri}</strong>.
				</Modal>
				<Modal
					isOpen={modal == 'confirmRemove'}
					contentLabel={__('Not enough credits')}
					type="confirm"
					confirmButtonLabel={__('Remove')}
					onConfirmed={() => deleteFile(fileInfo.outpoint, deleteChecked)}
					onAborted={closeModal}
				>
					<p>
						{__("Are you sure you'd like to remove")} <cite>{title}</cite>
						{' '}{__('from LBRY?')}
					</p>

					<label>
						<FormField
							type="checkbox"
							checked={deleteChecked}
							onClick={this.handleDeleteCheckboxClicked.bind(this)}
						/>
						{' '}{__('Delete this file from my computer')}
					</label>
				</Modal>
			</section>
		);
	}
}

export default FileActions;