diff --git a/src/renderer/component/channelTile/view.jsx b/src/renderer/component/channelTile/view.jsx index 531b9fccd..4b3c0f744 100644 --- a/src/renderer/component/channelTile/view.jsx +++ b/src/renderer/component/channelTile/view.jsx @@ -2,16 +2,14 @@ import * as React from 'react'; import CardMedia from 'component/cardMedia'; import TruncatedText from 'component/common/truncated-text'; - -/* - This component can probably be combined with FileTile - Currently the only difference is showing the number of files/empty channel -*/ +import classnames from 'classnames'; +import SubscribeButton from 'component/subscribeButton'; type Props = { uri: string, isResolvingUri: boolean, totalItems: number, + size: string, claim: ?{ claim_id: string, name: string, @@ -21,6 +19,10 @@ type Props = { }; class ChannelTile extends React.PureComponent { + static defaultProps = { + size: 'regular', + }; + componentDidMount() { const { uri, resolveUri } = this.props; @@ -36,27 +38,54 @@ class ChannelTile extends React.PureComponent { } render() { - const { claim, navigate, isResolvingUri, totalItems, uri } = this.props; - let channelName, channelId; + const { claim, navigate, isResolvingUri, totalItems, uri, size } = this.props; + let channelName; + let subscriptionUri; if (claim) { channelName = claim.name; - channelId = claim.claim_id; + subscriptionUri = claim.permanent_url; } const onClick = () => navigate('/show', { uri }); return ( -
+
- {isResolvingUri &&
{__('Loading...')}
} + {isResolvingUri && ( +
+ {__('Loading...')} +
+ )} {!isResolvingUri && ( -
+
{channelName || uri}
-
+
{totalItems > 0 && ( {totalItems} {totalItems === 1 ? 'file' : 'files'} @@ -66,6 +95,11 @@ class ChannelTile extends React.PureComponent {
)} + {subscriptionUri && ( +
+ +
+ )}
); diff --git a/src/renderer/component/subscribeButton/view.jsx b/src/renderer/component/subscribeButton/view.jsx index a29b8bb4a..4d5727d31 100644 --- a/src/renderer/component/subscribeButton/view.jsx +++ b/src/renderer/component/subscribeButton/view.jsx @@ -41,7 +41,9 @@ export default (props: Props) => { icon={isSubscribed ? undefined : icons.HEART} button="alt" label={subscriptionLabel} - onClick={() => { + onClick={e => { + e.stopPropagation(); + if (!subscriptions.length) { doNotify({ id: MODALS.FIRST_SUBSCRIPTION }); } diff --git a/src/renderer/page/search/view.jsx b/src/renderer/page/search/view.jsx index 4b2497797..89d8425d7 100644 --- a/src/renderer/page/search/view.jsx +++ b/src/renderer/page/search/view.jsx @@ -1,11 +1,15 @@ // @flow import * as React from 'react'; import * as settings from 'constants/settings'; -import { isURIValid, normalizeURI } from 'lbry-redux'; +import { isURIValid, normalizeURI, parseURI } from 'lbry-redux'; import { FormField, FormRow } from 'component/common/form'; import FileTile from 'component/fileTile'; +import ChannelTile from 'component/channelTile'; import FileListSearch from 'component/fileListSearch'; import Page from 'component/page'; +import ToolTip from 'component/common/tooltip'; +import Icon from 'component/common/icon'; +import * as icons from 'constants/icons'; type Props = { query: ?string, @@ -32,13 +36,35 @@ class SearchPage extends React.PureComponent { render() { const { query, resultCount } = this.props; + + const isValid = isURIValid(query); + + let uri; + let isChannel; + if (isValid) { + uri = normalizeURI(query); + ({ isChannel } = parseURI(uri)); + } + return ( {query && - isURIValid(query) && ( + isValid && (
-
{`lbry://${query}`}
- +
+ {`lbry://${query}`} + + + +
+ {isChannel ? ( + + ) : ( + + )}
)}
diff --git a/src/renderer/scss/_vars.scss b/src/renderer/scss/_vars.scss index ce5caddf4..199809230 100644 --- a/src/renderer/scss/_vars.scss +++ b/src/renderer/scss/_vars.scss @@ -137,6 +137,7 @@ $large-breakpoint: 1921px; --search-item-border-color: transparent; --search-item-active-color: var(--color-black); --search-modal-input-height: 70px; + --search-exact-result: #eaeaea; /* Nav */ --nav-color: var(--color-grey-dark); diff --git a/src/renderer/scss/component/_search.scss b/src/renderer/scss/component/_search.scss index fb61a21e5..fbe3f6a3d 100644 --- a/src/renderer/scss/component/_search.scss +++ b/src/renderer/scss/component/_search.scss @@ -87,7 +87,7 @@ .search__top { padding: 0 $spacing-width $spacing-width; - background-color: var(--card-bg); + background-color: var(--search-exact-result); } .search__content { diff --git a/static/themes/dark.css b/static/themes/dark.css index d3ca442c5..fae053d75 100644 --- a/static/themes/dark.css +++ b/static/themes/dark.css @@ -62,6 +62,7 @@ --search-active-bg-color: #13233C; --search-active-shadow: 0 6px 9px -2px var(--color-grey--dark); --search-modal-input-height: 70px; + --search-exact-result: #4C5D77; /* Nav */ --nav-color: #44548F;