From 723da10dadf356eda162224e25238c543218419d Mon Sep 17 00:00:00 2001
From: btzr-io <btzr.io@gmail.com>
Date: Thu, 30 May 2019 14:51:23 -0600
Subject: [PATCH 01/25] extend markdown support for lbry urls

---
 .../common/markdown-preview-internal.jsx      |  6 +-
 src/ui/component/externalLink/view.jsx        |  4 --
 src/ui/util/remark-lbry.js                    | 68 +++++++++++++++++++
 3 files changed, 72 insertions(+), 6 deletions(-)
 create mode 100644 src/ui/util/remark-lbry.js

diff --git a/src/ui/component/common/markdown-preview-internal.jsx b/src/ui/component/common/markdown-preview-internal.jsx
index 78af2273d..04701cc6d 100644
--- a/src/ui/component/common/markdown-preview-internal.jsx
+++ b/src/ui/component/common/markdown-preview-internal.jsx
@@ -1,8 +1,9 @@
 // @flow
 import * as React from 'react';
 import remark from 'remark';
-import reactRenderer from 'remark-react';
+import remarkLBRY from 'util/remark-lbry';
 import remarkEmoji from 'remark-emoji';
+import reactRenderer from 'remark-react';
 import ExternalLink from 'component/externalLink';
 import defaultSchema from 'hast-util-sanitize/lib/github.json';
 
@@ -30,7 +31,7 @@ const SimpleLink = (props: SimpleLinkProps) => {
 const schema = { ...defaultSchema };
 
 // Extend sanitation schema to support lbry protocol
-schema.protocols.href[3] = 'lbry';
+schema.protocols.href.push('lbry');
 
 const MarkdownPreview = (props: MarkdownProps) => {
   const { content, promptLinks } = props;
@@ -44,6 +45,7 @@ const MarkdownPreview = (props: MarkdownProps) => {
     <div className="markdown-preview">
       {
         remark()
+          .use(remarkLBRY)
           .use(remarkEmoji)
           .use(reactRenderer, remarkOptions)
           .processSync(content).contents
diff --git a/src/ui/component/externalLink/view.jsx b/src/ui/component/externalLink/view.jsx
index ccab6ad27..632339842 100644
--- a/src/ui/component/externalLink/view.jsx
+++ b/src/ui/component/externalLink/view.jsx
@@ -20,14 +20,11 @@ class ExternalLink extends React.PureComponent<Props> {
 
   createLink() {
     const { href, title, children, openModal } = this.props;
-
     // Regex for url protocol
     const protocolRegex = new RegExp('^(https?|lbry)+:', 'i');
     const protocol = href ? protocolRegex.exec(href) : null;
-
     // Return plain text if no valid url
     let element = <span>{children}</span>;
-
     // Return external link if protocol is http or https
     if (protocol && (protocol[0] === 'http:' || protocol[0] === 'https:')) {
       element = (
@@ -41,7 +38,6 @@ class ExternalLink extends React.PureComponent<Props> {
         />
       );
     }
-
     // Return local link if protocol is lbry uri
     if (protocol && protocol[0] === 'lbry:' && isURIValid(href)) {
       element = <Button button="link" title={title || href} label={children} navigate={href} />;
diff --git a/src/ui/util/remark-lbry.js b/src/ui/util/remark-lbry.js
new file mode 100644
index 000000000..28cf90f87
--- /dev/null
+++ b/src/ui/util/remark-lbry.js
@@ -0,0 +1,68 @@
+import { parseURI } from 'lbry-redux';
+
+const protocol = 'lbry://';
+const locateURI = (value, fromIndex) => value.indexOf(protocol, fromIndex);
+const locateMention = (value, fromIndex) => value.indexOf('@', fromIndex);
+
+// Generate a valid markdown link
+const createURI = (text, uri, addProtocol = true) => ({
+  type: 'link',
+  url: (addProtocol ? protocol : '') + uri,
+  children: [{ type: 'text', value: text }],
+});
+
+// Generate a markdown link from channel name
+function tokenizeMention(eat, value, silent) {
+  const match = /^@(\w+)/.exec(value);
+
+  if (match) {
+    const text = match[0];
+    const href = match[0];
+    return silent ? true : eat(text)(createURI(text, href));
+  }
+}
+
+// Generate a markdown link from lbry url
+function tokenizeURI(eat, value, silent) {
+  const match = /^(lbry:\/\/)+([A-z0-9-_#@])+/.exec(value);
+
+  if (match) {
+    try {
+      const text = match[0];
+      const uri = parseURI(text, true);
+      // Create channel link
+      if (uri.isChannel) {
+        return eat(text)(createURI(uri.claimName, uri.claimName));
+      }
+      // Create uri link
+      return eat(text)(createURI(text, text, false));
+    } catch (err) {
+      // Silent errors: console.error(err)
+    }
+  }
+}
+
+// Configure tokenizer for lbry urls
+tokenizeURI.locator = locateURI;
+tokenizeURI.notInLink = true;
+tokenizeURI.notInBlock = true;
+
+// Configure tokenizer for lbry channels
+tokenizeMention.locator = locateMention;
+tokenizeMention.notInLink = true;
+tokenizeMention.notInBlock = true;
+
+// Main module
+export default function remarkLBRY() {
+  const Parser = this.Parser;
+  const tokenizers = Parser.prototype.inlineTokenizers;
+  const methods = Parser.prototype.inlineMethods;
+
+  // Add an inline tokenizer (defined in the following example).
+  tokenizers.uri = tokenizeURI;
+  tokenizers.mention = tokenizeMention;
+
+  // Run it just before `text`.
+  methods.splice(methods.indexOf('text'), 0, 'uri');
+  methods.splice(methods.indexOf('text'), 0, 'mention');
+}
-- 
2.45.2


From b7c652b554cdb9de635c594b84a068ef6442481e Mon Sep 17 00:00:00 2001
From: Baltazar Gomez <btzr.io@gmail.com>
Date: Fri, 31 May 2019 14:09:54 -0600
Subject: [PATCH 02/25] improve validation of lbry urls

---
 src/ui/util/remark-lbry.js | 44 ++++++++++++++++++--------------------
 1 file changed, 21 insertions(+), 23 deletions(-)

diff --git a/src/ui/util/remark-lbry.js b/src/ui/util/remark-lbry.js
index 28cf90f87..ebdc2c42b 100644
--- a/src/ui/util/remark-lbry.js
+++ b/src/ui/util/remark-lbry.js
@@ -5,41 +5,39 @@ const locateURI = (value, fromIndex) => value.indexOf(protocol, fromIndex);
 const locateMention = (value, fromIndex) => value.indexOf('@', fromIndex);
 
 // Generate a valid markdown link
-const createURI = (text, uri, addProtocol = true) => ({
+const createURI = (text, uri) => ({
   type: 'link',
-  url: (addProtocol ? protocol : '') + uri,
+  url: (uri.startsWith(protocol) ? '' : protocol) + uri,
   children: [{ type: 'text', value: text }],
 });
 
+const validateURI = (match) => {
+  if (match) {
+    try {
+      const text = match[0];
+      const uri = parseURI(text);
+      // Create channel link
+      if (uri.isChannel) {
+        return eat(text)(createURI(uri.claimName, text));
+      }
+      // Create uri link
+      return eat(text)(createURI(text, text));
+    } catch (err) {
+      // Silent errors: console.error(err)
+    }
+  }
+}
+
 // Generate a markdown link from channel name
 function tokenizeMention(eat, value, silent) {
   const match = /^@(\w+)/.exec(value);
-
-  if (match) {
-    const text = match[0];
-    const href = match[0];
-    return silent ? true : eat(text)(createURI(text, href));
-  }
+  return validateURI(match);
 }
 
 // Generate a markdown link from lbry url
 function tokenizeURI(eat, value, silent) {
   const match = /^(lbry:\/\/)+([A-z0-9-_#@])+/.exec(value);
-
-  if (match) {
-    try {
-      const text = match[0];
-      const uri = parseURI(text, true);
-      // Create channel link
-      if (uri.isChannel) {
-        return eat(text)(createURI(uri.claimName, uri.claimName));
-      }
-      // Create uri link
-      return eat(text)(createURI(text, text, false));
-    } catch (err) {
-      // Silent errors: console.error(err)
-    }
-  }
+  return validateURI(match);
 }
 
 // Configure tokenizer for lbry urls
-- 
2.45.2


From d6fae5c6ee81ffccde64772824a42565ceeb86cb Mon Sep 17 00:00:00 2001
From: btzr-io <btzr.io@gmail.com>
Date: Sun, 2 Jun 2019 14:26:33 -0600
Subject: [PATCH 03/25] fix validatenURI function

---
 src/ui/util/remark-lbry.js | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/ui/util/remark-lbry.js b/src/ui/util/remark-lbry.js
index ebdc2c42b..e8fe9eeb9 100644
--- a/src/ui/util/remark-lbry.js
+++ b/src/ui/util/remark-lbry.js
@@ -11,11 +11,12 @@ const createURI = (text, uri) => ({
   children: [{ type: 'text', value: text }],
 });
 
-const validateURI = (match) => {
+const validateURI = (match, eat) => {
   if (match) {
     try {
       const text = match[0];
       const uri = parseURI(text);
+      console.info(text);
       // Create channel link
       if (uri.isChannel) {
         return eat(text)(createURI(uri.claimName, text));
@@ -26,18 +27,18 @@ const validateURI = (match) => {
       // Silent errors: console.error(err)
     }
   }
-}
+};
 
 // Generate a markdown link from channel name
 function tokenizeMention(eat, value, silent) {
   const match = /^@(\w+)/.exec(value);
-  return validateURI(match);
+  return validateURI(match, eat);
 }
 
 // Generate a markdown link from lbry url
 function tokenizeURI(eat, value, silent) {
-  const match = /^(lbry:\/\/)+([A-z0-9-_#@])+/.exec(value);
-  return validateURI(match);
+  const match = /^(lbry:\/\/)+([A-z0-9-_#@:])+/.exec(value);
+  return validateURI(match, eat);
 }
 
 // Configure tokenizer for lbry urls
-- 
2.45.2


From df44ca5bcfbe2843deecdbf58772241347170726 Mon Sep 17 00:00:00 2001
From: btzr-io <btzr.io@gmail.com>
Date: Sun, 2 Jun 2019 16:33:47 -0600
Subject: [PATCH 04/25] fix  regular expression for lbry urls

---
 src/ui/util/remark-lbry.js | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/ui/util/remark-lbry.js b/src/ui/util/remark-lbry.js
index e8fe9eeb9..de1600fe8 100644
--- a/src/ui/util/remark-lbry.js
+++ b/src/ui/util/remark-lbry.js
@@ -16,9 +16,8 @@ const validateURI = (match, eat) => {
     try {
       const text = match[0];
       const uri = parseURI(text);
-      console.info(text);
       // Create channel link
-      if (uri.isChannel) {
+      if (uri.isChannel && !uri.path) {
         return eat(text)(createURI(uri.claimName, text));
       }
       // Create uri link
@@ -31,13 +30,13 @@ const validateURI = (match, eat) => {
 
 // Generate a markdown link from channel name
 function tokenizeMention(eat, value, silent) {
-  const match = /^@(\w+)/.exec(value);
+  const match = /^@+[a-zA-Z0-9-#:/]+/.exec(value);
   return validateURI(match, eat);
 }
 
 // Generate a markdown link from lbry url
 function tokenizeURI(eat, value, silent) {
-  const match = /^(lbry:\/\/)+([A-z0-9-_#@:])+/.exec(value);
+  const match = /^(lbry:\/\/)+[a-zA-Z0-9-@#:/]+/.exec(value);
   return validateURI(match, eat);
 }
 
-- 
2.45.2


From 3dcdf913cf4475c408cc978ad172e93954290b16 Mon Sep 17 00:00:00 2001
From: btzr-io <btzr.io@gmail.com>
Date: Wed, 5 Jun 2019 00:07:53 -0600
Subject: [PATCH 05/25] create channel tooltip

---
 package.json                           |   1 +
 src/ui/component/button/view.jsx       |  12 +-
 src/ui/component/channelLink/index.js  |  39 ++++++
 src/ui/component/channelLink/view.jsx  | 163 +++++++++++++++++++++++++
 src/ui/component/externalLink/view.jsx |   3 +-
 src/ui/scss/component/_channel.scss    |  63 ++++++++++
 yarn.lock                              |   5 +
 7 files changed, 284 insertions(+), 2 deletions(-)
 create mode 100644 src/ui/component/channelLink/index.js
 create mode 100644 src/ui/component/channelLink/view.jsx

diff --git a/package.json b/package.json
index ff0048352..fcc31a9a5 100644
--- a/package.json
+++ b/package.json
@@ -147,6 +147,7 @@
     "react-hot-loader": "^4.7.2",
     "react-modal": "^3.1.7",
     "react-paginate": "^5.2.1",
+    "react-portal-tooltip": "^2.4.7",
     "react-pose": "^4.0.5",
     "react-redux": "^6.0.1",
     "react-router": "^5.0.0",
diff --git a/src/ui/component/button/view.jsx b/src/ui/component/button/view.jsx
index 2f616d603..d1c8c89a0 100644
--- a/src/ui/component/button/view.jsx
+++ b/src/ui/component/button/view.jsx
@@ -7,7 +7,6 @@ import { formatLbryUriForWeb } from 'util/uri';
 import { OutboundLink } from 'react-ga';
 
 type Props = {
-  onClick: ?(any) => any,
   href: ?string,
   title: ?string,
   label: ?string,
@@ -24,6 +23,11 @@ type Props = {
   iconSize?: number,
   constrict: ?boolean, // to shorten the button and ellipsis, only use for links
   activeClass?: string,
+  innerRef: ?any,
+  // Events
+  onClick: ?(any) => any,
+  onMouseEnter: ?(any) => any,
+  onMouseLeave: ?(any) => any,
 };
 
 class Button extends React.PureComponent<Props> {
@@ -34,6 +38,9 @@ class Button extends React.PureComponent<Props> {
   render() {
     const {
       onClick,
+      onMouseEnter,
+      onMouseLeave,
+      innerRef,
       href,
       title,
       label,
@@ -111,8 +118,11 @@ class Button extends React.PureComponent<Props> {
             onClick();
           }
         }}
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
         className={combinedClassName}
         activeClassName={activeClass}
+        innerRef={innerRef}
       >
         {content}
       </NavLink>
diff --git a/src/ui/component/channelLink/index.js b/src/ui/component/channelLink/index.js
new file mode 100644
index 000000000..c99d49f96
--- /dev/null
+++ b/src/ui/component/channelLink/index.js
@@ -0,0 +1,39 @@
+import { connect } from 'react-redux';
+
+import {
+  doResolveUri,
+  makeSelectClaimIsMine,
+  makeSelectTitleForUri,
+  makeSelectThumbnailForUri,
+  makeSelectCoverForUri,
+  makeSelectClaimForUri,
+  makeSelectIsUriResolving,
+  makeSelectMetadataItemForUri,
+} from 'lbry-redux';
+
+import { selectBlackListedOutpoints } from 'lbryinc';
+
+import ChannelLink from './view';
+
+const select = (state, props) => {
+  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
+)(ChannelLink);
diff --git a/src/ui/component/channelLink/view.jsx b/src/ui/component/channelLink/view.jsx
new file mode 100644
index 000000000..abef07ab3
--- /dev/null
+++ b/src/ui/component/channelLink/view.jsx
@@ -0,0 +1,163 @@
+// @flow
+import * as React from 'react';
+import { parseURI } from 'lbry-redux';
+import ToolTip from 'react-portal-tooltip';
+import Button from 'component/button';
+
+type Props = {
+  uri: string,
+  title: ?string,
+  cover: ?string,
+  claim: StreamClaim,
+  children: React.Node,
+  thumbnail: ?string,
+  description: ?string,
+  isResolvingUri: boolean,
+  resolveUri: string => void,
+  blackListedOutpoints: Array<{
+    txid: string,
+    nout: number,
+  }>,
+};
+
+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 (
+    <ToolTip active={active} position="bottom" style={style} arrow="left" align="left" parent={parent}>
+      <div className={'channel-tooltip'}>
+        <div className={'channel-tooltip__info'}>
+          <img className={'channel-tooltip__thumbnail'} src={thumbnail} />
+          <div>
+            <h2 className={'channel-tooltip__title'}>{title || channelName}</h2>
+            <h3 className={'channel-tooltip__url'}>
+              {claimName}
+              {claimId && `#${claimId}`}
+            </h3>
+          </div>
+        </div>
+        <div className={'channel-tooltip__description'}>
+          <p>{description}</p>
+        </div>
+        <div className={'channel-tooltip__stats'} />
+      </div>
+    </ToolTip>
+  );
+};
+
+class ChannelLink extends React.Component<Props, State> {
+  buttonRef: { current: ?any };
+
+  static defaultProps = {
+    href: null,
+    title: null,
+  };
+
+  constructor(props: Props) {
+    super(props);
+    this.state = { isTooltipActive: false };
+    (this: any).buttonRef = React.createRef();
+  }
+
+  showTooltip = () => {
+    this.setState({ isTooltipActive: true });
+  };
+
+  hideTooltip = () => {
+    this.setState({ isTooltipActive: false });
+  };
+
+  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 } = this.props;
+    if (!isResolvingUri) {
+      resolveUri(uri);
+    }
+  }
+
+  componentDidUpdate() {
+    const { isResolvingUri, resolveUri, claim, uri } = this.props;
+    if (!isResolvingUri && uri && claim === undefined) {
+      resolveUri(uri);
+    }
+  }
+
+  render() {
+    const { uri, claim, title, description, thumbnail, children, isResolvingUri } = this.props;
+    const { channelName, claimName, claimId } = parseURI(uri);
+    const blackListed = this.isClaimBlackListed();
+    const isReady = !blackListed && !isResolvingUri && claim !== null;
+    const tooltipReady = isReady && this.buttonRef.current !== null;
+
+    const bgColor = '#32373b';
+
+    const tooltipStyle = {
+      style: { background: bgColor },
+      arrowStyle: { color: bgColor },
+    };
+
+    return isReady ? (
+      <React.Fragment>
+        <Button
+          button="link"
+          label={children}
+          navigate={uri}
+          innerRef={this.buttonRef}
+          onMouseEnter={this.showTooltip}
+          onMouseLeave={this.hideTooltip}
+        />
+        {tooltipReady && (
+          <ChannelTooltip
+            uri={uri}
+            style={tooltipStyle}
+            title={title}
+            claimId={claimId}
+            claimName={claimName}
+            channelName={channelName}
+            thumbnail={thumbnail}
+            description={description}
+            active={this.state.isTooltipActive}
+            parent={this.buttonRef.current}
+          />
+        )}
+      </React.Fragment>
+    ) : (
+      <span>{children}</span>
+    );
+  }
+}
+
+export default ChannelLink;
diff --git a/src/ui/component/externalLink/view.jsx b/src/ui/component/externalLink/view.jsx
index 632339842..24da65671 100644
--- a/src/ui/component/externalLink/view.jsx
+++ b/src/ui/component/externalLink/view.jsx
@@ -4,6 +4,7 @@ import * as ICONS from 'constants/icons';
 import * as React from 'react';
 import { isURIValid } from 'lbry-redux';
 import Button from 'component/button';
+import ChannelLink from 'component/channelLink';
 
 type Props = {
   href: string,
@@ -40,7 +41,7 @@ class ExternalLink extends React.PureComponent<Props> {
     }
     // Return local link if protocol is lbry uri
     if (protocol && protocol[0] === 'lbry:' && isURIValid(href)) {
-      element = <Button button="link" title={title || href} label={children} navigate={href} />;
+      element = <ChannelLink uri={href}>{children}</ChannelLink>;
     }
 
     return element;
diff --git a/src/ui/scss/component/_channel.scss b/src/ui/scss/component/_channel.scss
index fcbadeaf1..3abfb87c1 100644
--- a/src/ui/scss/component/_channel.scss
+++ b/src/ui/scss/component/_channel.scss
@@ -85,3 +85,66 @@ $metadata-z-index: 1;
   margin-top: -0.25rem;
   color: rgba($lbry-white, 0.75);
 }
+
+// Tooltip
+
+.channel-tooltip__thumbnail {
+  width: 4rem;
+  height: 4rem;
+  background: #fff;
+  margin-right: 8px;
+  border: 0;
+  border-radius: var(--card-radius);
+  background-size: cover;
+  box-shadow: 0px 8px 40px -3px $lbry-black;
+}
+
+.channel-tooltip {
+  width: 18rem;
+}
+
+.channel-tooltip__description {
+  padding: 8px;
+  margin: 4px 0;
+  border-top: 1px solid rgba(0, 0, 0, 0.2);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+}
+
+.channel-tooltip__description p {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  text-overflow: ellipsis;
+  overflow: hidden;
+
+  /*
+    This fixes the line-clamp issue on resize:
+    https://stackoverflow.com/questions/38989475/css-multi-line-line-clamp-ellipsis-doesnt-work
+  */
+
+  visibility: visible;
+}
+
+.channel-tooltip__info {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-direction: row;
+  padding: 8px;
+  margin: 4px 0;
+}
+
+.channel-tooltip__title {
+  font-weight: bold;
+  font-size: 1.4rem;
+  line-height: 1.5em;
+  margin: 0;
+  margin-left: 4px;
+  color: $lbry-white;
+}
+
+.channel-tooltip__url {
+  font-size: 1rem;
+  margin-left: 4px;
+  padding: 0;
+}
diff --git a/yarn.lock b/yarn.lock
index 9d3cb337d..ab8b5a61d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9432,6 +9432,11 @@ react-paginate@^5.2.1:
   dependencies:
     prop-types "^15.6.1"
 
+react-portal-tooltip@^2.4.7:
+  version "2.4.7"
+  resolved "https://registry.yarnpkg.com/react-portal-tooltip/-/react-portal-tooltip-2.4.7.tgz#77fd4a75760afecd116736c480485aa22cbbb740"
+  integrity sha512-ZOuCKpvu8rr6aS6nNjckd78qEgWyHZnKidZ9Yqrd0HR5K9NYJ7csb4duc0kEXeG8DiCWsLPU70o1EVP+MxlINg==
+
 react-pose@^4.0.5:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/react-pose/-/react-pose-4.0.8.tgz#91bdfafde60e4096e7878a35dcc77715bed68f24"
-- 
2.45.2


From f4b099f69e82647edb5e6fc69655d82c4bc0b03d Mon Sep 17 00:00:00 2001
From: btzr-io <btzr.io@gmail.com>
Date: Wed, 5 Jun 2019 00:30:41 -0600
Subject: [PATCH 06/25] minor fixes for channel tooltip

---
 src/ui/component/channelLink/view.jsx | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/src/ui/component/channelLink/view.jsx b/src/ui/component/channelLink/view.jsx
index abef07ab3..553e92855 100644
--- a/src/ui/component/channelLink/view.jsx
+++ b/src/ui/component/channelLink/view.jsx
@@ -120,8 +120,7 @@ class ChannelLink extends React.Component<Props, State> {
     const { channelName, claimName, claimId } = parseURI(uri);
     const blackListed = this.isClaimBlackListed();
     const isReady = !blackListed && !isResolvingUri && claim !== null;
-    const tooltipReady = isReady && this.buttonRef.current !== null;
-
+    const tooltipReady = this.buttonRef.current !== null;
     const bgColor = '#32373b';
 
     const tooltipStyle = {
@@ -129,10 +128,10 @@ class ChannelLink extends React.Component<Props, State> {
       arrowStyle: { color: bgColor },
     };
 
-    return isReady ? (
+    return (
       <React.Fragment>
         <Button
-          button="link"
+          button={'link'}
           label={children}
           navigate={uri}
           innerRef={this.buttonRef}
@@ -149,13 +148,11 @@ class ChannelLink extends React.Component<Props, State> {
             channelName={channelName}
             thumbnail={thumbnail}
             description={description}
-            active={this.state.isTooltipActive}
+            active={isReady && this.state.isTooltipActive}
             parent={this.buttonRef.current}
           />
         )}
       </React.Fragment>
-    ) : (
-      <span>{children}</span>
     );
   }
 }
-- 
2.45.2


From 9893e6144364b7c13520e862a535a1dc370fda28 Mon Sep 17 00:00:00 2001
From: btzr-io <btzr.io@gmail.com>
Date: Sun, 9 Jun 2019 00:57:51 -0600
Subject: [PATCH 07/25] 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 (
-    <ToolTip active={active} position="bottom" style={style} arrow="left" align="left" parent={parent}>
-      <div className={'channel-tooltip'}>
-        <div className={'channel-tooltip__info'}>
-          <img className={'channel-tooltip__thumbnail'} src={thumbnail} />
-          <div>
-            <h2 className={'channel-tooltip__title'}>{title || channelName}</h2>
-            <h3 className={'channel-tooltip__url'}>
-              {claimName}
-              {claimId && `#${claimId}`}
-            </h3>
-          </div>
-        </div>
-        <div className={'channel-tooltip__description'}>
-          <p>{description}</p>
-        </div>
-        <div className={'channel-tooltip__stats'} />
-      </div>
-    </ToolTip>
-  );
-};
-
 class ChannelLink extends React.Component<Props, State> {
   buttonRef: { current: ?any };
 
@@ -102,15 +64,15 @@ class ChannelLink extends React.Component<Props, State> {
   }
 
   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<Props, State> {
     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 (
       <React.Fragment>
@@ -141,7 +97,6 @@ class ChannelLink extends React.Component<Props, State> {
         {tooltipReady && (
           <ChannelTooltip
             uri={uri}
-            style={tooltipStyle}
             title={title}
             claimId={claimId}
             claimName={claimName}
diff --git a/src/ui/component/claimLink/index.js b/src/ui/component/claimLink/index.js
new file mode 100644
index 000000000..d473213e3
--- /dev/null
+++ b/src/ui/component/claimLink/index.js
@@ -0,0 +1,39 @@
+import { connect } from 'react-redux';
+
+import {
+  doResolveUri,
+  makeSelectClaimIsMine,
+  makeSelectTitleForUri,
+  makeSelectThumbnailForUri,
+  makeSelectCoverForUri,
+  makeSelectClaimForUri,
+  makeSelectIsUriResolving,
+  makeSelectMetadataItemForUri,
+} from 'lbry-redux';
+
+import { selectBlackListedOutpoints } from 'lbryinc';
+
+import ClaimLink from './view';
+
+const select = (state, props) => {
+  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<Props> {
+  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 (
+      <React.Fragment>
+        <Button title={title} button={'link'} label={children} navigate={uri} />
+        {showPreview && (
+          <PreviewLink uri={uri} title={title || claimName} thumbnail={thumbnail} description={description} />
+        )}
+      </React.Fragment>
+    );
+  }
+}
+
+export default ClaimLink;
diff --git a/src/ui/component/common/channel-tooltip.jsx b/src/ui/component/common/channel-tooltip.jsx
new file mode 100644
index 000000000..b025f8833
--- /dev/null
+++ b/src/ui/component/common/channel-tooltip.jsx
@@ -0,0 +1,49 @@
+// @flow
+import * as React from 'react';
+import ToolTip from 'react-portal-tooltip';
+
+type TooltipProps = {
+  uri: string,
+  title: ?string,
+  active: ?boolean,
+  parent: ?HTMLElement,
+  claimId: ?string,
+  thumbnail: ?string,
+  claimName: ?string,
+  channelName: ?string,
+  description: ?string,
+};
+
+const ChannelTooltip = (props: TooltipProps) => {
+  const { title, active, parent, claimId, thumbnail, claimName, channelName, description } = props;
+
+  const bgColor = '#32373b';
+
+  const style = {
+    style: { background: bgColor },
+    arrowStyle: { color: bgColor },
+  };
+
+  return (
+    <ToolTip active={active} position="bottom" style={style} arrow="left" align="left" parent={parent}>
+      <div className={'channel-tooltip'}>
+        <div className={'channel-tooltip__info'}>
+          <img className={'channel-tooltip__thumbnail'} src={thumbnail} />
+          <div>
+            <h2 className={'channel-tooltip__title'}>{title || channelName}</h2>
+            <h3 className={'channel-tooltip__url'}>
+              {claimName}
+              {claimId && `#${claimId}`}
+            </h3>
+          </div>
+        </div>
+        <div className={'channel-tooltip__description'}>
+          <p>{description}</p>
+        </div>
+        <div className={'channel-tooltip__stats'} />
+      </div>
+    </ToolTip>
+  );
+};
+
+export default ChannelTooltip;
diff --git a/src/ui/component/common/markdown-preview-internal.jsx b/src/ui/component/common/markdown-preview-internal.jsx
index 04701cc6d..f04a73e63 100644
--- a/src/ui/component/common/markdown-preview-internal.jsx
+++ b/src/ui/component/common/markdown-preview-internal.jsx
@@ -2,14 +2,14 @@
 import * as React from 'react';
 import remark from 'remark';
 import remarkLBRY from 'util/remark-lbry';
+import remarkStrip from 'strip-markdown';
 import remarkEmoji from 'remark-emoji';
 import reactRenderer from 'remark-react';
 import ExternalLink from 'component/externalLink';
 import defaultSchema from 'hast-util-sanitize/lib/github.json';
 
-type MarkdownProps = {
-  content: ?string,
-  promptLinks?: boolean,
+type SimpleTextProps = {
+  children?: React.Node,
 };
 
 type SimpleLinkProps = {
@@ -18,6 +18,16 @@ type SimpleLinkProps = {
   children?: React.Node,
 };
 
+type MarkdownProps = {
+  strip?: boolean,
+  content: ?string,
+  promptLinks?: boolean,
+};
+
+const SimpleText = (props: SimpleTextProps) => {
+  return <span>{props.children}</span>;
+};
+
 const SimpleLink = (props: SimpleLinkProps) => {
   const { href, title, children } = props;
   return (
@@ -32,15 +42,37 @@ const schema = { ...defaultSchema };
 
 // Extend sanitation schema to support lbry protocol
 schema.protocols.href.push('lbry');
+schema.attributes.a.push('data-preview');
 
 const MarkdownPreview = (props: MarkdownProps) => {
-  const { content, promptLinks } = props;
-  const remarkOptions = {
+  const { content, strip, promptLinks } = props;
+
+  const remarkOptions: Object = {
     sanitize: schema,
+    fragment: React.Fragment,
     remarkReactComponents: {
       a: promptLinks ? ExternalLink : SimpleLink,
+      // Workaraund of remarkOptions.Fragment
+      div: React.Fragment,
     },
   };
+
+  // Strip all content and just render text
+  if (strip) {
+    // Remove new lines and extra space
+    remarkOptions.remarkReactComponents.p = SimpleText;
+    return (
+      <span className="markdown-preview">
+        {
+          remark()
+            .use(remarkStrip)
+            .use(reactRenderer, remarkOptions)
+            .processSync(content).contents
+        }
+      </span>
+    );
+  }
+
   return (
     <div className="markdown-preview">
       {
diff --git a/src/ui/component/common/preview-link.jsx b/src/ui/component/common/preview-link.jsx
new file mode 100644
index 000000000..e80e9b329
--- /dev/null
+++ b/src/ui/component/common/preview-link.jsx
@@ -0,0 +1,47 @@
+// @flow
+import * as React from 'react';
+import DateTime from 'component/dateTime';
+import UriIndicator from 'component/uriIndicator';
+import TruncatedText from 'component/common/truncated-text';
+import MarkdownPreview from 'component/common/markdown-preview';
+
+type Props = {
+  uri: string,
+  title: ?string,
+  thumbnail: ?string,
+  description: ?string,
+};
+
+const PreviewLink = (props: Props) => {
+  const { uri, title, description, thumbnail } = props;
+  const placeholder = 'static/img/placeholder.png';
+
+  const thumbnailStyle = {
+    backgroundImage: `url(${thumbnail || placeholder})`,
+  };
+
+  return (
+    <span className={'preview-link'}>
+      <span className={'media-tile media-tile--small card--link'}>
+        <span style={thumbnailStyle} className={'preview-link--thumbnail media__thumb'} />
+        <span className={'preview-link--text media__info'}>
+          <span className={'preview-link--title media__title'}>
+            <TruncatedText text={title} lines={1} />
+          </span>
+          <span className={'preview-link--description media__subtext'}>
+            <span className={'truncated-text'}>
+              {__('Published to')} <UriIndicator uri={uri} link /> <DateTime timeAgo uri={uri} />
+            </span>
+          </span>
+          <span className={'preview-link--description media__subtext'}>
+            <TruncatedText lines={2} showTooltip={false}>
+              <MarkdownPreview content={description} promptLinks strip />
+            </TruncatedText>
+          </span>
+        </span>
+      </span>
+    </span>
+  );
+};
+
+export default PreviewLink;
diff --git a/src/ui/component/common/truncated-text.jsx b/src/ui/component/common/truncated-text.jsx
index f90e387aa..71f59f7c6 100644
--- a/src/ui/component/common/truncated-text.jsx
+++ b/src/ui/component/common/truncated-text.jsx
@@ -2,14 +2,24 @@
 import * as React from 'react';
 
 type Props = {
-  text: ?string,
+  text?: ?string,
   lines: number,
+  showTooltip?: boolean,
+  children?: React.Node,
 };
 
-const TruncatedText = (props: Props) => (
-  <span title={props.text} className="truncated-text" style={{ WebkitLineClamp: props.lines }}>
-    {props.text}
-  </span>
-);
+const TruncatedText = (props: Props) => {
+  const { text, children, lines, showTooltip } = props;
+  const tooltip = showTooltip ? children || text : '';
+  return (
+    <span title={tooltip} className="truncated-text" style={{ WebkitLineClamp: lines }}>
+      {children || text}
+    </span>
+  );
+};
+
+TruncatedText.defaultProps = {
+  showTooltip: true,
+};
 
 export default TruncatedText;
diff --git a/src/ui/component/externalLink/view.jsx b/src/ui/component/externalLink/view.jsx
index 24da65671..1a2642a25 100644
--- a/src/ui/component/externalLink/view.jsx
+++ b/src/ui/component/externalLink/view.jsx
@@ -2,8 +2,9 @@
 import * as MODALS from 'constants/modal_types';
 import * as ICONS from 'constants/icons';
 import * as React from 'react';
-import { isURIValid } from 'lbry-redux';
+import { isURIValid, parseURI } from 'lbry-redux';
 import Button from 'component/button';
+import ClaimLink from 'component/claimLink';
 import ChannelLink from 'component/channelLink';
 
 type Props = {
@@ -11,6 +12,7 @@ type Props = {
   title?: string,
   children: React.Node,
   openModal: (id: string, { uri: string }) => void,
+  'data-preview'?: boolean,
 };
 
 class ExternalLink extends React.PureComponent<Props> {
@@ -41,7 +43,20 @@ class ExternalLink extends React.PureComponent<Props> {
     }
     // Return local link if protocol is lbry uri
     if (protocol && protocol[0] === 'lbry:' && isURIValid(href)) {
-      element = <ChannelLink uri={href}>{children}</ChannelLink>;
+      try {
+        const uri = parseURI(href);
+        if (uri.isChannel && !uri.path) {
+          element = <ChannelLink uri={href}>{children}</ChannelLink>;
+        } else if (uri) {
+          element = (
+            <ClaimLink uri={href} autoEmbed={this.props['data-preview']}>
+              {children}
+            </ClaimLink>
+          );
+        }
+      } catch (err) {
+        // Silent error: console.error(err);
+      }
     }
 
     return element;
diff --git a/src/ui/scss/component/_markdown-preview.scss b/src/ui/scss/component/_markdown-preview.scss
index f61671487..9d1462294 100644
--- a/src/ui/scss/component/_markdown-preview.scss
+++ b/src/ui/scss/component/_markdown-preview.scss
@@ -116,4 +116,19 @@
     white-space: normal;
     text-align: left;
   }
+
+  .preview-link {
+    margin: var(--spacing-vertical-medium) 0;
+    padding: 1.2rem 0.8rem;
+    background-color: rgba($lbry-teal-5, 0.1);
+    border-left: 0.5rem solid $lbry-teal-5;
+    display: block;
+    align-items: center;
+    width: 40rem;
+  }
+
+  .preview-link--description {
+    display: block;
+    margin: var(--spacing-vertical-medium) 0;
+  }
 }
diff --git a/src/ui/util/remark-lbry.js b/src/ui/util/remark-lbry.js
index de1600fe8..8411b14a8 100644
--- a/src/ui/util/remark-lbry.js
+++ b/src/ui/util/remark-lbry.js
@@ -5,9 +5,10 @@ const locateURI = (value, fromIndex) => value.indexOf(protocol, fromIndex);
 const locateMention = (value, fromIndex) => value.indexOf('@', fromIndex);
 
 // Generate a valid markdown link
-const createURI = (text, uri) => ({
+const createURI = (text, uri, autoEmbed = false) => ({
   type: 'link',
   url: (uri.startsWith(protocol) ? '' : protocol) + uri,
+  data: { hProperties: { dataPreview: autoEmbed } },
   children: [{ type: 'text', value: text }],
 });
 
@@ -18,10 +19,10 @@ const validateURI = (match, eat) => {
       const uri = parseURI(text);
       // Create channel link
       if (uri.isChannel && !uri.path) {
-        return eat(text)(createURI(uri.claimName, text));
+        return eat(text)(createURI(uri.claimName, text, false));
       }
       // Create uri link
-      return eat(text)(createURI(text, text));
+      return eat(text)(createURI(text, text, true));
     } catch (err) {
       // Silent errors: console.error(err)
     }
diff --git a/yarn.lock b/yarn.lock
index ab8b5a61d..4b76b50e2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7063,6 +7063,13 @@ md5@^2.2.1:
     crypt "~0.0.1"
     is-buffer "~1.1.1"
 
+mdast-squeeze-paragraphs@^3.0.0:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/mdast-squeeze-paragraphs/-/mdast-squeeze-paragraphs-3.0.5.tgz#f428b6b944f8faef454db9b58f170c4183cb2e61"
+  integrity sha512-xX6Vbe348Y/rukQlG4W3xH+7v4ZlzUbSY4HUIQCuYrF2DrkcHx584mCaFxkWoDZKNUfyLZItHC9VAqX3kIP7XA==
+  dependencies:
+    unist-util-remove "^1.0.0"
+
 mdast-util-compact@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/mdast-util-compact/-/mdast-util-compact-1.0.2.tgz#c12ebe16fffc84573d3e19767726de226e95f649"
@@ -9808,6 +9815,13 @@ remark-react@^4.0.3:
     hast-util-sanitize "^1.0.0"
     mdast-util-to-hast "^3.0.0"
 
+remark-squeeze-paragraphs@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/remark-squeeze-paragraphs/-/remark-squeeze-paragraphs-3.0.3.tgz#299d8db7d44008c9ae240dbf6d1f55b8b0f924ce"
+  integrity sha512-eDvjtwFa9eClqb7XgdF/1H9Pfs2LPnf/P3eRs9ucYAWUuv4WO8ZOVAUeT/1h66rQvghnfctz9au+HEmoKcdoqA==
+  dependencies:
+    mdast-squeeze-paragraphs "^3.0.0"
+
 remark-stringify@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/remark-stringify/-/remark-stringify-5.0.0.tgz#336d3a4d4a6a3390d933eeba62e8de4bd280afba"
@@ -10840,6 +10854,11 @@ strip-json-comments@^2.0.1, strip-json-comments@~2.0.1:
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
   integrity sha1-PFMZQukIwml8DsNEhYwobHygpgo=
 
+strip-markdown@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/strip-markdown/-/strip-markdown-3.0.3.tgz#93b4526abe32a1d69e5ca943f4d9ba25c01a4d48"
+  integrity sha512-G2DSM9wy3PWxY3miAibWpsTqZgXLXgRoq0yVyaVs9O7FDGEwPO6pmSE8CyzHhU88Z2w1dkFqFmWUklFNsQKwqg==
+
 style-loader@^0.23.1:
   version "0.23.1"
   resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.23.1.tgz#cb9154606f3e771ab6c4ab637026a1049174d925"
@@ -11468,6 +11487,11 @@ unist-util-is@^2.0.0, unist-util-is@^2.1.2:
   resolved "https://registry.yarnpkg.com/unist-util-is/-/unist-util-is-2.1.2.tgz#1193fa8f2bfbbb82150633f3a8d2eb9a1c1d55db"
   integrity sha512-YkXBK/H9raAmG7KXck+UUpnKiNmUdB+aBGrknfQ4EreE1banuzrKABx3jP6Z5Z3fMSPMQQmeXBlKpCbMwBkxVw==
 
+unist-util-is@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/unist-util-is/-/unist-util-is-3.0.0.tgz#d9e84381c2468e82629e4a5be9d7d05a2dd324cd"
+  integrity sha512-sVZZX3+kspVNmLWBPAB6r+7D9ZgAFPNWm66f7YNb420RlQSbn+n8rG8dGZSkrER7ZIXGQYNm5pqC3v3HopH24A==
+
 unist-util-position@^3.0.0:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/unist-util-position/-/unist-util-position-3.0.2.tgz#80ad4a05efc4ab01a66886cc70493893ba73c5eb"
@@ -11480,6 +11504,13 @@ unist-util-remove-position@^1.0.0:
   dependencies:
     unist-util-visit "^1.1.0"
 
+unist-util-remove@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/unist-util-remove/-/unist-util-remove-1.0.3.tgz#58ec193dfa84b52d5a055ffbc58e5444eb8031a3"
+  integrity sha512-mB6nCHCQK0pQffUAcCVmKgIWzG/AXs/V8qpS8K72tMPtOSCMSjDeMc5yN+Ye8rB0FhcE+JvW++o1xRNc0R+++g==
+  dependencies:
+    unist-util-is "^3.0.0"
+
 unist-util-stringify-position@^1.0.0, unist-util-stringify-position@^1.1.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/unist-util-stringify-position/-/unist-util-stringify-position-1.1.2.tgz#3f37fcf351279dcbca7480ab5889bb8a832ee1c6"
-- 
2.45.2


From 9372c19b00a765345b6434d7fb3ba2ad3798bded Mon Sep 17 00:00:00 2001
From: btzr-io <btzr.io@gmail.com>
Date: Sun, 9 Jun 2019 01:14:27 -0600
Subject: [PATCH 08/25] fix custom link attribute

---
 src/ui/util/remark-lbry.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/ui/util/remark-lbry.js b/src/ui/util/remark-lbry.js
index 8411b14a8..14cc9fc16 100644
--- a/src/ui/util/remark-lbry.js
+++ b/src/ui/util/remark-lbry.js
@@ -8,7 +8,10 @@ const locateMention = (value, fromIndex) => value.indexOf('@', fromIndex);
 const createURI = (text, uri, autoEmbed = false) => ({
   type: 'link',
   url: (uri.startsWith(protocol) ? '' : protocol) + uri,
-  data: { hProperties: { dataPreview: autoEmbed } },
+  data: {
+    // Custom attribute
+    hProperties: { 'data-preview': autoEmbed },
+  },
   children: [{ type: 'text', value: text }],
 });
 
-- 
2.45.2


From ad3689c84dd50f0b75c73422b6dfbccaf8e21916 Mon Sep 17 00:00:00 2001
From: btzr-io <btzr.io@gmail.com>
Date: Sun, 9 Jun 2019 14:31:33 -0600
Subject: [PATCH 09/25] fix markdown preview styles on description form

---
 src/ui/component/common/form-components/form-field.jsx | 5 +++--
 src/ui/scss/component/_markdown-editor.scss            | 4 ++--
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/ui/component/common/form-components/form-field.jsx b/src/ui/component/common/form-components/form-field.jsx
index fde302338..17deb99ca 100644
--- a/src/ui/component/common/form-components/form-field.jsx
+++ b/src/ui/component/common/form-components/form-field.jsx
@@ -2,11 +2,12 @@
 import type { ElementRef } from 'react';
 import React from 'react';
 import ReactDOMServer from 'react-dom/server';
-import 'easymde/dist/easymde.min.css';
 import Toggle from 'react-toggle';
-import { openEditorMenu, stopContextMenu } from 'util/context-menu';
 import SimpleMDE from 'react-simplemde-editor';
 import MarkdownPreview from 'component/common/markdown-preview-internal';
+import { openEditorMenu, stopContextMenu } from 'util/context-menu';
+
+import 'easymde/dist/easymde.min.css';
 
 type Props = {
   name: string,
diff --git a/src/ui/scss/component/_markdown-editor.scss b/src/ui/scss/component/_markdown-editor.scss
index 43931720f..e3982471f 100644
--- a/src/ui/scss/component/_markdown-editor.scss
+++ b/src/ui/scss/component/_markdown-editor.scss
@@ -34,8 +34,8 @@
     }
 
     .editor-preview.editor-preview-active {
-      background-color: $lbry-gray-5;
-      color: $lbry-black;
+      background-color: $lbry-black;
+      color: $lbry-white;
     }
   }
 }
-- 
2.45.2


From b6ed7c12cc25ad16053b18938456882b2fe7703f Mon Sep 17 00:00:00 2001
From: btzr-io <btzr.io@gmail.com>
Date: Mon, 10 Jun 2019 00:20:40 -0600
Subject: [PATCH 10/25] detect formated links

---
 package.json                                  |  1 +
 .../common/markdown-preview-internal.jsx      |  8 +++--
 src/ui/util/remark-lbry.js                    | 31 ++++++++++++++++++-
 yarn.lock                                     |  2 +-
 4 files changed, 38 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index dd02e8616..0f3bfd920 100644
--- a/package.json
+++ b/package.json
@@ -175,6 +175,7 @@
     "three": "^0.93.0",
     "three-full": "^17.1.0",
     "tree-kill": "^1.1.0",
+    "unist-util-visit": "^1.4.1",
     "video.js": "^7.2.2",
     "villain": "btzr-io/Villain",
     "wavesurfer.js": "^2.2.1",
diff --git a/src/ui/component/common/markdown-preview-internal.jsx b/src/ui/component/common/markdown-preview-internal.jsx
index f04a73e63..f5d4e551c 100644
--- a/src/ui/component/common/markdown-preview-internal.jsx
+++ b/src/ui/component/common/markdown-preview-internal.jsx
@@ -1,12 +1,12 @@
 // @flow
 import * as React from 'react';
 import remark from 'remark';
-import remarkLBRY from 'util/remark-lbry';
 import remarkStrip from 'strip-markdown';
 import remarkEmoji from 'remark-emoji';
 import reactRenderer from 'remark-react';
 import ExternalLink from 'component/externalLink';
 import defaultSchema from 'hast-util-sanitize/lib/github.json';
+import { formatedLinks, inlineLinks } from 'util/remark-lbry';
 
 type SimpleTextProps = {
   children?: React.Node,
@@ -77,7 +77,11 @@ const MarkdownPreview = (props: MarkdownProps) => {
     <div className="markdown-preview">
       {
         remark()
-          .use(remarkLBRY)
+          // Remark plugins for lbry urls
+          // Note: The order is important
+          .use(formatedLinks)
+          .use(inlineLinks)
+          // Emojis
           .use(remarkEmoji)
           .use(reactRenderer, remarkOptions)
           .processSync(content).contents
diff --git a/src/ui/util/remark-lbry.js b/src/ui/util/remark-lbry.js
index 14cc9fc16..a4e7a9835 100644
--- a/src/ui/util/remark-lbry.js
+++ b/src/ui/util/remark-lbry.js
@@ -1,4 +1,5 @@
 import { parseURI } from 'lbry-redux';
+import visit from 'unist-util-visit';
 
 const protocol = 'lbry://';
 const locateURI = (value, fromIndex) => value.indexOf(protocol, fromIndex);
@@ -46,16 +47,44 @@ function tokenizeURI(eat, value, silent) {
 
 // Configure tokenizer for lbry urls
 tokenizeURI.locator = locateURI;
+tokenizeURI.notInList = true;
 tokenizeURI.notInLink = true;
 tokenizeURI.notInBlock = true;
 
 // Configure tokenizer for lbry channels
 tokenizeMention.locator = locateMention;
+tokenizeMention.notInList = true;
 tokenizeMention.notInLink = true;
 tokenizeMention.notInBlock = true;
 
+const visitor = (node, index, parent) => {
+  if (node.type === 'link') {
+    try {
+      const url = parseURI(node.url);
+      // Handle lbry link
+      if (!url.isChannel || (url.isChannel && url.path)) {
+        // Auto-embed lbry url
+        if (parent && parent.type === 'paragraph' && !node.data) {
+          node.data = {
+            hProperties: { 'data-preview': true },
+          };
+        }
+      }
+    } catch (err) {
+      // Silent errors: console.error(err)
+    }
+  }
+};
+
+// transform
+const transform = tree => {
+  visit(tree, ['link'], visitor);
+};
+
+export const formatedLinks = () => transform;
+
 // Main module
-export default function remarkLBRY() {
+export function inlineLinks() {
   const Parser = this.Parser;
   const tokenizers = Parser.prototype.inlineTokenizers;
   const methods = Parser.prototype.inlineMethods;
diff --git a/yarn.lock b/yarn.lock
index 7a7093dd7..a41eebb45 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11528,7 +11528,7 @@ unist-util-visit-parents@^2.0.0:
   dependencies:
     unist-util-is "^2.1.2"
 
-unist-util-visit@^1.0.0, unist-util-visit@^1.1.0, unist-util-visit@^1.3.0, unist-util-visit@^1.4.0:
+unist-util-visit@^1.0.0, unist-util-visit@^1.1.0, unist-util-visit@^1.3.0, unist-util-visit@^1.4.0, unist-util-visit@^1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/unist-util-visit/-/unist-util-visit-1.4.1.tgz#4724aaa8486e6ee6e26d7ff3c8685960d560b1e3"
   integrity sha512-AvGNk7Bb//EmJZyhtRUnNMEpId/AZ5Ph/KUpTI09WHQuDZHKovQ1oEv3mfmKpWKtoMzyMC4GLBm1Zy5k12fjIw==
-- 
2.45.2


From 3fe326ce4f2d338b55328ed4b75bd12f40cbf5df Mon Sep 17 00:00:00 2001
From: btzr-io <btzr.io@gmail.com>
Date: Mon, 10 Jun 2019 14:16:01 -0600
Subject: [PATCH 11/25] add syntax to block auto-embed

---
 package.json                                   |  1 +
 src/ui/component/claimLink/view.jsx            |  2 +-
 .../common/markdown-preview-internal.jsx       |  8 ++++++++
 src/ui/util/remark-lbry.js                     |  4 ++--
 yarn.lock                                      | 18 ++++++++++++++++++
 5 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 0f3bfd920..074778f31 100644
--- a/package.json
+++ b/package.json
@@ -161,6 +161,7 @@
     "redux-persist-transform-filter": "0.0.16",
     "redux-thunk": "^2.2.0",
     "remark": "^9.0.0",
+    "remark-attr": "^0.8.3",
     "remark-emoji": "^2.0.1",
     "remark-react": "^4.0.3",
     "remark-squeeze-paragraphs": "^3.0.3",
diff --git a/src/ui/component/claimLink/view.jsx b/src/ui/component/claimLink/view.jsx
index 42041392d..535b57b1d 100644
--- a/src/ui/component/claimLink/view.jsx
+++ b/src/ui/component/claimLink/view.jsx
@@ -62,7 +62,7 @@ class ClaimLink extends React.Component<Props> {
     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;
+    const showPreview = autoEmbed === true && !blackListed && !isResolvingUri && claim !== null;
 
     return (
       <React.Fragment>
diff --git a/src/ui/component/common/markdown-preview-internal.jsx b/src/ui/component/common/markdown-preview-internal.jsx
index f5d4e551c..581dec418 100644
--- a/src/ui/component/common/markdown-preview-internal.jsx
+++ b/src/ui/component/common/markdown-preview-internal.jsx
@@ -1,6 +1,7 @@
 // @flow
 import * as React from 'react';
 import remark from 'remark';
+import remarkAttr from 'remark-attr';
 import remarkStrip from 'strip-markdown';
 import remarkEmoji from 'remark-emoji';
 import reactRenderer from 'remark-react';
@@ -57,6 +58,12 @@ const MarkdownPreview = (props: MarkdownProps) => {
     },
   };
 
+  const remarkAttrOpts = {
+    scope: 'extended',
+    elements: ['link'],
+    extend: { link: ['data-preview'] },
+  };
+
   // Strip all content and just render text
   if (strip) {
     // Remove new lines and extra space
@@ -77,6 +84,7 @@ const MarkdownPreview = (props: MarkdownProps) => {
     <div className="markdown-preview">
       {
         remark()
+          .use(remarkAttr, remarkAttrOpts)
           // Remark plugins for lbry urls
           // Note: The order is important
           .use(formatedLinks)
diff --git a/src/ui/util/remark-lbry.js b/src/ui/util/remark-lbry.js
index a4e7a9835..2dc2de596 100644
--- a/src/ui/util/remark-lbry.js
+++ b/src/ui/util/remark-lbry.js
@@ -58,13 +58,13 @@ tokenizeMention.notInLink = true;
 tokenizeMention.notInBlock = true;
 
 const visitor = (node, index, parent) => {
-  if (node.type === 'link') {
+  if (node.type === 'link' && parent && parent.type === 'paragraph') {
     try {
       const url = parseURI(node.url);
       // Handle lbry link
       if (!url.isChannel || (url.isChannel && url.path)) {
         // Auto-embed lbry url
-        if (parent && parent.type === 'paragraph' && !node.data) {
+        if (!node.data) {
           node.data = {
             hProperties: { 'data-preview': true },
           };
diff --git a/yarn.lock b/yarn.lock
index a41eebb45..82ecae600 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5434,6 +5434,11 @@ html-comment-regex@^1.1.0:
   resolved "https://registry.yarnpkg.com/html-comment-regex/-/html-comment-regex-1.1.2.tgz#97d4688aeb5c81886a364faa0cad1dda14d433a7"
   integrity sha512-P+M65QY2JQ5Y0G9KKdlDpo0zK+/OHptU5AaBwUfAIDJZk1MYf32Frm84EcOytfJE0t5JvkAnKlmjsXDnWzCJmQ==
 
+html-element-attributes@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/html-element-attributes/-/html-element-attributes-2.1.0.tgz#ff674b8716526b8a9ee1d8e454466eda56d6d0cc"
+  integrity sha512-uWNlZuzM3MfRvZLAHWUzwwU6He2NvX9szpXwjG7+hoVqZzY3e0vc6mlujiSnJ/i9zVFZDhBDN33Pm9HNEzcyPg==
+
 html-entities@^1.2.0, html-entities@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.2.1.tgz#0df29351f0721163515dfb9e5543e5f6eed5162f"
@@ -7050,6 +7055,11 @@ math-expression-evaluator@^1.2.14:
   resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz#de819fdbcd84dccd8fae59c6aeb79615b9d266ac"
   integrity sha1-3oGf282E3M2PrlnGrreWFbnSZqw=
 
+md-attr-parser@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/md-attr-parser/-/md-attr-parser-1.2.1.tgz#1043f6451c33ed3e392b40504df08010f4d03e3d"
+  integrity sha512-dZqt2L4Q7FUcx6ZcuownAxa74Y7d5jcsHRB2MIgQ0vT10Pa+/0Som6hhJ+jgAjP3vnFtrd4aO+ZMc5K7QVfbiQ==
+
 md5.js@^1.3.4:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
@@ -9781,6 +9791,14 @@ relateurl@0.2.x:
   resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
   integrity sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=
 
+remark-attr@^0.8.3:
+  version "0.8.3"
+  resolved "https://registry.yarnpkg.com/remark-attr/-/remark-attr-0.8.3.tgz#0263045acb958e1556b0c6955b5d66a4b36d4d92"
+  integrity sha512-JMP6rmLwhj5VmDRG99kGr+HNXQ6MmAs+UojeAHGMQFiIitEmJZBkmgOBsWadxu/RTACD4XnMuJXY1QWEFdw31A==
+  dependencies:
+    html-element-attributes "^2.0.0"
+    md-attr-parser "^1.2.1"
+
 remark-emoji@^2.0.1:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/remark-emoji/-/remark-emoji-2.0.2.tgz#49c134021132c192ee4cceed1988ec9b8ced7eb8"
-- 
2.45.2


From 7d282d07af6a1cde309c3c957b28f877abf6a7ac Mon Sep 17 00:00:00 2001
From: btzr-io <btzr.io@gmail.com>
Date: Mon, 10 Jun 2019 20:34:26 -0600
Subject: [PATCH 12/25] more fixes

---
 src/ui/component/channelLink/index.js         |   2 -
 src/ui/component/channelLink/view.jsx         |  30 ++++++++----
 src/ui/component/channelThumbnail/index.js    |  12 -----
 src/ui/component/common/channel-tooltip.jsx   |  38 ++++++++++-----
 .../{ => common}/channelThumbnail/gerbil.png  | Bin
 .../channelThumbnail/index.jsx}               |  10 ++--
 src/ui/component/common/preview-link.jsx      |  14 ++++--
 src/ui/component/externalLink/view.jsx        |   6 ++-
 src/ui/component/uriIndicator/view.jsx        |   8 +---
 src/ui/page/channel/index.js                  |   4 +-
 src/ui/page/channel/view.jsx                  |   6 +--
 src/ui/scss/component/_channel.scss           |  45 +++++++-----------
 12 files changed, 96 insertions(+), 79 deletions(-)
 delete mode 100644 src/ui/component/channelThumbnail/index.js
 rename src/ui/component/{ => common}/channelThumbnail/gerbil.png (100%)
 rename src/ui/component/{channelThumbnail/view.jsx => common/channelThumbnail/index.jsx} (77%)

diff --git a/src/ui/component/channelLink/index.js b/src/ui/component/channelLink/index.js
index c99d49f96..12c83b500 100644
--- a/src/ui/component/channelLink/index.js
+++ b/src/ui/component/channelLink/index.js
@@ -5,7 +5,6 @@ import {
   makeSelectClaimIsMine,
   makeSelectTitleForUri,
   makeSelectThumbnailForUri,
-  makeSelectCoverForUri,
   makeSelectClaimForUri,
   makeSelectIsUriResolving,
   makeSelectMetadataItemForUri,
@@ -20,7 +19,6 @@ const select = (state, props) => {
     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),
diff --git a/src/ui/component/channelLink/view.jsx b/src/ui/component/channelLink/view.jsx
index 3fe4421a3..1d5649af0 100644
--- a/src/ui/component/channelLink/view.jsx
+++ b/src/ui/component/channelLink/view.jsx
@@ -7,7 +7,6 @@ import ChannelTooltip from 'component/common/channel-tooltip';
 type Props = {
   uri: string,
   title: ?string,
-  cover: ?string,
   claim: StreamClaim,
   children: React.Node,
   thumbnail: ?string,
@@ -39,13 +38,24 @@ class ChannelLink extends React.Component<Props, State> {
   }
 
   showTooltip = () => {
-    this.setState({ isTooltipActive: true });
+    if (this.isTooltipReady()) {
+      setTimeout(() => this.setState({ isTooltipActive: true }), 500);
+    }
   };
 
   hideTooltip = () => {
-    this.setState({ isTooltipActive: false });
+    if (this.isTooltipReady()) {
+      setTimeout(() => this.setState({ isTooltipActive: false }), 500);
+    }
   };
 
+  isTooltipReady() {
+    const { claim, isResolvingUri } = this.props;
+    const blackListed = this.isClaimBlackListed();
+    const isReady = !blackListed && !isResolvingUri && claim !== null;
+    return isReady && this.buttonRef.current !== null;
+  }
+
   isClaimBlackListed() {
     const { claim, blackListedOutpoints } = this.props;
 
@@ -80,14 +90,18 @@ class ChannelLink extends React.Component<Props, State> {
   render() {
     const { uri, claim, title, description, thumbnail, children, isResolvingUri } = this.props;
     const { channelName, claimName, claimId } = parseURI(uri);
-    const blackListed = this.isClaimBlackListed();
-    const isReady = !blackListed && !isResolvingUri && claim !== null;
-    const tooltipReady = this.buttonRef.current !== null;
+    const tooltipReady = this.isTooltipReady();
+    const isUnresolved = (!isResolvingUri && !claim) || !claim;
+    const isBlacklisted = this.isClaimBlackListed();
+
+    if (isBlacklisted || isUnresolved) {
+      return <span className="channel-name">{children}</span>;
+    }
 
     return (
       <React.Fragment>
         <Button
-          button={'link'}
+          className="button--uri-indicator"
           label={children}
           navigate={uri}
           innerRef={this.buttonRef}
@@ -103,7 +117,7 @@ class ChannelLink extends React.Component<Props, State> {
             channelName={channelName}
             thumbnail={thumbnail}
             description={description}
-            active={isReady && this.state.isTooltipActive}
+            active={this.state.isTooltipActive}
             parent={this.buttonRef.current}
           />
         )}
diff --git a/src/ui/component/channelThumbnail/index.js b/src/ui/component/channelThumbnail/index.js
deleted file mode 100644
index 01b1d3c73..000000000
--- a/src/ui/component/channelThumbnail/index.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import { connect } from 'react-redux';
-import { makeSelectThumbnailForUri } from 'lbry-redux';
-import ChannelThumbnail from './view';
-
-const select = (state, props) => ({
-  thumbnail: makeSelectThumbnailForUri(props.uri)(state),
-});
-
-export default connect(
-  select,
-  null
-)(ChannelThumbnail);
diff --git a/src/ui/component/common/channel-tooltip.jsx b/src/ui/component/common/channel-tooltip.jsx
index b025f8833..e6b3a6023 100644
--- a/src/ui/component/common/channel-tooltip.jsx
+++ b/src/ui/component/common/channel-tooltip.jsx
@@ -1,6 +1,8 @@
 // @flow
 import * as React from 'react';
 import ToolTip from 'react-portal-tooltip';
+import TruncatedText from 'component/common/truncated-text';
+import ChannelThumbnail from 'component/common/channelThumbnail';
 
 type TooltipProps = {
   uri: string,
@@ -15,7 +17,7 @@ type TooltipProps = {
 };
 
 const ChannelTooltip = (props: TooltipProps) => {
-  const { title, active, parent, claimId, thumbnail, claimName, channelName, description } = props;
+  const { uri, title, active, parent, claimId, thumbnail, claimName, channelName, description } = props;
 
   const bgColor = '#32373b';
 
@@ -25,21 +27,35 @@ const ChannelTooltip = (props: TooltipProps) => {
   };
 
   return (
-    <ToolTip active={active} position="bottom" style={style} arrow="left" align="left" parent={parent}>
+    <ToolTip
+      align="left"
+      arrow="left"
+      group="channel-tooltip"
+      active={active}
+      style={style}
+      parent={parent}
+      position="bottom"
+      tooltipTimeout={0}
+    >
       <div className={'channel-tooltip'}>
-        <div className={'channel-tooltip__info'}>
-          <img className={'channel-tooltip__thumbnail'} src={thumbnail} />
-          <div>
-            <h2 className={'channel-tooltip__title'}>{title || channelName}</h2>
+        <div className={'media-tile media-tile--small card--link'}>
+          <ChannelThumbnail uri={uri} thumbnail={thumbnail} />
+          <div className={'channel-tooltip__info'}>
+            <h2 className={'channel-tooltip__title'}>
+              <TruncatedText lines={1}>{title || channelName}</TruncatedText>
+            </h2>
             <h3 className={'channel-tooltip__url'}>
-              {claimName}
-              {claimId && `#${claimId}`}
+              <TruncatedText lines={1}>{claimName + (claimId ? `#${claimId}` : '')}</TruncatedText>
             </h3>
           </div>
         </div>
-        <div className={'channel-tooltip__description'}>
-          <p>{description}</p>
-        </div>
+        {description && (
+          <div className={'channel-tooltip__description'}>
+            <p>
+              <TruncatedText lines={2}>{description}</TruncatedText>
+            </p>
+          </div>
+        )}
         <div className={'channel-tooltip__stats'} />
       </div>
     </ToolTip>
diff --git a/src/ui/component/channelThumbnail/gerbil.png b/src/ui/component/common/channelThumbnail/gerbil.png
similarity index 100%
rename from src/ui/component/channelThumbnail/gerbil.png
rename to src/ui/component/common/channelThumbnail/gerbil.png
diff --git a/src/ui/component/channelThumbnail/view.jsx b/src/ui/component/common/channelThumbnail/index.jsx
similarity index 77%
rename from src/ui/component/channelThumbnail/view.jsx
rename to src/ui/component/common/channelThumbnail/index.jsx
index d52df8292..c848f74b4 100644
--- a/src/ui/component/channelThumbnail/view.jsx
+++ b/src/ui/component/common/channelThumbnail/index.jsx
@@ -5,22 +5,24 @@ import classnames from 'classnames';
 import Gerbil from './gerbil.png';
 
 type Props = {
-  thumbnail: ?string,
   uri: string,
+  thumbnail: ?string,
+  className?: string,
 };
 
 function ChannelThumbnail(props: Props) {
-  const { thumbnail, uri } = props;
+  const { className, thumbnail, uri } = props;
 
   // Generate a random color class based on the first letter of the channel name
   const { channelName } = parseURI(uri);
   const initializer = channelName.charCodeAt(0) - 65; // will be between 0 and 57
-  const className = `channel-thumbnail__default--${initializer % 4}`;
+  const thumbnailClass = `channel-thumbnail__default--${initializer % 4}`;
 
   return (
     <div
       className={classnames('channel-thumbnail', {
-        [className]: !thumbnail,
+        [thumbnailClass]: !thumbnail,
+        [className]: className,
       })}
     >
       {!thumbnail && <img className="channel-thumbnail__default" src={Gerbil} />}
diff --git a/src/ui/component/common/preview-link.jsx b/src/ui/component/common/preview-link.jsx
index e80e9b329..050bba157 100644
--- a/src/ui/component/common/preview-link.jsx
+++ b/src/ui/component/common/preview-link.jsx
@@ -4,24 +4,32 @@ import DateTime from 'component/dateTime';
 import UriIndicator from 'component/uriIndicator';
 import TruncatedText from 'component/common/truncated-text';
 import MarkdownPreview from 'component/common/markdown-preview';
+import { withRouter } from 'react-router-dom';
+import { formatLbryUriForWeb } from 'util/uri';
 
 type Props = {
   uri: string,
   title: ?string,
   thumbnail: ?string,
   description: ?string,
+  history: { push: string => void },
 };
 
 const PreviewLink = (props: Props) => {
-  const { uri, title, description, thumbnail } = props;
+  const { uri, title, history, description, thumbnail } = props;
   const placeholder = 'static/img/placeholder.png';
 
   const thumbnailStyle = {
     backgroundImage: `url(${thumbnail || placeholder})`,
   };
 
+  const wrapperProps = {
+    role: 'button',
+    onClick: () => history.push(formatLbryUriForWeb(uri)),
+  };
+
   return (
-    <span className={'preview-link'}>
+    <span className={'preview-link'} {...wrapperProps}>
       <span className={'media-tile media-tile--small card--link'}>
         <span style={thumbnailStyle} className={'preview-link--thumbnail media__thumb'} />
         <span className={'preview-link--text media__info'}>
@@ -44,4 +52,4 @@ const PreviewLink = (props: Props) => {
   );
 };
 
-export default PreviewLink;
+export default withRouter(PreviewLink);
diff --git a/src/ui/component/externalLink/view.jsx b/src/ui/component/externalLink/view.jsx
index f5736ec25..268d4f0bd 100644
--- a/src/ui/component/externalLink/view.jsx
+++ b/src/ui/component/externalLink/view.jsx
@@ -46,7 +46,11 @@ class ExternalLink extends React.PureComponent<Props> {
       try {
         const uri = parseURI(href);
         if (uri.isChannel && !uri.path) {
-          element = <ChannelLink uri={href}>{children}</ChannelLink>;
+          element = (
+            <ChannelLink uri={href} link>
+              {children}
+            </ChannelLink>
+          );
         } else if (uri) {
           element = (
             <ClaimLink uri={href} autoEmbed={this.props['data-preview']}>
diff --git a/src/ui/component/uriIndicator/view.jsx b/src/ui/component/uriIndicator/view.jsx
index b6ffed552..b54fc9de3 100644
--- a/src/ui/component/uriIndicator/view.jsx
+++ b/src/ui/component/uriIndicator/view.jsx
@@ -1,6 +1,6 @@
 // @flow
 import React from 'react';
-import Button from 'component/button';
+import ChannelLink from 'component/channelLink';
 import { buildURI } from 'lbry-redux';
 
 type Props = {
@@ -55,11 +55,7 @@ class UriIndicator extends React.PureComponent<Props> {
       return inner;
     }
 
-    return (
-      <Button className="button--uri-indicator" navigate={channelLink}>
-        {inner}
-      </Button>
-    );
+    return <ChannelLink uri={channelLink}>{inner}</ChannelLink>;
   }
 }
 
diff --git a/src/ui/page/channel/index.js b/src/ui/page/channel/index.js
index a4715823e..53c18e514 100644
--- a/src/ui/page/channel/index.js
+++ b/src/ui/page/channel/index.js
@@ -9,11 +9,11 @@ import {
 import ChannelPage from './view';
 
 const select = (state, props) => ({
+  page: selectCurrentChannelPage(state),
+  cover: makeSelectCoverForUri(props.uri)(state),
   title: makeSelectTitleForUri(props.uri)(state),
   thumbnail: makeSelectThumbnailForUri(props.uri)(state),
-  cover: makeSelectCoverForUri(props.uri)(state),
   channelIsMine: makeSelectClaimIsMine(props.uri)(state),
-  page: selectCurrentChannelPage(state),
 });
 
 export default connect(
diff --git a/src/ui/page/channel/view.jsx b/src/ui/page/channel/view.jsx
index 8cc4ca472..028abf3ce 100644
--- a/src/ui/page/channel/view.jsx
+++ b/src/ui/page/channel/view.jsx
@@ -9,7 +9,7 @@ import { withRouter } from 'react-router';
 import { formatLbryUriForWeb } from 'util/uri';
 import ChannelContent from 'component/channelContent';
 import ChannelAbout from 'component/channelAbout';
-import ChannelThumbnail from 'component/channelThumbnail';
+import ChannelThumbnail from 'component/common/channelThumbnail';
 
 const PAGE_VIEW_QUERY = `view`;
 const ABOUT_PAGE = `about`;
@@ -26,7 +26,7 @@ type Props = {
 };
 
 function ChannelPage(props: Props) {
-  const { uri, title, cover, history, location, page } = props;
+  const { uri, title, cover, thumbnail, history, location, page } = props;
   const { channelName, claimName, claimId } = parseURI(uri);
   const { search } = location;
   const urlParams = new URLSearchParams(search);
@@ -54,7 +54,7 @@ function ChannelPage(props: Props) {
         {cover && <img className="channel-cover__custom" src={cover} />}
 
         <div className="channel__primary-info">
-          <ChannelThumbnail uri={uri} />
+          <ChannelThumbnail uri={uri} thumbnail={thumbnail} />
 
           <div>
             <h1 className="channel__title">{title || channelName}</h1>
diff --git a/src/ui/scss/component/_channel.scss b/src/ui/scss/component/_channel.scss
index 3abfb87c1..b4f9f02ec 100644
--- a/src/ui/scss/component/_channel.scss
+++ b/src/ui/scss/component/_channel.scss
@@ -88,19 +88,23 @@ $metadata-z-index: 1;
 
 // Tooltip
 
-.channel-tooltip__thumbnail {
-  width: 4rem;
-  height: 4rem;
-  background: #fff;
-  margin-right: 8px;
-  border: 0;
-  border-radius: var(--card-radius);
-  background-size: cover;
-  box-shadow: 0px 8px 40px -3px $lbry-black;
+.channel-tooltip {
+  width: 20rem;
+
+  .channel-thumbnail {
+    left: 0;
+    position: relative;
+    margin-right: 0;
+    flex-shrink: 0;
+    text-align: center;
+    display: flex;
+    max-width: 5rem;
+    max-height: 5rem;
+  }
 }
 
-.channel-tooltip {
-  width: 18rem;
+.channel-tooltip .media-tile {
+  align-items: center;
 }
 
 .channel-tooltip__description {
@@ -110,28 +114,15 @@ $metadata-z-index: 1;
   border-bottom: 1px solid rgba(0, 0, 0, 0.2);
 }
 
-.channel-tooltip__description p {
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  text-overflow: ellipsis;
-  overflow: hidden;
-
-  /*
-    This fixes the line-clamp issue on resize:
-    https://stackoverflow.com/questions/38989475/css-multi-line-line-clamp-ellipsis-doesnt-work
-  */
-
+.channel-tooltip__description {
   visibility: visible;
 }
 
 .channel-tooltip__info {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  flex-direction: row;
   padding: 8px;
   margin: 4px 0;
+  align-items: center;
+  visibility: visible;
 }
 
 .channel-tooltip__title {
-- 
2.45.2


From ce7d488fd6b9e83d039feccf87a0a2b8e3914913 Mon Sep 17 00:00:00 2001
From: btzr-io <btzr.io@gmail.com>
Date: Tue, 11 Jun 2019 20:22:21 -0600
Subject: [PATCH 13/25] fix channel tooltip styles / render issues

---
 package.json                                  |  2 +-
 src/ui/component/button/view.jsx              |  4 ++
 src/ui/component/channelLink/index.js         |  3 +
 src/ui/component/channelLink/view.jsx         | 58 +++++++++----------
 src/ui/component/common/channel-tooltip.jsx   | 40 ++++++++-----
 .../common/channelThumbnail/index.jsx         |  4 +-
 .../common/markdown-preview-internal.jsx      |  1 +
 src/ui/component/common/preview-link.jsx      |  2 +-
 src/ui/component/externalLink/view.jsx        |  1 +
 src/ui/scss/component/_channel.scss           | 27 ++++-----
 src/ui/scss/init/_gui.scss                    |  2 +-
 yarn.lock                                     | 31 ++--------
 12 files changed, 80 insertions(+), 95 deletions(-)

diff --git a/package.json b/package.json
index 074778f31..426087f5e 100644
--- a/package.json
+++ b/package.json
@@ -164,7 +164,6 @@
     "remark-attr": "^0.8.3",
     "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",
@@ -176,6 +175,7 @@
     "three": "^0.93.0",
     "three-full": "^17.1.0",
     "tree-kill": "^1.1.0",
+    "uniqid": "^5.0.3",
     "unist-util-visit": "^1.4.1",
     "video.js": "^7.2.2",
     "villain": "btzr-io/Villain",
diff --git a/src/ui/component/button/view.jsx b/src/ui/component/button/view.jsx
index d1c8c89a0..e023edf18 100644
--- a/src/ui/component/button/view.jsx
+++ b/src/ui/component/button/view.jsx
@@ -7,6 +7,7 @@ import { formatLbryUriForWeb } from 'util/uri';
 import { OutboundLink } from 'react-ga';
 
 type Props = {
+  id: ?string,
   href: ?string,
   title: ?string,
   label: ?string,
@@ -37,6 +38,7 @@ class Button extends React.PureComponent<Props> {
 
   render() {
     const {
+      id,
       onClick,
       onMouseEnter,
       onMouseLeave,
@@ -109,6 +111,7 @@ class Button extends React.PureComponent<Props> {
 
     return path ? (
       <NavLink
+        id={id}
         exact
         to={path}
         title={title}
@@ -128,6 +131,7 @@ class Button extends React.PureComponent<Props> {
       </NavLink>
     ) : (
       <button
+        id={id}
         title={title}
         aria-label={description || label || title}
         className={combinedClassName}
diff --git a/src/ui/component/channelLink/index.js b/src/ui/component/channelLink/index.js
index 12c83b500..b66a619e8 100644
--- a/src/ui/component/channelLink/index.js
+++ b/src/ui/component/channelLink/index.js
@@ -1,4 +1,6 @@
 import { connect } from 'react-redux';
+import { THEME } from 'constants/settings';
+import { makeSelectClientSetting } from 'redux/selectors/settings';
 
 import {
   doResolveUri,
@@ -21,6 +23,7 @@ const select = (state, props) => {
     title: makeSelectTitleForUri(props.uri)(state),
     thumbnail: makeSelectThumbnailForUri(props.uri)(state),
     description: makeSelectMetadataItemForUri(props.uri, 'description')(state),
+    currentTheme: makeSelectClientSetting(THEME)(state),
     channelIsMine: makeSelectClaimIsMine(props.uri)(state),
     isResolvingUri: makeSelectIsUriResolving(props.uri)(state),
     blackListedOutpoints: selectBlackListedOutpoints(state),
diff --git a/src/ui/component/channelLink/view.jsx b/src/ui/component/channelLink/view.jsx
index 1d5649af0..82eb38ee4 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 Button from 'component/button';
 import ChannelTooltip from 'component/common/channel-tooltip';
+import uniqid from 'uniqid';
 
 type Props = {
   uri: string,
@@ -11,6 +11,7 @@ type Props = {
   children: React.Node,
   thumbnail: ?string,
   description: ?string,
+  currentTheme: ?string,
   isResolvingUri: boolean,
   resolveUri: string => void,
   blackListedOutpoints: Array<{
@@ -24,6 +25,7 @@ type State = {
 };
 
 class ChannelLink extends React.Component<Props, State> {
+  parentId: string;
   buttonRef: { current: ?any };
 
   static defaultProps = {
@@ -34,28 +36,21 @@ class ChannelLink extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props);
     this.state = { isTooltipActive: false };
-    (this: any).buttonRef = React.createRef();
+
+    // The tooltip component don't work very well with refs,
+    // so we need to use an unique id for each link:
+    // (this: any).buttonRef = React.createRef();
+    (this: any).parentId = uniqid.time('channnel-');
   }
 
   showTooltip = () => {
-    if (this.isTooltipReady()) {
-      setTimeout(() => this.setState({ isTooltipActive: true }), 500);
-    }
+    this.setState({ isTooltipActive: true });
   };
 
   hideTooltip = () => {
-    if (this.isTooltipReady()) {
-      setTimeout(() => this.setState({ isTooltipActive: false }), 500);
-    }
+    this.setState({ isTooltipActive: false });
   };
 
-  isTooltipReady() {
-    const { claim, isResolvingUri } = this.props;
-    const blackListed = this.isClaimBlackListed();
-    const isReady = !blackListed && !isResolvingUri && claim !== null;
-    return isReady && this.buttonRef.current !== null;
-  }
-
   isClaimBlackListed() {
     const { claim, blackListedOutpoints } = this.props;
 
@@ -88,9 +83,7 @@ class ChannelLink extends React.Component<Props, State> {
   }
 
   render() {
-    const { uri, claim, title, description, thumbnail, children, isResolvingUri } = this.props;
-    const { channelName, claimName, claimId } = parseURI(uri);
-    const tooltipReady = this.isTooltipReady();
+    const { uri, claim, title, description, thumbnail, children, currentTheme, isResolvingUri } = this.props;
     const isUnresolved = (!isResolvingUri && !claim) || !claim;
     const isBlacklisted = this.isClaimBlackListed();
 
@@ -98,29 +91,30 @@ class ChannelLink extends React.Component<Props, State> {
       return <span className="channel-name">{children}</span>;
     }
 
+    const { claim_id: claimId, name: channelName } = claim;
+
     return (
       <React.Fragment>
         <Button
+          id={this.parentId}
           className="button--uri-indicator"
           label={children}
           navigate={uri}
-          innerRef={this.buttonRef}
           onMouseEnter={this.showTooltip}
           onMouseLeave={this.hideTooltip}
         />
-        {tooltipReady && (
-          <ChannelTooltip
-            uri={uri}
-            title={title}
-            claimId={claimId}
-            claimName={claimName}
-            channelName={channelName}
-            thumbnail={thumbnail}
-            description={description}
-            active={this.state.isTooltipActive}
-            parent={this.buttonRef.current}
-          />
-        )}
+        <ChannelTooltip
+          uri={uri}
+          title={title}
+          claimId={claimId}
+          channelName={channelName}
+          currentTheme={currentTheme}
+          thumbnail={thumbnail}
+          description={description}
+          active={this.state.isTooltipActive}
+          parent={`#${this.parentId}`}
+          group={'channel-tooltip'}
+        />
       </React.Fragment>
     );
   }
diff --git a/src/ui/component/common/channel-tooltip.jsx b/src/ui/component/common/channel-tooltip.jsx
index e6b3a6023..dcf95e3b3 100644
--- a/src/ui/component/common/channel-tooltip.jsx
+++ b/src/ui/component/common/channel-tooltip.jsx
@@ -7,45 +7,55 @@ import ChannelThumbnail from 'component/common/channelThumbnail';
 type TooltipProps = {
   uri: string,
   title: ?string,
+  group: ?string,
   active: ?boolean,
-  parent: ?HTMLElement,
-  claimId: ?string,
+  parent: ?HTMLElement | ?string,
+  claimId: string,
   thumbnail: ?string,
-  claimName: ?string,
-  channelName: ?string,
+  channelName: string,
   description: ?string,
+  currentTheme: ?string,
 };
 
 const ChannelTooltip = (props: TooltipProps) => {
-  const { uri, title, active, parent, claimId, thumbnail, claimName, channelName, description } = props;
+  const { uri, group, title, active, parent, claimId, thumbnail, description, channelName, currentTheme } = props;
 
-  const bgColor = '#32373b';
+  let bgColor = 'var(--lbry-white)';
+
+  if (currentTheme === 'dark') {
+    // Background color of the tooltip component,
+    // taken from the header component:
+    // mix($lbry-black, $lbry-gray-3, 90%);
+    bgColor = '#32373b';
+  }
 
   const style = {
-    style: { background: bgColor },
-    arrowStyle: { color: bgColor },
+    style: { background: bgColor, padding: 0 },
+    arrowStyle: { color: bgColor, borderColor: false },
   };
 
+  const channelUrl = `${channelName}#${claimId}`;
+  const formatedName = channelName.replace('@', '');
+
   return (
     <ToolTip
       align="left"
       arrow="left"
-      group="channel-tooltip"
-      active={active}
+      active={parent && active}
+      group={group}
       style={style}
       parent={parent}
       position="bottom"
-      tooltipTimeout={0}
     >
       <div className={'channel-tooltip'}>
-        <div className={'media-tile media-tile--small card--link'}>
+        <div className={'channel-tooltip__profile'}>
           <ChannelThumbnail uri={uri} thumbnail={thumbnail} />
           <div className={'channel-tooltip__info'}>
             <h2 className={'channel-tooltip__title'}>
-              <TruncatedText lines={1}>{title || channelName}</TruncatedText>
+              <TruncatedText lines={1}>{title || formatedName}</TruncatedText>
             </h2>
             <h3 className={'channel-tooltip__url'}>
-              <TruncatedText lines={1}>{claimName + (claimId ? `#${claimId}` : '')}</TruncatedText>
+              <TruncatedText lines={1}>{channelUrl}</TruncatedText>
             </h3>
           </div>
         </div>
@@ -62,4 +72,4 @@ const ChannelTooltip = (props: TooltipProps) => {
   );
 };
 
-export default ChannelTooltip;
+export default React.memo<TooltipProps>(ChannelTooltip);
diff --git a/src/ui/component/common/channelThumbnail/index.jsx b/src/ui/component/common/channelThumbnail/index.jsx
index c848f74b4..8aa2db55f 100644
--- a/src/ui/component/common/channelThumbnail/index.jsx
+++ b/src/ui/component/common/channelThumbnail/index.jsx
@@ -7,11 +7,10 @@ import Gerbil from './gerbil.png';
 type Props = {
   uri: string,
   thumbnail: ?string,
-  className?: string,
 };
 
 function ChannelThumbnail(props: Props) {
-  const { className, thumbnail, uri } = props;
+  const { thumbnail, uri } = props;
 
   // Generate a random color class based on the first letter of the channel name
   const { channelName } = parseURI(uri);
@@ -22,7 +21,6 @@ function ChannelThumbnail(props: Props) {
     <div
       className={classnames('channel-thumbnail', {
         [thumbnailClass]: !thumbnail,
-        [className]: className,
       })}
     >
       {!thumbnail && <img className="channel-thumbnail__default" src={Gerbil} />}
diff --git a/src/ui/component/common/markdown-preview-internal.jsx b/src/ui/component/common/markdown-preview-internal.jsx
index 581dec418..abee23ae0 100644
--- a/src/ui/component/common/markdown-preview-internal.jsx
+++ b/src/ui/component/common/markdown-preview-internal.jsx
@@ -62,6 +62,7 @@ const MarkdownPreview = (props: MarkdownProps) => {
     scope: 'extended',
     elements: ['link'],
     extend: { link: ['data-preview'] },
+    defaultValue: true,
   };
 
   // Strip all content and just render text
diff --git a/src/ui/component/common/preview-link.jsx b/src/ui/component/common/preview-link.jsx
index 050bba157..259ab1461 100644
--- a/src/ui/component/common/preview-link.jsx
+++ b/src/ui/component/common/preview-link.jsx
@@ -52,4 +52,4 @@ const PreviewLink = (props: Props) => {
   );
 };
 
-export default withRouter(PreviewLink);
+export default withRouter(React.memo(PreviewLink));
diff --git a/src/ui/component/externalLink/view.jsx b/src/ui/component/externalLink/view.jsx
index 268d4f0bd..b6a5e870a 100644
--- a/src/ui/component/externalLink/view.jsx
+++ b/src/ui/component/externalLink/view.jsx
@@ -45,6 +45,7 @@ class ExternalLink extends React.PureComponent<Props> {
     if (protocol && protocol[0] === 'lbry:' && isURIValid(href)) {
       try {
         const uri = parseURI(href);
+
         if (uri.isChannel && !uri.path) {
           element = (
             <ChannelLink uri={href} link>
diff --git a/src/ui/scss/component/_channel.scss b/src/ui/scss/component/_channel.scss
index b4f9f02ec..5b135571a 100644
--- a/src/ui/scss/component/_channel.scss
+++ b/src/ui/scss/component/_channel.scss
@@ -94,33 +94,33 @@ $metadata-z-index: 1;
   .channel-thumbnail {
     left: 0;
     position: relative;
-    margin-right: 0;
     flex-shrink: 0;
     text-align: center;
     display: flex;
     max-width: 5rem;
     max-height: 5rem;
+    margin-right: 1rem;
+    box-shadow: 0px 2px 10px -2px $lbry-black;
   }
 }
 
-.channel-tooltip .media-tile {
+.channel-tooltip__profile {
+  display: flex;
   align-items: center;
+  padding: 1rem;
 }
 
 .channel-tooltip__description {
-  padding: 8px;
-  margin: 4px 0;
-  border-top: 1px solid rgba(0, 0, 0, 0.2);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
-}
-
-.channel-tooltip__description {
+  padding: 1rem;
   visibility: visible;
+  border-top: 1px solid rgba($lbry-gray-4, 0.4);
+
+  html[data-mode='dark'] & {
+    border-top: 1px solid rgba($lbry-black, 0.8);
+  }
 }
 
 .channel-tooltip__info {
-  padding: 8px;
-  margin: 4px 0;
   align-items: center;
   visibility: visible;
 }
@@ -129,13 +129,8 @@ $metadata-z-index: 1;
   font-weight: bold;
   font-size: 1.4rem;
   line-height: 1.5em;
-  margin: 0;
-  margin-left: 4px;
-  color: $lbry-white;
 }
 
 .channel-tooltip__url {
   font-size: 1rem;
-  margin-left: 4px;
-  padding: 0;
 }
diff --git a/src/ui/scss/init/_gui.scss b/src/ui/scss/init/_gui.scss
index af510b556..b16644dd7 100644
--- a/src/ui/scss/init/_gui.scss
+++ b/src/ui/scss/init/_gui.scss
@@ -12,7 +12,7 @@ html {
   background-color: $lbry-white;
   font-size: 12px;
   height: 100%;
-  overflow-x: hidden;
+  overflow: hidden;
 }
 
 body {
diff --git a/yarn.lock b/yarn.lock
index 82ecae600..c55841d8c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7078,13 +7078,6 @@ md5@^2.2.1:
     crypt "~0.0.1"
     is-buffer "~1.1.1"
 
-mdast-squeeze-paragraphs@^3.0.0:
-  version "3.0.5"
-  resolved "https://registry.yarnpkg.com/mdast-squeeze-paragraphs/-/mdast-squeeze-paragraphs-3.0.5.tgz#f428b6b944f8faef454db9b58f170c4183cb2e61"
-  integrity sha512-xX6Vbe348Y/rukQlG4W3xH+7v4ZlzUbSY4HUIQCuYrF2DrkcHx584mCaFxkWoDZKNUfyLZItHC9VAqX3kIP7XA==
-  dependencies:
-    unist-util-remove "^1.0.0"
-
 mdast-util-compact@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/mdast-util-compact/-/mdast-util-compact-1.0.2.tgz#c12ebe16fffc84573d3e19767726de226e95f649"
@@ -9838,13 +9831,6 @@ remark-react@^4.0.3:
     hast-util-sanitize "^1.0.0"
     mdast-util-to-hast "^3.0.0"
 
-remark-squeeze-paragraphs@^3.0.3:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/remark-squeeze-paragraphs/-/remark-squeeze-paragraphs-3.0.3.tgz#299d8db7d44008c9ae240dbf6d1f55b8b0f924ce"
-  integrity sha512-eDvjtwFa9eClqb7XgdF/1H9Pfs2LPnf/P3eRs9ucYAWUuv4WO8ZOVAUeT/1h66rQvghnfctz9au+HEmoKcdoqA==
-  dependencies:
-    mdast-squeeze-paragraphs "^3.0.0"
-
 remark-stringify@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/remark-stringify/-/remark-stringify-5.0.0.tgz#336d3a4d4a6a3390d933eeba62e8de4bd280afba"
@@ -11467,6 +11453,11 @@ uniq@^1.0.1:
   resolved "https://registry.yarnpkg.com/uniq/-/uniq-1.0.1.tgz#b31c5ae8254844a3a8281541ce2b04b865a734ff"
   integrity sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8=
 
+uniqid@^5.0.3:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/uniqid/-/uniqid-5.0.3.tgz#917968310edc868d50df6c44f783f32c7d80fac1"
+  integrity sha512-R2qx3X/LYWSdGRaluio4dYrPXAJACTqyUjuyXHoJLBUOIfmMcnYOyY2d6Y4clZcIz5lK6ZaI0Zzmm0cPfsIqzQ==
+
 uniqs@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/uniqs/-/uniqs-2.0.0.tgz#ffede4b36b25290696e6e165d4a59edb998e6b02"
@@ -11510,11 +11501,6 @@ unist-util-is@^2.0.0, unist-util-is@^2.1.2:
   resolved "https://registry.yarnpkg.com/unist-util-is/-/unist-util-is-2.1.2.tgz#1193fa8f2bfbbb82150633f3a8d2eb9a1c1d55db"
   integrity sha512-YkXBK/H9raAmG7KXck+UUpnKiNmUdB+aBGrknfQ4EreE1banuzrKABx3jP6Z5Z3fMSPMQQmeXBlKpCbMwBkxVw==
 
-unist-util-is@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/unist-util-is/-/unist-util-is-3.0.0.tgz#d9e84381c2468e82629e4a5be9d7d05a2dd324cd"
-  integrity sha512-sVZZX3+kspVNmLWBPAB6r+7D9ZgAFPNWm66f7YNb420RlQSbn+n8rG8dGZSkrER7ZIXGQYNm5pqC3v3HopH24A==
-
 unist-util-position@^3.0.0:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/unist-util-position/-/unist-util-position-3.0.2.tgz#80ad4a05efc4ab01a66886cc70493893ba73c5eb"
@@ -11527,13 +11513,6 @@ unist-util-remove-position@^1.0.0:
   dependencies:
     unist-util-visit "^1.1.0"
 
-unist-util-remove@^1.0.0:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/unist-util-remove/-/unist-util-remove-1.0.3.tgz#58ec193dfa84b52d5a055ffbc58e5444eb8031a3"
-  integrity sha512-mB6nCHCQK0pQffUAcCVmKgIWzG/AXs/V8qpS8K72tMPtOSCMSjDeMc5yN+Ye8rB0FhcE+JvW++o1xRNc0R+++g==
-  dependencies:
-    unist-util-is "^3.0.0"
-
 unist-util-stringify-position@^1.0.0, unist-util-stringify-position@^1.1.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/unist-util-stringify-position/-/unist-util-stringify-position-1.1.2.tgz#3f37fcf351279dcbca7480ab5889bb8a832ee1c6"
-- 
2.45.2


From dce70383a1fb3f6124f0fcad40fc2827dab00876 Mon Sep 17 00:00:00 2001
From: Baltazar Gomez <btzr.io@gmail.com>
Date: Tue, 11 Jun 2019 21:27:52 -0600
Subject: [PATCH 14/25] fix overflow typo

---
 src/ui/scss/init/_gui.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ui/scss/init/_gui.scss b/src/ui/scss/init/_gui.scss
index b16644dd7..af510b556 100644
--- a/src/ui/scss/init/_gui.scss
+++ b/src/ui/scss/init/_gui.scss
@@ -12,7 +12,7 @@ html {
   background-color: $lbry-white;
   font-size: 12px;
   height: 100%;
-  overflow: hidden;
+  overflow-x: hidden;
 }
 
 body {
-- 
2.45.2


From 7fed44e3e89eacd9bd4f7814d8c8a522e81c82f6 Mon Sep 17 00:00:00 2001
From: btzr-io <btzr.io@gmail.com>
Date: Wed, 12 Jun 2019 19:17:41 -0600
Subject: [PATCH 15/25] move styles to _tooltip.scss

---
 src/ui/scss/component/_channel.scss | 49 -----------------------------
 src/ui/scss/component/_tooltip.scss | 49 +++++++++++++++++++++++++++++
 2 files changed, 49 insertions(+), 49 deletions(-)

diff --git a/src/ui/scss/component/_channel.scss b/src/ui/scss/component/_channel.scss
index 5b135571a..fcbadeaf1 100644
--- a/src/ui/scss/component/_channel.scss
+++ b/src/ui/scss/component/_channel.scss
@@ -85,52 +85,3 @@ $metadata-z-index: 1;
   margin-top: -0.25rem;
   color: rgba($lbry-white, 0.75);
 }
-
-// Tooltip
-
-.channel-tooltip {
-  width: 20rem;
-
-  .channel-thumbnail {
-    left: 0;
-    position: relative;
-    flex-shrink: 0;
-    text-align: center;
-    display: flex;
-    max-width: 5rem;
-    max-height: 5rem;
-    margin-right: 1rem;
-    box-shadow: 0px 2px 10px -2px $lbry-black;
-  }
-}
-
-.channel-tooltip__profile {
-  display: flex;
-  align-items: center;
-  padding: 1rem;
-}
-
-.channel-tooltip__description {
-  padding: 1rem;
-  visibility: visible;
-  border-top: 1px solid rgba($lbry-gray-4, 0.4);
-
-  html[data-mode='dark'] & {
-    border-top: 1px solid rgba($lbry-black, 0.8);
-  }
-}
-
-.channel-tooltip__info {
-  align-items: center;
-  visibility: visible;
-}
-
-.channel-tooltip__title {
-  font-weight: bold;
-  font-size: 1.4rem;
-  line-height: 1.5em;
-}
-
-.channel-tooltip__url {
-  font-size: 1rem;
-}
diff --git a/src/ui/scss/component/_tooltip.scss b/src/ui/scss/component/_tooltip.scss
index 87651252a..016afd38d 100644
--- a/src/ui/scss/component/_tooltip.scss
+++ b/src/ui/scss/component/_tooltip.scss
@@ -150,3 +150,52 @@
     margin-left: -5px;
   }
 }
+
+// Channel-tooltip
+
+.channel-tooltip {
+  width: 20rem;
+
+  .channel-thumbnail {
+    left: 0;
+    position: relative;
+    flex-shrink: 0;
+    text-align: center;
+    display: flex;
+    max-width: 5rem;
+    max-height: 5rem;
+    margin-right: 1rem;
+    box-shadow: 0px 2px 10px -2px $lbry-black;
+  }
+}
+
+.channel-tooltip__profile {
+  display: flex;
+  align-items: center;
+  padding: 1rem;
+}
+
+.channel-tooltip__description {
+  padding: 1rem;
+  visibility: visible;
+  border-top: 1px solid rgba($lbry-gray-4, 0.4);
+
+  html[data-mode='dark'] & {
+    border-top: 1px solid rgba($lbry-black, 0.8);
+  }
+}
+
+.channel-tooltip__info {
+  align-items: center;
+  visibility: visible;
+}
+
+.channel-tooltip__title {
+  font-weight: bold;
+  font-size: 1.4rem;
+  line-height: 1.5em;
+}
+
+.channel-tooltip__url {
+  font-size: 1rem;
+}
-- 
2.45.2


From b4fd0fc32570a9e2a718c8bed4abeab77cbf9e7f Mon Sep 17 00:00:00 2001
From: btzr-io <btzr.io@gmail.com>
Date: Wed, 12 Jun 2019 20:26:40 -0600
Subject: [PATCH 16/25] convert previewLink to a connected component

---
 src/ui/component/claimLink/view.jsx      | 12 +++--
 src/ui/component/common/preview-link.jsx | 55 -----------------------
 src/ui/component/previewLink/index.js    | 37 +++++++++++++++
 src/ui/component/previewLink/view.jsx    | 57 ++++++++++++++++++++++++
 4 files changed, 99 insertions(+), 62 deletions(-)
 delete mode 100644 src/ui/component/common/preview-link.jsx
 create mode 100644 src/ui/component/previewLink/index.js
 create mode 100644 src/ui/component/previewLink/view.jsx

diff --git a/src/ui/component/claimLink/view.jsx b/src/ui/component/claimLink/view.jsx
index 535b57b1d..e4f19274e 100644
--- a/src/ui/component/claimLink/view.jsx
+++ b/src/ui/component/claimLink/view.jsx
@@ -2,12 +2,12 @@
 import * as React from 'react';
 import { parseURI } from 'lbry-redux';
 import Button from 'component/button';
-import PreviewLink from 'component/common/preview-link';
+
+import PreviewLink from 'component/previewLink';
 
 type Props = {
   uri: string,
   title: ?string,
-  cover: ?string,
   claim: StreamClaim,
   children: React.Node,
   thumbnail: ?string,
@@ -59,17 +59,15 @@ class ClaimLink extends React.Component<Props> {
   }
 
   render() {
-    const { uri, claim, title, description, autoEmbed, thumbnail, children, isResolvingUri } = this.props;
+    const { uri, claim, title, autoEmbed, children, isResolvingUri } = this.props;
     const { claimName } = parseURI(uri);
     const blackListed = this.isClaimBlackListed();
     const showPreview = autoEmbed === true && !blackListed && !isResolvingUri && claim !== null;
 
     return (
       <React.Fragment>
-        <Button title={title} button={'link'} label={children} navigate={uri} />
-        {showPreview && (
-          <PreviewLink uri={uri} title={title || claimName} thumbnail={thumbnail} description={description} />
-        )}
+        <Button title={title || claimName} button={'link'} label={children} navigate={uri} />
+        {showPreview && <PreviewLink uri={uri} />}
       </React.Fragment>
     );
   }
diff --git a/src/ui/component/common/preview-link.jsx b/src/ui/component/common/preview-link.jsx
deleted file mode 100644
index 259ab1461..000000000
--- a/src/ui/component/common/preview-link.jsx
+++ /dev/null
@@ -1,55 +0,0 @@
-// @flow
-import * as React from 'react';
-import DateTime from 'component/dateTime';
-import UriIndicator from 'component/uriIndicator';
-import TruncatedText from 'component/common/truncated-text';
-import MarkdownPreview from 'component/common/markdown-preview';
-import { withRouter } from 'react-router-dom';
-import { formatLbryUriForWeb } from 'util/uri';
-
-type Props = {
-  uri: string,
-  title: ?string,
-  thumbnail: ?string,
-  description: ?string,
-  history: { push: string => void },
-};
-
-const PreviewLink = (props: Props) => {
-  const { uri, title, history, description, thumbnail } = props;
-  const placeholder = 'static/img/placeholder.png';
-
-  const thumbnailStyle = {
-    backgroundImage: `url(${thumbnail || placeholder})`,
-  };
-
-  const wrapperProps = {
-    role: 'button',
-    onClick: () => history.push(formatLbryUriForWeb(uri)),
-  };
-
-  return (
-    <span className={'preview-link'} {...wrapperProps}>
-      <span className={'media-tile media-tile--small card--link'}>
-        <span style={thumbnailStyle} className={'preview-link--thumbnail media__thumb'} />
-        <span className={'preview-link--text media__info'}>
-          <span className={'preview-link--title media__title'}>
-            <TruncatedText text={title} lines={1} />
-          </span>
-          <span className={'preview-link--description media__subtext'}>
-            <span className={'truncated-text'}>
-              {__('Published to')} <UriIndicator uri={uri} link /> <DateTime timeAgo uri={uri} />
-            </span>
-          </span>
-          <span className={'preview-link--description media__subtext'}>
-            <TruncatedText lines={2} showTooltip={false}>
-              <MarkdownPreview content={description} promptLinks strip />
-            </TruncatedText>
-          </span>
-        </span>
-      </span>
-    </span>
-  );
-};
-
-export default withRouter(React.memo(PreviewLink));
diff --git a/src/ui/component/previewLink/index.js b/src/ui/component/previewLink/index.js
new file mode 100644
index 000000000..2785d69ae
--- /dev/null
+++ b/src/ui/component/previewLink/index.js
@@ -0,0 +1,37 @@
+import { connect } from 'react-redux';
+
+import {
+  doResolveUri,
+  makeSelectClaimIsMine,
+  makeSelectTitleForUri,
+  makeSelectThumbnailForUri,
+  makeSelectClaimForUri,
+  makeSelectIsUriResolving,
+  makeSelectMetadataItemForUri,
+} from 'lbry-redux';
+
+import { selectBlackListedOutpoints } from 'lbryinc';
+
+import PreviewLink from './view';
+
+const select = (state, props) => {
+  return {
+    uri: props.uri,
+    claim: makeSelectClaimForUri(props.uri)(state),
+    title: makeSelectTitleForUri(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
+)(PreviewLink);
diff --git a/src/ui/component/previewLink/view.jsx b/src/ui/component/previewLink/view.jsx
new file mode 100644
index 000000000..4a5351e28
--- /dev/null
+++ b/src/ui/component/previewLink/view.jsx
@@ -0,0 +1,57 @@
+// @flow
+import * as React from 'react';
+import DateTime from 'component/dateTime';
+import UriIndicator from 'component/uriIndicator';
+import TruncatedText from 'component/common/truncated-text';
+import MarkdownPreview from 'component/common/markdown-preview';
+import { withRouter } from 'react-router-dom';
+import { formatLbryUriForWeb } from 'util/uri';
+
+type Props = {
+  uri: string,
+  title: ?string,
+  thumbnail: ?string,
+  description: ?string,
+  history: { push: string => void },
+};
+
+class PreviewLink extends React.PureComponent<Props> {
+  handleClick = () => {
+    const { uri, history } = this.props;
+    history.push(formatLbryUriForWeb(uri));
+  };
+
+  render() {
+    const { uri, title, description, thumbnail } = this.props;
+    const placeholder = 'static/img/placeholder.png';
+
+    const thumbnailStyle = {
+      backgroundImage: `url(${thumbnail || placeholder})`,
+    };
+
+    return (
+      <span className={'preview-link'} role="button" onClick={this.handleClick}>
+        <span className={'media-tile media-tile--small card--link'}>
+          <span style={thumbnailStyle} className={'preview-link--thumbnail media__thumb'} />
+          <span className={'preview-link--text media__info'}>
+            <span className={'preview-link--title media__title'}>
+              <TruncatedText text={title} lines={1} />
+            </span>
+            <span className={'preview-link--description media__subtext'}>
+              <span className={'truncated-text'}>
+                {__('Published to')} <UriIndicator uri={uri} link /> <DateTime timeAgo uri={uri} />
+              </span>
+            </span>
+            <span className={'preview-link--description media__subtext'}>
+              <TruncatedText lines={2} showTooltip={false}>
+                <MarkdownPreview content={description} promptLinks strip />
+              </TruncatedText>
+            </span>
+          </span>
+        </span>
+      </span>
+    );
+  }
+}
+
+export default withRouter(PreviewLink);
-- 
2.45.2


From f8946687e9d64edb40e62d4dff2c6201c3aa6d6f Mon Sep 17 00:00:00 2001
From: btzr-io <btzr.io@gmail.com>
Date: Wed, 12 Jun 2019 22:18:35 -0600
Subject: [PATCH 17/25] merge channelLink and claimLink into one component

---
 src/ui/component/channelLink/index.js  |  40 --------
 src/ui/component/channelLink/view.jsx  | 123 -------------------------
 src/ui/component/claimLink/index.js    |   5 +-
 src/ui/component/claimLink/view.jsx    |  75 +++++++++++++--
 src/ui/component/externalLink/view.jsx |  27 ++----
 src/ui/component/uriIndicator/view.jsx |  10 +-
 6 files changed, 82 insertions(+), 198 deletions(-)
 delete mode 100644 src/ui/component/channelLink/index.js
 delete mode 100644 src/ui/component/channelLink/view.jsx

diff --git a/src/ui/component/channelLink/index.js b/src/ui/component/channelLink/index.js
deleted file mode 100644
index b66a619e8..000000000
--- a/src/ui/component/channelLink/index.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import { connect } from 'react-redux';
-import { THEME } from 'constants/settings';
-import { makeSelectClientSetting } from 'redux/selectors/settings';
-
-import {
-  doResolveUri,
-  makeSelectClaimIsMine,
-  makeSelectTitleForUri,
-  makeSelectThumbnailForUri,
-  makeSelectClaimForUri,
-  makeSelectIsUriResolving,
-  makeSelectMetadataItemForUri,
-} from 'lbry-redux';
-
-import { selectBlackListedOutpoints } from 'lbryinc';
-
-import ChannelLink from './view';
-
-const select = (state, props) => {
-  return {
-    uri: props.uri,
-    claim: makeSelectClaimForUri(props.uri)(state),
-    title: makeSelectTitleForUri(props.uri)(state),
-    thumbnail: makeSelectThumbnailForUri(props.uri)(state),
-    description: makeSelectMetadataItemForUri(props.uri, 'description')(state),
-    currentTheme: makeSelectClientSetting(THEME)(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
-)(ChannelLink);
diff --git a/src/ui/component/channelLink/view.jsx b/src/ui/component/channelLink/view.jsx
deleted file mode 100644
index 82eb38ee4..000000000
--- a/src/ui/component/channelLink/view.jsx
+++ /dev/null
@@ -1,123 +0,0 @@
-// @flow
-import * as React from 'react';
-import Button from 'component/button';
-import ChannelTooltip from 'component/common/channel-tooltip';
-import uniqid from 'uniqid';
-
-type Props = {
-  uri: string,
-  title: ?string,
-  claim: StreamClaim,
-  children: React.Node,
-  thumbnail: ?string,
-  description: ?string,
-  currentTheme: ?string,
-  isResolvingUri: boolean,
-  resolveUri: string => void,
-  blackListedOutpoints: Array<{
-    txid: string,
-    nout: number,
-  }>,
-};
-
-type State = {
-  isTooltipActive: boolean,
-};
-
-class ChannelLink extends React.Component<Props, State> {
-  parentId: string;
-  buttonRef: { current: ?any };
-
-  static defaultProps = {
-    href: null,
-    title: null,
-  };
-
-  constructor(props: Props) {
-    super(props);
-    this.state = { isTooltipActive: false };
-
-    // The tooltip component don't work very well with refs,
-    // so we need to use an unique id for each link:
-    // (this: any).buttonRef = React.createRef();
-    (this: any).parentId = uniqid.time('channnel-');
-  }
-
-  showTooltip = () => {
-    this.setState({ isTooltipActive: true });
-  };
-
-  hideTooltip = () => {
-    this.setState({ isTooltipActive: false });
-  };
-
-  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, claim, uri } = this.props;
-    if (!isResolvingUri && uri && !claim) {
-      resolveUri(uri);
-    }
-  }
-
-  componentDidUpdate() {
-    const { isResolvingUri, resolveUri, claim, uri } = this.props;
-    if (!isResolvingUri && uri && !claim) {
-      resolveUri(uri);
-    }
-  }
-
-  render() {
-    const { uri, claim, title, description, thumbnail, children, currentTheme, isResolvingUri } = this.props;
-    const isUnresolved = (!isResolvingUri && !claim) || !claim;
-    const isBlacklisted = this.isClaimBlackListed();
-
-    if (isBlacklisted || isUnresolved) {
-      return <span className="channel-name">{children}</span>;
-    }
-
-    const { claim_id: claimId, name: channelName } = claim;
-
-    return (
-      <React.Fragment>
-        <Button
-          id={this.parentId}
-          className="button--uri-indicator"
-          label={children}
-          navigate={uri}
-          onMouseEnter={this.showTooltip}
-          onMouseLeave={this.hideTooltip}
-        />
-        <ChannelTooltip
-          uri={uri}
-          title={title}
-          claimId={claimId}
-          channelName={channelName}
-          currentTheme={currentTheme}
-          thumbnail={thumbnail}
-          description={description}
-          active={this.state.isTooltipActive}
-          parent={`#${this.parentId}`}
-          group={'channel-tooltip'}
-        />
-      </React.Fragment>
-    );
-  }
-}
-
-export default ChannelLink;
diff --git a/src/ui/component/claimLink/index.js b/src/ui/component/claimLink/index.js
index d473213e3..41af7dd95 100644
--- a/src/ui/component/claimLink/index.js
+++ b/src/ui/component/claimLink/index.js
@@ -1,11 +1,12 @@
 import { connect } from 'react-redux';
+import { THEME } from 'constants/settings';
+import { makeSelectClientSetting } from 'redux/selectors/settings';
 
 import {
   doResolveUri,
   makeSelectClaimIsMine,
   makeSelectTitleForUri,
   makeSelectThumbnailForUri,
-  makeSelectCoverForUri,
   makeSelectClaimForUri,
   makeSelectIsUriResolving,
   makeSelectMetadataItemForUri,
@@ -20,9 +21,9 @@ const select = (state, props) => {
     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),
+    currentTheme: makeSelectClientSetting(THEME)(state),
     channelIsMine: makeSelectClaimIsMine(props.uri)(state),
     isResolvingUri: makeSelectIsUriResolving(props.uri)(state),
     blackListedOutpoints: selectBlackListedOutpoints(state),
diff --git a/src/ui/component/claimLink/view.jsx b/src/ui/component/claimLink/view.jsx
index e4f19274e..4d61e576b 100644
--- a/src/ui/component/claimLink/view.jsx
+++ b/src/ui/component/claimLink/view.jsx
@@ -1,9 +1,10 @@
 // @flow
+import uniqid from 'uniqid';
 import * as React from 'react';
 import { parseURI } from 'lbry-redux';
 import Button from 'component/button';
-
 import PreviewLink from 'component/previewLink';
+import ChannelTooltip from 'component/common/channel-tooltip';
 
 type Props = {
   uri: string,
@@ -13,6 +14,7 @@ type Props = {
   thumbnail: ?string,
   autoEmbed: ?boolean,
   description: ?string,
+  currentTheme: ?string,
   isResolvingUri: boolean,
   resolveUri: string => void,
   blackListedOutpoints: Array<{
@@ -21,10 +23,38 @@ type Props = {
   }>,
 };
 
-class ClaimLink extends React.Component<Props> {
+type State = {
+  isTooltipActive: boolean,
+};
+
+class ClaimLink extends React.Component<Props, State> {
+  parentId: string;
+
   static defaultProps = {
     href: null,
     title: null,
+    thumbnail: null,
+    autoEmbed: false,
+    description: null,
+    isResolvingUri: false,
+  };
+
+  constructor(props: Props) {
+    super(props);
+    this.state = { isTooltipActive: false };
+
+    // The tooltip component don't work very well with refs,
+    // so we need to use an unique id for each link:
+    // (this: any).buttonRef = React.createRef();
+    (this: any).parentId = uniqid.time('claim-link-');
+  }
+
+  showTooltip = () => {
+    this.setState({ isTooltipActive: true });
+  };
+
+  hideTooltip = () => {
+    this.setState({ isTooltipActive: false });
   };
 
   isClaimBlackListed() {
@@ -59,15 +89,46 @@ class ClaimLink extends React.Component<Props> {
   }
 
   render() {
-    const { uri, claim, title, autoEmbed, children, isResolvingUri } = this.props;
-    const { claimName } = parseURI(uri);
-    const blackListed = this.isClaimBlackListed();
-    const showPreview = autoEmbed === true && !blackListed && !isResolvingUri && claim !== null;
+    const { uri, claim, title, description, thumbnail, currentTheme, autoEmbed, children, isResolvingUri } = this.props;
+    const isUnresolved = (!isResolvingUri && !claim) || !claim;
+    const isBlacklisted = this.isClaimBlackListed();
+
+    if (isBlacklisted || isUnresolved) {
+      return <span>{children}</span>;
+    }
+
+    const { isChannel, path } = parseURI(uri);
+    const { claim_id: claimId, name: claimName } = claim;
+    const showPreview = autoEmbed === true && !isUnresolved;
+    const renderChannelTooltip = isChannel && !path;
 
     return (
       <React.Fragment>
-        <Button title={title || claimName} button={'link'} label={children} navigate={uri} />
+        <Button
+          id={this.parentId}
+          label={children}
+          title={title || claimName}
+          button={'link'}
+          navigate={uri}
+          className="button--uri-indicator"
+          onMouseEnter={this.showTooltip}
+          onMouseLeave={this.hideTooltip}
+        />
         {showPreview && <PreviewLink uri={uri} />}
+        {renderChannelTooltip && (
+          <ChannelTooltip
+            uri={uri}
+            title={title}
+            claimId={claimId}
+            channelName={claimName}
+            currentTheme={currentTheme}
+            thumbnail={thumbnail}
+            description={description}
+            active={this.state.isTooltipActive}
+            parent={`#${this.parentId}`}
+            group={'channel-tooltip'}
+          />
+        )}
       </React.Fragment>
     );
   }
diff --git a/src/ui/component/externalLink/view.jsx b/src/ui/component/externalLink/view.jsx
index b6a5e870a..fc8701c75 100644
--- a/src/ui/component/externalLink/view.jsx
+++ b/src/ui/component/externalLink/view.jsx
@@ -2,10 +2,9 @@
 import * as MODALS from 'constants/modal_types';
 import * as ICONS from 'constants/icons';
 import * as React from 'react';
-import { isURIValid, parseURI } from 'lbry-redux';
+import { isURIValid } from 'lbry-redux';
 import Button from 'component/button';
 import ClaimLink from 'component/claimLink';
-import ChannelLink from 'component/channelLink';
 
 type Props = {
   href: string,
@@ -43,25 +42,11 @@ class ExternalLink extends React.PureComponent<Props> {
     }
     // Return local link if protocol is lbry uri
     if (protocol && protocol[0] === 'lbry:' && isURIValid(href)) {
-      try {
-        const uri = parseURI(href);
-
-        if (uri.isChannel && !uri.path) {
-          element = (
-            <ChannelLink uri={href} link>
-              {children}
-            </ChannelLink>
-          );
-        } else if (uri) {
-          element = (
-            <ClaimLink uri={href} autoEmbed={this.props['data-preview']}>
-              {children}
-            </ClaimLink>
-          );
-        }
-      } catch (err) {
-        // Silent error: console.error(err);
-      }
+      element = (
+        <ClaimLink uri={href} autoEmbed={this.props['data-preview']}>
+          {children}
+        </ClaimLink>
+      );
     }
 
     return element;
diff --git a/src/ui/component/uriIndicator/view.jsx b/src/ui/component/uriIndicator/view.jsx
index b54fc9de3..c50e2de6f 100644
--- a/src/ui/component/uriIndicator/view.jsx
+++ b/src/ui/component/uriIndicator/view.jsx
@@ -1,6 +1,6 @@
 // @flow
 import React from 'react';
-import ChannelLink from 'component/channelLink';
+import ClaimLink from 'component/claimLink';
 import { buildURI } from 'lbry-redux';
 
 type Props = {
@@ -44,18 +44,18 @@ class UriIndicator extends React.PureComponent<Props> {
     }
 
     const { name, claim_id: claimId } = claim.signing_channel;
-    let channelLink;
+    let claimLink;
     if (claim.is_channel_signature_valid) {
-      channelLink = link ? buildURI({ channelName: name, claimId }) : false;
+      claimLink = link ? buildURI({ channelName: name, claimId }) : false;
     }
 
     const inner = <span className="channel-name">{name}</span>;
 
-    if (!channelLink) {
+    if (!claimLink) {
       return inner;
     }
 
-    return <ChannelLink uri={channelLink}>{inner}</ChannelLink>;
+    return <ClaimLink uri={claimLink}>{inner}</ClaimLink>;
   }
 }
 
-- 
2.45.2


From 20ef65540d23e59a5dd39c5636ce29dc24accbff Mon Sep 17 00:00:00 2001
From: btzr-io <btzr.io@gmail.com>
Date: Wed, 12 Jun 2019 22:33:47 -0600
Subject: [PATCH 18/25] remove legacy methods from UriIndicator component

---
 src/ui/component/uriIndicator/view.jsx | 24 +++++++++++-------------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/src/ui/component/uriIndicator/view.jsx b/src/ui/component/uriIndicator/view.jsx
index c50e2de6f..0a13cb518 100644
--- a/src/ui/component/uriIndicator/view.jsx
+++ b/src/ui/component/uriIndicator/view.jsx
@@ -16,21 +16,19 @@ type Props = {
 };
 
 class UriIndicator extends React.PureComponent<Props> {
-  componentWillMount() {
-    this.resolve(this.props);
-  }
-
-  componentWillReceiveProps(nextProps: Props) {
-    this.resolve(nextProps);
-  }
-
-  resolve = (props: Props) => {
-    const { isResolvingUri, resolveUri, claim, uri } = props;
-
-    if (!isResolvingUri && claim === undefined && uri) {
+  componentDidMount() {
+    const { isResolvingUri, resolveUri, uri, claim } = this.props;
+    if (!isResolvingUri && !claim && uri) {
       resolveUri(uri);
     }
-  };
+  }
+
+  componentDidUpdate(prevProps: Props) {
+    const { isResolvingUri, resolveUri, claim, uri } = this.props;
+    if (!isResolvingUri && uri && !claim) {
+      resolveUri(uri);
+    }
+  }
 
   render() {
     const { link, isResolvingUri, claim } = this.props;
-- 
2.45.2


From 19c8e55d081658b59485a91823a0be90c3980467 Mon Sep 17 00:00:00 2001
From: btzr-io <btzr.io@gmail.com>
Date: Thu, 13 Jun 2019 01:18:30 -0600
Subject: [PATCH 19/25] simplify auto-embed syntax

---
 .../common/markdown-preview-internal.jsx      |  4 +-
 src/ui/component/externalLink/view.jsx        |  7 ++--
 src/ui/util/remark-lbry.js                    | 38 ++++++++++++-------
 3 files changed, 31 insertions(+), 18 deletions(-)

diff --git a/src/ui/component/common/markdown-preview-internal.jsx b/src/ui/component/common/markdown-preview-internal.jsx
index abee23ae0..2f52d1e41 100644
--- a/src/ui/component/common/markdown-preview-internal.jsx
+++ b/src/ui/component/common/markdown-preview-internal.jsx
@@ -43,7 +43,7 @@ const schema = { ...defaultSchema };
 
 // Extend sanitation schema to support lbry protocol
 schema.protocols.href.push('lbry');
-schema.attributes.a.push('data-preview');
+schema.attributes.a.push('embed');
 
 const MarkdownPreview = (props: MarkdownProps) => {
   const { content, strip, promptLinks } = props;
@@ -61,7 +61,7 @@ const MarkdownPreview = (props: MarkdownProps) => {
   const remarkAttrOpts = {
     scope: 'extended',
     elements: ['link'],
-    extend: { link: ['data-preview'] },
+    extend: { link: ['embed'] },
     defaultValue: true,
   };
 
diff --git a/src/ui/component/externalLink/view.jsx b/src/ui/component/externalLink/view.jsx
index fc8701c75..23d34f90d 100644
--- a/src/ui/component/externalLink/view.jsx
+++ b/src/ui/component/externalLink/view.jsx
@@ -9,19 +9,20 @@ import ClaimLink from 'component/claimLink';
 type Props = {
   href: string,
   title?: string,
+  embed?: boolean,
   children: React.Node,
   openModal: (id: string, { uri: string }) => void,
-  'data-preview'?: boolean,
 };
 
 class ExternalLink extends React.PureComponent<Props> {
   static defaultProps = {
     href: null,
     title: null,
+    embed: false,
   };
 
   createLink() {
-    const { href, title, children, openModal } = this.props;
+    const { href, title, embed, children, openModal } = this.props;
     // Regex for url protocol
     const protocolRegex = new RegExp('^(https?|lbry|mailto)+:', 'i');
     const protocol = href ? protocolRegex.exec(href) : null;
@@ -43,7 +44,7 @@ class ExternalLink extends React.PureComponent<Props> {
     // Return local link if protocol is lbry uri
     if (protocol && protocol[0] === 'lbry:' && isURIValid(href)) {
       element = (
-        <ClaimLink uri={href} autoEmbed={this.props['data-preview']}>
+        <ClaimLink uri={href} autoEmbed={embed}>
           {children}
         </ClaimLink>
       );
diff --git a/src/ui/util/remark-lbry.js b/src/ui/util/remark-lbry.js
index 2dc2de596..1cdf4b965 100644
--- a/src/ui/util/remark-lbry.js
+++ b/src/ui/util/remark-lbry.js
@@ -6,12 +6,12 @@ const locateURI = (value, fromIndex) => value.indexOf(protocol, fromIndex);
 const locateMention = (value, fromIndex) => value.indexOf('@', fromIndex);
 
 // Generate a valid markdown link
-const createURI = (text, uri, autoEmbed = false) => ({
+const createURI = (text, uri, embed = false) => ({
   type: 'link',
   url: (uri.startsWith(protocol) ? '' : protocol) + uri,
   data: {
     // Custom attribute
-    hProperties: { 'data-preview': autoEmbed },
+    hProperties: { embed },
   },
   children: [{ type: 'text', value: text }],
 });
@@ -21,12 +21,17 @@ const validateURI = (match, eat) => {
     try {
       const text = match[0];
       const uri = parseURI(text);
-      // Create channel link
-      if (uri.isChannel && !uri.path) {
-        return eat(text)(createURI(uri.claimName, text, false));
+      const isValid = uri && uri.claimName;
+      const isChannel = uri.isChannel && !uri.path;
+
+      if (isValid) {
+        // Create channel link
+        if (isChannel) {
+          return eat(text)(createURI(uri.claimName, text, false));
+        }
+        // Create claim link
+        return eat(text)(createURI(text, text, true));
       }
-      // Create uri link
-      return eat(text)(createURI(text, text, true));
     } catch (err) {
       // Silent errors: console.error(err)
     }
@@ -60,13 +65,20 @@ tokenizeMention.notInBlock = true;
 const visitor = (node, index, parent) => {
   if (node.type === 'link' && parent && parent.type === 'paragraph') {
     try {
-      const url = parseURI(node.url);
-      // Handle lbry link
-      if (!url.isChannel || (url.isChannel && url.path)) {
-        // Auto-embed lbry url
-        if (!node.data) {
+      const uri = parseURI(node.url);
+      const isValid = uri && uri.claimName;
+      const isChannel = uri.isChannel && !uri.path;
+      if (isValid && !isChannel) {
+        if (!node.data || !node.data.hProperties) {
+          // Create new node data
           node.data = {
-            hProperties: { 'data-preview': true },
+            hProperties: { embed: true },
+          };
+        } else if (node.data.hProperties) {
+          // Don't overwrite current attributes
+          node.data.hProperties = {
+            embed: true,
+            ...node.data.hProperties,
           };
         }
       }
-- 
2.45.2


From f10530bd5dab8e6e74cb478eebe467e47ff413c6 Mon Sep 17 00:00:00 2001
From: btzr-io <btzr.io@gmail.com>
Date: Thu, 20 Jun 2019 14:59:01 -0600
Subject: [PATCH 20/25] refactor tooltip

---
 package.json                                  |   3 +-
 .../{common => }/channelThumbnail/gerbil.png  | Bin
 src/ui/component/channelThumbnail/index.js    |  12 ++
 .../index.jsx => channelThumbnail/view.jsx}   |  11 +-
 src/ui/component/channelTooltip/index.js      |   2 +
 src/ui/component/channelTooltip/position.js   |  41 ++++++
 src/ui/component/channelTooltip/view.jsx      | 130 ++++++++++++++++++
 src/ui/component/claimLink/view.jsx           |  85 +++++-------
 src/ui/component/common/channel-tooltip.jsx   |  75 ----------
 src/ui/component/uriIndicator/view.jsx        |  52 ++++---
 src/ui/page/channel/index.js                  |   4 +-
 src/ui/page/channel/view.jsx                  |  68 ++++-----
 src/ui/scss/component/_tooltip.scss           |  59 +++++++-
 yarn.lock                                     |  41 ++++--
 14 files changed, 378 insertions(+), 205 deletions(-)
 rename src/ui/component/{common => }/channelThumbnail/gerbil.png (100%)
 create mode 100644 src/ui/component/channelThumbnail/index.js
 rename src/ui/component/{common/channelThumbnail/index.jsx => channelThumbnail/view.jsx} (75%)
 create mode 100644 src/ui/component/channelTooltip/index.js
 create mode 100644 src/ui/component/channelTooltip/position.js
 create mode 100644 src/ui/component/channelTooltip/view.jsx
 delete mode 100644 src/ui/component/common/channel-tooltip.jsx

diff --git a/package.json b/package.json
index 426087f5e..3ec128128 100644
--- a/package.json
+++ b/package.json
@@ -63,6 +63,7 @@
     "@lbry/components": "^2.7.0",
     "@reach/rect": "^0.2.1",
     "@reach/tabs": "^0.1.5",
+    "@reach/tooltip": "^0.2.1",
     "@types/three": "^0.93.1",
     "async-exit-hook": "^2.0.1",
     "babel-eslint": "^10.0.1",
@@ -148,7 +149,6 @@
     "react-hot-loader": "^4.7.2",
     "react-modal": "^3.1.7",
     "react-paginate": "^5.2.1",
-    "react-portal-tooltip": "^2.4.7",
     "react-pose": "^4.0.5",
     "react-redux": "^6.0.1",
     "react-router": "^5.0.0",
@@ -175,7 +175,6 @@
     "three": "^0.93.0",
     "three-full": "^17.1.0",
     "tree-kill": "^1.1.0",
-    "uniqid": "^5.0.3",
     "unist-util-visit": "^1.4.1",
     "video.js": "^7.2.2",
     "villain": "btzr-io/Villain",
diff --git a/src/ui/component/common/channelThumbnail/gerbil.png b/src/ui/component/channelThumbnail/gerbil.png
similarity index 100%
rename from src/ui/component/common/channelThumbnail/gerbil.png
rename to src/ui/component/channelThumbnail/gerbil.png
diff --git a/src/ui/component/channelThumbnail/index.js b/src/ui/component/channelThumbnail/index.js
new file mode 100644
index 000000000..01b1d3c73
--- /dev/null
+++ b/src/ui/component/channelThumbnail/index.js
@@ -0,0 +1,12 @@
+import { connect } from 'react-redux';
+import { makeSelectThumbnailForUri } from 'lbry-redux';
+import ChannelThumbnail from './view';
+
+const select = (state, props) => ({
+  thumbnail: makeSelectThumbnailForUri(props.uri)(state),
+});
+
+export default connect(
+  select,
+  null
+)(ChannelThumbnail);
diff --git a/src/ui/component/common/channelThumbnail/index.jsx b/src/ui/component/channelThumbnail/view.jsx
similarity index 75%
rename from src/ui/component/common/channelThumbnail/index.jsx
rename to src/ui/component/channelThumbnail/view.jsx
index 8aa2db55f..df3c24142 100644
--- a/src/ui/component/common/channelThumbnail/index.jsx
+++ b/src/ui/component/channelThumbnail/view.jsx
@@ -5,22 +5,23 @@ import classnames from 'classnames';
 import Gerbil from './gerbil.png';
 
 type Props = {
-  uri: string,
   thumbnail: ?string,
+  uri: string,
+  className?: string,
 };
 
 function ChannelThumbnail(props: Props) {
-  const { thumbnail, uri } = props;
+  const { thumbnail, uri, className } = props;
 
   // Generate a random color class based on the first letter of the channel name
   const { channelName } = parseURI(uri);
   const initializer = channelName.charCodeAt(0) - 65; // will be between 0 and 57
-  const thumbnailClass = `channel-thumbnail__default--${initializer % 4}`;
+  const colorClassName = `channel-thumbnail__default--${initializer % 4}`;
 
   return (
     <div
-      className={classnames('channel-thumbnail', {
-        [thumbnailClass]: !thumbnail,
+      className={classnames('channel-thumbnail', className, {
+        [colorClassName]: !thumbnail,
       })}
     >
       {!thumbnail && <img className="channel-thumbnail__default" src={Gerbil} />}
diff --git a/src/ui/component/channelTooltip/index.js b/src/ui/component/channelTooltip/index.js
new file mode 100644
index 000000000..69dd6079d
--- /dev/null
+++ b/src/ui/component/channelTooltip/index.js
@@ -0,0 +1,2 @@
+import ChannelTooltip from './view';
+export default ChannelTooltip;
diff --git a/src/ui/component/channelTooltip/position.js b/src/ui/component/channelTooltip/position.js
new file mode 100644
index 000000000..f3903d528
--- /dev/null
+++ b/src/ui/component/channelTooltip/position.js
@@ -0,0 +1,41 @@
+// Defualt function used by reach-ui tooltip componment,
+// slightly modify to register current direction:
+// https://github.com/reach/reach-ui/blob/f0c8c5c467be46c202148ee69b1ba789b57d5e60/packages/tooltip/src/index.js#L478
+
+// feels awkward when it's perfectly aligned w/ the trigger
+const OFFSET = 8;
+
+const positionDefault = (triggerRect, tooltipRect, currentDirection, setDirection) => {
+  const styles = {
+    left: `${triggerRect.left + window.pageXOffset}px`,
+    top: `${triggerRect.top + triggerRect.height + window.pageYOffset}px`,
+  };
+
+  const collisions = {
+    top: triggerRect.top - tooltipRect.height < 0,
+    right: window.innerWidth < triggerRect.left + tooltipRect.width,
+    bottom: window.innerHeight < triggerRect.bottom + tooltipRect.height + OFFSET,
+    left: triggerRect.left - tooltipRect.width < 0,
+  };
+
+  const directionRight = collisions.right && !collisions.left;
+  const directionUp = collisions.bottom && !collisions.top;
+
+  const direction = directionUp ? 'top' : 'bottom';
+
+  if (direction !== currentDirection) {
+    setDirection(direction);
+  }
+
+  return {
+    ...styles,
+    left: directionRight
+      ? `${triggerRect.right - tooltipRect.width + window.pageXOffset}px`
+      : `${triggerRect.left + window.pageXOffset}px`,
+    top: directionUp
+      ? `${triggerRect.top - OFFSET - tooltipRect.height + window.pageYOffset}px`
+      : `${triggerRect.top + OFFSET + triggerRect.height + window.pageYOffset}px`,
+  };
+};
+
+export default positionDefault;
diff --git a/src/ui/component/channelTooltip/view.jsx b/src/ui/component/channelTooltip/view.jsx
new file mode 100644
index 000000000..90b967052
--- /dev/null
+++ b/src/ui/component/channelTooltip/view.jsx
@@ -0,0 +1,130 @@
+// @flow
+import * as React from 'react';
+import classnames from 'classnames';
+import ChannelThumbnail from 'component/channelThumbnail';
+import TruncatedText from 'component/common/truncated-text';
+
+// Tooltip components
+import Portal from '@reach/portal';
+import getPostion from './position.js';
+import { useTooltip, TooltipPopup } from '@reach/tooltip';
+
+// Tooltip base styles
+import '@reach/tooltip/styles.css';
+
+const ARROW_SIZE = 10;
+
+type ChannelTooltipProps = {
+  uri: string,
+  title: ?string,
+  claimId: string,
+  children: any,
+  ariaLabel: ?string,
+  thumbnail: ?string,
+  channelName: string,
+  description: ?string,
+};
+
+type TriangleTooltipProps = {
+  label: any,
+  children: any,
+
+  ariaLabel: ?string,
+};
+
+function TriangleTooltip(props: TriangleTooltipProps) {
+  const { label, children, ariaLabel } = props;
+
+  // get the props from useTooltip
+  const [trigger, tooltip] = useTooltip();
+
+  // Tooltip direction
+  const [direction, setDirection] = React.useState('bottom');
+
+  // destructure off what we need to position the triangle
+  const { isVisible, triggerRect } = tooltip;
+
+  let arrowTop;
+
+  // Top
+  if (direction === 'top') {
+    arrowTop = triggerRect && triggerRect.bottom - (triggerRect.height + ARROW_SIZE) + window.scrollY;
+  }
+
+  // Bottom
+  if (direction === 'bottom') {
+    arrowTop = triggerRect && triggerRect.bottom + window.scrollY;
+  }
+
+  return (
+    <React.Fragment>
+      {React.cloneElement(children, trigger)}
+      {isVisible && (
+        // The Triangle. We position it relative to the trigger, not the popup
+        // so that collisions don't have a triangle pointing off to nowhere.
+        // Using a Portal may seem a little extreme, but we can keep the
+        // positioning logic simpler here instead of needing to consider
+        // the popup's position relative to the trigger and collisions
+        <Portal>
+          <span
+            className={classnames('channel-tooltip__arrow', `channel-tooltip__arrow--${direction}`)}
+            style={{
+              position: 'absolute',
+              top: arrowTop,
+              left: triggerRect && triggerRect.left - ARROW_SIZE + triggerRect.width / 2,
+            }}
+          />
+        </Portal>
+      )}
+      <TooltipPopup
+        {...tooltip}
+        label={label}
+        ariaLabel={ariaLabel}
+        className={'channel-tooltip'}
+        position={(triggerRect, tooltipRect) => getPostion(triggerRect, tooltipRect, direction, setDirection)}
+      />
+    </React.Fragment>
+  );
+}
+
+const ChannelTooltipLabel = (props: ChannelTooltipProps) => {
+  const { uri, title, claimId, thumbnail, description, channelName } = props;
+  const channelUrl = `${channelName}#${claimId}`;
+  const formatedName = channelName.replace('@', '');
+
+  return (
+    <div className={'channel-tooltip__content'}>
+      <div className={'channel-tooltip__profile'}>
+        <ChannelThumbnail uri={uri} thumbnail={thumbnail} />
+        <div className={'channel-tooltip__info'}>
+          <h2 className={'channel-tooltip__title'}>
+            <TruncatedText lines={1}>{title || formatedName}</TruncatedText>
+          </h2>
+          <h3 className={'channel-tooltip__url'}>
+            <TruncatedText lines={1}>{channelUrl}</TruncatedText>
+          </h3>
+        </div>
+      </div>
+      {description && (
+        <div className={'channel-tooltip__description'}>
+          <div>
+            <TruncatedText lines={2}>{description}</TruncatedText>
+          </div>
+        </div>
+      )}
+      <div className={'channel-tooltip__stats'} />
+    </div>
+  );
+};
+
+const ChannelTooltip = (props: ChannelTooltipProps) => {
+  const { children, ariaLabel } = props;
+  const label = <ChannelTooltipLabel {...props} />;
+  return (
+    <TriangleTooltip label={label} ariaLabel={ariaLabel}>
+      {children}
+    </TriangleTooltip>
+  );
+};
+
+export default React.memo<ChannelTooltipProps>(ChannelTooltip);
diff --git a/src/ui/component/claimLink/view.jsx b/src/ui/component/claimLink/view.jsx
index 4d61e576b..f69361cc2 100644
--- a/src/ui/component/claimLink/view.jsx
+++ b/src/ui/component/claimLink/view.jsx
@@ -1,10 +1,9 @@
 // @flow
-import uniqid from 'uniqid';
 import * as React from 'react';
-import { parseURI } from 'lbry-redux';
 import Button from 'component/button';
 import PreviewLink from 'component/previewLink';
-import ChannelTooltip from 'component/common/channel-tooltip';
+import ChannelTooltip from 'component/channelTooltip';
+import { parseURI } from 'lbry-redux';
 
 type Props = {
   uri: string,
@@ -23,13 +22,7 @@ type Props = {
   }>,
 };
 
-type State = {
-  isTooltipActive: boolean,
-};
-
-class ClaimLink extends React.Component<Props, State> {
-  parentId: string;
-
+class ClaimLink extends React.Component<Props> {
   static defaultProps = {
     href: null,
     title: null,
@@ -39,24 +32,6 @@ class ClaimLink extends React.Component<Props, State> {
     isResolvingUri: false,
   };
 
-  constructor(props: Props) {
-    super(props);
-    this.state = { isTooltipActive: false };
-
-    // The tooltip component don't work very well with refs,
-    // so we need to use an unique id for each link:
-    // (this: any).buttonRef = React.createRef();
-    (this: any).parentId = uniqid.time('claim-link-');
-  }
-
-  showTooltip = () => {
-    this.setState({ isTooltipActive: true });
-  };
-
-  hideTooltip = () => {
-    this.setState({ isTooltipActive: false });
-  };
-
   isClaimBlackListed() {
     const { claim, blackListedOutpoints } = this.props;
 
@@ -97,38 +72,40 @@ class ClaimLink extends React.Component<Props, State> {
       return <span>{children}</span>;
     }
 
-    const { isChannel, path } = parseURI(uri);
     const { claim_id: claimId, name: claimName } = claim;
+    const { isChannel, path } = parseURI(uri);
+    const isChannelClaim = isChannel && !path;
     const showPreview = autoEmbed === true && !isUnresolved;
-    const renderChannelTooltip = isChannel && !path;
+
+    const link = (
+      <Button
+        label={children}
+        title={!isChannelClaim ? title || claimName : undefined}
+        button={!isChannel ? 'link' : undefined}
+        navigate={uri}
+        className="button--uri-indicator"
+      />
+    );
+
+    const wrappedLink = (
+      <ChannelTooltip
+        uri={uri}
+        title={title}
+        claimId={claimId}
+        channelName={claimName}
+        ariaLabel={title || claimName}
+        currentTheme={currentTheme}
+        thumbnail={thumbnail}
+        description={description}
+      >
+        <span>{link}</span>
+      </ChannelTooltip>
+    );
 
     return (
       <React.Fragment>
-        <Button
-          id={this.parentId}
-          label={children}
-          title={title || claimName}
-          button={'link'}
-          navigate={uri}
-          className="button--uri-indicator"
-          onMouseEnter={this.showTooltip}
-          onMouseLeave={this.hideTooltip}
-        />
+        {isChannelClaim ? wrappedLink : link}
         {showPreview && <PreviewLink uri={uri} />}
-        {renderChannelTooltip && (
-          <ChannelTooltip
-            uri={uri}
-            title={title}
-            claimId={claimId}
-            channelName={claimName}
-            currentTheme={currentTheme}
-            thumbnail={thumbnail}
-            description={description}
-            active={this.state.isTooltipActive}
-            parent={`#${this.parentId}`}
-            group={'channel-tooltip'}
-          />
-        )}
       </React.Fragment>
     );
   }
diff --git a/src/ui/component/common/channel-tooltip.jsx b/src/ui/component/common/channel-tooltip.jsx
deleted file mode 100644
index dcf95e3b3..000000000
--- a/src/ui/component/common/channel-tooltip.jsx
+++ /dev/null
@@ -1,75 +0,0 @@
-// @flow
-import * as React from 'react';
-import ToolTip from 'react-portal-tooltip';
-import TruncatedText from 'component/common/truncated-text';
-import ChannelThumbnail from 'component/common/channelThumbnail';
-
-type TooltipProps = {
-  uri: string,
-  title: ?string,
-  group: ?string,
-  active: ?boolean,
-  parent: ?HTMLElement | ?string,
-  claimId: string,
-  thumbnail: ?string,
-  channelName: string,
-  description: ?string,
-  currentTheme: ?string,
-};
-
-const ChannelTooltip = (props: TooltipProps) => {
-  const { uri, group, title, active, parent, claimId, thumbnail, description, channelName, currentTheme } = props;
-
-  let bgColor = 'var(--lbry-white)';
-
-  if (currentTheme === 'dark') {
-    // Background color of the tooltip component,
-    // taken from the header component:
-    // mix($lbry-black, $lbry-gray-3, 90%);
-    bgColor = '#32373b';
-  }
-
-  const style = {
-    style: { background: bgColor, padding: 0 },
-    arrowStyle: { color: bgColor, borderColor: false },
-  };
-
-  const channelUrl = `${channelName}#${claimId}`;
-  const formatedName = channelName.replace('@', '');
-
-  return (
-    <ToolTip
-      align="left"
-      arrow="left"
-      active={parent && active}
-      group={group}
-      style={style}
-      parent={parent}
-      position="bottom"
-    >
-      <div className={'channel-tooltip'}>
-        <div className={'channel-tooltip__profile'}>
-          <ChannelThumbnail uri={uri} thumbnail={thumbnail} />
-          <div className={'channel-tooltip__info'}>
-            <h2 className={'channel-tooltip__title'}>
-              <TruncatedText lines={1}>{title || formatedName}</TruncatedText>
-            </h2>
-            <h3 className={'channel-tooltip__url'}>
-              <TruncatedText lines={1}>{channelUrl}</TruncatedText>
-            </h3>
-          </div>
-        </div>
-        {description && (
-          <div className={'channel-tooltip__description'}>
-            <p>
-              <TruncatedText lines={2}>{description}</TruncatedText>
-            </p>
-          </div>
-        )}
-        <div className={'channel-tooltip__stats'} />
-      </div>
-    </ToolTip>
-  );
-};
-
-export default React.memo<TooltipProps>(ChannelTooltip);
diff --git a/src/ui/component/uriIndicator/view.jsx b/src/ui/component/uriIndicator/view.jsx
index 0a13cb518..b74ce7b8e 100644
--- a/src/ui/component/uriIndicator/view.jsx
+++ b/src/ui/component/uriIndicator/view.jsx
@@ -17,18 +17,20 @@ type Props = {
 
 class UriIndicator extends React.PureComponent<Props> {
   componentDidMount() {
-    const { isResolvingUri, resolveUri, uri, claim } = this.props;
-    if (!isResolvingUri && !claim && uri) {
-      resolveUri(uri);
-    }
+    this.resolve(this.props);
   }
 
-  componentDidUpdate(prevProps: Props) {
-    const { isResolvingUri, resolveUri, claim, uri } = this.props;
-    if (!isResolvingUri && uri && !claim) {
+  componentDidUpdate() {
+    this.resolve(this.props);
+  }
+
+  resolve = (props: Props) => {
+    const { isResolvingUri, resolveUri, claim, uri } = props;
+
+    if (!isResolvingUri && claim === undefined && uri) {
       resolveUri(uri);
     }
-  }
+  };
 
   render() {
     const { link, isResolvingUri, claim } = this.props;
@@ -37,23 +39,31 @@ class UriIndicator extends React.PureComponent<Props> {
       return <span className="empty">{isResolvingUri ? 'Validating...' : 'Unused'}</span>;
     }
 
-    if (!claim.signing_channel) {
+    const isChannelClaim = claim.value_type === 'channel';
+
+    if (!claim.signing_channel && !isChannelClaim) {
       return <span className="channel-name">Anonymous</span>;
     }
 
-    const { name, claim_id: claimId } = claim.signing_channel;
-    let claimLink;
-    if (claim.is_channel_signature_valid) {
-      claimLink = link ? buildURI({ channelName: name, claimId }) : false;
+    const channelClaim = isChannelClaim ? claim : claim.signing_channel;
+
+    if (channelClaim) {
+      const { name, claim_id: claimId } = channelClaim;
+      let channelLink;
+      if (claim.is_channel_signature_valid) {
+        channelLink = link ? buildURI({ channelName: name, claimId }) : false;
+      }
+
+      const inner = <span className="channel-name">{name}</span>;
+
+      if (!channelLink) {
+        return inner;
+      }
+
+      return <ClaimLink uri={channelLink}>{inner}</ClaimLink>;
+    } else {
+      return null;
     }
-
-    const inner = <span className="channel-name">{name}</span>;
-
-    if (!claimLink) {
-      return inner;
-    }
-
-    return <ClaimLink uri={claimLink}>{inner}</ClaimLink>;
   }
 }
 
diff --git a/src/ui/page/channel/index.js b/src/ui/page/channel/index.js
index 53c18e514..a4715823e 100644
--- a/src/ui/page/channel/index.js
+++ b/src/ui/page/channel/index.js
@@ -9,11 +9,11 @@ import {
 import ChannelPage from './view';
 
 const select = (state, props) => ({
-  page: selectCurrentChannelPage(state),
-  cover: makeSelectCoverForUri(props.uri)(state),
   title: makeSelectTitleForUri(props.uri)(state),
   thumbnail: makeSelectThumbnailForUri(props.uri)(state),
+  cover: makeSelectCoverForUri(props.uri)(state),
   channelIsMine: makeSelectClaimIsMine(props.uri)(state),
+  page: selectCurrentChannelPage(state),
 });
 
 export default connect(
diff --git a/src/ui/page/channel/view.jsx b/src/ui/page/channel/view.jsx
index 028abf3ce..a70dac2c8 100644
--- a/src/ui/page/channel/view.jsx
+++ b/src/ui/page/channel/view.jsx
@@ -9,7 +9,7 @@ import { withRouter } from 'react-router';
 import { formatLbryUriForWeb } from 'util/uri';
 import ChannelContent from 'component/channelContent';
 import ChannelAbout from 'component/channelAbout';
-import ChannelThumbnail from 'component/common/channelThumbnail';
+import ChannelThumbnail from 'component/channelThumbnail';
 
 const PAGE_VIEW_QUERY = `view`;
 const ABOUT_PAGE = `about`;
@@ -26,7 +26,7 @@ type Props = {
 };
 
 function ChannelPage(props: Props) {
-  const { uri, title, cover, thumbnail, history, location, page } = props;
+  const { uri, title, cover, history, location, page } = props;
   const { channelName, claimName, claimId } = parseURI(uri);
   const { search } = location;
   const urlParams = new URLSearchParams(search);
@@ -49,42 +49,44 @@ function ChannelPage(props: Props) {
   };
 
   return (
-    <Page notContained className="main--no-padding-top">
-      <header className="channel-cover main__item--extend-outside">
-        {cover && <img className="channel-cover__custom" src={cover} />}
+    <Page>
+      <div className="card">
+        <header className="channel-cover">
+          {cover && <img className="channel-cover__custom" src={cover} />}
 
-        <div className="channel__primary-info">
-          <ChannelThumbnail uri={uri} thumbnail={thumbnail} />
+          <div className="channel__primary-info">
+            <ChannelThumbnail className="channel__thumbnail--channel-page" uri={uri} />
 
-          <div>
-            <h1 className="channel__title">{title || channelName}</h1>
-            <h2 className="channel__url">
-              {claimName}
-              {claimId && `#${claimId}`}
-            </h2>
+            <div>
+              <h1 className="channel__title">{title || channelName}</h1>
+              <h2 className="channel__url">
+                {claimName}
+                {claimId && `#${claimId}`}
+              </h2>
+            </div>
           </div>
-        </div>
-      </header>
+        </header>
 
-      <Tabs onChange={onTabChange} index={tabIndex}>
-        <TabList className="main__item--extend-outside tabs__list--channel-page">
-          <Tab>{__('Content')}</Tab>
-          <Tab>{__('About')}</Tab>
-          <div className="card__actions">
-            <ShareButton uri={uri} />
-            <SubscribeButton uri={uri} />
-          </div>
-        </TabList>
+        <Tabs onChange={onTabChange} index={tabIndex}>
+          <TabList className="tabs__list--channel-page">
+            <Tab>{__('Content')}</Tab>
+            <Tab>{__('About')}</Tab>
+            <div className="card__actions">
+              <ShareButton uri={uri} />
+              <SubscribeButton uri={uri} />
+            </div>
+          </TabList>
 
-        <TabPanels>
-          <TabPanel>
-            <ChannelContent uri={uri} />
-          </TabPanel>
-          <TabPanel>
-            <ChannelAbout uri={uri} />
-          </TabPanel>
-        </TabPanels>
-      </Tabs>
+          <TabPanels className="channel__data">
+            <TabPanel>
+              <ChannelContent uri={uri} />
+            </TabPanel>
+            <TabPanel>
+              <ChannelAbout uri={uri} />
+            </TabPanel>
+          </TabPanels>
+        </Tabs>
+      </div>
     </Page>
   );
 }
diff --git a/src/ui/scss/component/_tooltip.scss b/src/ui/scss/component/_tooltip.scss
index 016afd38d..287bc7885 100644
--- a/src/ui/scss/component/_tooltip.scss
+++ b/src/ui/scss/component/_tooltip.scss
@@ -154,7 +154,28 @@
 // Channel-tooltip
 
 .channel-tooltip {
+  color: $lbry-black;
+  background-color: $lbry-white;
   width: 20rem;
+  border: none;
+  border-radius: var(--card-radius);
+  z-index: 2;
+
+  html[data-mode='dark'] & {
+    color: mix($lbry-white, $lbry-gray-3, 50%);
+    background-color: mix($lbry-black, $lbry-gray-3, 90%);
+  }
+
+  box-shadow: 0px 2px 10px -2px black;
+}
+
+.channel-tooltip__content {
+  width: 100%;
+  margin: 0;
+  display: block;
+  word-break: break-all;
+  word-wrap: break-word;
+  white-space: pre-wrap;
 
   .channel-thumbnail {
     left: 0;
@@ -169,6 +190,39 @@
   }
 }
 
+.channel-tooltip__arrow {
+  width: 0;
+  height: 0;
+  border-left: 10px solid transparent;
+  border-right: 10px solid transparent;
+
+  html[data-mode='dark'] & {
+    z-index: 3;
+  }
+}
+
+.channel-tooltip__arrow--top {
+  border-top: 10px solid $lbry-gray-5;
+  border-bottom: 0;
+
+  html[data-mode='dark'] & {
+    z-index: 3;
+    border-top: 10px solid mix($lbry-black, $lbry-gray-3, 90%);
+    border-bottom: 0;
+  }
+}
+
+.channel-tooltip__arrow--bottom {
+  border-top: 0;
+  border-bottom: 10px solid $lbry-gray-5;
+
+  html[data-mode='dark'] & {
+    z-index: 3;
+    border-top: 0;
+    border-bottom: 10px solid mix($lbry-black, $lbry-gray-3, 90%);
+  }
+}
+
 .channel-tooltip__profile {
   display: flex;
   align-items: center;
@@ -179,6 +233,7 @@
   padding: 1rem;
   visibility: visible;
   border-top: 1px solid rgba($lbry-gray-4, 0.4);
+  width: 100%;
 
   html[data-mode='dark'] & {
     border-top: 1px solid rgba($lbry-black, 0.8);
@@ -186,16 +241,16 @@
 }
 
 .channel-tooltip__info {
-  align-items: center;
-  visibility: visible;
 }
 
 .channel-tooltip__title {
   font-weight: bold;
   font-size: 1.4rem;
   line-height: 1.5em;
+  visibility: visible;
 }
 
 .channel-tooltip__url {
   font-size: 1rem;
+  visibility: visible;
 }
diff --git a/yarn.lock b/yarn.lock
index c55841d8c..8360b73e6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -893,7 +893,7 @@
   resolved "https://registry.yarnpkg.com/@posthtml/esm/-/esm-1.0.0.tgz#09bcb28a02438dcee22ad1970ca1d85a000ae0cf"
   integrity sha512-dEVG+ITnvqKGa4v040tP+n8LOKOqr94qjLva7bE5pnfm2KHJwsKz69J4KMxgWLznbpBJzy8vQfCayEk3vLZnZQ==
 
-"@reach/auto-id@^0.2.0":
+"@reach/auto-id@0.2.0", "@reach/auto-id@^0.2.0":
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/@reach/auto-id/-/auto-id-0.2.0.tgz#97f9e48fe736aa5c6f4f32cf73c1f19d005f8550"
   integrity sha512-lVK/svL2HuQdp7jgvlrLkFsUx50Az9chAhxpiPwBqcS83I2pVWvXp98FOcSCCJCV++l115QmzHhFd+ycw1zLBg==
@@ -908,6 +908,13 @@
   resolved "https://registry.yarnpkg.com/@reach/observe-rect/-/observe-rect-1.0.3.tgz#2ea3dcc369ab22bd9f050a92ea319321356a61e8"
   integrity sha1-LqPcw2mrIr2fBQqS6jGTITVqYeg=
 
+"@reach/portal@^0.2.1":
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/@reach/portal/-/portal-0.2.1.tgz#07720b999e0063a9e179c14dbdc60fd991cfc9fa"
+  integrity sha512-pUQ0EtCcYm4ormEjJmdk4uzZCxOpaRHB8FDKJXy6q6GqRqQwZ4lAT1f2Tvw0DAmULmyZTpe1/heXY27Tdnct+Q==
+  dependencies:
+    "@reach/component-component" "^0.1.3"
+
 "@reach/rect@^0.2.1":
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/@reach/rect/-/rect-0.2.1.tgz#7343020174c90e2290b844d17c03fd9c78e6b601"
@@ -925,11 +932,33 @@
     "@reach/utils" "^0.2.2"
     warning "^4.0.2"
 
+"@reach/tooltip@^0.2.1":
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/@reach/tooltip/-/tooltip-0.2.1.tgz#70a80d6defedee53cedf5480cd3d37dfb20020d0"
+  integrity sha512-3O7oXoymNkEAolHN9WbuspY7mA3zIOrTaibmYkKFtGT6FgyBrAQyOQn1ZhBuSza6RjSIkEtFRpbDEKK1UJEI6A==
+  dependencies:
+    "@reach/auto-id" "0.2.0"
+    "@reach/portal" "^0.2.1"
+    "@reach/rect" "^0.2.1"
+    "@reach/utils" "^0.2.3"
+    "@reach/visually-hidden" "^0.1.4"
+    prop-types "^15.7.2"
+
 "@reach/utils@^0.2.2":
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/@reach/utils/-/utils-0.2.2.tgz#c3a05ae9fd1f921988ae8a89b5a0d28d1a2b92df"
   integrity sha512-jYeIi46AA5jh2gfdXD/nInUYfeLp3girRafiajP7AVHF6B4hpYAzUSx/ZH4xmPyf5alut5rml2DHxrv+X+Xu+A==
 
+"@reach/utils@^0.2.3":
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/@reach/utils/-/utils-0.2.3.tgz#820f6a6af4301b4c5065cfc04bb89e6a3d1d723f"
+  integrity sha512-zM9rA8jDchr05giMhL95dPeYkK67cBQnIhCVrOKKqgWGsv+2GE/HZqeptvU4zqs0BvIqsThwov+YxVNVh5csTQ==
+
+"@reach/visually-hidden@^0.1.4":
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/@reach/visually-hidden/-/visually-hidden-0.1.4.tgz#0dc4ecedf523004337214187db70a46183bd945b"
+  integrity sha512-QHbzXjflSlCvDd6vJwdwx16mSB+vUCCQMiU/wK/CgVNPibtpEiIbisyxkpZc55DyDFNUIqP91rSUsNae+ogGDQ==
+
 "@samverschueren/stream-to-observable@^0.3.0":
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/@samverschueren/stream-to-observable/-/stream-to-observable-0.3.0.tgz#ecdf48d532c58ea477acfcab80348424f8d0662f"
@@ -9447,11 +9476,6 @@ react-paginate@^5.2.1:
   dependencies:
     prop-types "^15.6.1"
 
-react-portal-tooltip@^2.4.7:
-  version "2.4.7"
-  resolved "https://registry.yarnpkg.com/react-portal-tooltip/-/react-portal-tooltip-2.4.7.tgz#77fd4a75760afecd116736c480485aa22cbbb740"
-  integrity sha512-ZOuCKpvu8rr6aS6nNjckd78qEgWyHZnKidZ9Yqrd0HR5K9NYJ7csb4duc0kEXeG8DiCWsLPU70o1EVP+MxlINg==
-
 react-pose@^4.0.5:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/react-pose/-/react-pose-4.0.8.tgz#91bdfafde60e4096e7878a35dcc77715bed68f24"
@@ -11453,11 +11477,6 @@ uniq@^1.0.1:
   resolved "https://registry.yarnpkg.com/uniq/-/uniq-1.0.1.tgz#b31c5ae8254844a3a8281541ce2b04b865a734ff"
   integrity sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8=
 
-uniqid@^5.0.3:
-  version "5.0.3"
-  resolved "https://registry.yarnpkg.com/uniqid/-/uniqid-5.0.3.tgz#917968310edc868d50df6c44f783f32c7d80fac1"
-  integrity sha512-R2qx3X/LYWSdGRaluio4dYrPXAJACTqyUjuyXHoJLBUOIfmMcnYOyY2d6Y4clZcIz5lK6ZaI0Zzmm0cPfsIqzQ==
-
 uniqs@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/uniqs/-/uniqs-2.0.0.tgz#ffede4b36b25290696e6e165d4a59edb998e6b02"
-- 
2.45.2


From 173b9f6d8c6e958bac48c89461dd2faac4006322 Mon Sep 17 00:00:00 2001
From: Baltazar Gomez <btzr.io@gmail.com>
Date: Thu, 20 Jun 2019 15:32:12 -0600
Subject: [PATCH 21/25] fix yarn.lock

---
 yarn.lock | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/yarn.lock b/yarn.lock
index a5a514656..f6215b6ab 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -943,7 +943,7 @@
   dependencies:
     "@reach/component-component" "^0.1.3"
 
-"@reach/rect@0.2.1", "@reach/rect@^0.2.1"
+"@reach/rect@0.2.1", "@reach/rect@^0.2.1":
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/@reach/rect/-/rect-0.2.1.tgz#7343020174c90e2290b844d17c03fd9c78e6b601"
   integrity sha512-aZ9RsNHDMQ3zETonikqu9/85iXxj+LPqZ9Gr9UAncj3AufYmGeWG3XG6b37B+7ORH+mkhVpLU2ZlIWxmOe9Cqg==
-- 
2.45.2


From 8a320069885f7cf695b90c6bc53973cda7b9b3f0 Mon Sep 17 00:00:00 2001
From: Baltazar Gomez <btzr.io@gmail.com>
Date: Thu, 20 Jun 2019 15:39:40 -0600
Subject: [PATCH 22/25] fix typo

---
 yarn.lock | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/yarn.lock b/yarn.lock
index f6215b6ab..6e5b51ae5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -992,7 +992,7 @@
   resolved "https://registry.yarnpkg.com/@reach/window-size/-/window-size-0.1.4.tgz#3257b646548f61c2708a661a683620fbe0a706cb"
   integrity sha512-JZshEuGsLvi6fUIJ7Unx12yNeM5SmqWjber2MLr9tfwf1hpNv73EiPBOIJyV0DjW7GXzjcOEvwnqysm59s2s/A==
   dependencies:
-    "@reach/component-component" "^0.1.3
+    "@reach/component-component" "^0.1.3"
     
 "@samverschueren/stream-to-observable@^0.3.0":
   version "0.3.0"
-- 
2.45.2


From b7adc597e232f95dea200a6f49bf5d17c1af102c Mon Sep 17 00:00:00 2001
From: btzr-io <btzr.io@gmail.com>
Date: Thu, 20 Jun 2019 19:00:52 -0600
Subject: [PATCH 23/25] fix styles

---
 src/ui/component/claimLink/view.jsx          | 27 ++++++++++++++----
 src/ui/component/externalLink/view.jsx       |  2 +-
 src/ui/component/previewLink/view.jsx        | 29 ++++++++++----------
 src/ui/component/uriIndicator/view.jsx       |  8 ++++--
 src/ui/scss/component/_markdown-preview.scss | 12 +++++---
 5 files changed, 51 insertions(+), 27 deletions(-)

diff --git a/src/ui/component/claimLink/view.jsx b/src/ui/component/claimLink/view.jsx
index f69361cc2..889bf7add 100644
--- a/src/ui/component/claimLink/view.jsx
+++ b/src/ui/component/claimLink/view.jsx
@@ -7,9 +7,11 @@ import { parseURI } from 'lbry-redux';
 
 type Props = {
   uri: string,
+  link?: boolean,
   title: ?string,
   claim: StreamClaim,
   children: React.Node,
+  className: ?string,
   thumbnail: ?string,
   autoEmbed: ?boolean,
   description: ?string,
@@ -25,6 +27,7 @@ type Props = {
 class ClaimLink extends React.Component<Props> {
   static defaultProps = {
     href: null,
+    link: false,
     title: null,
     thumbnail: null,
     autoEmbed: false,
@@ -64,7 +67,19 @@ class ClaimLink extends React.Component<Props> {
   }
 
   render() {
-    const { uri, claim, title, description, thumbnail, currentTheme, autoEmbed, children, isResolvingUri } = this.props;
+    const {
+      uri,
+      link,
+      claim,
+      title,
+      className,
+      description,
+      thumbnail,
+      currentTheme,
+      autoEmbed,
+      children,
+      isResolvingUri,
+    } = this.props;
     const isUnresolved = (!isResolvingUri && !claim) || !claim;
     const isBlacklisted = this.isClaimBlackListed();
 
@@ -77,13 +92,13 @@ class ClaimLink extends React.Component<Props> {
     const isChannelClaim = isChannel && !path;
     const showPreview = autoEmbed === true && !isUnresolved;
 
-    const link = (
+    const innerContent = (
       <Button
         label={children}
         title={!isChannelClaim ? title || claimName : undefined}
-        button={!isChannel ? 'link' : undefined}
+        button={link ? 'link' : undefined}
+        className={className}
         navigate={uri}
-        className="button--uri-indicator"
       />
     );
 
@@ -98,13 +113,13 @@ class ClaimLink extends React.Component<Props> {
         thumbnail={thumbnail}
         description={description}
       >
-        <span>{link}</span>
+        <span>{innerContent}</span>
       </ChannelTooltip>
     );
 
     return (
       <React.Fragment>
-        {isChannelClaim ? wrappedLink : link}
+        {isChannelClaim ? wrappedLink : innerContent}
         {showPreview && <PreviewLink uri={uri} />}
       </React.Fragment>
     );
diff --git a/src/ui/component/externalLink/view.jsx b/src/ui/component/externalLink/view.jsx
index 23d34f90d..167ddeaca 100644
--- a/src/ui/component/externalLink/view.jsx
+++ b/src/ui/component/externalLink/view.jsx
@@ -44,7 +44,7 @@ class ExternalLink extends React.PureComponent<Props> {
     // Return local link if protocol is lbry uri
     if (protocol && protocol[0] === 'lbry:' && isURIValid(href)) {
       element = (
-        <ClaimLink uri={href} autoEmbed={embed}>
+        <ClaimLink uri={href} autoEmbed={embed} link>
           {children}
         </ClaimLink>
       );
diff --git a/src/ui/component/previewLink/view.jsx b/src/ui/component/previewLink/view.jsx
index 4a5351e28..f05b4a654 100644
--- a/src/ui/component/previewLink/view.jsx
+++ b/src/ui/component/previewLink/view.jsx
@@ -1,6 +1,5 @@
 // @flow
 import * as React from 'react';
-import DateTime from 'component/dateTime';
 import UriIndicator from 'component/uriIndicator';
 import TruncatedText from 'component/common/truncated-text';
 import MarkdownPreview from 'component/common/markdown-preview';
@@ -31,21 +30,23 @@ class PreviewLink extends React.PureComponent<Props> {
 
     return (
       <span className={'preview-link'} role="button" onClick={this.handleClick}>
-        <span className={'media-tile media-tile--small card--link'}>
-          <span style={thumbnailStyle} className={'preview-link--thumbnail media__thumb'} />
-          <span className={'preview-link--text media__info'}>
-            <span className={'preview-link--title media__title'}>
-              <TruncatedText text={title} lines={1} />
-            </span>
-            <span className={'preview-link--description media__subtext'}>
-              <span className={'truncated-text'}>
-                {__('Published to')} <UriIndicator uri={uri} link /> <DateTime timeAgo uri={uri} />
+        <span className={'file-list__item'}>
+          <span style={thumbnailStyle} className={'preview-link__thumbnail media__thumb'} />
+          <span className={'file-list__item-metadata'}>
+            <span className={'file-list__item-info'}>
+              <span className={'file-list__item-title'}>
+                <TruncatedText text={title} lines={1} />
               </span>
             </span>
-            <span className={'preview-link--description media__subtext'}>
-              <TruncatedText lines={2} showTooltip={false}>
-                <MarkdownPreview content={description} promptLinks strip />
-              </TruncatedText>
+            <span className={'preview-link__description media__subtext'}>
+              <UriIndicator uri={uri} link />
+            </span>
+            <span className={'file-list__item-properties'}>
+              <span className={'preview-link__description media__subtext'}>
+                <TruncatedText lines={2} showTooltip={false}>
+                  <MarkdownPreview content={description} promptLinks strip />
+                </TruncatedText>
+              </span>
             </span>
           </span>
         </span>
diff --git a/src/ui/component/uriIndicator/view.jsx b/src/ui/component/uriIndicator/view.jsx
index bb38fc728..3bf73da3a 100644
--- a/src/ui/component/uriIndicator/view.jsx
+++ b/src/ui/component/uriIndicator/view.jsx
@@ -58,8 +58,12 @@ class UriIndicator extends React.PureComponent<Props> {
       if (!channelLink) {
         return inner;
       }
-      
-      return <ClaimLink uri={channelLink}>{inner}</ClaimLink>;
+
+      return (
+        <ClaimLink uri={channelLink} className={'button--uri-indicator'}>
+          {inner}
+        </ClaimLink>
+      );
     } else {
       return null;
     }
diff --git a/src/ui/scss/component/_markdown-preview.scss b/src/ui/scss/component/_markdown-preview.scss
index 5e8012b20..e898e5ae7 100644
--- a/src/ui/scss/component/_markdown-preview.scss
+++ b/src/ui/scss/component/_markdown-preview.scss
@@ -122,17 +122,21 @@
   }
 
   .preview-link {
-    margin: var(--spacing-vertical-medium) 0;
-    padding: 1.2rem 0.8rem;
+    padding: 0;
+    margin: 1rem 0;
     background-color: rgba($lbry-teal-5, 0.1);
     border-left: 0.5rem solid $lbry-teal-5;
     display: block;
     align-items: center;
     width: 40rem;
+    word-break: break-all;
   }
 
-  .preview-link--description {
+  .preview-link__thumbnail {
+    width: 12rem;
+  }
+
+  .preview-link__description {
     display: block;
-    margin: var(--spacing-vertical-medium) 0;
   }
 }
-- 
2.45.2


From fdd755d83be0368edf7e4209f72a45b07bec45d7 Mon Sep 17 00:00:00 2001
From: btzr-io <btzr.io@gmail.com>
Date: Fri, 21 Jun 2019 00:04:02 -0600
Subject: [PATCH 24/25] convert channelTooltip to connected component

---
 src/ui/component/channelTooltip/index.js | 32 +++++++++-
 src/ui/component/channelTooltip/view.jsx | 77 ++++++++++++++++++------
 src/ui/component/claimLink/index.js      | 16 +----
 src/ui/component/claimLink/view.jsx      | 51 +++++-----------
 4 files changed, 107 insertions(+), 69 deletions(-)

diff --git a/src/ui/component/channelTooltip/index.js b/src/ui/component/channelTooltip/index.js
index 69dd6079d..a90c1e7af 100644
--- a/src/ui/component/channelTooltip/index.js
+++ b/src/ui/component/channelTooltip/index.js
@@ -1,2 +1,32 @@
+import { connect } from 'react-redux';
+
+import {
+  doResolveUri,
+  makeSelectTitleForUri,
+  makeSelectThumbnailForUri,
+  makeSelectClaimForUri,
+  makeSelectIsUriResolving,
+  makeSelectMetadataItemForUri,
+} from 'lbry-redux';
+
 import ChannelTooltip from './view';
-export default ChannelTooltip;
+
+const select = (state, props) => {
+  return {
+    uri: props.uri,
+    claim: makeSelectClaimForUri(props.uri)(state),
+    title: makeSelectTitleForUri(props.uri)(state),
+    thumbnail: makeSelectThumbnailForUri(props.uri)(state),
+    description: makeSelectMetadataItemForUri(props.uri, 'description')(state),
+    isResolvingUri: makeSelectIsUriResolving(props.uri)(state),
+  };
+};
+
+const perform = dispatch => ({
+  resolveUri: uri => dispatch(doResolveUri(uri)),
+});
+
+export default connect(
+  select,
+  perform
+)(ChannelTooltip);
diff --git a/src/ui/component/channelTooltip/view.jsx b/src/ui/component/channelTooltip/view.jsx
index 90b967052..314563a4e 100644
--- a/src/ui/component/channelTooltip/view.jsx
+++ b/src/ui/component/channelTooltip/view.jsx
@@ -15,12 +15,19 @@ import '@reach/tooltip/styles.css';
 const ARROW_SIZE = 10;
 
 type ChannelTooltipProps = {
+  uri: string,
+  claim: ?Claim,
+  title: ?string,
+  children: any,
+  resolveUri: string => void,
+  description: ?string,
+  isResolvingUri: boolean,
+};
+
+type LabelProps = {
   uri: string,
   title: ?string,
   claimId: string,
-  children: any,
-  ariaLabel: ?string,
-  thumbnail: ?string,
   channelName: string,
   description: ?string,
 };
@@ -28,7 +35,6 @@ type ChannelTooltipProps = {
 type TriangleTooltipProps = {
   label: any,
   children: any,
-
   ariaLabel: ?string,
 };
 
@@ -87,15 +93,15 @@ function TriangleTooltip(props: TriangleTooltipProps) {
   );
 }
 
-const ChannelTooltipLabel = (props: ChannelTooltipProps) => {
-  const { uri, title, claimId, thumbnail, description, channelName } = props;
+const ChannelTooltipLabel = (props: LabelProps) => {
+  const { uri, title, claimId, description, channelName } = props;
   const channelUrl = `${channelName}#${claimId}`;
   const formatedName = channelName.replace('@', '');
 
   return (
     <div className={'channel-tooltip__content'}>
       <div className={'channel-tooltip__profile'}>
-        <ChannelThumbnail uri={uri} thumbnail={thumbnail} />
+        <ChannelThumbnail uri={uri} />
         <div className={'channel-tooltip__info'}>
           <h2 className={'channel-tooltip__title'}>
             <TruncatedText lines={1}>{title || formatedName}</TruncatedText>
@@ -117,14 +123,51 @@ const ChannelTooltipLabel = (props: ChannelTooltipProps) => {
   );
 };
 
-const ChannelTooltip = (props: ChannelTooltipProps) => {
-  const { children, ariaLabel } = props;
-  const label = <ChannelTooltipLabel {...props} />;
-  return (
-    <TriangleTooltip label={label} ariaLabel={ariaLabel}>
-      {children}
-    </TriangleTooltip>
-  );
-};
+class ChannelTooltip extends React.Component<ChannelTooltipProps> {
+  componentDidMount() {
+    this.resolve(this.props);
+  }
 
-export default React.memo<ChannelTooltipProps>(ChannelTooltip);
+  componentDidUpdate() {
+    this.resolve(this.props);
+  }
+
+  resolve = (props: ChannelTooltipProps) => {
+    const { isResolvingUri, resolveUri, claim, uri } = props;
+
+    if (!isResolvingUri && claim === undefined && uri) {
+      resolveUri(uri);
+    }
+  };
+
+  render() {
+    const { uri, claim, children, title, description } = this.props;
+
+    if (!uri || !claim) {
+      return children;
+    }
+
+    const { claim_id: claimId, name: channelName } = claim;
+
+    // Generate aria-label
+    const ariaLabel = title || channelName;
+
+    const label = (
+      <ChannelTooltipLabel
+        uri={uri}
+        title={title}
+        claimId={claimId}
+        channelName={channelName}
+        description={description}
+      />
+    );
+
+    return (
+      <TriangleTooltip label={label} ariaLabel={ariaLabel}>
+        {children}
+      </TriangleTooltip>
+    );
+  }
+}
+
+export default ChannelTooltip;
diff --git a/src/ui/component/claimLink/index.js b/src/ui/component/claimLink/index.js
index 41af7dd95..d22c46fea 100644
--- a/src/ui/component/claimLink/index.js
+++ b/src/ui/component/claimLink/index.js
@@ -1,16 +1,6 @@
 import { connect } from 'react-redux';
-import { THEME } from 'constants/settings';
-import { makeSelectClientSetting } from 'redux/selectors/settings';
 
-import {
-  doResolveUri,
-  makeSelectClaimIsMine,
-  makeSelectTitleForUri,
-  makeSelectThumbnailForUri,
-  makeSelectClaimForUri,
-  makeSelectIsUriResolving,
-  makeSelectMetadataItemForUri,
-} from 'lbry-redux';
+import { doResolveUri, makeSelectTitleForUri, makeSelectClaimForUri, makeSelectIsUriResolving } from 'lbry-redux';
 
 import { selectBlackListedOutpoints } from 'lbryinc';
 
@@ -21,10 +11,6 @@ const select = (state, props) => {
     uri: props.uri,
     claim: makeSelectClaimForUri(props.uri)(state),
     title: makeSelectTitleForUri(props.uri)(state),
-    thumbnail: makeSelectThumbnailForUri(props.uri)(state),
-    description: makeSelectMetadataItemForUri(props.uri, 'description')(state),
-    currentTheme: makeSelectClientSetting(THEME)(state),
-    channelIsMine: makeSelectClaimIsMine(props.uri)(state),
     isResolvingUri: makeSelectIsUriResolving(props.uri)(state),
     blackListedOutpoints: selectBlackListedOutpoints(state),
   };
diff --git a/src/ui/component/claimLink/view.jsx b/src/ui/component/claimLink/view.jsx
index 889bf7add..bc7800f7f 100644
--- a/src/ui/component/claimLink/view.jsx
+++ b/src/ui/component/claimLink/view.jsx
@@ -12,10 +12,8 @@ type Props = {
   claim: StreamClaim,
   children: React.Node,
   className: ?string,
-  thumbnail: ?string,
   autoEmbed: ?boolean,
   description: ?string,
-  currentTheme: ?string,
   isResolvingUri: boolean,
   resolveUri: string => void,
   blackListedOutpoints: Array<{
@@ -35,6 +33,14 @@ class ClaimLink extends React.Component<Props> {
     isResolvingUri: false,
   };
 
+  componentDidMount() {
+    this.resolve(this.props);
+  }
+
+  componentDidUpdate() {
+    this.resolve(this.props);
+  }
+
   isClaimBlackListed() {
     const { claim, blackListedOutpoints } = this.props;
 
@@ -52,34 +58,16 @@ class ClaimLink extends React.Component<Props> {
     }
   }
 
-  componentDidMount() {
-    const { isResolvingUri, resolveUri, uri, claim } = this.props;
-    if (!isResolvingUri && !claim) {
-      resolveUri(uri);
-    }
-  }
+  resolve = (props: Props) => {
+    const { isResolvingUri, resolveUri, claim, uri } = props;
 
-  componentDidUpdate() {
-    const { isResolvingUri, resolveUri, claim, uri } = this.props;
-    if (!isResolvingUri && uri && !claim) {
+    if (!isResolvingUri && claim === undefined && uri) {
       resolveUri(uri);
     }
-  }
+  };
 
   render() {
-    const {
-      uri,
-      link,
-      claim,
-      title,
-      className,
-      description,
-      thumbnail,
-      currentTheme,
-      autoEmbed,
-      children,
-      isResolvingUri,
-    } = this.props;
+    const { uri, link, claim, title, className, autoEmbed, children, isResolvingUri } = this.props;
     const isUnresolved = (!isResolvingUri && !claim) || !claim;
     const isBlacklisted = this.isClaimBlackListed();
 
@@ -87,7 +75,7 @@ class ClaimLink extends React.Component<Props> {
       return <span>{children}</span>;
     }
 
-    const { claim_id: claimId, name: claimName } = claim;
+    const { name: claimName } = claim;
     const { isChannel, path } = parseURI(uri);
     const isChannelClaim = isChannel && !path;
     const showPreview = autoEmbed === true && !isUnresolved;
@@ -103,16 +91,7 @@ class ClaimLink extends React.Component<Props> {
     );
 
     const wrappedLink = (
-      <ChannelTooltip
-        uri={uri}
-        title={title}
-        claimId={claimId}
-        channelName={claimName}
-        ariaLabel={title || claimName}
-        currentTheme={currentTheme}
-        thumbnail={thumbnail}
-        description={description}
-      >
+      <ChannelTooltip uri={uri}>
         <span>{innerContent}</span>
       </ChannelTooltip>
     );
-- 
2.45.2


From aa60d99fcd51dff211175c21cbd6ce4e29d95b7c Mon Sep 17 00:00:00 2001
From: btzr-io <btzr.io@gmail.com>
Date: Mon, 24 Jun 2019 10:56:37 -0600
Subject: [PATCH 25/25] remove channelTooltip component

---
 src/ui/component/channelTooltip/index.js    |  32 ----
 src/ui/component/channelTooltip/position.js |  41 -----
 src/ui/component/channelTooltip/view.jsx    | 173 --------------------
 src/ui/component/claimLink/view.jsx         |  25 +--
 src/ui/component/externalLink/view.jsx      |   2 +-
 src/ui/component/uriIndicator/view.jsx      |   6 +-
 src/ui/scss/component/_tooltip.scss         | 104 ------------
 7 files changed, 6 insertions(+), 377 deletions(-)
 delete mode 100644 src/ui/component/channelTooltip/index.js
 delete mode 100644 src/ui/component/channelTooltip/position.js
 delete mode 100644 src/ui/component/channelTooltip/view.jsx

diff --git a/src/ui/component/channelTooltip/index.js b/src/ui/component/channelTooltip/index.js
deleted file mode 100644
index a90c1e7af..000000000
--- a/src/ui/component/channelTooltip/index.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import { connect } from 'react-redux';
-
-import {
-  doResolveUri,
-  makeSelectTitleForUri,
-  makeSelectThumbnailForUri,
-  makeSelectClaimForUri,
-  makeSelectIsUriResolving,
-  makeSelectMetadataItemForUri,
-} from 'lbry-redux';
-
-import ChannelTooltip from './view';
-
-const select = (state, props) => {
-  return {
-    uri: props.uri,
-    claim: makeSelectClaimForUri(props.uri)(state),
-    title: makeSelectTitleForUri(props.uri)(state),
-    thumbnail: makeSelectThumbnailForUri(props.uri)(state),
-    description: makeSelectMetadataItemForUri(props.uri, 'description')(state),
-    isResolvingUri: makeSelectIsUriResolving(props.uri)(state),
-  };
-};
-
-const perform = dispatch => ({
-  resolveUri: uri => dispatch(doResolveUri(uri)),
-});
-
-export default connect(
-  select,
-  perform
-)(ChannelTooltip);
diff --git a/src/ui/component/channelTooltip/position.js b/src/ui/component/channelTooltip/position.js
deleted file mode 100644
index f3903d528..000000000
--- a/src/ui/component/channelTooltip/position.js
+++ /dev/null
@@ -1,41 +0,0 @@
-// Defualt function used by reach-ui tooltip componment,
-// slightly modify to register current direction:
-// https://github.com/reach/reach-ui/blob/f0c8c5c467be46c202148ee69b1ba789b57d5e60/packages/tooltip/src/index.js#L478
-
-// feels awkward when it's perfectly aligned w/ the trigger
-const OFFSET = 8;
-
-const positionDefault = (triggerRect, tooltipRect, currentDirection, setDirection) => {
-  const styles = {
-    left: `${triggerRect.left + window.pageXOffset}px`,
-    top: `${triggerRect.top + triggerRect.height + window.pageYOffset}px`,
-  };
-
-  const collisions = {
-    top: triggerRect.top - tooltipRect.height < 0,
-    right: window.innerWidth < triggerRect.left + tooltipRect.width,
-    bottom: window.innerHeight < triggerRect.bottom + tooltipRect.height + OFFSET,
-    left: triggerRect.left - tooltipRect.width < 0,
-  };
-
-  const directionRight = collisions.right && !collisions.left;
-  const directionUp = collisions.bottom && !collisions.top;
-
-  const direction = directionUp ? 'top' : 'bottom';
-
-  if (direction !== currentDirection) {
-    setDirection(direction);
-  }
-
-  return {
-    ...styles,
-    left: directionRight
-      ? `${triggerRect.right - tooltipRect.width + window.pageXOffset}px`
-      : `${triggerRect.left + window.pageXOffset}px`,
-    top: directionUp
-      ? `${triggerRect.top - OFFSET - tooltipRect.height + window.pageYOffset}px`
-      : `${triggerRect.top + OFFSET + triggerRect.height + window.pageYOffset}px`,
-  };
-};
-
-export default positionDefault;
diff --git a/src/ui/component/channelTooltip/view.jsx b/src/ui/component/channelTooltip/view.jsx
deleted file mode 100644
index 314563a4e..000000000
--- a/src/ui/component/channelTooltip/view.jsx
+++ /dev/null
@@ -1,173 +0,0 @@
-// @flow
-import * as React from 'react';
-import classnames from 'classnames';
-import ChannelThumbnail from 'component/channelThumbnail';
-import TruncatedText from 'component/common/truncated-text';
-
-// Tooltip components
-import Portal from '@reach/portal';
-import getPostion from './position.js';
-import { useTooltip, TooltipPopup } from '@reach/tooltip';
-
-// Tooltip base styles
-import '@reach/tooltip/styles.css';
-
-const ARROW_SIZE = 10;
-
-type ChannelTooltipProps = {
-  uri: string,
-  claim: ?Claim,
-  title: ?string,
-  children: any,
-  resolveUri: string => void,
-  description: ?string,
-  isResolvingUri: boolean,
-};
-
-type LabelProps = {
-  uri: string,
-  title: ?string,
-  claimId: string,
-  channelName: string,
-  description: ?string,
-};
-
-type TriangleTooltipProps = {
-  label: any,
-  children: any,
-  ariaLabel: ?string,
-};
-
-function TriangleTooltip(props: TriangleTooltipProps) {
-  const { label, children, ariaLabel } = props;
-
-  // get the props from useTooltip
-  const [trigger, tooltip] = useTooltip();
-
-  // Tooltip direction
-  const [direction, setDirection] = React.useState('bottom');
-
-  // destructure off what we need to position the triangle
-  const { isVisible, triggerRect } = tooltip;
-
-  let arrowTop;
-
-  // Top
-  if (direction === 'top') {
-    arrowTop = triggerRect && triggerRect.bottom - (triggerRect.height + ARROW_SIZE) + window.scrollY;
-  }
-
-  // Bottom
-  if (direction === 'bottom') {
-    arrowTop = triggerRect && triggerRect.bottom + window.scrollY;
-  }
-
-  return (
-    <React.Fragment>
-      {React.cloneElement(children, trigger)}
-      {isVisible && (
-        // The Triangle. We position it relative to the trigger, not the popup
-        // so that collisions don't have a triangle pointing off to nowhere.
-        // Using a Portal may seem a little extreme, but we can keep the
-        // positioning logic simpler here instead of needing to consider
-        // the popup's position relative to the trigger and collisions
-        <Portal>
-          <span
-            className={classnames('channel-tooltip__arrow', `channel-tooltip__arrow--${direction}`)}
-            style={{
-              position: 'absolute',
-              top: arrowTop,
-              left: triggerRect && triggerRect.left - ARROW_SIZE + triggerRect.width / 2,
-            }}
-          />
-        </Portal>
-      )}
-      <TooltipPopup
-        {...tooltip}
-        label={label}
-        ariaLabel={ariaLabel}
-        className={'channel-tooltip'}
-        position={(triggerRect, tooltipRect) => getPostion(triggerRect, tooltipRect, direction, setDirection)}
-      />
-    </React.Fragment>
-  );
-}
-
-const ChannelTooltipLabel = (props: LabelProps) => {
-  const { uri, title, claimId, description, channelName } = props;
-  const channelUrl = `${channelName}#${claimId}`;
-  const formatedName = channelName.replace('@', '');
-
-  return (
-    <div className={'channel-tooltip__content'}>
-      <div className={'channel-tooltip__profile'}>
-        <ChannelThumbnail uri={uri} />
-        <div className={'channel-tooltip__info'}>
-          <h2 className={'channel-tooltip__title'}>
-            <TruncatedText lines={1}>{title || formatedName}</TruncatedText>
-          </h2>
-          <h3 className={'channel-tooltip__url'}>
-            <TruncatedText lines={1}>{channelUrl}</TruncatedText>
-          </h3>
-        </div>
-      </div>
-      {description && (
-        <div className={'channel-tooltip__description'}>
-          <div>
-            <TruncatedText lines={2}>{description}</TruncatedText>
-          </div>
-        </div>
-      )}
-      <div className={'channel-tooltip__stats'} />
-    </div>
-  );
-};
-
-class ChannelTooltip extends React.Component<ChannelTooltipProps> {
-  componentDidMount() {
-    this.resolve(this.props);
-  }
-
-  componentDidUpdate() {
-    this.resolve(this.props);
-  }
-
-  resolve = (props: ChannelTooltipProps) => {
-    const { isResolvingUri, resolveUri, claim, uri } = props;
-
-    if (!isResolvingUri && claim === undefined && uri) {
-      resolveUri(uri);
-    }
-  };
-
-  render() {
-    const { uri, claim, children, title, description } = this.props;
-
-    if (!uri || !claim) {
-      return children;
-    }
-
-    const { claim_id: claimId, name: channelName } = claim;
-
-    // Generate aria-label
-    const ariaLabel = title || channelName;
-
-    const label = (
-      <ChannelTooltipLabel
-        uri={uri}
-        title={title}
-        claimId={claimId}
-        channelName={channelName}
-        description={description}
-      />
-    );
-
-    return (
-      <TriangleTooltip label={label} ariaLabel={ariaLabel}>
-        {children}
-      </TriangleTooltip>
-    );
-  }
-}
-
-export default ChannelTooltip;
diff --git a/src/ui/component/claimLink/view.jsx b/src/ui/component/claimLink/view.jsx
index bc7800f7f..26e483af3 100644
--- a/src/ui/component/claimLink/view.jsx
+++ b/src/ui/component/claimLink/view.jsx
@@ -2,12 +2,9 @@
 import * as React from 'react';
 import Button from 'component/button';
 import PreviewLink from 'component/previewLink';
-import ChannelTooltip from 'component/channelTooltip';
-import { parseURI } from 'lbry-redux';
 
 type Props = {
   uri: string,
-  link?: boolean,
   title: ?string,
   claim: StreamClaim,
   children: React.Node,
@@ -67,7 +64,7 @@ class ClaimLink extends React.Component<Props> {
   };
 
   render() {
-    const { uri, link, claim, title, className, autoEmbed, children, isResolvingUri } = this.props;
+    const { uri, claim, title, className, autoEmbed, children, isResolvingUri } = this.props;
     const isUnresolved = (!isResolvingUri && !claim) || !claim;
     const isBlacklisted = this.isClaimBlackListed();
 
@@ -76,29 +73,11 @@ class ClaimLink extends React.Component<Props> {
     }
 
     const { name: claimName } = claim;
-    const { isChannel, path } = parseURI(uri);
-    const isChannelClaim = isChannel && !path;
     const showPreview = autoEmbed === true && !isUnresolved;
 
-    const innerContent = (
-      <Button
-        label={children}
-        title={!isChannelClaim ? title || claimName : undefined}
-        button={link ? 'link' : undefined}
-        className={className}
-        navigate={uri}
-      />
-    );
-
-    const wrappedLink = (
-      <ChannelTooltip uri={uri}>
-        <span>{innerContent}</span>
-      </ChannelTooltip>
-    );
-
     return (
       <React.Fragment>
-        {isChannelClaim ? wrappedLink : innerContent}
+        <Button label={children} title={title || claimName} button={'link'} navigate={uri} className={className} />
         {showPreview && <PreviewLink uri={uri} />}
       </React.Fragment>
     );
diff --git a/src/ui/component/externalLink/view.jsx b/src/ui/component/externalLink/view.jsx
index 167ddeaca..23d34f90d 100644
--- a/src/ui/component/externalLink/view.jsx
+++ b/src/ui/component/externalLink/view.jsx
@@ -44,7 +44,7 @@ class ExternalLink extends React.PureComponent<Props> {
     // Return local link if protocol is lbry uri
     if (protocol && protocol[0] === 'lbry:' && isURIValid(href)) {
       element = (
-        <ClaimLink uri={href} autoEmbed={embed} link>
+        <ClaimLink uri={href} autoEmbed={embed}>
           {children}
         </ClaimLink>
       );
diff --git a/src/ui/component/uriIndicator/view.jsx b/src/ui/component/uriIndicator/view.jsx
index 3bf73da3a..659fdb180 100644
--- a/src/ui/component/uriIndicator/view.jsx
+++ b/src/ui/component/uriIndicator/view.jsx
@@ -1,6 +1,6 @@
 // @flow
 import React from 'react';
-import ClaimLink from 'component/claimLink';
+import Button from 'component/button';
 import { buildURI } from 'lbry-redux';
 
 type Props = {
@@ -60,9 +60,9 @@ class UriIndicator extends React.PureComponent<Props> {
       }
 
       return (
-        <ClaimLink uri={channelLink} className={'button--uri-indicator'}>
+        <Button className="button--uri-indicator" navigate={channelLink}>
           {inner}
-        </ClaimLink>
+        </Button>
       );
     } else {
       return null;
diff --git a/src/ui/scss/component/_tooltip.scss b/src/ui/scss/component/_tooltip.scss
index fafe9b3c7..7ae09e535 100644
--- a/src/ui/scss/component/_tooltip.scss
+++ b/src/ui/scss/component/_tooltip.scss
@@ -150,107 +150,3 @@
     margin-left: -5px;
   }
 }
-
-// Channel-tooltip
-
-.channel-tooltip {
-  color: $lbry-black;
-  background-color: $lbry-white;
-  width: 20rem;
-  border: none;
-  border-radius: var(--card-radius);
-  z-index: 2;
-
-  html[data-mode='dark'] & {
-    color: mix($lbry-white, $lbry-gray-3, 50%);
-    background-color: mix($lbry-black, $lbry-gray-3, 90%);
-  }
-
-  box-shadow: 0px 2px 10px -2px black;
-}
-
-.channel-tooltip__content {
-  width: 100%;
-  margin: 0;
-  display: block;
-  word-break: break-all;
-  word-wrap: break-word;
-  white-space: pre-wrap;
-
-  .channel-thumbnail {
-    left: 0;
-    position: relative;
-    flex-shrink: 0;
-    text-align: center;
-    display: flex;
-    max-width: 5rem;
-    max-height: 5rem;
-    margin-right: 1rem;
-    box-shadow: 0px 2px 10px -2px $lbry-black;
-  }
-}
-
-.channel-tooltip__arrow {
-  width: 0;
-  height: 0;
-  border-left: 10px solid transparent;
-  border-right: 10px solid transparent;
-
-  html[data-mode='dark'] & {
-    z-index: 3;
-  }
-}
-
-.channel-tooltip__arrow--top {
-  border-top: 10px solid $lbry-gray-5;
-  border-bottom: 0;
-
-  html[data-mode='dark'] & {
-    z-index: 3;
-    border-top: 10px solid mix($lbry-black, $lbry-gray-3, 90%);
-    border-bottom: 0;
-  }
-}
-
-.channel-tooltip__arrow--bottom {
-  border-top: 0;
-  border-bottom: 10px solid $lbry-gray-5;
-
-  html[data-mode='dark'] & {
-    z-index: 3;
-    border-top: 0;
-    border-bottom: 10px solid mix($lbry-black, $lbry-gray-3, 90%);
-  }
-}
-
-.channel-tooltip__profile {
-  display: flex;
-  align-items: center;
-  padding: 1rem;
-}
-
-.channel-tooltip__description {
-  padding: 1rem;
-  visibility: visible;
-  border-top: 1px solid rgba($lbry-gray-4, 0.4);
-  width: 100%;
-
-  html[data-mode='dark'] & {
-    border-top: 1px solid rgba($lbry-black, 0.8);
-  }
-}
-
-.channel-tooltip__info {
-}
-
-.channel-tooltip__title {
-  font-weight: bold;
-  font-size: 1.4rem;
-  line-height: 1.5em;
-  visibility: visible;
-}
-
-.channel-tooltip__url {
-  font-size: 1rem;
-  visibility: visible;
-}
-- 
2.45.2