Update download notice modal to include price

This commit is contained in:
Alex Liebowitz 2017-04-17 05:18:41 -04:00
parent 5fe9f076eb
commit 94b60beebc
2 changed files with 12 additions and 8 deletions

View file

@ -1,7 +1,8 @@
import React from 'react';
import lbry from '../lbry.js';
import uri from '../uri.js';
import {Link} from '../component/link.js';
import {Icon} from '../component/common.js';
import {Icon, FilePrice} from '../component/common.js';
import {Modal} from './modal.js';
import {FormField} from './form.js';
import {ToolTip} from '../component/tooltip.js';
@ -155,6 +156,8 @@ let FileActionsRow = React.createClass({
linkBlock = <Link label="Open" button="text" icon="icon-folder-open" onClick={this.onOpenClick} />;
}
const lbryUri = uri.normalizeLbryUri(this.props.uri);
const title = this.props.metadata ? this.props.metadata.title : lbryUri;
return (
<div>
{this.state.fileInfo !== null || this.state.fileInfo.isMine
@ -167,7 +170,7 @@ let FileActionsRow = React.createClass({
</DropDownMenu> : '' }
<Modal type="confirm" isOpen={this.state.modal == 'affirmPurchase'}
contentLabel="Confirm Purchase" onConfirmed={this.onAffirmPurchase} onAborted={this.closeModal}>
Do you want to purchase this?
Are you sure you'd like to buy <strong>{title}</strong> for <strong><FilePrice uri={lbryUri} metadata={this.props.metadata} label={false} look="plain" /></strong> credits?
</Modal>
<Modal isOpen={this.state.modal == 'notEnoughCredits'} contentLabel="Not enough credits"
onConfirmed={this.closeModal}>
@ -175,12 +178,12 @@ let FileActionsRow = React.createClass({
</Modal>
<Modal isOpen={this.state.modal == 'timedOut'} contentLabel="Download failed"
onConfirmed={this.closeModal}>
LBRY was unable to download the stream <strong>lbry://{this.props.uri}</strong>.
LBRY was unable to download the stream <strong>{lbryUri}</strong>.
</Modal>
<Modal isOpen={this.state.modal == 'confirmRemove'} contentLabel="Not enough credits"
type="confirm" confirmButtonLabel="Remove" onConfirmed={this.handleRemoveConfirmed}
onAborted={this.closeModal}>
<p>Are you sure you'd like to remove <cite>{this.props.metadata ? this.props.metadata.title : this.props.uri}</cite> from LBRY?</p>
<p>Are you sure you'd like to remove <cite>{title}</cite> from LBRY?</p>
<label><FormField type="checkbox" checked={this.state.deleteChecked} onClick={this.handleDeleteCheckboxClicked} /> Delete this file from my computer</label>
</Modal>

View file

@ -1,5 +1,5 @@
import React from 'react';
import {Icon, Thumbnail} from '../component/common.js';
import {Icon, Thumbnail, FilePrice} from '../component/common.js';
import {Link} from '../component/link.js';
import lbry from '../lbry.js';
import Modal from '../component/modal.js';
@ -13,8 +13,9 @@ const VideoStream = require('videostream');
export let WatchLink = React.createClass({
propTypes: {
uri: React.PropTypes.string,
metadata: React.PropTypes.object,
downloadStarted: React.PropTypes.bool,
onGet: React.PropTypes.func
onGet: React.PropTypes.func,
},
getInitialState: function() {
affirmedPurchase: false
@ -84,7 +85,7 @@ export let WatchLink = React.createClass({
</Modal>
<Modal type="confirm" isOpen={this.state.modal == 'affirmPurchase'}
contentLabel="Confirm Purchase" onConfirmed={this.onAffirmPurchase} onAborted={this.closeModal}>
Do you want to purchase this?
Are you sure you'd like to buy <strong>{this.props.metadata.title}</strong> for <strong><FilePrice uri={this.props.uri} metadata={this.props.metadata} label={false} look="plain" /></strong> credits?
</Modal>
</div>);
}
@ -200,7 +201,7 @@ export let Video = React.createClass({
<span>this is the world's world loading screen and we shipped our software with it anyway... <br/><br/>{this.state.loadStatusMessage}</span> :
<video controls id="video" ref="video"></video> :
<div className="video__cover" style={{backgroundImage: 'url("' + this.props.metadata.thumbnail + '")'}}>
<WatchLink className="video__play-button" uri={this.props.uri} onGet={this.onGet} icon="icon-play"></WatchLink>
<WatchLink className="video__play-button" uri={this.props.uri} metadata={this.props.metadata} onGet={this.onGet} icon="icon-play"></WatchLink>
</div>
}</div>
);