re-enable lbry:// link styles in comments

will add support for odysee/lbry.tv once the style is finalized
This commit is contained in:
Sean Yesmunt 2020-10-08 13:36:57 -04:00
parent 480d8a8786
commit b1bca7982a
4 changed files with 26 additions and 28 deletions

View file

@ -1,15 +1,12 @@
// @flow
import * as React from 'react';
import Button from 'component/button';
import PreviewLink from 'component/previewLink';
import UriIndicator from 'component/uriIndicator';
type Props = {
uri: string,
title: ?string,
claim: StreamClaim,
children: React.Node,
className: ?string,
autoEmbed: ?boolean,
description: ?string,
isResolvingUri: boolean,
@ -24,7 +21,6 @@ class ClaimLink extends React.Component<Props> {
static defaultProps = {
href: null,
link: false,
title: null,
thumbnail: null,
autoEmbed: false,
description: null,
@ -63,7 +59,7 @@ class ClaimLink extends React.Component<Props> {
};
render() {
const { uri, claim, title, className, autoEmbed, children, isResolvingUri } = this.props;
const { uri, claim, autoEmbed, children, isResolvingUri } = this.props;
const isUnresolved = (!isResolvingUri && !claim) || !claim;
const isBlacklisted = this.isClaimBlackListed();
@ -71,20 +67,15 @@ class ClaimLink extends React.Component<Props> {
return <span>{children}</span>;
}
const { name: claimName, value_type: valueType } = claim;
const { value_type: valueType } = claim;
const isChannel = valueType === 'channel';
const showPreview = autoEmbed === true && !isUnresolved;
if(isChannel){
return <UriIndicator uri={uri} link addTooltip />
if (isChannel) {
return <UriIndicator uri={uri} link addTooltip />;
}
return (
<React.Fragment>
<Button label={children} title={title || claimName} button={'link'} navigate={uri} className={className} />
{showPreview && <PreviewLink uri={uri} />}
</React.Fragment>
);
return <React.Fragment>{showPreview && <PreviewLink uri={uri} />}</React.Fragment>;
}
}

View file

@ -255,10 +255,10 @@ function Comment(props: Props) {
<div className="comment__message">
{editedMessage.length >= LENGTH_TO_COLLAPSE ? (
<Expandable>
<MarkdownPreview content={message} />
<MarkdownPreview content={message} promptLinks />
</Expandable>
) : (
<MarkdownPreview content={message} />
<MarkdownPreview content={message} promptLinks />
)}
</div>

View file

@ -29,20 +29,20 @@ class PreviewLink extends React.PureComponent<Props> {
};
return (
<span className={'preview-link'} role="button" onClick={this.handleClick}>
<span className={'claim-preview'}>
<span style={thumbnailStyle} className={'preview-link__thumbnail media__thumb'} />
<span className={'claim-preview-metadata'}>
<span className={'claim-preview-info'}>
<span className={'claim-preview__title'}>
<span className="preview-link" role="button" onClick={this.handleClick}>
<span className="claim-preview">
<span style={thumbnailStyle} className="preview-link__thumbnail media__thumb" />
<span className="claim-preview-metadata">
<span className="claim-preview-info">
<span className="claim-preview__title">
<TruncatedText text={title} lines={1} />
</span>
</span>
<span className={'media__subtitle'}>
<span className="media__subtitle">
<UriIndicator uri={uri} link />
</span>
<span className={'claim-preview-properties'}>
<span className={'preview-link__description media__subtitle'}>
<span className="claim-preview-properties">
<span className="preview-link__description media__subtitle">
<TruncatedText lines={2} showTooltip={false}>
<MarkdownPreview content={description} strip />
</TruncatedText>

View file

@ -180,13 +180,14 @@
.preview-link {
padding: 0;
margin: 1rem 0;
margin: var(--spacing-s) 0;
padding-right: var(--spacing-s);
background-color: var(--color-primary-alt);
border-left: 0.5rem solid var(--color-primary);
display: block;
align-items: center;
word-break: break-all;
overflow: hidden;
border-radius: var(--border-radius);
.claim-preview {
border: 0;
@ -198,8 +199,14 @@
}
}
.claim-preview-metadata {
padding: var(--spacing-s) 0;
}
.preview-link__thumbnail {
width: 12rem;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.preview-link__description {