Merge pull request #1875 from lbryio/search-ux

Search ux improvements

package.json

@@ -49,7 +49,7 @@
     "formik": "^0.10.4",
     "hast-util-sanitize": "^1.1.2",
     "keytar": "^4.2.1",
-    "lbry-redux": "lbryio/lbry-redux#ada4880c5d0758c7973aff9d443a87874d98b320",
+    "lbry-redux": "lbryio/lbry-redux#31f7afa8a37f5741dac01fc1ecdf153f3bed95dc",
     "localforage": "^1.7.1",
     "mammoth": "^1.4.6",
     "mime": "^2.3.1",

src/renderer/component/fileListSearch/view.jsx

@@ -36,7 +36,7 @@ class FileListSearch extends React.PureComponent<Props> {
         <React.Fragment>
           <div className="search__results">
             <div className="search-result__row">
-              <div className="file-list__header">{__('Content')}</div>
+              <div className="file-list__header">{__('Search Results')}</div>
               <HiddenNsfwClaims uris={uris} />
               {!isSearching && fileResults.length ? (
                 fileResults.map(uri => <FileTile key={uri} uri={uri} />)

src/renderer/component/fileTile/view.jsx

@@ -9,6 +9,7 @@ import Icon from 'component/common/icon';
 import Button from 'component/button';
 import classnames from 'classnames';
 import FilePrice from 'component/filePrice';
+import UriIndicator from 'component/uriIndicator';
 
 type Props = {
   showUri: boolean,
@@ -28,7 +29,7 @@ type Props = {
   hideNoResult: boolean, // don't show the tile if there is no claim at this uri
   displayHiddenMessage?: boolean,
   displayDescription?: boolean,
-  small?: boolean,
+  size: string,
 };
 
 class FileTile extends React.PureComponent<Props> {
@@ -36,6 +37,7 @@ class FileTile extends React.PureComponent<Props> {
     showUri: false,
     showLocal: false,
     displayDescription: true,
+    size: 'regular',
   };
 
   componentDidMount() {
@@ -65,7 +67,7 @@ class FileTile extends React.PureComponent<Props> {
       hideNoResult,
       displayHiddenMessage,
       displayDescription,
-      small,
+      size,
     } = this.props;
 
     const shouldHide = !claimIsMine && obscureNsfw && metadata && metadata.nsfw;
@@ -89,16 +91,15 @@ class FileTile extends React.PureComponent<Props> {
     const onClick = () => navigate('/show', { uri });
 
     let name;
-    let channel;
     if (claim) {
       ({ name } = claim);
-      channel = claim.channel_name;
     }
 
     return !name && hideNoResult ? null : (
       <section
         className={classnames('file-tile card--link', {
-          'file-tile--small': small,
+          'file-tile--small': size === 'small',
+          'file-tile--large': size === 'large',
         })}
         onClick={onClick}
         onKeyUp={onClick}
@@ -107,24 +108,35 @@ class FileTile extends React.PureComponent<Props> {
       >
         <CardMedia title={title || name} thumbnail={thumbnail} />
         <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={classnames({
-                  'card__title--file': !small,
+                  'card__title--file': size === 'regular',
-                  'card__title--x-small': small,
+                  'card__title--x-small': size === 'small',
+                  'card__title--large': size === 'large',
                 })}
               >
-                <TruncatedText lines={small ? 2 : 3}>{title || name}</TruncatedText>
+                <TruncatedText lines={size === 'small' ? 2 : 3}>{title || name}</TruncatedText>
               </div>
               <div
                 className={classnames('card__subtitle', {
-                  'card__subtitle--x-small': small,
+                  'card__subtitle--x-small': size === 'small',
+                  'card__subtitle--large': size === 'large',
                 })}
               >
                 <span className="file-tile__channel">
-                  {showUri ? uri : channel || __('Anonymous')}
+                  {showUri ? uri : <UriIndicator uri={uri} link />}
                 </span>
               </div>
               <div className="card__file-properties">
@@ -133,8 +145,13 @@ class FileTile extends React.PureComponent<Props> {
                 {showLocal && isDownloaded && <Icon icon={icons.LOCAL} />}
               </div>
               {displayDescription && (
-                <div className="card__subtext card__subtext--small">
+                <div
-                  <TruncatedText lines={3}>{description}</TruncatedText>
+                  className={classnames('card__subtext', {
+                    'card__subtext--small': size !== 'small',
+                    'card__subtext--large': size === 'large',
+                  })}
+                >
+                  <TruncatedText lines={size === 'large' ? 4 : 3}>{description}</TruncatedText>
                 </div>
               )}
               {!name && (

src/renderer/component/recommendedContent/view.jsx

@@ -10,7 +10,7 @@ type Props = {
   search: string => void,
 };
 
-export default class RecommendedContent extends React.PureComponent<Props, State> {
+export default class RecommendedContent extends React.PureComponent<Props> {
   constructor() {
     super();
 
@@ -37,14 +37,7 @@ export default class RecommendedContent extends React.PureComponent<Props, State
     const { claim, search } = this.props;
 
     if (claim && claim.value && claim.value.stream && claim.value.stream.metadata) {
-      const {
+      const { title } = claim.value.stream.metadata;
-        value: {
-          stream: {
-            metadata: { title },
-          },
-        },
-      } = claim;
-
       search(title);
       this.didSearch = true;
     }
@@ -62,7 +55,7 @@ export default class RecommendedContent extends React.PureComponent<Props, State
           recommendedContent.length &&
           recommendedContent.map(recommendedUri => (
             <FileTile
-              small
+              size="small"
               hideNoResult
               displayDescription={false}
               key={recommendedUri}

src/renderer/component/wunderbar/index.js

@@ -2,6 +2,7 @@ import { connect } from 'react-redux';
 import {
   selectSearchState as selectSearch,
   selectWunderBarAddress,
+  selectSearchSuggestions,
   doUpdateSearchQuery,
   doFocusSearchInput,
   doBlurSearchInput,
@@ -23,6 +24,7 @@ const select = state => {
   return {
     ...searchState,
     wunderbarValue,
+    suggestions: selectSearchSuggestions(state),
     resultCount: makeSelectClientSetting(settings.RESULT_COUNT)(state),
   };
 };

src/renderer/page/search/view.jsx

@@ -5,10 +5,7 @@ import { isURIValid, normalizeURI } from 'lbry-redux';
 import { FormField, FormRow } from 'component/common/form';
 import FileTile from 'component/fileTile';
 import FileListSearch from 'component/fileListSearch';
-import ToolTip from 'component/common/tooltip';
 import Page from 'component/page';
-import Icon from 'component/common/icon';
-import * as icons from 'constants/icons';
 
 type Props = {
   query: ?string,
@@ -36,8 +33,15 @@ class SearchPage extends React.PureComponent<Props> {
   render() {
     const { query, resultCount } = this.props;
     return (
-      <Page>
+      <Page noPadding>
-        <React.Fragment>
+        {query &&
+          isURIValid(query) && (
+            <div className="search__top">
+              <div className="file-list__header">{`lbry://${query}`}</div>
+              <FileTile size="large" displayHiddenMessage uri={normalizeURI(query)} />
+            </div>
+          )}
+        <div className="search__content">
           <FormRow alignRight>
             <FormField
               type="number"
@@ -61,23 +65,9 @@ class SearchPage extends React.PureComponent<Props> {
               // />
             }
           </FormRow>
-        </React.Fragment>
+          <FileListSearch query={query} />
-        {isURIValid(query) && (
+          <div className="help">{__('These search results are provided by LBRY, Inc.')}</div>
-          <React.Fragment>
+        </div>
-            <div className="file-list__header">
-              {__('Exact URL')}
-              <ToolTip
-                icon
-                body={__('This is the resolution of a LBRY URL and not controlled by LBRY Inc.')}
-              >
-                <Icon icon={icons.HELP} />
-              </ToolTip>
-            </div>
-            <FileTile showUri displayHiddenMessage uri={normalizeURI(query)} />
-          </React.Fragment>
-        )}
-        <FileListSearch query={query} />
-        <div className="help">{__('These search results are provided by LBRY, Inc.')}</div>
       </Page>
     );
   }

src/renderer/scss/_gui.scss

@@ -196,6 +196,7 @@ p {
 .main--no-padding {
   padding-left: 0;
   padding-right: 0;
+  padding-top: 0;
   margin: 0;
 }
 

src/renderer/scss/_vars.scss

@@ -162,6 +162,8 @@ $large-breakpoint: 1921px;
   --file-tile-media-width: calc(125px * (16 / 9));
   --file-tile-media-height-small: 60px;
   --file-tile-media-width-small: calc(60px * (16 / 9));
+  --file-tile-media-height-large: 200px;
+  --file-tile-media-width-large: calc(200px * (16 / 9));
   --file-page-min-width: 400px;
   --recommended-content-width: 300px;
   --recommended-content-width-medium: 400px;

src/renderer/scss/component/_card.scss

@@ -125,6 +125,10 @@
   line-height: 12px;
 }
 
+.card__title--large {
+  font-size: 22px;
+}
+
 .card__title--file {
   font-family: 'metropolis-bold';
   font-size: 28px;
@@ -156,6 +160,11 @@
   font-size: 12px;
 }
 
+.card__subtitle--large {
+  font-size: 18px;
+  padding-bottom: $spacing-vertical * 1/3;
+}
+
 .card__subtitle-price {
   padding-top: $spacing-vertical * 1/3;
 }
@@ -241,6 +250,10 @@
   font-size: calc(var(--font-size-subtext-multiple) * 0.8em);
 }
 
+.card__subtext--large {
+  font-size: calc(var(--font-size-subtext-multiple) * 0.9em);
+}
+
 .card__actions {
   margin-top: $spacing-vertical * 2/3;
   display: flex;
@@ -308,10 +321,6 @@
   width: 100%;
   padding-top: $spacing-vertical;
 
-  &:first-of-type {
-    padding-top: 0;
-  }
-
   &:last-of-type {
     padding-bottom: $spacing-vertical * 2/3;
   }

src/renderer/scss/component/_file-list.scss

@@ -12,7 +12,7 @@
 }
 
 .file-list__header {
-  margin-top: $spacing-vertical * 4/3;
+  padding-top: $spacing-vertical * 4/3;
   font-size: 24px;
 
   .tooltip {
@@ -49,6 +49,13 @@
   }
 }
 
+.file-tile.file-tile--large {
+  .card__media {
+    height: var(--file-tile-media-height-large);
+    flex: 0 0 var(--file-tile-media-width-large);
+  }
+}
+
 .file-tile__info {
   display: flex;
   flex-direction: column;

src/renderer/scss/component/_search.scss

@@ -85,7 +85,17 @@
   background-color: var(--color-secondary);
 }
 
+.search__top {
+  padding: 0 $spacing-width $spacing-width;
+  background-color: var(--card-bg);
+}
+
+.search__content {
+  padding: $spacing-width;
+}
+
 .search__results {
+  margin-top: -$spacing-width;
   padding-bottom: $spacing-vertical;
   flex-flow: wrap column;
 

src/renderer/types/claim.js

@@ -32,10 +32,10 @@ export type Claim = {
   valid_at_height: number,
   value: ?{
     publisherSignature: ?{
-      certificateId: ?string,
+      certificateId: string,
     },
     stream: {
-      metadata: ?Metadata,
+      metadata: Metadata,
     },
   },
 };