From 9893e6144364b7c13520e862a535a1dc370fda28 Mon Sep 17 00:00:00 2001 From: btzr-io Date: Sun, 9 Jun 2019 00:57:51 -0600 Subject: [PATCH] auto-embed lbry urls --- package.json | 2 + src/ui/component/channelLink/view.jsx | 53 +------------ src/ui/component/claimLink/index.js | 39 ++++++++++ src/ui/component/claimLink/view.jsx | 78 +++++++++++++++++++ src/ui/component/common/channel-tooltip.jsx | 49 ++++++++++++ .../common/markdown-preview-internal.jsx | 42 ++++++++-- src/ui/component/common/preview-link.jsx | 47 +++++++++++ src/ui/component/common/truncated-text.jsx | 22 ++++-- src/ui/component/externalLink/view.jsx | 19 ++++- src/ui/scss/component/_markdown-preview.scss | 15 ++++ src/ui/util/remark-lbry.js | 7 +- yarn.lock | 31 ++++++++ 12 files changed, 339 insertions(+), 65 deletions(-) create mode 100644 src/ui/component/claimLink/index.js create mode 100644 src/ui/component/claimLink/view.jsx create mode 100644 src/ui/component/common/channel-tooltip.jsx create mode 100644 src/ui/component/common/preview-link.jsx diff --git a/package.json b/package.json index fcc31a9a5..8a2182f79 100644 --- a/package.json +++ b/package.json @@ -162,11 +162,13 @@ "remark": "^9.0.0", "remark-emoji": "^2.0.1", "remark-react": "^4.0.3", + "remark-squeeze-paragraphs": "^3.0.3", "render-media": "^3.1.0", "reselect": "^3.0.0", "sass-loader": "^7.1.0", "semver": "^5.3.0", "stream-to-blob-url": "^2.1.1", + "strip-markdown": "^3.0.3", "style-loader": "^0.23.1", "terser-webpack-plugin": "^1.2.3", "three": "^0.93.0", diff --git a/src/ui/component/channelLink/view.jsx b/src/ui/component/channelLink/view.jsx index 553e92855..3fe4421a3 100644 --- a/src/ui/component/channelLink/view.jsx +++ b/src/ui/component/channelLink/view.jsx @@ -1,8 +1,8 @@ // @flow import * as React from 'react'; import { parseURI } from 'lbry-redux'; -import ToolTip from 'react-portal-tooltip'; import Button from 'component/button'; +import ChannelTooltip from 'component/common/channel-tooltip'; type Props = { uri: string, @@ -20,48 +20,10 @@ type Props = { }>, }; -type TooltipProps = { - uri: string, - style: Object, - title: ?string, - active: ?boolean, - parent: ?HTMLElement, - claimId: ?string, - thumbnail: ?string, - claimName: ?string, - channelName: ?string, - description: ?string, -}; - type State = { isTooltipActive: boolean, }; -const ChannelTooltip = (props: TooltipProps) => { - const { style, title, active, parent, claimId, thumbnail, claimName, channelName, description } = props; - - return ( - -
-
- -
-

{title || channelName}

-

- {claimName} - {claimId && `#${claimId}`} -

-
-
-
-

{description}

-
-
-
- - ); -}; - class ChannelLink extends React.Component { buttonRef: { current: ?any }; @@ -102,15 +64,15 @@ class ChannelLink extends React.Component { } componentDidMount() { - const { isResolvingUri, resolveUri, uri } = this.props; - if (!isResolvingUri) { + const { isResolvingUri, resolveUri, claim, uri } = this.props; + if (!isResolvingUri && uri && !claim) { resolveUri(uri); } } componentDidUpdate() { const { isResolvingUri, resolveUri, claim, uri } = this.props; - if (!isResolvingUri && uri && claim === undefined) { + if (!isResolvingUri && uri && !claim) { resolveUri(uri); } } @@ -121,12 +83,6 @@ class ChannelLink extends React.Component { const blackListed = this.isClaimBlackListed(); const isReady = !blackListed && !isResolvingUri && claim !== null; const tooltipReady = this.buttonRef.current !== null; - const bgColor = '#32373b'; - - const tooltipStyle = { - style: { background: bgColor }, - arrowStyle: { color: bgColor }, - }; return ( @@ -141,7 +97,6 @@ class ChannelLink extends React.Component { {tooltipReady && ( { + return { + uri: props.uri, + claim: makeSelectClaimForUri(props.uri)(state), + title: makeSelectTitleForUri(props.uri)(state), + cover: makeSelectCoverForUri(props.uri)(state), + thumbnail: makeSelectThumbnailForUri(props.uri)(state), + description: makeSelectMetadataItemForUri(props.uri, 'description')(state), + channelIsMine: makeSelectClaimIsMine(props.uri)(state), + isResolvingUri: makeSelectIsUriResolving(props.uri)(state), + blackListedOutpoints: selectBlackListedOutpoints(state), + }; +}; + +const perform = dispatch => ({ + resolveUri: uri => dispatch(doResolveUri(uri)), +}); + +export default connect( + select, + perform +)(ClaimLink); diff --git a/src/ui/component/claimLink/view.jsx b/src/ui/component/claimLink/view.jsx new file mode 100644 index 000000000..42041392d --- /dev/null +++ b/src/ui/component/claimLink/view.jsx @@ -0,0 +1,78 @@ +// @flow +import * as React from 'react'; +import { parseURI } from 'lbry-redux'; +import Button from 'component/button'; +import PreviewLink from 'component/common/preview-link'; + +type Props = { + uri: string, + title: ?string, + cover: ?string, + claim: StreamClaim, + children: React.Node, + thumbnail: ?string, + autoEmbed: ?boolean, + description: ?string, + isResolvingUri: boolean, + resolveUri: string => void, + blackListedOutpoints: Array<{ + txid: string, + nout: number, + }>, +}; + +class ClaimLink extends React.Component { + static defaultProps = { + href: null, + title: null, + }; + + isClaimBlackListed() { + const { claim, blackListedOutpoints } = this.props; + + if (claim && blackListedOutpoints) { + let blackListed = false; + + for (let i = 0; i < blackListedOutpoints.length; i += 1) { + const outpoint = blackListedOutpoints[i]; + if (outpoint.txid === claim.txid && outpoint.nout === claim.nout) { + blackListed = true; + break; + } + } + return blackListed; + } + } + + componentDidMount() { + const { isResolvingUri, resolveUri, uri, claim } = this.props; + if (!isResolvingUri && !claim) { + resolveUri(uri); + } + } + + componentDidUpdate() { + const { isResolvingUri, resolveUri, claim, uri } = this.props; + if (!isResolvingUri && uri && !claim) { + resolveUri(uri); + } + } + + render() { + const { uri, claim, title, description, autoEmbed, thumbnail, children, isResolvingUri } = this.props; + const { claimName } = parseURI(uri); + const blackListed = this.isClaimBlackListed(); + const showPreview = autoEmbed && !blackListed && !isResolvingUri && claim !== null; + + return ( + +