import React from 'react'; import lbry from '../lbry.js'; import lbryuri from '../lbryuri.js'; import {Link} from '../component/link.js'; import {FileActions} from '../component/file-actions.js'; import {Thumbnail, TruncatedText, FilePrice} from '../component/common.js'; import UriIndicator from '../component/channel-indicator.js'; /*should be merged into FileTile once FileTile is refactored to take a single id*/ export let FileTileStream = React.createClass({ _fileInfoSubscribeId: null, _isMounted: null, propTypes: { uri: React.PropTypes.string, metadata: React.PropTypes.object, contentType: React.PropTypes.string.isRequired, outpoint: React.PropTypes.string, hasSignature: React.PropTypes.bool, signatureIsValid: React.PropTypes.bool, hideOnRemove: React.PropTypes.bool, hidePrice: React.PropTypes.bool, obscureNsfw: React.PropTypes.bool }, getInitialState: function() { return { showNsfwHelp: false, isHidden: false, } }, getDefaultProps: function() { return { obscureNsfw: !lbry.getClientSetting('showNsfw'), hidePrice: false, hasSignature: false, } }, componentDidMount: function() { this._isMounted = true; if (this.props.hideOnRemove) { this._fileInfoSubscribeId = lbry.fileInfoSubscribe(this.props.outpoint, this.onFileInfoUpdate); } }, componentWillUnmount: function() { if (this._fileInfoSubscribeId) { lbry.fileInfoUnsubscribe(this.props.outpoint, this._fileInfoSubscribeId); } }, onFileInfoUpdate: function(fileInfo) { if (!fileInfo && this._isMounted && this.props.hideOnRemove) { this.setState({ isHidden: true }); } }, handleMouseOver: function() { if (this.props.obscureNsfw && this.props.metadata && this.props.metadata.nsfw) { this.setState({ showNsfwHelp: true, }); } }, handleMouseOut: function() { if (this.state.showNsfwHelp) { this.setState({ showNsfwHelp: false, }); } }, render: function() { if (this.state.isHidden) { return null; } const uri = lbryuri.normalize(this.props.uri); const metadata = this.props.metadata; const isConfirmed = !!metadata; const title = isConfirmed ? metadata.title : uri; const obscureNsfw = this.props.obscureNsfw && isConfirmed && metadata.nsfw; return (
{ !this.props.hidePrice ? : null}

{title}

{isConfirmed ? metadata.description : This file is pending confirmation.}

{this.state.showNsfwHelp ?

This content is Not Safe For Work. To view adult content, please change your .

: null}
); } }); export let FileCardStream = React.createClass({ _fileInfoSubscribeId: null, _isMounted: null, _metadata: null, propTypes: { uri: React.PropTypes.string, claimInfo: React.PropTypes.object, outpoint: React.PropTypes.string, hideOnRemove: React.PropTypes.bool, hidePrice: React.PropTypes.bool, obscureNsfw: React.PropTypes.bool }, getInitialState: function() { return { showNsfwHelp: false, isHidden: false, } }, getDefaultProps: function() { return { obscureNsfw: !lbry.getClientSetting('showNsfw'), hidePrice: false, hasSignature: false, } }, componentDidMount: function() { this._isMounted = true; if (this.props.hideOnRemove) { this._fileInfoSubscribeId = lbry.fileInfoSubscribe(this.props.outpoint, this.onFileInfoUpdate); } }, componentWillUnmount: function() { if (this._fileInfoSubscribeId) { lbry.fileInfoUnsubscribe(this.props.outpoint, this._fileInfoSubscribeId); } }, onFileInfoUpdate: function(fileInfo) { if (!fileInfo && this._isMounted && this.props.hideOnRemove) { this.setState({ isHidden: true }); } }, handleMouseOver: function() { this.setState({ hovered: true, }); }, handleMouseOut: function() { this.setState({ hovered: false, }); }, render: function() { if (this.state.isHidden) { return null; } const uri = lbryuri.normalize(this.props.uri); const metadata = this.props.metadata; const isConfirmed = !!metadata; const title = isConfirmed ? metadata.title : uri; const obscureNsfw = this.props.obscureNsfw && isConfirmed && metadata.nsfw; const primaryUrl = '?show=' + uri; return (
{title}
{ !this.props.hidePrice ? : null}
{isConfirmed ? metadata.description : This file is pending confirmation.}
{this.state.showNsfwHelp && this.state.hovered ?

This content is Not Safe For Work. To view adult content, please change your .

: null}
); } }); export let FileTile = React.createClass({ _isMounted: false, propTypes: { uri: React.PropTypes.string.isRequired, }, getInitialState: function() { return { outpoint: null, claimInfo: null } }, resolve: function(uri) { lbry.resolve({uri: uri}).then((resolutionInfo) => { if (this._isMounted && resolutionInfo && resolutionInfo.claim && resolutionInfo.claim.value && resolutionInfo.claim.value.stream && resolutionInfo.claim.value.stream.metadata) { // In case of a failed lookup, metadata will be null, in which case the component will never display this.setState({ claimInfo: resolutionInfo.claim, }); } }); }, componentWillReceiveProps: function(nextProps) { if (nextProps.uri != this.props.uri) { this.setState(this.getInitialState()); this.resolve(nextProps.uri); } }, componentDidMount: function() { this._isMounted = true; this.resolve(this.props.uri); }, componentWillUnmount: function() { this._isMounted = false; }, render: function() { if (!this.state.claimInfo) { if (this.props.displayStyle == 'card') { return } if (this.props.showEmpty) { return
Empty file tile for {this.props.uri}
} return null; } const {txid, nout, has_signature, signature_is_valid, value: {stream: {metadata, source: {contentType}}}} = this.state.claimInfo; return this.props.displayStyle == 'card' ? : ; } });