lbry-desktop/ui/js/component/fileDetails/view.jsx
2017-09-17 16:33:52 -04:00

65 lines
1.8 KiB
JavaScript

import React from "react";
import ReactMarkdown from "react-markdown";
import lbry from "lbry.js";
import FileActions from "component/fileActions";
import Link from "component/link";
import DateTime from "component/dateTime";
class FileDetails extends React.PureComponent {
render() {
const { claim, contentType, metadata, uri } = this.props;
if (!claim || !metadata) {
return (
<div className="card__content">
<span className="empty">{__("Empty claim or metadata info.")}</span>
</div>
);
}
const { description, language, license } = metadata;
const { height } = claim;
const mediaType = lbry.getMediaType(contentType);
return (
<div>
<FileActions uri={uri} />
<div className="card__content card__subtext card__subtext--allow-newlines">
<ReactMarkdown
source={description || ""}
escapeHtml={true}
disallowedTypes={["Heading", "HtmlInline", "HtmlBlock"]}
/>
</div>
<div className="card__content">
<table className="table-standard table-stretch">
<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>
<p>
<Link
href={`https://lbry.io/dmca?claim_id=${claim.claim_id}`}
label={__("report")}
/>
</p>
</div>
</div>
);
}
}
export default FileDetails;