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

124 lines
3.4 KiB
React
Raw Normal View History

2017-06-06 23:19:12 +02:00
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";
2017-04-23 16:01:00 +02:00
2017-05-09 00:22:27 +02:00
class FileCard extends React.Component {
componentWillMount() {
2017-06-06 23:19:12 +02:00
this.resolve(this.props);
2017-05-15 18:34:33 +02:00
}
componentWillReceiveProps(nextProps) {
2017-06-06 23:19:12 +02:00
this.resolve(nextProps);
2017-05-15 18:34:33 +02:00
}
resolve(props) {
2017-06-06 23:19:12 +02:00
const { isResolvingUri, resolveUri, claim, uri } = props;
2017-06-06 23:19:12 +02:00
if (!isResolvingUri && claim === undefined && uri) {
resolveUri(uri);
2017-04-23 16:01:00 +02:00
}
}
2017-05-15 18:34:33 +02:00
componentWillUnmount() {
2017-06-06 23:19:12 +02:00
const { isResolvingUri, cancelResolveUri, uri } = this.props;
if (isResolvingUri) {
2017-06-06 23:19:12 +02:00
cancelResolveUri(uri);
}
2017-05-15 18:34:33 +02:00
}
handleMouseOver() {
2017-04-23 16:01:00 +02:00
this.setState({
hovered: true,
});
}
handleMouseOut() {
2017-04-23 16:01:00 +02:00
this.setState({
hovered: false,
});
}
render() {
2017-06-06 23:19:12 +02:00
const { claim, fileInfo, metadata, isResolvingUri, navigate } = this.props;
2017-04-23 16:01:00 +02:00
const uri = lbryuri.normalize(this.props.uri);
2017-06-06 23:19:12 +02:00
const title = !isResolvingUri && metadata && metadata.title
? metadata.title
: uri;
2017-05-10 03:33:13 +02:00
const obscureNsfw = this.props.obscureNsfw && metadata && metadata.nsfw;
2017-06-06 23:19:12 +02:00
let description = "";
2017-05-10 03:33:13 +02:00
if (isResolvingUri) {
2017-06-06 23:19:12 +02:00
description = __("Loading...");
2017-05-10 03:33:13 +02:00
} else if (metadata && metadata.description) {
2017-06-06 23:19:12 +02:00
description = metadata.description;
} else if (claim === null) {
2017-06-06 23:19:12 +02:00
description = __("This address contains no content.");
2017-05-02 06:48:16 +02:00
}
2017-04-23 16:01:00 +02:00
return (
2017-06-06 23:19:12 +02:00
<section
className={
"card card--small card--link " +
(obscureNsfw ? "card--obscured " : "")
}
onMouseEnter={this.handleMouseOver.bind(this)}
onMouseLeave={this.handleMouseOut.bind(this)}
>
2017-04-23 16:01:00 +02:00
<div className="card__inner">
2017-06-06 23:19:12 +02:00
<Link
onClick={() => navigate("/show", { uri })}
className="card__link"
>
2017-04-23 16:01:00 +02:00
<div className="card__title-identity">
2017-06-06 23:19:12 +02:00
<h5 title={title}>
<TruncatedText lines={1}>{title}</TruncatedText>
</h5>
2017-04-23 16:01:00 +02:00
<div className="card__subtitle">
2017-06-06 23:19:12 +02:00
<span style={{ float: "right" }}>
<FilePrice uri={uri} />
2017-06-06 23:19:12 +02:00
{fileInfo
? <span>{" "}<Icon fixed icon="icon-folder" /></span>
: ""}
</span>
2017-05-02 07:25:31 +02:00
<UriIndicator uri={uri} />
2017-04-23 16:01:00 +02:00
</div>
</div>
2017-06-06 23:19:12 +02:00
{metadata &&
metadata.thumbnail &&
<div
className="card__media"
style={{ backgroundImage: "url('" + metadata.thumbnail + "')" }}
/>}
2017-04-23 16:01:00 +02:00
<div className="card__content card__subtext card__subtext--two-lines">
2017-06-06 23:19:12 +02:00
<TruncatedText lines={2}>{description}</TruncatedText>
2017-04-23 16:01:00 +02:00
</div>
2017-05-06 18:31:47 +02:00
</Link>
2017-05-09 22:12:48 +02:00
{obscureNsfw && this.state.hovered
2017-06-06 23:19:12 +02:00
? <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>
2017-04-23 16:01:00 +02:00
: null}
</div>
</section>
);
}
}
2017-04-23 16:01:00 +02:00
2017-06-06 06:21:55 +02:00
export default FileCard;