122 lines
3.8 KiB
JavaScript
122 lines
3.8 KiB
JavaScript
// @flow
|
|
import { SIMPLE_SITE } from 'config';
|
|
import React, { Fragment } from 'react';
|
|
import MarkdownPreview from 'component/common/markdown-preview';
|
|
import ClaimTags from 'component/claimTags';
|
|
import CreditAmount from 'component/common/credit-amount';
|
|
import Button from 'component/button';
|
|
import * as PAGES from 'constants/pages';
|
|
import DateTime from 'component/dateTime';
|
|
import YoutubeBadge from 'component/youtubeBadge';
|
|
import SUPPORTED_LANGUAGES from 'constants/supported_languages';
|
|
|
|
type Props = {
|
|
claim: ChannelClaim,
|
|
uri: string,
|
|
description: ?string,
|
|
email: ?string,
|
|
website: ?string,
|
|
languages: Array<string>,
|
|
};
|
|
|
|
const formatEmail = (email: string) => {
|
|
if (email) {
|
|
const protocolRegex = new RegExp('^mailto:', 'i');
|
|
const protocol = protocolRegex.exec(email);
|
|
return protocol ? email : `mailto:${email}`;
|
|
}
|
|
return null;
|
|
};
|
|
|
|
function ChannelAbout(props: Props) {
|
|
const { claim, uri, description, email, website, languages } = props;
|
|
const claimId = claim && claim.claim_id;
|
|
|
|
return (
|
|
<div className="card">
|
|
<section className="section card--section">
|
|
<Fragment>
|
|
{description && (
|
|
<>
|
|
<label>{__('Description')}</label>
|
|
<div className="media__info-text media__info-text--constrained">
|
|
<MarkdownPreview content={description} />
|
|
</div>
|
|
</>
|
|
)}
|
|
{email && (
|
|
<Fragment>
|
|
<label>{__('Contact')}</label>
|
|
<div className="media__info-text">
|
|
<MarkdownPreview content={formatEmail(email)} />
|
|
</div>
|
|
</Fragment>
|
|
)}
|
|
{website && (
|
|
<Fragment>
|
|
<label>{__('Site')}</label>
|
|
<div className="media__info-text">
|
|
<MarkdownPreview content={website} />
|
|
</div>
|
|
</Fragment>
|
|
)}
|
|
|
|
<label>{__('Tags')}</label>
|
|
<div className="media__info-text">
|
|
<ClaimTags uri={uri} type="large" />
|
|
</div>
|
|
|
|
<label>{__('Languages')}</label>
|
|
<div className="media__info-text">
|
|
{/* this could use some nice 'tags' styling */}
|
|
{languages && languages.length
|
|
? languages.reduce((acc, lang, i) => {
|
|
return acc + `${__(SUPPORTED_LANGUAGES[lang])}` + ' ';
|
|
}, '')
|
|
: null}
|
|
</div>
|
|
|
|
<label>{__('Total Uploads')}</label>
|
|
<div className="media__info-text">{claim.meta.claims_in_channel}</div>
|
|
|
|
<label>{__('Last Updated')}</label>
|
|
<div className="media__info-text">
|
|
<DateTime timeAgo uri={uri} />
|
|
</div>
|
|
|
|
<label>{__('URL')}</label>
|
|
<div className="media__info-text">
|
|
<div className="media__info-text media__info-text--constrained">{claim.canonical_url}</div>
|
|
</div>
|
|
|
|
<label>{__('Claim ID')}</label>
|
|
<div className="media__info-text">
|
|
<div className="media__info-text media__info-text--constrained">{claim.claim_id}</div>
|
|
</div>
|
|
|
|
<label>{__('Staked LBRY Credits')}</label>
|
|
<div className="media__info-text">
|
|
<CreditAmount
|
|
badge={false}
|
|
amount={parseFloat(claim.amount) + parseFloat(claim.meta.support_amount)}
|
|
precision={8}
|
|
/>{' '}
|
|
{SIMPLE_SITE && (
|
|
<Button
|
|
button="link"
|
|
label={__('view other claims at lbry://%name%', {
|
|
name: claim.name,
|
|
})}
|
|
navigate={`/$/${PAGES.TOP}?name=${claim.name}`}
|
|
/>
|
|
)}
|
|
</div>
|
|
|
|
<YoutubeBadge channelClaimId={claimId} />
|
|
</Fragment>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default ChannelAbout;
|