Merge pull request #1875 from lbryio/search-ux

Search ux improvements
2018-08-20 14:59:41 -04:00 · 2018-08-20 14:59:41 -04:00 · db64a1ea31
commit db64a1ea31
parent 9844cbdaf6 82d0a78310
12 changed files with 85 additions and 54 deletions
--- a/package.json
+++ b/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",
--- a/src/renderer/component/fileListSearch/view.jsx
+++ b/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} />)
--- a/src/renderer/component/fileTile/view.jsx
+++ b/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--x-small': small,
+                  'card__title--file': size === 'regular',
+                  '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">
-                  <TruncatedText lines={3}>{description}</TruncatedText>
+                <div
+                  className={classnames('card__subtext', {
+                    'card__subtext--small': size !== 'small',
+                    'card__subtext--large': size === 'large',
+                  })}
+                >
+                  <TruncatedText lines={size === 'large' ? 4 : 3}>{description}</TruncatedText>
                </div>
              )}
              {!name && (
--- a/src/renderer/component/recommendedContent/view.jsx
+++ b/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 {
-        value: {
-          stream: {
-            metadata: { title },
-          },
-        },
-      } = claim;
-
+      const { title } = claim.value.stream.metadata;
      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}
--- a/src/renderer/component/wunderbar/index.js
+++ b/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),
  };
 };
--- a/src/renderer/page/search/view.jsx
+++ b/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>
-        <React.Fragment>
+      <Page noPadding>
+        {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>
-        {isURIValid(query) && (
-          <React.Fragment>
-            <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>
+          <FileListSearch query={query} />
+          <div className="help">{__('These search results are provided by LBRY, Inc.')}</div>
+        </div>
      </Page>
    );
  }
--- a/src/renderer/scss/_gui.scss
+++ b/src/renderer/scss/_gui.scss
@ -196,6 +196,7 @@ p {
 .main--no-padding {
  padding-left: 0;
  padding-right: 0;
+  padding-top: 0;
  margin: 0;
 }

--- a/src/renderer/scss/_vars.scss
+++ b/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;
--- a/src/renderer/scss/component/_card.scss
+++ b/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;
  }
--- a/src/renderer/scss/component/_file-list.scss
+++ b/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;
--- a/src/renderer/scss/component/_search.scss
+++ b/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;

--- a/src/renderer/types/claim.js
+++ b/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,
    },
  },
 };