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 (
-
+
{title || formatedName}
@@ -117,14 +123,51 @@ const ChannelTooltipLabel = (props: ChannelTooltipProps) => {
);
};
-const ChannelTooltip = (props: ChannelTooltipProps) => {
- const { children, ariaLabel } = props;
- const label = ;
- return (
-
- {children}
-
- );
-};
+class ChannelTooltip extends React.Component {
+ componentDidMount() {
+ this.resolve(this.props);
+ }
-export default React.memo(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 = (
+
+ );
+
+ return (
+
+ {children}
+
+ );
+ }
+}
+
+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 {
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 {
}
}
- 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 {
return {children};
}
- 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 {
);
const wrappedLink = (
-
+
{innerContent}
);