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 { } 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 { 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 {children}; + } return ( - ); + return {inner}; } } 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 && }
- +

{title || channelName}

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 {