LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

convert previewLink to a connected component

Browse source
This commit is contained in:
btzr-io 2019-06-12 20:26:40 -06:00
parent 7fed44e3e8
commit b4fd0fc325
4 changed files with 99 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/ui/component/claimLink/view.jsx
View file

@ -2,12 +2,12 @@
import * as React from 'react';
import { parseURI } from 'lbry-redux';
import Button from 'component/button';
import PreviewLink from 'component/common/preview-link';
import PreviewLink from 'component/previewLink';
type Props = {
uri: string,
title: ?string,
cover: ?string,
claim: StreamClaim,
children: React.Node,
thumbnail: ?string,
@ -59,17 +59,15 @@ class ClaimLink extends React.Component<Props> {
}
render() {
const { uri, claim, title, description, autoEmbed, thumbnail, children, isResolvingUri } = this.props;
const { uri, claim, title, autoEmbed, children, isResolvingUri } = this.props;
const { claimName } = parseURI(uri);
const blackListed = this.isClaimBlackListed();
const showPreview = autoEmbed === true && !blackListed && !isResolvingUri && claim !== null;
return (
<React.Fragment>
<Button title={title} button={'link'} label={children} navigate={uri} />
{showPreview && (
<PreviewLink uri={uri} title={title || claimName} thumbnail={thumbnail} description={description} />
)}
<Button title={title || claimName} button={'link'} label={children} navigate={uri} />
{showPreview && <PreviewLink uri={uri} />}
</React.Fragment>
);
}

55
src/ui/component/common/preview-link.jsx
View file

@ -1,55 +0,0 @@
// @flow
import * as React from 'react';
import DateTime from 'component/dateTime';
import UriIndicator from 'component/uriIndicator';
import TruncatedText from 'component/common/truncated-text';
import MarkdownPreview from 'component/common/markdown-preview';
import { withRouter } from 'react-router-dom';
import { formatLbryUriForWeb } from 'util/uri';
type Props = {
uri: string,
title: ?string,
thumbnail: ?string,
description: ?string,
history: { push: string => void },
};
const PreviewLink = (props: Props) => {
const { uri, title, history, description, thumbnail } = props;
const placeholder = 'static/img/placeholder.png';
const thumbnailStyle = {
backgroundImage: `url(${thumbnail || placeholder})`,
};
const wrapperProps = {
role: 'button',
onClick: () => history.push(formatLbryUriForWeb(uri)),
};
return (
<span className={'preview-link'} {...wrapperProps}>
<span className={'media-tile media-tile--small card--link'}>
<span style={thumbnailStyle} className={'preview-link--thumbnail media__thumb'} />
<span className={'preview-link--text media__info'}>
<span className={'preview-link--title media__title'}>
<TruncatedText text={title} lines={1} />
</span>
<span className={'preview-link--description media__subtext'}>
<span className={'truncated-text'}>
{__('Published to')} <UriIndicator uri={uri} link /> <DateTime timeAgo uri={uri} />
</span>
</span>
<span className={'preview-link--description media__subtext'}>
<TruncatedText lines={2} showTooltip={false}>
<MarkdownPreview content={description} promptLinks strip />
</TruncatedText>
</span>
</span>
</span>
</span>
);
};
export default withRouter(React.memo(PreviewLink));

37
src/ui/component/previewLink/index.js Normal file
View file

@ -0,0 +1,37 @@
import { connect } from 'react-redux';
import {
doResolveUri,
makeSelectClaimIsMine,
makeSelectTitleForUri,
makeSelectThumbnailForUri,
makeSelectClaimForUri,
makeSelectIsUriResolving,
makeSelectMetadataItemForUri,
} from 'lbry-redux';
import { selectBlackListedOutpoints } from 'lbryinc';
import PreviewLink from './view';
const select = (state, props) => {
return {
uri: props.uri,
claim: makeSelectClaimForUri(props.uri)(state),
title: makeSelectTitleForUri(props.uri)(state),
thumbnail: makeSelectThumbnailForUri(props.uri)(state),
description: makeSelectMetadataItemForUri(props.uri, 'description')(state),
channelIsMine: makeSelectClaimIsMine(props.uri)(state),
isResolvingUri: makeSelectIsUriResolving(props.uri)(state),
blackListedOutpoints: selectBlackListedOutpoints(state),
};
};
const perform = dispatch => ({
resolveUri: uri => dispatch(doResolveUri(uri)),
});
export default connect(
select,
perform
)(PreviewLink);

57
src/ui/component/previewLink/view.jsx Normal file
View file

@ -0,0 +1,57 @@
// @flow
import * as React from 'react';
import DateTime from 'component/dateTime';
import UriIndicator from 'component/uriIndicator';
import TruncatedText from 'component/common/truncated-text';
import MarkdownPreview from 'component/common/markdown-preview';
import { withRouter } from 'react-router-dom';
import { formatLbryUriForWeb } from 'util/uri';
type Props = {
uri: string,
title: ?string,
thumbnail: ?string,
description: ?string,
history: { push: string => void },
};
class PreviewLink extends React.PureComponent<Props> {
handleClick = () => {
const { uri, history } = this.props;
history.push(formatLbryUriForWeb(uri));
};
render() {
const { uri, title, description, thumbnail } = this.props;
const placeholder = 'static/img/placeholder.png';
const thumbnailStyle = {
backgroundImage: `url(${thumbnail || placeholder})`,
};
return (
<span className={'preview-link'} role="button" onClick={this.handleClick}>
<span className={'media-tile media-tile--small card--link'}>
<span style={thumbnailStyle} className={'preview-link--thumbnail media__thumb'} />
<span className={'preview-link--text media__info'}>
<span className={'preview-link--title media__title'}>
<TruncatedText text={title} lines={1} />
</span>
<span className={'preview-link--description media__subtext'}>
<span className={'truncated-text'}>
{__('Published to')} <UriIndicator uri={uri} link /> <DateTime timeAgo uri={uri} />
</span>
</span>
<span className={'preview-link--description media__subtext'}>
<TruncatedText lines={2} showTooltip={false}>
<MarkdownPreview content={description} promptLinks strip />
</TruncatedText>
</span>
</span>
</span>
</span>
);
}
}
export default withRouter(PreviewLink);