Merge pull request #148 from lbryio/published-file-tile-fixes
Fix bugs in display of published files
This commit is contained in:
commit
e97a81e7d5
2 changed files with 33 additions and 18 deletions
|
@ -232,6 +232,7 @@ export let FileActions = React.createClass({
|
|||
return {
|
||||
available: true,
|
||||
forceShowActions: false,
|
||||
fileInfo: null,
|
||||
}
|
||||
},
|
||||
onShowFileActionsRowClicked: function() {
|
||||
|
@ -239,8 +240,14 @@ export let FileActions = React.createClass({
|
|||
forceShowActions: true,
|
||||
});
|
||||
},
|
||||
onFileInfoUpdate: function(fileInfo) {
|
||||
this.setState({
|
||||
fileInfo: fileInfo,
|
||||
});
|
||||
},
|
||||
componentDidMount: function() {
|
||||
this._isMounted = true;
|
||||
this._fileInfoSubscribeId = lbry.fileInfoSubscribe(this.props.sdHash, this.onFileInfoUpdate);
|
||||
lbry.getPeersForBlobHash(this.props.sdHash, (peers) => {
|
||||
if (!this._isMounted) {
|
||||
return;
|
||||
|
@ -255,20 +262,25 @@ export let FileActions = React.createClass({
|
|||
this._isMounted = false;
|
||||
},
|
||||
render: function() {
|
||||
const fileInfo = this.state.fileInfo;
|
||||
if (fileInfo === null) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (<section className="file-actions">
|
||||
{
|
||||
this.state.available || this.state.forceShowActions ?
|
||||
<FileActionsRow sdHash={this.props.sdHash} metadata={this.props.metadata} streamName={this.props.streamName} /> :
|
||||
(<div>
|
||||
<div className="button-container empty">This file is not currently available.</div>
|
||||
<div className="button-container">
|
||||
<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." />
|
||||
</div>
|
||||
<div className="button-container">
|
||||
<Link label="Try Anyway" onClick={this.onShowFileActionsRowClicked} />
|
||||
</div>
|
||||
</div>)
|
||||
fileInfo || this.state.available || this.state.forceShowActions
|
||||
? <FileActionsRow sdHash={this.props.sdHash} metadata={this.props.metadata} streamName={this.props.streamName} />
|
||||
: <div>
|
||||
<div className="button-container empty">This file is not currently available.</div>
|
||||
<div className="button-container">
|
||||
<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." />
|
||||
</div>
|
||||
<div className="button-container">
|
||||
<Link label="Try Anyway" onClick={this.onShowFileActionsRowClicked} />
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</section>);
|
||||
}
|
||||
|
|
|
@ -113,20 +113,21 @@ export let FileTileStream = React.createClass({
|
|||
return null;
|
||||
}
|
||||
|
||||
const metadata = this.props.metadata || {},
|
||||
obscureNsfw = this.props.obscureNsfw && metadata.nsfw,
|
||||
title = metadata.title ? metadata.title : ('lbry://' + this.props.name);
|
||||
const metadata = this.props.metadata;
|
||||
const isConfirmed = typeof metadata == 'object';
|
||||
const title = isConfirmed ? metadata.title : this.props.name;
|
||||
const obscureNsfw = this.props.obscureNsfw && isConfirmed && metadata.nsfw;
|
||||
return (
|
||||
<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="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 className="span9">
|
||||
{ !this.props.hidePrice
|
||||
? <FilePrice name={this.props.name} />
|
||||
: 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">
|
||||
<a href={'/?show=' + this.props.name}>
|
||||
<TruncatedText lines={1}>
|
||||
|
@ -137,7 +138,9 @@ export let FileTileStream = React.createClass({
|
|||
<FileActions streamName={this.props.name} sdHash={this.props.sdHash} metadata={metadata} />
|
||||
<p className="file-tile__description">
|
||||
<TruncatedText lines={3}>
|
||||
{metadata.description}
|
||||
{isConfirmed
|
||||
? metadata.description
|
||||
: <span className="empty">This file is pending confirmation.</span>}
|
||||
</TruncatedText>
|
||||
</p>
|
||||
</div>
|
||||
|
|
Loading…
Add table
Reference in a new issue