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.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 - - - - )} - getPostion(triggerRect, tooltipRect, direction, setDirection)} - /> - - ); -} - -const ChannelTooltipLabel = (props: LabelProps) => { - const { uri, title, claimId, description, channelName } = props; - const channelUrl = `${channelName}#${claimId}`; - const formatedName = channelName.replace('@', ''); - - return ( -
-
- -
-

- {title || formatedName} -

-

- {channelUrl} -

-
-
- {description && ( -
-
- {description} -
-
- )} -
-
- ); -}; - -class ChannelTooltip extends React.Component { - 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 = ( - - ); - - return ( - - {children} - - ); - } -} - -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 { }; 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 { } const { name: claimName } = claim; - const { isChannel, path } = parseURI(uri); - const isChannelClaim = isChannel && !path; const showPreview = autoEmbed === true && !isUnresolved; - const innerContent = ( - ); } 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; -}