lbry-desktop/ui/js/page/filePage/view.jsx

159 lines
4.7 KiB
React
Raw Normal View History

2017-06-06 23:19:12 +02:00
import React from "react";
2017-06-15 21:30:56 +02:00
import ReactMarkdown from "react-markdown";
2017-06-06 23:19:12 +02:00
import lbry from "lbry.js";
import lbryuri from "lbryuri.js";
import Video from "component/video";
import { Thumbnail } from "component/common";
import FilePrice from "component/filePrice";
import FileActions from "component/fileActions";
import Link from "component/link";
import UriIndicator from "component/uriIndicator";
2017-07-30 00:56:08 +02:00
import IconFeatured from "component/iconFeatured";
2016-07-16 04:58:24 +02:00
2017-06-06 06:21:55 +02:00
const FormatItem = props => {
2017-06-16 02:05:15 +02:00
const { contentType, metadata: { language, license } } = props;
2017-05-04 05:44:08 +02:00
2017-04-24 16:17:36 +02:00
const mediaType = lbry.getMediaType(contentType);
2017-04-24 16:17:36 +02:00
return (
<table className="table-standard">
<tbody>
<tr>
<td>{__("Content-Type")}</td><td>{mediaType}</td>
2017-04-24 16:17:36 +02:00
</tr>
<tr>
<td>{__("Language")}</td><td>{language}</td>
2017-04-24 16:17:36 +02:00
</tr>
<tr>
<td>{__("License")}</td><td>{license}</td>
2017-04-24 16:17:36 +02:00
</tr>
</tbody>
</table>
2017-06-06 23:19:12 +02:00
);
2017-06-06 06:21:55 +02:00
};
2017-05-12 19:14:06 +02:00
2017-06-08 06:42:19 +02:00
class FilePage extends React.PureComponent {
2017-05-13 00:50:51 +02:00
componentDidMount() {
2017-06-06 23:19:12 +02:00
this.fetchFileInfo(this.props);
this.fetchCostInfo(this.props);
2017-05-12 19:14:06 +02:00
}
componentWillReceiveProps(nextProps) {
2017-06-06 23:19:12 +02:00
this.fetchFileInfo(nextProps);
2017-05-12 19:14:06 +02:00
}
fetchFileInfo(props) {
2017-05-13 00:50:51 +02:00
if (props.fileInfo === undefined) {
2017-06-06 23:19:12 +02:00
props.fetchFileInfo(props.uri);
2017-05-12 19:14:06 +02:00
}
}
fetchCostInfo(props) {
if (props.costInfo === undefined) {
2017-06-06 23:19:12 +02:00
props.fetchCostInfo(props.uri);
}
}
2017-05-12 19:14:06 +02:00
render() {
const {
claim,
fileInfo,
metadata,
contentType,
uri,
2017-07-30 00:56:08 +02:00
rewardedContentClaimIds,
} = this.props;
2017-05-01 22:50:07 +02:00
2017-05-15 05:50:59 +02:00
if (!claim || !metadata) {
2017-06-06 23:19:12 +02:00
return (
<span className="empty">{__("Empty claim or metadata info.")}</span>
);
2017-05-15 05:50:59 +02:00
}
const {
txid,
nout,
2017-05-21 16:42:34 +02:00
channel_name: channelName,
2017-05-15 05:50:59 +02:00
has_signature: hasSignature,
signature_is_valid: signatureIsValid,
2017-06-06 23:19:12 +02:00
value,
} = claim;
2017-05-01 22:50:07 +02:00
2017-06-06 23:19:12 +02:00
const outpoint = txid + ":" + nout;
const title = metadata.title;
const channelClaimId = claim.value && claim.value.publisherSignature
? claim.value.publisherSignature.certificateId
: null;
const channelUri = signatureIsValid && hasSignature && channelName
? lbryuri.build({ channelName, claimId: channelClaimId }, false)
: null;
const uriIndicator = <UriIndicator uri={uri} />;
2017-07-30 00:56:08 +02:00
const isRewardContent = rewardedContentClaimIds.includes(claim.claim_id);
2017-06-06 23:19:12 +02:00
const mediaType = lbry.getMediaType(contentType);
const player = require("render-media");
const obscureNsfw = this.props.obscureNsfw && metadata && metadata.nsfw;
2017-06-06 23:19:12 +02:00
const isPlayable =
Object.values(player.mime).indexOf(contentType) !== -1 ||
mediaType === "audio";
2017-05-01 22:50:07 +02:00
2017-05-12 19:14:06 +02:00
return (
<main className="main--single-column">
<section className="show-page-media">
2017-06-06 23:19:12 +02:00
{isPlayable
? <Video className="video-embedded" uri={uri} />
: metadata && metadata.thumbnail
? <Thumbnail src={metadata.thumbnail} />
: <Thumbnail />}
2017-05-12 19:14:06 +02:00
</section>
<section className={"card " + (obscureNsfw ? "card--obscured " : "")}>
2017-05-12 19:14:06 +02:00
<div className="card__inner">
<div className="card__title-identity">
2017-05-15 05:50:59 +02:00
{!fileInfo || fileInfo.written_bytes <= 0
2017-06-06 23:19:12 +02:00
? <span style={{ float: "right" }}>
<FilePrice uri={lbryuri.normalize(uri)} />
2017-07-30 00:56:08 +02:00
{isRewardContent && <span>{" "}<IconFeatured /></span> }
2017-06-06 23:19:12 +02:00
</span>
: null}
<h1>{title}</h1>
2017-05-12 19:14:06 +02:00
<div className="card__subtitle">
2017-06-06 23:19:12 +02:00
{channelUri
? <Link
onClick={() =>
this.props.navigate("/show", { uri: channelUri })}
>
{uriIndicator}
</Link>
: uriIndicator}
2017-05-12 19:14:06 +02:00
</div>
<div className="card__actions">
2017-05-15 05:50:59 +02:00
<FileActions uri={uri} />
</div>
2017-05-12 19:14:06 +02:00
</div>
<div className="card__content card__subtext card__subtext card__subtext--allow-newlines">
2017-06-15 21:30:56 +02:00
<ReactMarkdown
source={(metadata && metadata.description) || ""}
escapeHtml={true}
disallowedTypes={["Heading", "HtmlInline", "HtmlBlock"]}
/>
2017-05-12 19:14:06 +02:00
</div>
2017-05-01 22:50:07 +02:00
</div>
2017-06-06 23:19:12 +02:00
{metadata
? <div className="card__content">
<FormatItem metadata={metadata} contentType={contentType} />
</div>
: ""}
2017-05-05 07:10:37 +02:00
<div className="card__content">
2017-06-06 23:19:12 +02:00
<Link
2017-06-27 19:12:17 +02:00
href={`https://lbry.io/dmca?claim_id=${claim.claim_id}`}
2017-06-06 23:19:12 +02:00
label={__("report")}
className="button-text-help"
/>
2017-05-12 19:14:06 +02:00
</div>
</section>
</main>
2017-06-06 23:19:12 +02:00
);
2017-05-12 19:14:06 +02:00
}
2017-05-05 07:10:37 +02:00
}
2017-05-01 21:59:40 +02:00
export default FilePage;