90 lines
2.4 KiB
JavaScript
90 lines
2.4 KiB
JavaScript
// @flow
|
|
import * as React from 'react';
|
|
import CardMedia from 'component/cardMedia';
|
|
import TruncatedText from 'component/common/truncated-text';
|
|
import classnames from 'classnames';
|
|
import SubscribeButton from 'component/subscribeButton';
|
|
import { withRouter } from 'react-router-dom';
|
|
import { formatLbryUriForWeb } from 'util/uri';
|
|
|
|
type Props = {
|
|
uri: string,
|
|
isResolvingUri: boolean,
|
|
totalItems: number,
|
|
size: string,
|
|
claim: ?ChannelClaim,
|
|
resolveUri: string => void,
|
|
history: { push: string => void },
|
|
};
|
|
|
|
class ChannelTile extends React.PureComponent<Props> {
|
|
static defaultProps = {
|
|
size: 'regular',
|
|
};
|
|
|
|
componentDidMount() {
|
|
const { uri, resolveUri } = this.props;
|
|
|
|
resolveUri(uri);
|
|
}
|
|
|
|
componentWillReceiveProps(nextProps: Props) {
|
|
const { uri, resolveUri } = this.props;
|
|
|
|
if (nextProps.uri !== uri) {
|
|
resolveUri(uri);
|
|
}
|
|
}
|
|
|
|
render() {
|
|
const { claim, isResolvingUri, totalItems, uri, size, history } = this.props;
|
|
|
|
let channelName;
|
|
let subscriptionUri;
|
|
if (claim) {
|
|
channelName = claim.name;
|
|
subscriptionUri = claim.permanent_url;
|
|
}
|
|
|
|
const onClick = () => history.push(formatLbryUriForWeb(uri));
|
|
|
|
return (
|
|
<section
|
|
onClick={onClick}
|
|
role="button"
|
|
className={classnames('media-tile card--link', {
|
|
'media-tile--small': size === 'small',
|
|
'media-tile--large': size === 'large',
|
|
})}
|
|
>
|
|
<CardMedia title={channelName} thumbnail={null} />
|
|
<div className="media__info">
|
|
{isResolvingUri && <div className="media__title">{__('Loading...')}</div>}
|
|
{!isResolvingUri && (
|
|
<React.Fragment>
|
|
<div className="media__title">
|
|
<TruncatedText text={channelName || uri} lines={1} />
|
|
</div>
|
|
<div className="media__subtitle">
|
|
{totalItems > 0 && (
|
|
<span>
|
|
{totalItems} {totalItems === 1 ? 'publish' : 'publishes'}
|
|
</span>
|
|
)}
|
|
{!isResolvingUri && !totalItems && <span>This is an empty channel.</span>}
|
|
</div>
|
|
</React.Fragment>
|
|
)}
|
|
{subscriptionUri && (
|
|
<div className="media__actions">
|
|
<SubscribeButton buttonStyle="inverse" uri={subscriptionUri} />
|
|
</div>
|
|
)}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default withRouter(ChannelTile);
|