fix channel tooltip styles / render issues

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

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}

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

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()) {
+    this.setState({ isTooltipActive: true });
-      setTimeout(() => this.setState({ isTooltipActive: true }), 500);
-    }
   };
 
   hideTooltip = () => {
-    if (this.isTooltipReady()) {
+    this.setState({ isTooltipActive: false });
-      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;
 
@@ -88,9 +83,7 @@ class ChannelLink extends React.Component<Props, State> {
   }
 
   render() {
-    const { uri, claim, title, description, thumbnail, children, isResolvingUri } = this.props;
+    const { uri, claim, title, description, thumbnail, children, currentTheme, isResolvingUri } = this.props;
-    const { channelName, claimName, claimId } = parseURI(uri);
-    const tooltipReady = this.isTooltipReady();
     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
-          <ChannelTooltip
+          uri={uri}
-            uri={uri}
+          title={title}
-            title={title}
+          claimId={claimId}
-            claimId={claimId}
+          channelName={channelName}
-            claimName={claimName}
+          currentTheme={currentTheme}
-            channelName={channelName}
+          thumbnail={thumbnail}
-            thumbnail={thumbnail}
+          description={description}
-            description={description}
+          active={this.state.isTooltipActive}
-            active={this.state.isTooltipActive}
+          parent={`#${this.parentId}`}
-            parent={this.buttonRef.current}
+          group={'channel-tooltip'}
-          />
+        />
-        )}
       </React.Fragment>
     );
   }

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,
+  parent: ?HTMLElement | ?string,
-  claimId: ?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 },
+    style: { background: bgColor, padding: 0 },
-    arrowStyle: { color: bgColor },
+    arrowStyle: { color: bgColor, borderColor: false },
   };
 
+  const channelUrl = `${channelName}#${claimId}`;
+  const formatedName = channelName.replace('@', '');
+
   return (
     <ToolTip
       align="left"
       arrow="left"
-      group="channel-tooltip"
+      active={parent && active}
-      active={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);

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

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

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

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>

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;
+  padding: 1rem;
-  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 {
   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;
 }

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 {

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"