LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

fix some minor things with search

Browse source
This commit is contained in:
Jeremy Kauffman 2017-05-08 18:22:27 -04:00
parent c0053363ff
commit e4ca14aa47
12 changed files with 158 additions and 262 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
ui/js/component/fileCardStream/index.js → ui/js/component/fileCard/index.js
View file

@ -20,7 +20,7 @@ import {
import { import {
makeSelectResolvingUri, makeSelectResolvingUri,
} from 'selectors/content' } from 'selectors/content'
import FileCardStream from './view' import FileCard from './view'
const makeSelect = () => { const makeSelect = () => {
const selectClaimForUri = makeSelectClaimForUri() const selectClaimForUri = makeSelectClaimForUri()
@ -47,4 +47,4 @@ const perform = (dispatch) => ({
navigate: (path, params) => dispatch(doNavigate(path, params)), navigate: (path, params) => dispatch(doNavigate(path, params)),
}) })
export default connect(makeSelect, perform)(FileCardStream) export default connect(makeSelect, perform)(FileCard)

5
ui/js/component/fileCardStream/view.jsx → ui/js/component/fileCard/view.jsx
View file

@ -6,7 +6,7 @@ import {Thumbnail, TruncatedText,} from 'component/common';
import FilePrice from 'component/filePrice' import FilePrice from 'component/filePrice'
import UriIndicator from 'component/uriIndicator'; import UriIndicator from 'component/uriIndicator';
class FileCardStream extends React.Component { class FileCard extends React.Component {
constructor(props) { constructor(props) {
super(props) super(props)
this._fileInfoSubscribeId = null this._fileInfoSubscribeId = null
@ -67,7 +67,6 @@ class FileCardStream extends React.Component {
const isConfirmed = !!metadata; const isConfirmed = !!metadata;
const title = isConfirmed ? metadata.title : uri; const title = isConfirmed ? metadata.title : uri;
const obscureNsfw = this.props.obscureNsfw && isConfirmed && metadata.nsfw; const obscureNsfw = this.props.obscureNsfw && isConfirmed && metadata.nsfw;
const primaryUrl = '/show?uri=' + uri;
let description = "" let description = ""
if (isConfirmed) { if (isConfirmed) {
description = metadata.description description = metadata.description
@ -109,4 +108,4 @@ class FileCardStream extends React.Component {
} }
} }
export default FileCardStream export default FileCard

6
ui/js/component/fileList/view.jsx
View file

@ -3,7 +3,7 @@ import lbry from 'lbry.js';
import lbryuri from 'lbryuri.js'; import lbryuri from 'lbryuri.js';
import Link from 'component/link'; import Link from 'component/link';
import {FormField} from 'component/form.js'; import {FormField} from 'component/form.js';
import FileTileStream from 'component/fileTileStream'; import FileTile from 'component/fileTile';
import rewards from 'rewards.js'; import rewards from 'rewards.js';
import lbryio from 'lbryio.js'; import lbryio from 'lbryio.js';
import {BusyMessage, Thumbnail} from 'component/common.js'; import {BusyMessage, Thumbnail} from 'component/common.js';
@ -71,7 +71,7 @@ class FileList extends React.Component {
contentName: fileInfo.name, contentName: fileInfo.name,
channelName: fileInfo.channel_name, channelName: fileInfo.channel_name,
}) })
content.push(<FileTileStream key={uri} uri={uri} hidePrice={hidePrices} />) content.push(<FileTile key={uri} uri={uri} hidePrice={hidePrices} />)
}) })
return ( return (
<section> <section>
@ -162,7 +162,7 @@ class FileList extends React.Component {
// const uri = lbryuri.build({contentName: name, channelName: channel_name}); // const uri = lbryuri.build({contentName: name, channelName: channel_name});
// seenUris[name] = true; // seenUris[name] = true;
// content.push(<FileTileStream key={outpoint} uri={uri} hideOnRemove={true} />) // content.push(<FileTile key={outpoint} uri={uri} hideOnRemove={true} />)
// } // }
// return ( // return (

28
ui/js/component/fileTile/index.js
View file

@ -2,26 +2,54 @@ import React from 'react'
import { import {
connect connect
} from 'react-redux' } from 'react-redux'
import {
doNavigate,
} from 'actions/app'
import { import {
makeSelectClaimForUri, makeSelectClaimForUri,
makeSelectSourceForUri,
makeSelectMetadataForUri,
} from 'selectors/claims' } from 'selectors/claims'
import { import {
makeSelectFileInfoForUri, makeSelectFileInfoForUri,
} from 'selectors/file_info' } from 'selectors/file_info'
import {
makeSelectFetchingAvailabilityForUri,
makeSelectAvailabilityForUri,
} from 'selectors/availability'
import {
selectObscureNsfw,
} from 'selectors/app'
import {
makeSelectResolvingUri,
} from 'selectors/content'
import FileTile from './view' import FileTile from './view'
const makeSelect = () => { const makeSelect = () => {
const selectClaimForUri = makeSelectClaimForUri() const selectClaimForUri = makeSelectClaimForUri()
const selectFileInfoForUri = makeSelectFileInfoForUri() const selectFileInfoForUri = makeSelectFileInfoForUri()
const selectFetchingAvailabilityForUri = makeSelectFetchingAvailabilityForUri()
const selectAvailabilityForUri = makeSelectAvailabilityForUri()
const selectMetadataForUri = makeSelectMetadataForUri()
const selectSourceForUri = makeSelectSourceForUri()
const selectResolvingUri = makeSelectResolvingUri()
const select = (state, props) => ({ const select = (state, props) => ({
claim: selectClaimForUri(state, props), claim: selectClaimForUri(state, props),
fileInfo: selectFileInfoForUri(state, props), fileInfo: selectFileInfoForUri(state, props),
fetchingAvailability: selectFetchingAvailabilityForUri(state, props),
selectAvailabilityForUri: selectAvailabilityForUri(state, props),
obscureNsfw: selectObscureNsfw(state),
metadata: selectMetadataForUri(state, props),
source: selectSourceForUri(state, props),
isResolvingUri: selectResolvingUri(state, props),
}) })
return select return select
} }
const perform = (dispatch) => ({ const perform = (dispatch) => ({
navigate: (path, params) => dispatch(doNavigate(path, params))
}) })
export default connect(makeSelect, perform)(FileTile) export default connect(makeSelect, perform)(FileTile)

118
ui/js/component/fileTile/view.jsx
View file

@ -2,29 +2,119 @@ import React from 'react';
import lbry from 'lbry.js'; import lbry from 'lbry.js';
import lbryuri from 'lbryuri.js'; import lbryuri from 'lbryuri.js';
import Link from 'component/link'; import Link from 'component/link';
import FileCardStream from 'component/fileCardStream'
import FileTileStream from 'component/fileTileStream'
import FileActions from 'component/fileActions'; import FileActions from 'component/fileActions';
import {Thumbnail, TruncatedText,} from 'component/common.js';
import FilePrice from 'component/filePrice'
import UriIndicator from 'component/uriIndicator';
/*should be merged into FileTile once FileTile is refactored to take a single id*/
class FileTile extends React.Component { class FileTile extends React.Component {
constructor(props) {
super(props)
this._fileInfoSubscribeId = null
this._isMounted = null
this.state = {
showNsfwHelp: false,
isHidden: false,
}
}
componentDidMount() {
this._isMounted = true;
if (this.props.hideOnRemove) {
this._fileInfoSubscribeId = lbry.fileInfoSubscribe(this.props.outpoint, this.onFileInfoUpdate);
}
}
componentWillUnmount() {
if (this._fileInfoSubscribeId) {
lbry.fileInfoUnsubscribe(this.props.outpoint, this._fileInfoSubscribeId);
}
}
onFileInfoUpdate(fileInfo) {
if (!fileInfo && this._isMounted && this.props.hideOnRemove) {
this.setState({
isHidden: true
});
}
}
handleMouseOver() {
if (this.props.obscureNsfw && this.props.metadata && this.props.metadata.nsfw) {
this.setState({
showNsfwHelp: true,
});
}
}
handleMouseOut() {
if (this.state.showNsfwHelp) {
this.setState({
showNsfwHelp: false,
});
}
}
render() { render() {
if (this.state.isHidden) {
return null;
}
const { const {
displayStyle, metadata,
uri, isResolvingUri,
claim, navigate,
hidePrice,
} = this.props } = this.props
if(!claim) { const uri = lbryuri.normalize(this.props.uri);
if (displayStyle == 'card') { const isConfirmed = !!metadata;
return <FileCardStream uri={uri} /> const title = isConfirmed ? metadata.title : uri;
} const obscureNsfw = this.props.obscureNsfw && isConfirmed && metadata.nsfw;
return null
let description = ""
if (isConfirmed) {
description = metadata.description
} else if (isResolvingUri) {
description = "Loading..."
} else {
description = <span className="empty">This file is pending confirmation</span>
} }
return displayStyle == 'card' ? return (
<FileCardStream uri={uri} /> <section className={ 'file-tile card ' + (obscureNsfw ? 'card--obscured ' : '') } onMouseEnter={this.handleMouseOver.bind(this)} onMouseLeave={this.handleMouseOut.bind(this)}>
: <Link onClick={() => navigate('/show', { uri })} className="card__link">
<FileTileStream uri={uri} key={uri} /> <div className="card__inner file-tile__row">
<div className="card__media"
style={{ backgroundImage: "url('" + (metadata && metadata.thumbnail ? metadata.thumbnail : lbry.imagePath('default-thumb.svg')) + "')" }}>
</div>
<div className="file-tile__content">
<div className="card__title-identity">
{ !hidePrice ? <span style={{float: "right"}}><FilePrice uri={uri} /></span> : null}
<h5 title={title}><TruncatedText lines={1}>{title}</TruncatedText></h5>
<div className="card__subtitle">
<UriIndicator uri={uri} />
</div>
</div>
<div className="card__content card__subtext">
<TruncatedText lines={3}>
{description}
</TruncatedText>
</div>
</div>
{this.state.showNsfwHelp && this.state.hovered
? <div className='card-overlay'>
<p>
This content is Not Safe For Work.
To view adult content, please change your <Link className="button-text" onClick={() => navigate('/settings')} label="Settings" />.
</p>
</div>
: null}
</div>
</Link>
</section>
);
} }
} }

55
ui/js/component/fileTileStream/index.js
View file

@ -1,55 +0,0 @@
import React from 'react'
import {
connect
} from 'react-redux'
import {
doNavigate,
} from 'actions/app'
import {
makeSelectClaimForUri,
makeSelectSourceForUri,
makeSelectMetadataForUri,
} from 'selectors/claims'
import {
makeSelectFileInfoForUri,
} from 'selectors/file_info'
import {
makeSelectFetchingAvailabilityForUri,
makeSelectAvailabilityForUri,
} from 'selectors/availability'
import {
selectObscureNsfw,
} from 'selectors/app'
import {
makeSelectResolvingUri,
} from 'selectors/content'
import FileTileStream from './view'
const makeSelect = () => {
const selectClaimForUri = makeSelectClaimForUri()
const selectFileInfoForUri = makeSelectFileInfoForUri()
const selectFetchingAvailabilityForUri = makeSelectFetchingAvailabilityForUri()
const selectAvailabilityForUri = makeSelectAvailabilityForUri()
const selectMetadataForUri = makeSelectMetadataForUri()
const selectSourceForUri = makeSelectSourceForUri()
const selectResolvingUri = makeSelectResolvingUri()
const select = (state, props) => ({
claim: selectClaimForUri(state, props),
fileInfo: selectFileInfoForUri(state, props),
fetchingAvailability: selectFetchingAvailabilityForUri(state, props),
selectAvailabilityForUri: selectAvailabilityForUri(state, props),
obscureNsfw: selectObscureNsfw(state),
metadata: selectMetadataForUri(state, props),
source: selectSourceForUri(state, props),
isResolvingUri: selectResolvingUri(state, props),
})
return select
}
const perform = (dispatch) => ({
navigate: (path, params) => dispatch(doNavigate(path, params))
})
export default connect(makeSelect, perform)(FileTileStream)

165
ui/js/component/fileTileStream/view.jsx
View file

@ -1,165 +0,0 @@
import React from 'react';
import lbry from 'lbry.js';
import lbryuri from 'lbryuri.js';
import Link from 'component/link';
import FileActions from 'component/fileActions';
import {Thumbnail, TruncatedText,} from 'component/common.js';
import FilePrice from 'component/filePrice'
import UriIndicator from 'component/uriIndicator';
/*should be merged into FileTile once FileTile is refactored to take a single id*/
class FileTileStream extends React.Component {
constructor(props) {
super(props)
this._fileInfoSubscribeId = null
this._isMounted = null
this.state = {
showNsfwHelp: false,
isHidden: false,
}
}
componentDidMount() {
this._isMounted = true;
if (this.props.hideOnRemove) {
this._fileInfoSubscribeId = lbry.fileInfoSubscribe(this.props.outpoint, this.onFileInfoUpdate);
}
}
componentWillUnmount() {
if (this._fileInfoSubscribeId) {
lbry.fileInfoUnsubscribe(this.props.outpoint, this._fileInfoSubscribeId);
}
}
onFileInfoUpdate(fileInfo) {
if (!fileInfo && this._isMounted && this.props.hideOnRemove) {
this.setState({
isHidden: true
});
}
}
handleMouseOver() {
if (this.props.obscureNsfw && this.props.metadata && this.props.metadata.nsfw) {
this.setState({
showNsfwHelp: true,
});
}
}
handleMouseOut() {
if (this.state.showNsfwHelp) {
this.setState({
showNsfwHelp: false,
});
}
}
render() {
if (this.state.isHidden) {
return null;
}
const {
metadata,
isResolvingUri,
navigate,
hidePrice,
} = this.props
const uri = lbryuri.normalize(this.props.uri);
const isConfirmed = !!metadata;
const title = isConfirmed ? metadata.title : uri;
const obscureNsfw = this.props.obscureNsfw && isConfirmed && metadata.nsfw;
let description = ""
if (isConfirmed) {
description = metadata.description
} else if (isResolvingUri) {
description = "Loading..."
} else {
description = <span className="empty">This file is pending confirmation</span>
}
return (
<section className={ 'card card--small card--link ' + (obscureNsfw ? 'card--obscured ' : '') } onMouseEnter={this.handleMouseOver.bind(this)} onMouseLeave={this.handleMouseOut.bind(this)}>
<div className="card__inner">
<Link onClick={() => navigate('/show', { uri })} className="card__link">
<div className="card__title-identity">
<h5 title={title}><TruncatedText lines={1}>{title}</TruncatedText></h5>
<div className="card__subtitle">
{ !this.props.hidePrice ? <span style={{float: "right"}}><FilePrice uri={uri} /></span> : null}
<UriIndicator uri={uri} />
</div>
</div>
{ metadata && metadata.thumbnail ?
<div className="card__media" style={{ backgroundImage: "url('" + metadata.thumbnail + "')" }}></div> :
<div className="card__media" style={{ backgroundImage: "url('" + lbry.imagePath('default-thumb.svg') + "')" }}></div>
}
<div className="card__content card__subtext card__subtext--two-lines">
<TruncatedText lines={2}>
{isConfirmed
? metadata.description
: <span className="empty">This file is pending confirmation.</span>}
</TruncatedText>
</div>
</Link>
{this.state.showNsfwHelp && this.state.hovered
? <div className='card-overlay'>
<p>
This content is Not Safe For Work.
To view adult content, please change your <Link className="button-text" onClick={() => navigate('/settings')} label="Settings" />.
</p>
</div>
: null}
</div>
</section>
// <section className={ 'file-tile card ' + (obscureNsfw ? 'card--obscured ' : '') } onMouseEnter={this.handleMouseOver.bind(this)} onMouseLeave={this.handleMouseOut.bind(this)}>
// <div className={"row-fluid card__inner file-tile__row"}>
// <div className="span3 file-tile__thumbnail-container">
// <Link onClick={() => navigate('/show', { uri })}>
// {metadata && metadata.thumbnail ?
// <Thumbnail key={this.props.uri} className="file-tile__thumbnail" src={metadata.thumbnail} alt={'Photo for ' + this.props.uri} />
// :
// <Thumbnail className="file-tile__thumbnail" alt={'Photo for ' + this.props.uri} />
// }
// </Link>
// </div>
// <div className="span9">
// <div className="card__title-primary">
// { !this.props.hidePrice
// ? <FilePrice uri={this.props.uri} />
// : null}
// <div className="meta"><Link onClick={() => navigate('/show', { uri })}>{uri}</Link></div>
// <h3>
// <Link onClick={() => navigate('/show', { uri })} title={title}>
// <TruncatedText lines={1}>
// {title}
// </TruncatedText>
// </Link>
// </h3>
// </div>
// <div className="card__actions">
// </div>
// <div className="card__content">
// <p className="file-tile__description">
// <TruncatedText lines={2}>{description}</TruncatedText>
// </p>
// </div>
// </div>
// </div>
// {this.state.showNsfwHelp
// ? <div className='card-overlay'>
// <p>
// This content is Not Safe For Work.
// To view adult content, please change your <Link className="button-text" onClick={() => navigate('/settings')} label="Settings" />.
// </p>
// </div>
// : null}
// </section>
);
}
}
export default FileTileStream

2
ui/js/component/tooltip.js
View file

@ -34,3 +34,5 @@ export let ToolTip = React.createClass({
); );
} }
}); });
export default ToolTip

7
ui/js/page/discover/view.jsx
View file

@ -1,9 +1,8 @@
import React from 'react'; import React from 'react';
import lbryio from 'lbryio.js'; import lbryio from 'lbryio.js';
import lbryuri from 'lbryuri' import lbryuri from 'lbryuri'
import FileTile from 'component/fileTile'; import FileCard from 'component/fileCard';
import { FileTileStream } from 'component/fileTileStream' import ToolTip from 'component/tooltip.js';
import {ToolTip} from 'component/tooltip.js';
const communityCategoryToolTipText = ('Community Content is a public space where anyone can share content with the ' + const communityCategoryToolTipText = ('Community Content is a public space where anyone can share content with the ' +
'rest of the LBRY community. Bid on the names "one," "two," "three," "four" and ' + 'rest of the LBRY community. Bid on the names "one," "two," "three," "four" and ' +
@ -19,7 +18,7 @@ const FeaturedCategory = (props) => {
<h3 className="card-row__header">{category} <h3 className="card-row__header">{category}
{category && category.match(/^community/i) && <ToolTip label="What's this?" body={communityCategoryToolTipText} className="tooltip--header" />} {category && category.match(/^community/i) && <ToolTip label="What's this?" body={communityCategoryToolTipText} className="tooltip--header" />}
</h3> </h3>
{names && names.map(name => <FileTile key={name} displayStyle="card" uri={lbryuri.normalize(name)} />)} {names && names.map(name => <FileCard key={name} displayStyle="card" uri={lbryuri.normalize(name)} />)}
</div> </div>
} }

2
ui/js/page/fileListDownloaded/view.jsx
View file

@ -3,7 +3,7 @@ import lbry from 'lbry.js';
import lbryuri from 'lbryuri.js'; import lbryuri from 'lbryuri.js';
import Link from 'component/link'; import Link from 'component/link';
import {FormField} from 'component/form.js'; import {FormField} from 'component/form.js';
import {FileTileStream} from 'component/fileTile'; import {FileTile} from 'component/fileTile';
import rewards from 'rewards.js'; import rewards from 'rewards.js';
import lbryio from 'lbryio.js'; import lbryio from 'lbryio.js';
import {BusyMessage, Thumbnail} from 'component/common.js'; import {BusyMessage, Thumbnail} from 'component/common.js';

2
ui/js/page/fileListPublished/view.jsx
View file

@ -3,7 +3,7 @@ import lbry from 'lbry.js';
import lbryuri from 'lbryuri.js'; import lbryuri from 'lbryuri.js';
import Link from 'component/link'; import Link from 'component/link';
import {FormField} from 'component/form.js'; import {FormField} from 'component/form.js';
import {FileTileStream} from 'component/fileTile'; import {FileTile} from 'component/fileTile';
import rewards from 'rewards.js'; import rewards from 'rewards.js';
import lbryio from 'lbryio.js'; import lbryio from 'lbryio.js';
import {BusyMessage, Thumbnail} from 'component/common.js'; import {BusyMessage, Thumbnail} from 'component/common.js';

16
ui/js/page/search/view.jsx
View file

@ -4,7 +4,6 @@ import lbryio from 'lbryio';
import lbryuri from 'lbryuri'; import lbryuri from 'lbryuri';
import lighthouse from 'lighthouse'; import lighthouse from 'lighthouse';
import FileTile from 'component/fileTile' import FileTile from 'component/fileTile'
import FileTileStream from 'component/fileTileStream'
import Link from 'component/link' import Link from 'component/link'
import {ToolTip} from 'component/tooltip.js'; import {ToolTip} from 'component/tooltip.js';
import {BusyMessage} from 'component/common.js'; import {BusyMessage} from 'component/common.js';
@ -17,7 +16,7 @@ const SearchNoResults = (props) => {
return <section> return <section>
<span className="empty"> <span className="empty">
No one has checked anything in for {query} yet. No one has checked anything in for {query} yet. { ' ' }
<Link label="Be the first" onClick={() => navigate('/publish')} /> <Link label="Be the first" onClick={() => navigate('/publish')} />
</span> </span>
</section>; </section>;
@ -39,7 +38,7 @@ const SearchResultList = (props) => {
}); });
rows.push( rows.push(
<FileTileStream key={uri} uri={uri} /> <FileTile key={uri} uri={uri} />
); );
} }
return ( return (
@ -49,13 +48,12 @@ const SearchResultList = (props) => {
const SearchResults = (props) => { const SearchResults = (props) => {
const { const {
searching, isSearching,
results, results
query,
} = props } = props
return ( return (
searching ? isSearching ?
<BusyMessage message="Looking up the Dewey Decimals" /> : <BusyMessage message="Looking up the Dewey Decimals" /> :
(results && results.length) ? (results && results.length) ?
<SearchResultList {...props} /> : <SearchResultList {...props} /> :
@ -68,7 +66,7 @@ const SearchPage = (props) => {
const { const {
query, query,
} = props } = props
// <SearchResults {...props} />
return ( return (
<main className="main--single-column"> <main className="main--single-column">
{ isValidUri(query) ? { isValidUri(query) ?
@ -84,7 +82,7 @@ const SearchPage = (props) => {
Search Results for {query} Search Results for {query}
<ToolTip label="?" body="These search results are provided by LBRY, Inc." className="tooltip--header" /> <ToolTip label="?" body="These search results are provided by LBRY, Inc." className="tooltip--header" />
</h3> </h3>
<SearchResults {...props} />
</section> </section>
</main> </main>
) )