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

Merge pull request #148 from lbryio/published-file-tile-fixes

Browse source 
Fix bugs in display of published files
This commit is contained in:
Jeremy Kauffman 2017-01-30 12:26:39 -05:00 • committed by GitHub
commit e97a81e7d5
2 changed files with 33 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
js/component/file-actions.js
View file

@ -232,6 +232,7 @@ export let FileActions = React.createClass({
return { return {
available: true, available: true,
forceShowActions: false, forceShowActions: false,
fileInfo: null,
} }
}, },
onShowFileActionsRowClicked: function() { onShowFileActionsRowClicked: function() {
@ -239,8 +240,14 @@ export let FileActions = React.createClass({
forceShowActions: true, forceShowActions: true,
}); });
}, },
onFileInfoUpdate: function(fileInfo) {
this.setState({
fileInfo: fileInfo,
});
},
componentDidMount: function() { componentDidMount: function() {
this._isMounted = true; this._isMounted = true;
this._fileInfoSubscribeId = lbry.fileInfoSubscribe(this.props.sdHash, this.onFileInfoUpdate);
lbry.getPeersForBlobHash(this.props.sdHash, (peers) => { lbry.getPeersForBlobHash(this.props.sdHash, (peers) => {
if (!this._isMounted) { if (!this._isMounted) {
return; return;
@ -255,20 +262,25 @@ export let FileActions = React.createClass({
this._isMounted = false; this._isMounted = false;
}, },
render: function() { render: function() {
const fileInfo = this.state.fileInfo;
if (fileInfo === null) {
return null;
}
return (<section className="file-actions"> return (<section className="file-actions">
{ {
this.state.available || this.state.forceShowActions ? fileInfo || this.state.available || this.state.forceShowActions
<FileActionsRow sdHash={this.props.sdHash} metadata={this.props.metadata} streamName={this.props.streamName} /> : ? <FileActionsRow sdHash={this.props.sdHash} metadata={this.props.metadata} streamName={this.props.streamName} />
(<div> : <div>
<div className="button-container empty">This file is not currently available.</div> <div className="button-container empty">This file is not currently available.</div>
<div className="button-container"> <div className="button-container">
<ToolTip label="Why?" <ToolTip label="Why?"
body="The content on LBRY is hosted by its users. It appears there are no users connected that have this file at the moment." /> body="The content on LBRY is hosted by its users. It appears there are no users connected that have this file at the moment." />
</div> </div>
<div className="button-container"> <div className="button-container">
<Link label="Try Anyway" onClick={this.onShowFileActionsRowClicked} /> <Link label="Try Anyway" onClick={this.onShowFileActionsRowClicked} />
</div> </div>
</div>) </div>
} }
</section>); </section>);
} }

15
js/component/file-tile.js
View file

@ -113,20 +113,21 @@ export let FileTileStream = React.createClass({
return null; return null;
} }
const metadata = this.props.metadata || {}, const metadata = this.props.metadata;
obscureNsfw = this.props.obscureNsfw && metadata.nsfw, const isConfirmed = typeof metadata == 'object';
title = metadata.title ? metadata.title : ('lbry://' + this.props.name); const title = isConfirmed ? metadata.title : this.props.name;
const obscureNsfw = this.props.obscureNsfw && isConfirmed && metadata.nsfw;
return ( return (
<section className={ 'file-tile card ' + (obscureNsfw ? 'card-obscured ' : '') } onMouseEnter={this.handleMouseOver} onMouseLeave={this.handleMouseOut}> <section className={ 'file-tile card ' + (obscureNsfw ? 'card-obscured ' : '') } onMouseEnter={this.handleMouseOver} onMouseLeave={this.handleMouseOut}>
<div className={"row-fluid card-content file-tile__row"}> <div className={"row-fluid card-content file-tile__row"}>
<div className="span3"> <div className="span3">
<a href={'/?show=' + this.props.name}><Thumbnail className="file-tile__thumbnail" src={metadata.thumbnail} alt={'Photo for ' + (title || this.props.name)} /></a> <a href={'/?show=' + this.props.name}><Thumbnail className="file-tile__thumbnail" src={metadata.thumbnail} alt={`Photo for ${title}`} /></a>
</div> </div>
<div className="span9"> <div className="span9">
{ !this.props.hidePrice { !this.props.hidePrice
? <FilePrice name={this.props.name} /> ? <FilePrice name={this.props.name} />
: null} : null}
<div className="meta"><a href={'/?show=' + this.props.name}>lbry://{this.props.name}</a></div> <div className="meta"><a href={'/?show=' + this.props.name}>{isConfirmed ? metadata.title : ('lbry://' + this.props.name)}</a></div>
<h3 className="file-tile__title"> <h3 className="file-tile__title">
<a href={'/?show=' + this.props.name}> <a href={'/?show=' + this.props.name}>
<TruncatedText lines={1}> <TruncatedText lines={1}>
@ -137,7 +138,9 @@ export let FileTileStream = React.createClass({
<FileActions streamName={this.props.name} sdHash={this.props.sdHash} metadata={metadata} /> <FileActions streamName={this.props.name} sdHash={this.props.sdHash} metadata={metadata} />
<p className="file-tile__description"> <p className="file-tile__description">
<TruncatedText lines={3}> <TruncatedText lines={3}>
{metadata.description} {isConfirmed
? metadata.description
: <span className="empty">This file is pending confirmation.</span>}
</TruncatedText> </TruncatedText>
</p> </p>
</div> </div>