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

144 lines
4.2 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 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";
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() {
2017-06-06 23:19:12 +02:00
const { claim, fileInfo, metadata, contentType, uri } = 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} />;
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)} />
</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-05-13 00:50:51 +02:00
{metadata && metadata.description}
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;