more show/purchase work
This commit is contained in:
Jeremy Kauffman
parent
300264e364
commit
9b4d8ec266
5 changed files with 90 additions and 36 deletions
|
|
@ -137,7 +137,7 @@ const WelcomeStage = React.createClass({
|
|||
<Modal type="alert" overlayClassName="modal-overlay modal-overlay--clear" isOpen={true} contentLabel="Welcome to LBRY" {...this.props} onConfirmed={this.props.endAuth}>
|
||||
<section>
|
||||
<h3 className="modal__header">About Your Reward</h3>
|
||||
<p>You earned a reward of 5 LBRY credits, or <em>LBC</em>.</p>
|
||||
<p>You earned a reward of %award% LBRY credits, or <em>LBC</em>.</p>
|
||||
<p>This reward will show in your Wallet momentarily, likely while you are reading this message.</p>
|
||||
<p>LBC is used to compensate creators, to publish, and to have say in how the network works.</p>
|
||||
<p>No need to understand it all just yet! Try watching or downloading something next.</p>
|
||||
|
|
|
|||
|
|
@ -27,7 +27,6 @@ let FileActionsRow = React.createClass({
|
|||
deleteChecked: false,
|
||||
attemptingDownload: false,
|
||||
attemptingRemove: false,
|
||||
affirmedPurchase: false
|
||||
}
|
||||
},
|
||||
onFileInfoUpdate: function(fileInfo) {
|
||||
|
|
|
|||
|
|
@ -80,21 +80,17 @@ let ShowPage = React.createClass({
|
|||
});
|
||||
},
|
||||
render: function() {
|
||||
if (this.state.metadata == null) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// <div className="card__media" style={{ backgroundImage: "url('" + metadata.thumbnail + "')" }}></div>
|
||||
const
|
||||
metadata = this.state.uriLookupComplete ? this.state.metadata : null,
|
||||
title = this.state.uriLookupComplete ? metadata.title : this._uri;
|
||||
|
||||
console.log(metadata);
|
||||
return (
|
||||
<main className="constrained-page">
|
||||
<section className="show-page-media">
|
||||
{ this.state.contentType && this.state.contentType.startsWith('video/') ?
|
||||
<Video className="video-embedded" uri={this._uri} metadata={metadata} /> :
|
||||
<Thumbnail src={metadata.thumbnail} /> }
|
||||
(metadata ? <Thumbnail src={metadata.thumbnail} /> : <Thumbnail />) }
|
||||
</section>
|
||||
<section className="card">
|
||||
<div className="card__inner">
|
||||
|
|
@ -117,11 +113,12 @@ let ShowPage = React.createClass({
|
|||
{metadata.description}
|
||||
</div>
|
||||
</div>
|
||||
: <BusyMessage message="Loading..." /> }
|
||||
</div>
|
||||
<div className="card__content">
|
||||
<FormatItem metadata={metadata} contentType={this.state.contentType} cost={this.state.cost} uri={this._uri} outpoint={this.state.outpoint} costIncludesData={this.state.costIncludesData} />
|
||||
: <div className="card__content"><BusyMessage message="Loading magic decentralized data..." /></div> }
|
||||
</div>
|
||||
{ metadata ?
|
||||
<div className="card__content">
|
||||
<FormatItem metadata={metadata} contentType={this.state.contentType} cost={this.state.cost} uri={this._uri} outpoint={this.state.outpoint} costIncludesData={this.state.costIncludesData} />
|
||||
</div> : '' }
|
||||
<div className="card__content">
|
||||
<Link href="https://lbry.io/dmca" label="report" className="button-text-help" />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,11 +2,87 @@ import React from 'react';
|
|||
import {Icon, Thumbnail} from '../component/common.js';
|
||||
import {Link} from '../component/link.js';
|
||||
import lbry from '../lbry.js';
|
||||
import Modal from '../component/modal.js';
|
||||
import LoadScreen from '../component/load_screen.js'
|
||||
|
||||
const fs = require('fs');
|
||||
const VideoStream = require('videostream');
|
||||
|
||||
export let WatchLink = React.createClass({
|
||||
propTypes: {
|
||||
uri: React.PropTypes.string,
|
||||
downloadStarted: React.PropTypes.bool,
|
||||
onGet: React.PropTypes.func
|
||||
},
|
||||
getInitialState: function() {
|
||||
affirmedPurchase: false
|
||||
},
|
||||
onAffirmPurchase: function() {
|
||||
lbry.get({uri: this.props.uri}).then((streamInfo) => {
|
||||
if (streamInfo === null || typeof streamInfo !== 'object') {
|
||||
this.setState({
|
||||
modal: 'timedOut',
|
||||
attemptingDownload: false,
|
||||
});
|
||||
}
|
||||
});
|
||||
if (this.props.onGet) {
|
||||
this.props.onGet()
|
||||
}
|
||||
},
|
||||
onWatchClick: function() {
|
||||
this.setState({
|
||||
loading: true
|
||||
});
|
||||
lbry.getCostInfo(this.props.uri).then(({cost}) => {
|
||||
lbry.getBalance((balance) => {
|
||||
if (cost > balance) {
|
||||
this.setState({
|
||||
modal: 'notEnoughCredits',
|
||||
attemptingDownload: false,
|
||||
});
|
||||
} else if (cost <= 0.01) {
|
||||
this.onAffirmPurchase()
|
||||
} else {
|
||||
this.setState({
|
||||
modal: 'affirmPurchase'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
getInitialState: function() {
|
||||
return {
|
||||
modal: null,
|
||||
loading: false,
|
||||
};
|
||||
},
|
||||
closeModal: function() {
|
||||
this.setState({
|
||||
loading: false,
|
||||
modal: null,
|
||||
});
|
||||
},
|
||||
render: function() {
|
||||
return (<div>
|
||||
<Link button={ this.props.button ? this.props.button : null }
|
||||
disabled={this.state.loading}
|
||||
label={this.props.label ? this.props.label : ""}
|
||||
className={this.props.className}
|
||||
icon="icon-play"
|
||||
onClick={this.onWatchClick} />
|
||||
<Modal contentLabel="Not enough credits" isOpen={this.state.modal == 'notEnoughCredits'} onConfirmed={this.closeModal}>
|
||||
You don't have enough LBRY credits to pay for this stream.
|
||||
</Modal>
|
||||
<Modal type="confirm" isOpen={this.state.modal == 'affirmPurchase'}
|
||||
contentLabel="Confirm Purchase" onConfirmed={this.onAffirmPurchase} onAborted={this.closeModal}>
|
||||
Confirm you want to purchase this bro.
|
||||
</Modal>
|
||||
</div>);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
export let Video = React.createClass({
|
||||
_isMounted: false,
|
||||
_controlsHideDelay: 3000, // Note: this needs to be shorter than the built-in delay in Electron, or Electron will hide the controls before us
|
||||
|
|
@ -27,22 +103,7 @@ export let Video = React.createClass({
|
|||
controlsShown: false,
|
||||
};
|
||||
},
|
||||
start: function() {
|
||||
// lbry.getCostInfo(this.props.uri).then(({cost}) => {
|
||||
// lbry.getBalance((balance) => {
|
||||
// if (cost > balance) {
|
||||
// this.setState({
|
||||
// modal: 'notEnoughCredits',
|
||||
// loading: false,
|
||||
// });
|
||||
// } else {
|
||||
// this.startVideo();
|
||||
// }
|
||||
// });
|
||||
// // });
|
||||
// <Modal contentLabel="Not enough credits" isOpen={this.state.modal == 'notEnoughCredits'} onConfirmed={this.closeModal}>
|
||||
// You don't have enough LBRY credits to pay for this stream.
|
||||
// </Modal>
|
||||
onGet: function() {
|
||||
lbry.get({uri: this.props.uri}).then((fileInfo) => {
|
||||
this._outpoint = fileInfo.outpoint;
|
||||
this.updateLoadStatus();
|
||||
|
|
@ -127,9 +188,8 @@ export let Video = React.createClass({
|
|||
!this.state.readyToPlay ?
|
||||
<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">
|
||||
<Thumbnail src={this.props.metadata.thumbnail} />
|
||||
<a className="video__play-button" onClick={this.start}><Icon icon="icon-play" /></a>
|
||||
<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>
|
||||
</div>
|
||||
}</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -30,11 +30,9 @@ video {
|
|||
text-align: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
background-size: auto 100%;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
position: relative;
|
||||
&:hover {
|
||||
.video__play-button { @include absolute-center(); }
|
||||
|
|
|
|||
Loading…
Reference in a new issue