Markdown: inline image preview for Level 4 and above only
This commit is contained in:
parent
9d1cf97aef
commit
f3869ddb78
2 changed files with 80 additions and 3 deletions
|
@ -13,7 +13,10 @@ import defaultSchema from 'hast-util-sanitize/lib/github.json';
|
|||
import { formatedLinks, inlineLinks } from 'util/remark-lbry';
|
||||
import { formattedTimestamp, inlineTimestamp } from 'util/remark-timestamp';
|
||||
import ZoomableImage from 'component/zoomableImage';
|
||||
import { CHANNEL_STAKED_LEVEL_VIDEO_COMMENTS } from 'config';
|
||||
import { CHANNEL_STAKED_LEVEL_VIDEO_COMMENTS, SIMPLE_SITE } from 'config';
|
||||
import Button from 'component/button';
|
||||
import Icon from 'component/common/icon';
|
||||
import * as ICONS from 'constants/icons';
|
||||
|
||||
type SimpleTextProps = {
|
||||
children?: React.Node,
|
||||
|
@ -25,6 +28,13 @@ type SimpleLinkProps = {
|
|||
children?: React.Node,
|
||||
};
|
||||
|
||||
type ImageLinkProps = {
|
||||
src: string,
|
||||
title?: string,
|
||||
alt?: string,
|
||||
helpText?: string,
|
||||
};
|
||||
|
||||
type MarkdownProps = {
|
||||
strip?: boolean,
|
||||
content: ?string,
|
||||
|
@ -82,6 +92,32 @@ const SimpleLink = (props: SimpleLinkProps) => {
|
|||
// ****************************************************************************
|
||||
// ****************************************************************************
|
||||
|
||||
const SimpleImageLink = (props: ImageLinkProps) => {
|
||||
const { src, title, alt, helpText } = props;
|
||||
if (!src) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="preview-link__img--no-preview">
|
||||
<Button
|
||||
button="link"
|
||||
icon={ICONS.IMAGE}
|
||||
iconSize={28}
|
||||
iconRight={ICONS.EXTERNAL}
|
||||
label={title || alt}
|
||||
title={title || alt}
|
||||
className="button--external-link"
|
||||
href={src}
|
||||
/>
|
||||
{helpText && <Icon className="icon--help" icon={ICONS.HELP} tooltip size={24} customTooltipText={helpText} />}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// ****************************************************************************
|
||||
// ****************************************************************************
|
||||
|
||||
// Use github sanitation schema
|
||||
const schema = { ...defaultSchema };
|
||||
|
||||
|
@ -94,6 +130,13 @@ const REPLACE_REGEX = /(<iframe\s+src=["'])(.*?(?=))(["']\s*><\/iframe>)/g;
|
|||
// ****************************************************************************
|
||||
// ****************************************************************************
|
||||
|
||||
function isStakeEnoughForPreview(stakedLevel) {
|
||||
return stakedLevel && stakedLevel >= CHANNEL_STAKED_LEVEL_VIDEO_COMMENTS;
|
||||
}
|
||||
|
||||
// ****************************************************************************
|
||||
// ****************************************************************************
|
||||
|
||||
const MarkdownPreview = (props: MarkdownProps) => {
|
||||
const { content, strip, simpleLinks, noDataStore, className, parentCommentId, isMarkdownPost, stakedLevel } = props;
|
||||
const strippedContent = content
|
||||
|
@ -127,12 +170,23 @@ const MarkdownPreview = (props: MarkdownProps) => {
|
|||
parentCommentId={parentCommentId}
|
||||
isMarkdownPost={isMarkdownPost}
|
||||
simpleLinks={simpleLinks}
|
||||
allowPreview={stakedLevel && stakedLevel >= CHANNEL_STAKED_LEVEL_VIDEO_COMMENTS}
|
||||
allowPreview={isStakeEnoughForPreview(stakedLevel)}
|
||||
/>
|
||||
),
|
||||
// Workaraund of remarkOptions.Fragment
|
||||
div: React.Fragment,
|
||||
img: ZoomableImage,
|
||||
img: isStakeEnoughForPreview(stakedLevel)
|
||||
? ZoomableImage
|
||||
: (imgProps) => (
|
||||
<SimpleImageLink
|
||||
src={imgProps.src}
|
||||
alt={imgProps.alt}
|
||||
title={imgProps.title}
|
||||
helpText={
|
||||
SIMPLE_SITE ? __("This channel isn't staking enough LBRY Credits for inline image previews.") : ''
|
||||
}
|
||||
/>
|
||||
),
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
@ -260,6 +260,29 @@
|
|||
width: 8rem;
|
||||
}
|
||||
|
||||
.preview-link__img--no-preview {
|
||||
margin: var(--spacing-s) var(--spacing-m);
|
||||
padding: var(--spacing-s);
|
||||
background-color: var(--color-card-background);
|
||||
|
||||
border-bottom-left-radius: var(--border-radius);
|
||||
border-bottom-right-radius: var(--border-radius);
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
||||
.button {
|
||||
max-width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
.preview-link__description {
|
||||
margin-top: var(--spacing-s);
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue