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),

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}
           />
         )}

src/ui/component/channelThumbnail/index.js

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

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>

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} />}

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

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']}>

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

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(

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>

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 {