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;