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

import React from 'react';
import lbry from 'lbry.js';
import lbryuri from 'lbryuri.js';
import Link from 'component/link';
import { Thumbnail, TruncatedText, Icon } from 'component/common';
import FilePrice from 'component/filePrice';
import UriIndicator from 'component/uriIndicator';

class FileCard extends React.Component {
	componentWillMount() {
		this.resolve(this.props);
	}

	componentWillReceiveProps(nextProps) {
		this.resolve(nextProps);
	}

	resolve(props) {
		const { isResolvingUri, resolveUri, claim, uri } = props;

		if (!isResolvingUri && claim === undefined && uri) {
			resolveUri(uri);
		}
	}

	componentWillUnmount() {
		const { isResolvingUri, cancelResolveUri, uri } = this.props;

		if (isResolvingUri) {
			cancelResolveUri(uri);
		}
	}

	handleMouseOver() {
		this.setState({
			hovered: true
		});
	}

	handleMouseOut() {
		this.setState({
			hovered: false
		});
	}

	render() {
		const { claim, fileInfo, metadata, isResolvingUri, navigate } = this.props;

		const uri = lbryuri.normalize(this.props.uri);
		const title = !isResolvingUri && metadata && metadata.title
			? metadata.title
			: uri;
		const obscureNsfw = this.props.obscureNsfw && metadata && metadata.nsfw;

		let description = '';
		if (isResolvingUri) {
			description = __('Loading...');
		} else if (metadata && metadata.description) {
			description = metadata.description;
		} else if (claim === null) {
			description = __('This address contains no content.');
		}

		return (
			<section
				className={
					'card card--small card--link ' +
					(obscureNsfw ? 'card--obscured ' : '')
				}
				onMouseEnter={this.handleMouseOver.bind(this)}
				onMouseLeave={this.handleMouseOut.bind(this)}
			>
				<div className="card__inner">
					<Link
						onClick={() => navigate('/show', { uri })}
						className="card__link"
					>
						<div className="card__title-identity">
							<h5 title={title}>
								<TruncatedText lines={1}>{title}</TruncatedText>
							</h5>
							<div className="card__subtitle">
								<span style={{ float: 'right' }}>
									<FilePrice uri={uri} />
									{fileInfo
										? <span>{' '}<Icon fixed icon="icon-folder" /></span>
										: ''}
								</span>
								<UriIndicator uri={uri} />
							</div>
						</div>
						{metadata &&
							metadata.thumbnail &&
							<div
								className="card__media"
								style={{ backgroundImage: "url('" + metadata.thumbnail + "')" }}
							/>}
						<div className="card__content card__subtext card__subtext--two-lines">
							<TruncatedText lines={2}>{description}</TruncatedText>
						</div>
					</Link>
					{obscureNsfw && this.state.hovered
						? <div className="card-overlay">
								<p>
									{__(
										'This content is Not Safe For Work. To view adult content, please change your'
									)}
									{' '}<Link
										className="button-text"
										onClick={() => navigate('settings')}
										label={__('Settings')}
									/>.
								</p>
							</div>
						: null}
				</div>
			</section>
		);
	}
}

export default FileCard;