Markdown: inline image preview for Level 4 and above only

ui/component/common/markdown-preview.jsx

@@ -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.") : ''
+              }
+            />
+          ),
     },
   };
 

ui/scss/component/_markdown-preview.scss

@@ -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);
   }