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

132 lines
3.6 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";
2017-09-17 22:33:52 +02:00
import FileDetails from "component/fileDetails";
2017-06-06 23:19:12 +02:00
import UriIndicator from "component/uriIndicator";
import Icon from "component/icon";
2017-09-17 22:33:52 +02:00
import WalletSendTip from "component/walletSendTip";
import DateTime from "component/dateTime";
import * as icons from "constants/icons";
const FormatItem = props => {
const {
publishedDate,
contentType,
claim: { height },
metadata: { language, license },
} = props;
const mediaType = lbry.getMediaType(contentType);
return (
<table className="table-standard">
<tbody>
<tr>
<td>{__("Published on")}</td><td><DateTime block={height} /></td>
</tr>
<tr>
<td>{__("Content-Type")}</td><td>{mediaType}</td>
</tr>
<tr>
<td>{__("Language")}</td><td>{language}</td>
</tr>
<tr>
<td>{__("License")}</td><td>{license}</td>
</tr>
</tbody>
</table>
);
};
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,
2017-09-17 20:26:55 +02:00
tab,
uri,
2017-07-30 00:56:08 +02:00
rewardedContentClaimIds,
} = this.props;
2017-05-01 22:50:07 +02:00
2017-09-17 20:26:55 +02:00
const showTipBox = tab == "tip";
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
}
2017-06-06 23:19:12 +02:00
const title = metadata.title;
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 (
2017-09-17 22:33:52 +02:00
<div>
2017-05-12 19:14:06 +02:00
<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">
2017-09-17 22:33:52 +02:00
{(!tab || tab === "details") &&
<div>
{" "} {" "}
<div className="card__title-identity">
{!fileInfo || fileInfo.written_bytes <= 0
? <span style={{ float: "right" }}>
<FilePrice uri={lbryuri.normalize(uri)} />
{isRewardContent && <span>{" "}<Icon icon={icons.FEATURED} /></span>}
2017-09-17 22:33:52 +02:00
</span>
: null}
<h1>{title}</h1>
<div className="card__subtitle">
<UriIndicator uri={uri} link={true} />
</div>
</div>
<FileDetails uri={uri} />
</div>}
2017-09-17 22:33:52 +02:00
{tab === "tip" &&
<WalletSendTip claim_id={claim.claim_id} uri={uri} />}
2017-05-01 22:50:07 +02:00
</div>
2017-05-12 19:14:06 +02:00
</section>
2017-09-17 22:33:52 +02:00
</div>
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;