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

108 lines
3 KiB
React
Raw Normal View History

2017-06-06 23:19:12 +02:00
import React from "react";
import lbryuri from "lbryuri.js";
2017-07-14 01:18:28 +02:00
import CardMedia from "component/cardMedia";
2017-06-06 23:19:12 +02:00
import Link from "component/link";
2017-07-11 09:57:56 +02:00
import { Thumbnail, TruncatedText, Icon } from "component/common";
2017-06-06 23:19:12 +02:00
import FilePrice from "component/filePrice";
import UriIndicator from "component/uriIndicator";
import NsfwOverlay from "component/nsfwOverlay";
2017-07-11 09:57:56 +02:00
import TruncatedMarkdown from "component/truncatedMarkdown";
2017-04-23 16:01:00 +02:00
2017-06-08 06:42:19 +02:00
class FileCard extends React.PureComponent {
2017-06-22 16:17:01 +02:00
constructor(props) {
super(props);
this.state = {
hovered: false,
};
}
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
}
}
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);
const title = metadata && metadata.title ? metadata.title : uri;
2017-07-14 01:18:28 +02:00
const thumbnail = metadata && metadata.thumbnail
? metadata.thumbnail
: null;
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 = "";
if (isResolvingUri && !claim) {
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-07-17 16:50:07 +02:00
<CardMedia title={title} thumbnail={thumbnail} />
2017-04-23 16:01:00 +02:00
<div className="card__title-identity">
2017-07-20 00:13:19 +02:00
<div className="card__title" title={title}>
2017-06-06 23:19:12 +02:00
<TruncatedText lines={1}>{title}</TruncatedText>
2017-07-20 00:13:19 +02:00
</div>
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>
<div className="card__content card__subtext card__subtext--two-lines">
2017-06-15 21:30:56 +02:00
<TruncatedMarkdown lines={2}>{description}</TruncatedMarkdown>
2017-04-23 16:01:00 +02:00
</div>
2017-05-06 18:31:47 +02:00
</Link>
2017-04-23 16:01:00 +02:00
</div>
{obscureNsfw && this.state.hovered && <NsfwOverlay />}
2017-04-23 16:01:00 +02:00
</section>
);
}
}
2017-04-23 16:01:00 +02:00
2017-06-06 06:21:55 +02:00
export default FileCard;