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

Merge pull request #45 from lbryio/download-fixes

Browse source 
Improvements to watch and download process
This commit is contained in:
alexliebowitz 2017-04-17 17:29:02 -04:00 committed by GitHub
commit 36a550e447
11 changed files with 160 additions and 78 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
CHANGELOG.md
View file

@ -18,6 +18,7 @@ Web UI version numbers should always match the corresponding version of LBRY App
* New publishes now display immediately in My Files, even before they hit the lbrynet file manager.
* New welcome flow for new users
* Redesigned UI for Discover
* Handle more of price calculations at the daemon layer to improve page load time
### Changed
* Update process now easier and more reliable

2
lbry

@ -1 +1 @@
Subproject commit 043e2d0ab96030468d53d02e311fd848f35c2dc1
Subproject commit e8bccec71c7424bf06d057904e4722d2d734fa3f

2
lbryum

@ -1 +1 @@
Subproject commit 121bda3963ee94f0c9c027813c55b71b38219739
Subproject commit 39ace3737509ff2b09fabaaa64d1525843de1325

57
ui/js/component/common.js
View file

@ -62,22 +62,34 @@ export let CreditAmount = React.createClass({
propTypes: {
amount: React.PropTypes.number.isRequired,
precision: React.PropTypes.number,
label: React.PropTypes.bool
isEstimate: React.PropTypes.bool,
label: React.PropTypes.bool,
showFree: React.PropTypes.bool,
look: React.PropTypes.oneOf(['indicator', 'plain']),
},
getDefaultProps: function() {
return {
precision: 1,
label: true,
showFree: false,
look: 'indicator',
}
},
render: function() {
var formattedAmount = lbry.formatCredits(this.props.amount, this.props.precision);
const formattedAmount = lbry.formatCredits(this.props.amount, this.props.precision);
let amountText;
if (this.props.showFree && parseFloat(formattedAmount) == 0) {
amountText = 'free';
} else if (this.props.label) {
amountText = formattedAmount + (parseFloat(formattedAmount) == 1 ? ' credit' : ' credits');
} else {
amountText = formattedAmount;
}
return (
<span className="credit-amount">
<span className={`credit-amount credit-amount--${this.props.look}`}>
<span>
{formattedAmount}
{this.props.label ?
(parseFloat(formattedAmount) == 1.0 ? ' credit' : ' credits') : '' }
{amountText}
</span>
{ this.props.isEstimate ? <span className="credit-amount__estimate" title="This is an estimate and does not include data fees">*</span> : null }
</span>
@ -89,15 +101,21 @@ export let FilePrice = React.createClass({
_isMounted: false,
propTypes: {
metadata: React.PropTypes.object,
uri: React.PropTypes.string.isRequired,
look: React.PropTypes.oneOf(['indicator', 'plain']),
},
getInitialState: function() {
getDefaultProps: function() {
return {
look: 'indicator',
}
},
componentWillMount: function() {
this.setState({
cost: null,
isEstimate: null,
}
});
},
componentDidMount: function() {
@ -106,7 +124,7 @@ export let FilePrice = React.createClass({
if (this._isMounted) {
this.setState({
cost: cost,
isEstimate: includesData,
isEstimate: !includesData,
});
}
}, (err) => {
@ -119,22 +137,11 @@ export let FilePrice = React.createClass({
},
render: function() {
if (this.state.cost === null && this.props.metadata) {
if (!this.props.metadata.fee) {
return <span className="credit-amount">free*</span>;
} else {
if (this.props.metadata.fee.currency === "LBC") {
return <CreditAmount label={false} amount={this.props.metadata.fee.amount} isEstimate={true} />
} else if (this.props.metadata.fee.currency === "USD") {
return <span className="credit-amount">???</span>;
}
}
if (this.state.cost === null) {
return <span className={`credit-amount credit-amount--${this.props.look}`}>???</span>;
}
return (
this.state.cost !== null ?
<CreditAmount amount={this.state.cost} label={false} isEstimate={!this.state.isEstimate}/> :
<span className="credit-amount">???</span>
);
return <CreditAmount label={false} amount={this.state.cost} isEstimate={this.state.isEstimate} showFree={true} />
}
});

11
ui/js/component/file-actions.js
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>

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

@ -26,7 +26,6 @@ export let FileTileStream = React.createClass({
return {
showNsfwHelp: false,
isHidden: false,
available: null,
}
},
getDefaultProps: function() {
@ -143,7 +142,6 @@ export let FileCardStream = React.createClass({
return {
showNsfwHelp: false,
isHidden: false,
available: null,
}
},
getDefaultProps: function() {
@ -232,7 +230,6 @@ export let FileTile = React.createClass({
propTypes: {
uri: React.PropTypes.string.isRequired,
available: React.PropTypes.bool,
},
getInitialState: function() {

71
ui/js/lbry.js
View file

@ -1,3 +1,4 @@
import lbryio from './lbryio.js';
import lighthouse from './lighthouse.js';
import jsonrpc from './jsonrpc.js';
import uri from './uri.js';
@ -216,12 +217,18 @@ lbry.getPeersForBlobHash = function(blobHash, callback) {
lbry.costPromiseCache = {}
lbry.getCostInfo = function(lbryUri) {
if (lbry.costPromiseCache[lbryUri] === undefined) {
const COST_INFO_CACHE_KEY = 'cost_info_cache';
lbry.costPromiseCache[lbryUri] = new Promise((resolve, reject) => {
const COST_INFO_CACHE_KEY = 'cost_info_cache';
let costInfoCache = getSession(COST_INFO_CACHE_KEY, {})
function cacheAndResolve(cost, includesData) {
costInfoCache[lbryUri] = {cost, includesData};
setSession(COST_INFO_CACHE_KEY, costInfoCache);
resolve({cost, includesData});
}
if (!lbryUri) {
reject(new Error(`URI required.`));
return reject(new Error(`URI required.`));
}
if (costInfoCache[lbryUri] && costInfoCache[lbryUri].cost) {
@ -230,27 +237,44 @@ lbry.getCostInfo = function(lbryUri) {
function getCost(lbryUri, size) {
lbry.stream_cost_estimate({uri: lbryUri, ... size !== null ? {size} : {}}).then((cost) => {
costInfoCache[lbryUri] = {
cost: cost,
includesData: size !== null,
};
setSession(COST_INFO_CACHE_KEY, costInfoCache);
resolve(costInfoCache[lbryUri]);
cacheAndResolve(cost, size !== null);
}, reject);
}
function getCostGenerous(lbryUri) {
// If generous is on, the calculation is simple enough that we might as well do it here in the front end
lbry.resolve({uri: lbryUri}).then((resolutionInfo) => {
const fee = resolutionInfo.claim.value.stream.metadata.fee;
if (fee === undefined) {
cacheAndResolve(0, true);
} else if (fee.currency == 'LBC') {
cacheAndResolve(fee.amount, true);
} else {
lbryio.getExchangeRates().then(({lbc_usd}) => {
cacheAndResolve(fee.amount / lbc_usd, true);
});
}
});
}
const uriObj = uri.parseLbryUri(lbryUri);
const name = uriObj.path || uriObj.name;
lighthouse.get_size_for_name(name).then((size) => {
if (size) {
getCost(name, size);
lbry.settings_get({allow_cached: true}).then(({is_generous_host}) => {
if (is_generous_host) {
return getCostGenerous(lbryUri);
}
else {
lighthouse.get_size_for_name(name).then((size) => {
if (size) {
getCost(name, size);
}
else {
getCost(name, null);
}
}, () => {
getCost(name, null);
}
}, () => {
getCost(name, null);
});
});
});
}
@ -647,6 +671,23 @@ lbry.resolve = function(params={}) {
});
}
// Adds caching.
lbry.settings_get = function(params={}) {
return new Promise((resolve, reject) => {
if (params.allow_cached) {
const cached = getSession('settings');
if (cached) {
return resolve(cached);
}
}
lbry.call('settings_get', {}, (settings) => {
setSession('settings', settings);
resolve(settings);
});
});
}
// lbry.get = function(params={}) {
// return function(params={}) {
// return new Promise((resolve, reject) => {

29
ui/js/lbryio.js
View file

@ -10,7 +10,8 @@ const lbryio = {
enabled: false
};
const CONNECTION_STRING = 'http://localhost:8080/';
const CONNECTION_STRING = 'https://api.lbry.io/';
const EXCHANGE_RATE_TIMEOUT = 20 * 60 * 1000;
const mocks = {
'reward_type.get': ({name}) => {
@ -24,12 +25,32 @@ const mocks = {
}
};
lbryio.call = function(resource, action, params={}, method='get') {
lbryio.getExchangeRates = function() {
return new Promise((resolve, reject) => {
if (!lbryio.enabled && (resource != 'discover' || action != 'list')) {
reject(new Error("LBRY internal API is disabled"))
const cached = getSession('exchangeRateCache');
if (!cached || Date.now() - cached.time > EXCHANGE_RATE_TIMEOUT) {
lbryio.call('lbc', 'exchange_rate', {}, 'get', true).then(({lbc_usd, lbc_btc, btc_usd}) => {
const rates = {lbc_usd, lbc_btc, btc_usd};
setSession('exchangeRateCache', {
rates: rates,
time: Date.now(),
});
resolve(rates);
});
} else {
resolve(cached.rates);
}
});
}
lbryio.call = function(resource, action, params={}, method='get', evenIfDisabled=false) { // evenIfDisabled is just for development, when we may have some calls working and some not
return new Promise((resolve, reject) => {
if (!lbryio.enabled && !evenIfDisabled && (resource != 'discover' || action != 'list')) {
reject(new Error("LBRY interal API is disabled"))
return
}
/* temp code for mocks */
if (`${resource}.${action}` in mocks) {
resolve(mocks[`${resource}.${action}`](params));

23
ui/js/page/show.js
View file

@ -55,6 +55,7 @@ let ShowPage = React.createClass({
cost: null,
costIncludesData: null,
uriLookupComplete: null,
isDownloaded: null,
};
},
componentWillMount: function() {
@ -62,8 +63,16 @@ let ShowPage = React.createClass({
document.title = this._uri;
lbry.resolve({uri: this._uri}).then(({ claim: {txid, nout, has_signature, signature_is_valid, value: {stream: {metadata, source: {contentType}}}}}) => {
const outpoint = txid + ':' + nout;
lbry.file_list({outpoint}).then((fileInfo) => {
this.setState({
isDownloaded: fileInfo.length > 0,
});
});
this.setState({
outpoint: txid + ':' + nout,
outpoint: outpoint,
metadata: metadata,
hasSignature: has_signature,
signatureIsValid: signature_is_valid,
@ -80,21 +89,21 @@ let ShowPage = React.createClass({
});
},
render: function() {
const
metadata = this.state.uriLookupComplete ? this.state.metadata : null,
title = this.state.uriLookupComplete ? metadata.title : this._uri;
const metadata = this.state.metadata;
const title = metadata ? this.state.metadata.title : this._uri;
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} /> :
<Video className="video-embedded" uri={this._uri} metadata={metadata} outpoint={this.state.outpoint} /> :
(metadata ? <Thumbnail src={metadata.thumbnail} /> : <Thumbnail />) }
</section>
<section className="card">
<div className="card__inner">
<div className="card__title-identity">
<span style={{float: "right"}}><FilePrice uri={this._uri} metadata={metadata} /></span>
{this.state.isDownloaded === false
? <span style={{float: "right"}}><FilePrice uri={this._uri} metadata={this.state.metadata} /></span>
: null}
<h1>{title}</h1>
{ this.state.uriLookupComplete ?
<div>

33
ui/js/page/watch.js
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,13 +13,14 @@ 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
},
onAffirmPurchase: function() {
play: function() {
lbry.get({uri: this.props.uri}).then((streamInfo) => {
if (streamInfo === null || typeof streamInfo !== 'object') {
this.setState({
@ -50,10 +51,16 @@ export let WatchLink = React.createClass({
attemptingDownload: false,
});
} else if (cost <= 0.01) {
this.onAffirmPurchase()
this.play()
} else {
this.setState({
modal: 'affirmPurchase'
lbry.file_list({outpoint: this.props.outpoint}).then((fileInfo) => {
if (fileInfo) { // Already downloaded
this.play();
} else {
this.setState({
modal: 'affirmPurchase'
});
}
});
}
});
@ -83,8 +90,8 @@ export let WatchLink = React.createClass({
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}>
Do you want to purchase this?
contentLabel="Confirm Purchase" onConfirmed={this.play} onAborted={this.closeModal}>
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>);
}
@ -95,10 +102,11 @@ 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
_controlsHideTimeout: null,
_outpoint: null,
propTypes: {
uri: React.PropTypes.string,
uri: React.PropTypes.string.isRequired,
metadata: React.PropTypes.object,
outpoint: React.PropTypes.string,
},
getInitialState: function() {
return {
@ -113,7 +121,6 @@ export let Video = React.createClass({
},
onGet: function() {
lbry.get({uri: this.props.uri}).then((fileInfo) => {
this._outpoint = fileInfo.outpoint;
this.updateLoadStatus();
});
this.setState({
@ -158,7 +165,7 @@ export let Video = React.createClass({
},
updateLoadStatus: function() {
lbry.file_list({
outpoint: this._outpoint,
outpoint: this.props.outpoint,
full_status: true,
}).then(([status]) => {
if (!status || status.written_bytes == 0) {
@ -200,7 +207,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} outpoint={this.props.outpoint} onGet={this.onGet} icon="icon-play"></WatchLink>
</div>
}</div>
);

6
ui/scss/_canvas.scss
View file

@ -57,15 +57,11 @@ $drawer-width: 220px;
color: white;
border-radius: 2px;
}
.credit-amount
.credit-amount--indicator
{
font-weight: bold;
color: $color-money;
}
.credit-amount--estimate {
font-style: italic;
color: $color-meta-light;
}
#drawer-handle
{
padding: $spacing-vertical / 2;