From 9d1cf97aeff030fe7b96983b80e2eaef10d885ad Mon Sep 17 00:00:00 2001
From: infinite-persistence <inf.persistence@gmail.com>
Date: Fri, 2 Apr 2021 11:39:05 +0800
Subject: [PATCH] Use blank poster and advisory when preview is blocked by
 insufficient stake.

## Issue
- Redo 5636: Disable video previews in comments/posts made by channels below a certain channel staked level
- Closes 5738: expand video preview level requierment to markdown images also
---
 ui/component/claimLink/view.jsx          | 36 ++++++++++++++++++++----
 ui/component/embedPlayButton/view.jsx    | 16 +++++++----
 ui/component/markdownLink/view.jsx       | 15 ++--------
 ui/scss/component/_markdown-preview.scss |  7 +++++
 4 files changed, 51 insertions(+), 23 deletions(-)

diff --git a/ui/component/claimLink/view.jsx b/ui/component/claimLink/view.jsx
index f2fe09726..d999cd028 100644
--- a/ui/component/claimLink/view.jsx
+++ b/ui/component/claimLink/view.jsx
@@ -5,6 +5,7 @@ import EmbedPlayButton from 'component/embedPlayButton';
 import Button from 'component/button';
 import UriIndicator from 'component/uriIndicator';
 import { INLINE_PLAYER_WRAPPER_CLASS } from 'component/fileRenderFloating/view';
+import { SIMPLE_SITE } from 'config';
 
 type Props = {
   uri: string,
@@ -12,7 +13,7 @@ type Props = {
   children: React.Node,
   description: ?string,
   isResolvingUri: boolean,
-  doResolveUri: string => void,
+  doResolveUri: (string) => void,
   blackListedOutpoints: Array<{
     txid: string,
     nout: number,
@@ -20,6 +21,7 @@ type Props = {
   playingUri: ?PlayingUri,
   parentCommentId?: string,
   isMarkdownPost?: boolean,
+  allowPreview?: boolean,
 };
 
 class ClaimLink extends React.Component<Props> {
@@ -46,7 +48,7 @@ class ClaimLink extends React.Component<Props> {
       let blackListed = false;
 
       blackListed = blackListedOutpoints.some(
-        outpoint =>
+        (outpoint) =>
           (signingChannel && outpoint.txid === signingChannel.txid && outpoint.nout === signingChannel.nout) ||
           (outpoint.txid === claim.txid && outpoint.nout === claim.nout)
       );
@@ -63,7 +65,16 @@ class ClaimLink extends React.Component<Props> {
   };
 
   render() {
-    const { uri, claim, children, isResolvingUri, playingUri, parentCommentId, isMarkdownPost } = this.props;
+    const {
+      uri,
+      claim,
+      children,
+      isResolvingUri,
+      playingUri,
+      parentCommentId,
+      isMarkdownPost,
+      allowPreview,
+    } = this.props;
     const isUnresolved = (!isResolvingUri && !claim) || !claim;
     const isBlacklisted = this.isClaimBlackListed();
     const isPlayingInline =
@@ -88,9 +99,24 @@ class ClaimLink extends React.Component<Props> {
             [INLINE_PLAYER_WRAPPER_CLASS]: isPlayingInline,
           })}
         >
-          <EmbedPlayButton uri={uri} parentCommentId={parentCommentId} isMarkdownPost={isMarkdownPost} />
+          <EmbedPlayButton
+            uri={uri}
+            parentCommentId={parentCommentId}
+            isMarkdownPost={isMarkdownPost}
+            allowPreview={allowPreview}
+          />
         </div>
-        <Button button="link" className="preview-link__url" label={uri} navigate={uri} />
+        {(allowPreview || !SIMPLE_SITE) && (
+          <Button button="link" className="preview-link__url" label={uri} navigate={uri} />
+        )}
+        {!allowPreview && SIMPLE_SITE && (
+          <div className="preview-link__unavailable">
+            <p>
+              {__("This channel isn't staking enough LBRY Credits for link previews.")}{' '}
+              <Button button="link" label={__('Learn more')} href="https://odysee.com/@lbry:3f/levelsonodysee:c" />.
+            </p>
+          </div>
+        )}
       </div>
     );
   }
diff --git a/ui/component/embedPlayButton/view.jsx b/ui/component/embedPlayButton/view.jsx
index 9a796478d..41b64b4ac 100644
--- a/ui/component/embedPlayButton/view.jsx
+++ b/ui/component/embedPlayButton/view.jsx
@@ -12,16 +12,17 @@ type Props = {
   uri: string,
   thumbnail: string,
   claim: ?Claim,
-  doResolveUri: string => void,
-  doFetchCostInfoForUri: string => void,
+  doResolveUri: (string) => void,
+  doFetchCostInfoForUri: (string) => void,
   costInfo: ?{ cost: number },
   floatingPlayerEnabled: boolean,
   doPlayUri: (string, ?boolean, ?boolean, (GetResponse) => void) => void,
-  doAnaltyicsPurchaseEvent: GetResponse => void,
+  doAnaltyicsPurchaseEvent: (GetResponse) => void,
   parentCommentId?: string,
   isMarkdownPost: boolean,
   doSetPlayingUri: ({}) => void,
   renderMode: string,
+  allowPreview?: boolean,
 };
 
 export default function EmbedPlayButton(props: Props) {
@@ -39,6 +40,7 @@ export default function EmbedPlayButton(props: Props) {
     parentCommentId,
     isMarkdownPost,
     renderMode,
+    allowPreview,
   } = props;
   const {
     push,
@@ -48,7 +50,7 @@ export default function EmbedPlayButton(props: Props) {
   const hasResolvedUri = claim !== undefined;
   const hasCostInfo = costInfo !== undefined;
   const disabled = !hasResolvedUri || !costInfo;
-  const canPlayInline = [RENDER_MODES.AUDIO, RENDER_MODES.VIDEO].includes(renderMode);
+  const canPlayInline = [RENDER_MODES.AUDIO, RENDER_MODES.VIDEO].includes(renderMode) && allowPreview;
 
   useEffect(() => {
     if (!hasResolvedUri) {
@@ -69,7 +71,7 @@ export default function EmbedPlayButton(props: Props) {
       const formattedUrl = formatLbryUrlForWeb(uri);
       push(formattedUrl);
     } else {
-      doPlayUri(uri, undefined, undefined, fileInfo => {
+      doPlayUri(uri, undefined, undefined, (fileInfo) => {
         let playingOptions: PlayingUri = { uri, pathname };
         if (parentCommentId) {
           playingOptions.source = 'comment';
@@ -84,13 +86,15 @@ export default function EmbedPlayButton(props: Props) {
     }
   }
 
+  const backgroundImage = allowPreview ? `url('${thumbnail.replace(/'/g, "\\'")}')` : '';
+
   return (
     <div
       disabled={disabled}
       role="button"
       className="embed__inline-button"
       onClick={handleClick}
-      style={{ backgroundImage: `url('${thumbnail.replace(/'/g, "\\'")}')` }}
+      style={{ backgroundImage: backgroundImage }}
     >
       <FileViewerEmbeddedTitle uri={uri} isInApp />
       <Button
diff --git a/ui/component/markdownLink/view.jsx b/ui/component/markdownLink/view.jsx
index 8267c823c..e97c5d0bd 100644
--- a/ui/component/markdownLink/view.jsx
+++ b/ui/component/markdownLink/view.jsx
@@ -1,5 +1,5 @@
 // @flow
-import { KNOWN_APP_DOMAINS, SIMPLE_SITE } from 'config';
+import { KNOWN_APP_DOMAINS } from 'config';
 import * as ICONS from 'constants/icons';
 import * as React from 'react';
 import { isURIValid } from 'lbry-redux';
@@ -98,25 +98,16 @@ function MarkdownLink(props: Props) {
       />
     );
   } else if (!simpleLinks && ((protocol && protocol[0] === 'lbry:' && isURIValid(decodedUri)) || lbryUrlFromLink)) {
-    element = allowPreview ? (
+    element = (
       <ClaimLink
         uri={lbryUrlFromLink || decodedUri}
         autoEmbed={embed}
         parentCommentId={parentCommentId}
         isMarkdownPost={isMarkdownPost}
+        allowPreview={allowPreview}
       >
         {children}
       </ClaimLink>
-    ) : (
-      <Button
-        button="link"
-        iconRight={isLbryLink ? undefined : ICONS.EXTERNAL}
-        title={SIMPLE_SITE ? __("This channel isn't staking enough LBRY Credits for link previews.") : children}
-        label={children}
-        className="button--external-link"
-        navigate={isLbryLink ? href : undefined}
-        href={isLbryLink ? undefined : href}
-      />
     );
   } else if (
     simpleLinks ||
diff --git a/ui/scss/component/_markdown-preview.scss b/ui/scss/component/_markdown-preview.scss
index 21c77aab6..223188a82 100644
--- a/ui/scss/component/_markdown-preview.scss
+++ b/ui/scss/component/_markdown-preview.scss
@@ -217,6 +217,13 @@
     }
   }
 
+  .preview-link__unavailable {
+    font-size: var(--font-small);
+    text-align: right;
+    font-style: italic;
+    color: var(--color-text-subtitle);
+  }
+
   .preview-link {
     padding: 0;
     margin: 0;