Merge pull request #1909 from lbryio/channel-search-ux

Handle channels properly on top of search page

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<Props> {
+  static defaultProps = {
+    size: 'regular',
+  };
+
   componentDidMount() {
     const { uri, resolveUri } = this.props;
 
@@ -36,27 +38,54 @@ class ChannelTile extends React.PureComponent<Props> {
   }
 
   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 (
-      <section className="file-tile card--link" onClick={onClick} role="button">
+      <section
+        onClick={onClick}
+        role="button"
+        className={classnames('file-tile card--link', {
+          'file-tile--small': size === 'small',
+          'file-tile--large': size === 'large',
+        })}
+      >
         <CardMedia title={channelName} thumbnail={null} />
         <div className="file-tile__info">
-          {isResolvingUri && <div className="card__title--small">{__('Loading...')}</div>}
+          {isResolvingUri && (
+            <div
+              className={classnames({
+                'card__title--small': size !== 'large',
+                'card__title--large': size === 'large',
+              })}
+            >
+              {__('Loading...')}
+            </div>
+          )}
           {!isResolvingUri && (
             <React.Fragment>
-              <div className="card__title--small card__title--file">
+              <div
+                className={classnames({
+                  'card__title--file': size === 'regular',
+                  'card__title--x-small': size === 'small',
+                  'card__title--large': size === 'large',
+                })}
+              >
                 <TruncatedText lines={1}>{channelName || uri}</TruncatedText>
               </div>
-              <div className="card__subtitle">
+              <div
+                className={classnames('card__subtitle', {
+                  'card__subtitle--large': size === 'large',
+                })}
+              >
                 {totalItems > 0 && (
                   <span>
                     {totalItems} {totalItems === 1 ? 'file' : 'files'}
@@ -66,6 +95,11 @@ class ChannelTile extends React.PureComponent<Props> {
               </div>
             </React.Fragment>
           )}
+          {subscriptionUri && (
+            <div className="card__actions">
+              <SubscribeButton uri={subscriptionUri} channelName={channelName} />
+            </div>
+          )}
         </div>
       </section>
     );

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

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<Props> {
 
   render() {
     const { query, resultCount } = this.props;
+
+    const isValid = isURIValid(query);
+
+    let uri;
+    let isChannel;
+    if (isValid) {
+      uri = normalizeURI(query);
+      ({ isChannel } = parseURI(uri));
+    }
+
     return (
       <Page noPadding>
         {query &&
-          isURIValid(query) && (
+          isValid && (
             <div className="search__top">
-              <div className="file-list__header">{`lbry://${query}`}</div>
-              <FileTile size="large" displayHiddenMessage uri={normalizeURI(query)} />
+              <div className="file-list__header">
+                {`lbry://${query}`}
+                <ToolTip
+                  icon
+                  body={__('This is the resolution of a LBRY URL and not controlled by LBRY Inc.')}
+                >
+                  <Icon icon={icons.HELP} />
+                </ToolTip>
+              </div>
+              {isChannel ? (
+                <ChannelTile size="large" uri={uri} />
+              ) : (
+                <FileTile size="large" displayHiddenMessage uri={uri} />
+              )}
             </div>
           )}
         <div className="search__content">

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

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 {

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;