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

Add new channel auth status indicator to file tiles

Browse source
This commit is contained in:
Alex Liebowitz 2017-04-08 02:34:51 -04:00
parent 3e2b675e7b
commit 461f5f95d9
3 changed files with 41 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
ui/js/component/file-actions.js
View file

@ -70,6 +70,7 @@ let FileActionsRow = React.createClass({
streamName: React.PropTypes.string, streamName: React.PropTypes.string,
outpoint: React.PropTypes.string.isRequired, outpoint: React.PropTypes.string.isRequired,
metadata: React.PropTypes.oneOfType([React.PropTypes.object, React.PropTypes.string]), metadata: React.PropTypes.oneOfType([React.PropTypes.object, React.PropTypes.string]),
contentType: React.PropTypes.string,
}, },
getInitialState: function() { getInitialState: function() {
return { return {
@ -197,7 +198,7 @@ let FileActionsRow = React.createClass({
return ( return (
<div> <div>
{this.props.metadata.content_type && this.props.metadata.content_type.startsWith('video/') {this.props.contentType && this.props.contentType.startsWith('video/')
? <WatchLink streamName={this.props.streamName} downloadStarted={!!this.state.fileInfo} /> ? <WatchLink streamName={this.props.streamName} downloadStarted={!!this.state.fileInfo} />
: null} : null}
{this.state.fileInfo !== null || this.state.fileInfo.isMine {this.state.fileInfo !== null || this.state.fileInfo.isMine
@ -236,6 +237,7 @@ export let FileActions = React.createClass({
streamName: React.PropTypes.string, streamName: React.PropTypes.string,
outpoint: React.PropTypes.string.isRequired, outpoint: React.PropTypes.string.isRequired,
metadata: React.PropTypes.oneOfType([React.PropTypes.object, React.PropTypes.string]), metadata: React.PropTypes.oneOfType([React.PropTypes.object, React.PropTypes.string]),
contentType: React.PropTypes.string,
}, },
getInitialState: function() { getInitialState: function() {
return { return {
@ -289,7 +291,8 @@ export let FileActions = React.createClass({
return (<section className="file-actions"> return (<section className="file-actions">
{ {
fileInfo || this.state.available || this.state.forceShowActions fileInfo || this.state.available || this.state.forceShowActions
? <FileActionsRow outpoint={this.props.outpoint} metadata={this.props.metadata} streamName={this.props.streamName} /> ? <FileActionsRow outpoint={this.props.outpoint} metadata={this.props.metadata} streamName={this.props.streamName}
contentType={this.props.contentType} />
: <div> : <div>
<div className="button-set-item empty">This file is not currently available.</div> <div className="button-set-item empty">This file is not currently available.</div>
<ToolTip label="Why?" <ToolTip label="Why?"

47
ui/js/component/file-tile.js
View file

@ -3,12 +3,13 @@ import lbry from '../lbry.js';
import {Link} from '../component/link.js'; import {Link} from '../component/link.js';
import {FileActions} from '../component/file-actions.js'; import {FileActions} from '../component/file-actions.js';
import {Thumbnail, TruncatedText, CreditAmount} from '../component/common.js'; import {Thumbnail, TruncatedText, CreditAmount} from '../component/common.js';
import ChannelIndicator from '../component/channel-indicator.js';
let FilePrice = React.createClass({ let FilePrice = React.createClass({
_isMounted: false, _isMounted: false,
propTypes: { propTypes: {
name: React.PropTypes.string uri: React.PropTypes.string
}, },
getInitialState: function() { getInitialState: function() {
@ -21,7 +22,7 @@ let FilePrice = React.createClass({
componentDidMount: function() { componentDidMount: function() {
this._isMounted = true; this._isMounted = true;
lbry.getCostInfoForName(this.props.name, ({cost, includesData}) => { lbry.getCostInfoForName(this.props.uri, ({cost, includesData}) => {
if (this._isMounted) { if (this._isMounted) {
this.setState({ this.setState({
cost: cost, cost: cost,
@ -55,9 +56,11 @@ let FilePrice = React.createClass({
export let FileTileStream = React.createClass({ export let FileTileStream = React.createClass({
_fileInfoSubscribeId: null, _fileInfoSubscribeId: null,
_isMounted: null, _isMounted: null,
_metadata: null,
propTypes: { propTypes: {
metadata: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.object]), uri: React.PropTypes.string,
claimInfo: React.PropTypes.object,
outpoint: React.PropTypes.string, outpoint: React.PropTypes.string,
hideOnRemove: React.PropTypes.bool, hideOnRemove: React.PropTypes.bool,
hidePrice: React.PropTypes.bool, hidePrice: React.PropTypes.bool,
@ -76,6 +79,11 @@ export let FileTileStream = React.createClass({
hidePrice: false hidePrice: false
} }
}, },
componentWillMount: function() {
const {value: {stream: {metadata, source: {contentType}}}} = this.props.claimInfo;
this._metadata = metadata;
this._contentType = contentType;
},
componentDidMount: function() { componentDidMount: function() {
this._isMounted = true; this._isMounted = true;
if (this.props.hideOnRemove) { if (this.props.hideOnRemove) {
@ -95,7 +103,7 @@ export let FileTileStream = React.createClass({
} }
}, },
handleMouseOver: function() { handleMouseOver: function() {
if (this.props.obscureNsfw && this.props.metadata && this.props.metadata.nsfw) { if (this.props.obscureNsfw && this.props.metadata && this._metadata.nsfw) {
this.setState({ this.setState({
showNsfwHelp: true, showNsfwHelp: true,
}); });
@ -113,29 +121,30 @@ export let FileTileStream = React.createClass({
return null; return null;
} }
const metadata = this.props.metadata; const metadata = this._metadata;
const isConfirmed = typeof metadata == 'object'; const isConfirmed = typeof metadata == 'object';
const title = isConfirmed ? metadata.title : ('lbry://' + this.props.name); const title = isConfirmed ? metadata.title : ('lbry://' + this.props.uri);
const obscureNsfw = this.props.obscureNsfw && isConfirmed && metadata.nsfw; 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.uri}><Thumbnail className="file-tile__thumbnail" src={metadata.thumbnail} alt={'Photo for ' + (title || this.props.uri)} /></a>
</div> </div>
<div className="span9"> <div className="span9">
{ !this.props.hidePrice { !this.props.hidePrice
? <FilePrice name={this.props.name} /> ? <FilePrice uri={this.props.uri} />
: 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.uri}>{'lbry://' + this.props.uri}</a></div>
<h3 className="file-tile__title"> <h3 className="file-tile__title">
<a href={'?show=' + this.props.name}> <a href={'?show=' + this.props.uri}>
<TruncatedText lines={1}> <TruncatedText lines={1}>
{title} {title}
</TruncatedText> </TruncatedText>
</a> </a>
</h3> </h3>
<FileActions streamName={this.props.name} outpoint={this.props.outpoint} metadata={metadata} /> <ChannelIndicator uri={this.props.uri} claimInfo={this.props.claimInfo} />
<FileActions uri={this.props.uri} outpoint={this.props.outpoint} metadata={metadata} contentType={this._contentType} />
<p className="file-tile__description"> <p className="file-tile__description">
<TruncatedText lines={3}> <TruncatedText lines={3}>
{isConfirmed {isConfirmed
@ -162,26 +171,27 @@ export let FileTile = React.createClass({
_isMounted: false, _isMounted: false,
propTypes: { propTypes: {
name: React.PropTypes.string.isRequired, uri: React.PropTypes.string.isRequired,
available: React.PropTypes.bool, available: React.PropTypes.bool,
}, },
getInitialState: function() { getInitialState: function() {
return { return {
outpoint: null, outpoint: null,
metadata: null claimInfo: null
} }
}, },
componentDidMount: function() { componentDidMount: function() {
this._isMounted = true; this._isMounted = true;
lbry.claim_show({name: this.props.name}).then(({value, txid, nout}) => { lbry.resolve({uri: this.props.uri}).then(({claim: claimInfo}) => {
if (this._isMounted && value) { const {value: {stream: {metadata}}, txid, nout} = claimInfo;
if (this._isMounted && claimInfo.value.stream.metadata) {
// In case of a failed lookup, metadata will be null, in which case the component will never display // In case of a failed lookup, metadata will be null, in which case the component will never display
this.setState({ this.setState({
outpoint: txid + ':' + nout, outpoint: txid + ':' + nout,
metadata: value, claimInfo: claimInfo,
}); });
} }
}); });
@ -190,10 +200,11 @@ export let FileTile = React.createClass({
this._isMounted = false; this._isMounted = false;
}, },
render: function() { render: function() {
if (!this.state.metadata || !this.state.outpoint) { if (!this.state.claimInfo || !this.state.outpoint) {
return null; return null;
} }
return <FileTileStream outpoint={this.state.outpoint} metadata={this.state.metadata} {... this.props} />; return <FileTileStream outpoint={this.state.outpoint} claimInfo={this.state.claimInfo}
{... this.props} uri={this.props.uri}/>;
} }
}); });

14
ui/js/page/discover.js
View file

@ -48,7 +48,7 @@ var SearchResults = React.createClass({
if (!seenNames[name]) { if (!seenNames[name]) {
seenNames[name] = name; seenNames[name] = name;
rows.push( rows.push(
<FileTile key={name} name={name} sdHash={value.sources.lbry_sd_hash} /> <FileTile key={name} uri={name} sdHash={value.sources.lbry_sd_hash} />
); );
} }
}); });
@ -84,18 +84,18 @@ var FeaturedContent = React.createClass({
<div className="row-fluid"> <div className="row-fluid">
<div className="span6"> <div className="span6">
<h3>Featured Content</h3> <h3>Featured Content</h3>
{ this.state.featuredNames.map((name) => { return <FileTile key={name} name={name} /> }) } { this.state.featuredNames.map((name) => { return <FileTile key={name} uri={name} /> }) }
</div> </div>
<div className="span6"> <div className="span6">
<h3> <h3>
Community Content Community Content
<ToolTip label="What's this?" body={toolTipText} className="tooltip--header"/> <ToolTip label="What's this?" body={toolTipText} className="tooltip--header"/>
</h3> </h3>
<FileTile name="one" /> <FileTile uri="one" />
<FileTile name="two" /> <FileTile uri="two" />
<FileTile name="three" /> <FileTile uri="three" />
<FileTile name="four" /> <FileTile uri="four" />
<FileTile name="five" /> <FileTile uri="five" />
</div> </div>
</div> </div>
); );