148 lines
4.1 KiB
JavaScript
148 lines
4.1 KiB
JavaScript
import React from 'react';
|
|
import lbry from 'lbry.js';
|
|
import lighthouse from 'lighthouse.js';
|
|
import lbryuri from 'lbryuri.js';
|
|
import Video from 'component/video'
|
|
import {
|
|
TruncatedText,
|
|
Thumbnail,
|
|
BusyMessage,
|
|
} from 'component/common';
|
|
import FilePrice from 'component/filePrice'
|
|
import FileActions from 'component/fileActions';
|
|
import Link from 'component/link';
|
|
import UriIndicator from 'component/uriIndicator';
|
|
|
|
const FormatItem = (props) => {
|
|
const {
|
|
contentType,
|
|
metadata: {
|
|
author,
|
|
language,
|
|
license,
|
|
}
|
|
} = props
|
|
|
|
const mediaType = lbry.getMediaType(contentType);
|
|
|
|
return (
|
|
<table className="table-standard">
|
|
<tbody>
|
|
<tr>
|
|
<td>Content-Type</td><td>{mediaType}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Author</td><td>{author}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Language</td><td>{language}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>License</td><td>{license}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
)
|
|
}
|
|
|
|
class FilePage extends React.Component{
|
|
|
|
componentWillMount() {
|
|
this.fetchFileInfo(this.props)
|
|
}
|
|
|
|
componentWillReceiveProps(nextProps) {
|
|
this.fetchFileInfo(nextProps)
|
|
}
|
|
|
|
fetchFileInfo(props) {
|
|
if (!props.fileInfo) {
|
|
props.fetchFileInfo()
|
|
}
|
|
}
|
|
|
|
render() {
|
|
const {
|
|
claim,
|
|
navigate,
|
|
claim: {
|
|
txid,
|
|
nout,
|
|
has_signature: hasSignature,
|
|
signature_is_valid: signatureIsValid,
|
|
value,
|
|
value: {
|
|
stream,
|
|
stream: {
|
|
metadata,
|
|
source,
|
|
metadata: {
|
|
title,
|
|
} = {},
|
|
source: {
|
|
contentType,
|
|
} = {},
|
|
} = {},
|
|
} = {},
|
|
},
|
|
uri,
|
|
isDownloaded,
|
|
fileInfo,
|
|
costInfo,
|
|
costInfo: {
|
|
cost,
|
|
includesData: costIncludesData,
|
|
} = {},
|
|
} = this.props
|
|
|
|
const outpoint = txid + ':' + nout;
|
|
const uriLookupComplete = !!claim && Object.keys(claim).length
|
|
|
|
const channelUriObj = lbryuri.parse(uri)
|
|
delete channelUriObj.path;
|
|
delete channelUriObj.contentName;
|
|
const channelUri = signatureIsValid && hasSignature && channelUriObj.isChannel ? lbryuri.build(channelUriObj, false) : null;
|
|
const uriIndicator = <UriIndicator uri={uri} />
|
|
|
|
// <p>This location is not yet in use. { ' ' }<Link onClick={() => navigate('/publish')} label="Put something here" />.</p>
|
|
|
|
return (
|
|
<main className="main--single-column">
|
|
<section className="show-page-media">
|
|
{ contentType && contentType.startsWith('video/') ?
|
|
<Video className="video-embedded" uri={uri} metadata={metadata} outpoint={outpoint} /> :
|
|
(Object.keys(metadata).length > 0 ? <Thumbnail src={metadata.thumbnail} /> : <Thumbnail />) }
|
|
</section>
|
|
<section className="card">
|
|
<div className="card__inner">
|
|
<div className="card__title-identity">
|
|
{isDownloaded === false
|
|
? <span style={{float: "right"}}><FilePrice uri={lbryuri.normalize(uri)} /></span>
|
|
: null}<h1>{title}</h1>
|
|
<div className="card__subtitle">
|
|
{ channelUri ?
|
|
<Link href={"?show=" + channelUri }>{uriIndicator}</Link> :
|
|
uriIndicator}
|
|
</div>
|
|
<div className="card__actions">
|
|
<FileActions uri={uri} /></div>
|
|
</div>
|
|
<div className="card__content card__subtext card__subtext card__subtext--allow-newlines">
|
|
{metadata.description}
|
|
</div>
|
|
</div>
|
|
{ metadata ?
|
|
<div className="card__content">
|
|
<FormatItem metadata={metadata} contentType={contentType} cost={cost} uri={uri} outpoint={outpoint}
|
|
costIncludesData={costIncludesData} />
|
|
</div> : '' }
|
|
<div className="card__content">
|
|
<Link href="https://lbry.io/dmca" label="report" className="button-text-help" />
|
|
</div>
|
|
</section>
|
|
</main>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default FilePage; |