From f23bc00af6bcc7b12ad84729a97bc65d6874441d Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Mon, 13 Aug 2018 23:52:09 -0400
Subject: [PATCH 1/3] default to search
---
src/renderer/component/fileTile/view.jsx | 38 ++++++++++++++-----
.../component/recommendedContent/view.jsx | 13 ++-----
src/renderer/page/search/view.jsx | 34 ++++++-----------
src/renderer/scss/_gui.scss | 1 +
src/renderer/scss/_vars.scss | 2 +
src/renderer/scss/component/_card.scss | 17 +++++++--
src/renderer/scss/component/_file-list.scss | 9 ++++-
src/renderer/scss/component/_search.scss | 10 +++++
src/renderer/types/claim.js | 2 +-
9 files changed, 78 insertions(+), 48 deletions(-)
diff --git a/src/renderer/component/fileTile/view.jsx b/src/renderer/component/fileTile/view.jsx
index acaf49791..5a05aeda4 100644
--- a/src/renderer/component/fileTile/view.jsx
+++ b/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 && (
diff --git a/src/renderer/component/recommendedContent/view.jsx b/src/renderer/component/recommendedContent/view.jsx
index a713eaa26..5248d3859 100644
--- 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}
diff --git a/src/renderer/page/search/view.jsx b/src/renderer/page/search/view.jsx
index 5db8016ee..4b2497797 100644
--- 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>
);
}
diff --git a/src/renderer/scss/_gui.scss b/src/renderer/scss/_gui.scss
index 33899285f..74e51a715 100644
--- 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;
}
diff --git a/src/renderer/scss/_vars.scss b/src/renderer/scss/_vars.scss
index 64fa23cfe..ce5caddf4 100644
--- 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;
diff --git a/src/renderer/scss/component/_card.scss b/src/renderer/scss/component/_card.scss
index 57f107813..c8fcf54b2 100644
--- 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;
}
diff --git a/src/renderer/scss/component/_file-list.scss b/src/renderer/scss/component/_file-list.scss
index ee2583015..bff379d27 100644
--- 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;
diff --git a/src/renderer/scss/component/_search.scss b/src/renderer/scss/component/_search.scss
index 0bc2b341b..fb61a21e5 100644
--- 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;
diff --git a/src/renderer/types/claim.js b/src/renderer/types/claim.js
index ec060f2e6..1ed0d64c9 100644
--- a/src/renderer/types/claim.js
+++ b/src/renderer/types/claim.js
@@ -35,7 +35,7 @@ export type Claim = {
certificateId: ?string,
},
stream: {
- metadata: ?Metadata,
+ metadata: Metadata,
},
},
};
From 5a905fe174c4d0e34108cbe40fec85609e202a5a Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Tue, 14 Aug 2018 17:06:55 -0400
Subject: [PATCH 2/3] use search selector and add file tile channel links
---
src/renderer/component/fileListSearch/view.jsx | 2 +-
src/renderer/component/fileTile/view.jsx | 5 ++---
src/renderer/component/wunderbar/index.js | 2 ++
src/renderer/types/claim.js | 2 +-
4 files changed, 6 insertions(+), 5 deletions(-)
diff --git a/src/renderer/component/fileListSearch/view.jsx b/src/renderer/component/fileListSearch/view.jsx
index baf812d22..b68ebb4de 100644
--- 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} />)
diff --git a/src/renderer/component/fileTile/view.jsx b/src/renderer/component/fileTile/view.jsx
index 5a05aeda4..100d90f55 100644
--- 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,
@@ -90,10 +91,8 @@ 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 : (
@@ -137,7 +136,7 @@ class FileTile extends React.PureComponent<Props> {
})}
>
<span className="file-tile__channel">
- {showUri ? uri : channel || __('Anonymous')}
+ {showUri ? uri : <UriIndicator uri={uri} link />}
</span>
</div>
<div className="card__file-properties">
diff --git a/src/renderer/component/wunderbar/index.js b/src/renderer/component/wunderbar/index.js
index 27a617452..1bbcd3b26 100644
--- 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),
};
};
diff --git a/src/renderer/types/claim.js b/src/renderer/types/claim.js
index 1ed0d64c9..d45ee3bf3 100644
--- a/src/renderer/types/claim.js
+++ b/src/renderer/types/claim.js
@@ -32,7 +32,7 @@ export type Claim = {
valid_at_height: number,
value: ?{
publisherSignature: ?{
- certificateId: ?string,
+ certificateId: string,
},
stream: {
metadata: Metadata,
From 82d0a7831009f24de8b1fca1bcc411b77e2638bd Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Mon, 20 Aug 2018 14:59:12 -0400
Subject: [PATCH 3/3] update lbry-redux
---
package.json | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/package.json b/package.json
index f24ee0ac3..433466551 100644
--- 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",