default to search

src/renderer/component/fileTile/view.jsx

@@ -28,7 +28,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 +36,7 @@ class FileTile extends React.PureComponent<Props> {
     showUri: false,
     showLocal: false,
     displayDescription: true,
+    size: 'regular',
   };
 
   componentDidMount() {
@@ -65,7 +66,7 @@ class FileTile extends React.PureComponent<Props> {
       hideNoResult,
       displayHiddenMessage,
       displayDescription,
-      small,
+      size,
     } = this.props;
 
     const shouldHide = !claimIsMine && obscureNsfw && metadata && metadata.nsfw;
@@ -98,7 +99,8 @@ class FileTile extends React.PureComponent<Props> {
     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,20 +109,31 @@ 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">
@@ -133,8 +146,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 && (

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}

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

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

@@ -35,7 +35,7 @@ export type Claim = {
       certificateId: ?string,
     },
     stream: {
-      metadata: ?Metadata,
+      metadata: Metadata,
     },
   },
 };