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;