Redux #53

Merged
6ea86b96 merged 32 commits from redux into redux 2017-05-01 18:46:26 +02:00
73 changed files with 4517 additions and 1782 deletions

2
.gitignore vendored
View file

@ -14,3 +14,5 @@ dist
*.pyc
.#*
build/daemon.zip

View file

@ -5,6 +5,7 @@ import {
selectUpgradeDownloadDir,
selectUpgradeDownloadItem,
selectUpgradeFilename,
selectPageTitle,
} from 'selectors/app'
const {remote, ipcRenderer, shell} = require('electron');
@ -14,11 +15,17 @@ const {download} = remote.require('electron-dl');
const fs = remote.require('fs');
export function doNavigate(path) {
return {
return function(dispatch, getState) {
dispatch({
type: types.NAVIGATE,
data: {
path: path
path,
}
})
const state = getState()
const pageTitle = selectPageTitle(state)
window.document.title = pageTitle
}
}
@ -52,15 +59,6 @@ export function doCloseModal() {
}
}
export function doUpdateBalance(balance) {
return {
type: types.UPDATE_BALANCE,
data: {
balance: balance
}
}
}
export function doUpdateDownloadProgress(percent) {
return {
type: types.UPGRADE_DOWNLOAD_PROGRESSED,
@ -204,3 +202,9 @@ export function doSearch(term) {
})
}
}
export function doDaemonReady() {
return {
type: types.DAEMON_READY
}
}

View file

@ -0,0 +1,39 @@
import * as types from 'constants/action_types'
import lbry from 'lbry'
import {
selectCurrentUri,
} from 'selectors/app'
export function doFetchUriAvailability(uri) {
return function(dispatch, getState) {
dispatch({
type: types.FETCH_AVAILABILITY_STARTED,
data: { uri }
})
const successCallback = (availability) => {
dispatch({
type: types.FETCH_AVAILABILITY_COMPLETED,
data: {
availability,
uri,
}
})
}
const errorCallback = () => {
console.debug('error')
}
lbry.get_availability({ uri }, successCallback, errorCallback)
}
}
export function doFetchCurrentUriAvailability() {
return function(dispatch, getState) {
const state = getState()
const uri = selectCurrentUri(state)
dispatch(doFetchUriAvailability(uri))
}
}

291
ui/js/actions/content.js Normal file
View file

@ -0,0 +1,291 @@
import * as types from 'constants/action_types'
import lbry from 'lbry'
import lbryio from 'lbryio'
import lbryuri from 'lbryuri'
import rewards from 'rewards'
import {
selectCurrentUri,
} from 'selectors/app'
import {
selectBalance,
} from 'selectors/wallet'
import {
selectSearchTerm,
} from 'selectors/content'
import {
selectCurrentUriFileInfo,
selectDownloadingByUri,
} from 'selectors/file_info'
import {
selectCurrentUriCostInfo,
} from 'selectors/cost_info'
import {
selectCurrentResolvedUriClaimOutpoint,
} from 'selectors/content'
import {
selectClaimsByUri,
} from 'selectors/claims'
import {
doOpenModal,
} from 'actions/app'
import {
doFetchCostInfoForUri,
} from 'actions/cost_info'
import batchActions from 'util/batchActions'
export function doResolveUri(uri) {
return function(dispatch, getState) {
dispatch({
type: types.RESOLVE_URI_STARTED,
data: { uri }
})
lbry.resolve({ uri }).then((resolutionInfo) => {
const {
claim,
certificate,
} = resolutionInfo
dispatch({
type: types.RESOLVE_URI_COMPLETED,
data: {
uri,
claim,
certificate,
}
})
dispatch(doFetchCostInfoForUri(uri))
})
}
}
export function doFetchDownloadedContent() {
return function(dispatch, getState) {
const state = getState()
dispatch({
type: types.FETCH_DOWNLOADED_CONTENT_STARTED,
})
lbry.claim_list_mine().then((myClaimInfos) => {
lbry.file_list().then((fileInfos) => {
const myClaimOutpoints = myClaimInfos.map(({txid, nout}) => txid + ':' + nout);
fileInfos.forEach(fileInfo => {
const uri = lbryuri.build({
channelName: fileInfo.channel_name,
contentName: fileInfo.name,
})
const claim = selectClaimsByUri(state)[uri]
if (!claim) dispatch(doResolveUri(uri))
})
dispatch({
type: types.FETCH_DOWNLOADED_CONTENT_COMPLETED,
data: {
fileInfos: fileInfos.filter(({outpoint}) => !myClaimOutpoints.includes(outpoint)),
}
})
});
});
}
}
export function doFetchPublishedContent() {
return function(dispatch, getState) {
const state = getState()
dispatch({
type: types.FETCH_PUBLISHED_CONTENT_STARTED,
})
lbry.claim_list_mine().then((claimInfos) => {
dispatch({
type: types.FETCH_MY_CLAIMS_COMPLETED,
data: {
claims: claimInfos,
}
})
lbry.file_list().then((fileInfos) => {
const myClaimOutpoints = claimInfos.map(({txid, nout}) => txid + ':' + nout)
dispatch({
type: types.FETCH_PUBLISHED_CONTENT_COMPLETED,
data: {
fileInfos: fileInfos.filter(({outpoint}) => myClaimOutpoints.includes(outpoint)),
}
})
})
})
}
}
export function doFetchFeaturedContent() {
return function(dispatch, getState) {
const state = getState()
dispatch({
type: types.FETCH_FEATURED_CONTENT_STARTED,
})
const success = ({ Categories, Uris }) => {
dispatch({
type: types.FETCH_FEATURED_CONTENT_COMPLETED,
data: {
categories: Categories,
uris: Uris,
}
})
Object.keys(Uris).forEach((category) => {
Uris[category].forEach((uri) => {
dispatch(doResolveUri(lbryuri.normalize(uri)))
})
})
}
const failure = () => {
}
lbryio.call('discover', 'list', { version: "early-access" } )
.then(success, failure)
}
}
export function doUpdateLoadStatus(uri, outpoint) {
return function(dispatch, getState) {
const state = getState()
lbry.file_list({
outpoint: outpoint,
full_status: true,
}).then(([fileInfo]) => {
if(!fileInfo || fileInfo.written_bytes == 0) {
// download hasn't started yet
setTimeout(() => { dispatch(doUpdateLoadStatus(uri, outpoint)) }, 250)
} else if (fileInfo.completed) {
// TODO this isn't going to get called if they reload the client before
// the download finished
rewards.claimNextPurchaseReward()
dispatch({
type: types.DOWNLOADING_COMPLETED,
data: {
uri,
fileInfo,
}
})
} else {
// ready to play
const {
total_bytes,
written_bytes,
} = fileInfo
const progress = (written_bytes / total_bytes) * 100
dispatch({
type: types.DOWNLOADING_PROGRESSED,
data: {
uri,
fileInfo,
progress,
}
})
setTimeout(() => { dispatch(doUpdateLoadStatus(uri, outpoint)) }, 250)
}
})
}
}
export function doPlayVideo(uri) {
return {
type: types.PLAY_VIDEO_STARTED,
data: { uri }
}
}
export function doDownloadFile(uri, streamInfo) {
return function(dispatch, getState) {
const state = getState()
lbry.file_list({ outpoint: streamInfo.outpoint, full_status: true }).then(([fileInfo]) => {
dispatch({
type: types.DOWNLOADING_STARTED,
data: {
uri,
fileInfo,
}
})
})
lbryio.call('file', 'view', {
uri: uri,
outpoint: streamInfo.outpoint,
claimId: streamInfo.claim_id,
}).catch(() => {})
dispatch(doUpdateLoadStatus(uri, streamInfo.outpoint))
}
}
export function doLoadVideo() {
return function(dispatch, getState) {
const state = getState()
const uri = selectCurrentUri(state)
dispatch({
type: types.LOADING_VIDEO_STARTED,
data: {
uri
}
})
lbry.get({ uri }).then(streamInfo => {
if (streamInfo === null || typeof streamInfo !== 'object') {
dispatch({
type: types.LOADING_VIDEO_FAILED,
data: { uri }
})
dispatch(doOpenModal('timedOut'))
} else {
dispatch(doDownloadFile(uri, streamInfo))
}
})
}
}
export function doWatchVideo() {
return function(dispatch, getState) {
const state = getState()
const uri = selectCurrentUri(state)
const balance = selectBalance(state)
const fileInfo = selectCurrentUriFileInfo(state)
const costInfo = selectCurrentUriCostInfo(state)
const downloadingByUri = selectDownloadingByUri(state)
const alreadyDownloading = !!downloadingByUri[uri]
const { cost } = costInfo
// we already fully downloaded the file
if (fileInfo && fileInfo.completed) {
return Promise.resolve()
}
// we are already downloading the file
if (alreadyDownloading) {
return Promise.resolve()
}
// the file is free or we have partially downloaded it
if (cost <= 0.01 || fileInfo.download_directory) {
dispatch(doLoadVideo())
return Promise.resolve()
}
if (cost > balance) {
dispatch(doOpenModal('notEnoughCredits'))
} else {
dispatch(doOpenModal('affirmPurchase'))
}
return Promise.resolve()
}
}

View file

@ -0,0 +1,36 @@
import * as types from 'constants/action_types'
import {
selectCurrentUri,
} from 'selectors/app'
import lbry from 'lbry'
export function doFetchCostInfoForUri(uri) {
return function(dispatch, getState) {
dispatch({
type: types.FETCH_COST_INFO_STARTED,
data: {
uri,
}
})
lbry.getCostInfo(uri).then(costInfo => {
dispatch({
type: types.FETCH_COST_INFO_COMPLETED,
data: {
uri,
costInfo,
}
})
})
}
}
export function doFetchCurrentUriCostInfo() {
return function(dispatch, getState) {
const state = getState()
const uri = selectCurrentUri(state)
dispatch(doFetchCostInfoForUri(uri))
}
}

102
ui/js/actions/file_info.js Normal file
View file

@ -0,0 +1,102 @@
import * as types from 'constants/action_types'
import lbry from 'lbry'
import {
selectCurrentUri,
} from 'selectors/app'
import {
selectCurrentUriClaimOutpoint,
} from 'selectors/claims'
import {
doCloseModal,
} from 'actions/app'
const {
shell,
} = require('electron')
export function doFetchCurrentUriFileInfo() {
return function(dispatch, getState) {
const state = getState()
const uri = selectCurrentUri(state)
const outpoint = selectCurrentUriClaimOutpoint(state)
dispatch({
type: types.FETCH_FILE_INFO_STARTED,
data: {
uri,
outpoint,
}
})
lbry.file_list({ outpoint: outpoint, full_status: true }).then(([fileInfo]) => {
dispatch({
type: types.FETCH_FILE_INFO_COMPLETED,
data: {
uri,
fileInfo,
}
})
})
}
}
export function doOpenFileInShell(fileInfo) {
return function(dispatch, getState) {
shell.openItem(fileInfo.download_path)
}
}
export function doOpenFileInFolder(fileInfo) {
return function(dispatch, getState) {
shell.showItemInFolder(fileInfo.download_path)
}
}
export function doDeleteFile(uri, fileInfo, deleteFromComputer) {
return function(dispatch, getState) {
dispatch({
type: types.DELETE_FILE_STARTED,
data: {
uri,
fileInfo,
deleteFromComputer,
}
})
const successCallback = () => {
dispatch({
type: types.DELETE_FILE_COMPLETED,
data: {
uri,
}
})
dispatch(doCloseModal())
}
lbry.removeFile(fileInfo.outpoint, deleteFromComputer, successCallback)
}
}
export function doFetchDownloadedContent() {
return function(dispatch, getState) {
const state = getState()
dispatch({
type: types.FETCH_DOWNLOADED_CONTENT_STARTED,
})
lbry.claim_list_mine().then((myClaimInfos) => {
lbry.file_list().then((fileInfos) => {
const myClaimOutpoints = myClaimInfos.map(({txid, nout}) => txid + ':' + nout);
dispatch({
type: types.FETCH_DOWNLOADED_CONTENT_COMPLETED,
data: {
fileInfos: fileInfos.filter(({outpoint}) => !myClaimOutpoints.includes(outpoint)),
}
})
});
});
}
}

36
ui/js/actions/rewards.js Normal file
View file

@ -0,0 +1,36 @@
import * as types from 'constants/action_types'
import lbry from 'lbry'
import lbryio from 'lbryio';
import rewards from 'rewards'
export function doFetchRewards() {
return function(dispatch, getState) {
const state = getState()
dispatch({
type: types.FETCH_REWARDS_STARTED,
})
lbryio.call('reward', 'list', {}).then(function(userRewards) {
dispatch({
type: types.FETCH_REWARDS_COMPLETED,
data: { userRewards }
})
});
}
}
export function doClaimReward(rewardType) {
return function(dispatch, getState) {
try {
rewards.claimReward(rewards[rewardType])
dispatch({
type: types.REWARD_CLAIMED,
data: {
reward: rewards[rewardType]
}
})
} catch(err) {
}
}
}

77
ui/js/actions/search.js Normal file
View file

@ -0,0 +1,77 @@
import * as types from 'constants/action_types'
import lbry from 'lbry'
import lbryio from 'lbryio'
import lbryuri from 'lbryuri'
import lighthouse from 'lighthouse'
import {
selectSearchQuery,
} from 'selectors/search'
import {
doResolveUri,
} from 'actions/content'
import {
doNavigate,
} from 'actions/app'
import {
selectCurrentPage,
} from 'selectors/app'
export function doSearchContent(query) {
return function(dispatch, getState) {
const state = getState()
const page = selectCurrentPage(state)
if (!query) {
return dispatch({
type: types.SEARCH_CANCELLED,
})
}
dispatch({
type: types.SEARCH_STARTED,
data: { query }
})
if(page != 'discover' && query != undefined) dispatch(doNavigate('discover'))
lighthouse.search(query).then(results => {
results.forEach(result => {
const uri = lbryuri.build({
channelName: result.channel_name,
contentName: result.name,
claimId: result.channel_id || result.claim_id,
})
dispatch(doResolveUri(uri))
})
dispatch({
type: types.SEARCH_COMPLETED,
data: {
query,
results,
}
})
})
}
}
export function doActivateSearch() {
return function(dispatch, getState) {
const state = getState()
const page = selectCurrentPage(state)
const query = selectSearchQuery(state)
if(page != 'discover' && query != undefined) dispatch(doNavigate('discover'))
dispatch({
type: types.ACTIVATE_SEARCH,
})
}
}
export function doDeactivateSearch() {
return {
type: types.DEACTIVATE_SEARCH,
}
}

125
ui/js/actions/wallet.js Normal file
View file

@ -0,0 +1,125 @@
import * as types from 'constants/action_types'
import lbry from 'lbry'
import {
selectDraftTransaction,
selectDraftTransactionAmount,
selectBalance,
} from 'selectors/wallet'
import {
doOpenModal,
} from 'actions/app'
export function doUpdateBalance(balance) {
return {
type: types.UPDATE_BALANCE,
data: {
balance: balance
}
}
}
export function doFetchTransactions() {
return function(dispatch, getState) {
dispatch({
type: types.FETCH_TRANSACTIONS_STARTED
})
lbry.call('get_transaction_history', {}, (results) => {
dispatch({
type: types.FETCH_TRANSACTIONS_COMPLETED,
data: {
transactions: results
}
})
})
}
}
export function doGetNewAddress() {
return function(dispatch, getState) {
dispatch({
type: types.GET_NEW_ADDRESS_STARTED
})
lbry.wallet_new_address().then(function(address) {
localStorage.setItem('wallet_address', address);
dispatch({
type: types.GET_NEW_ADDRESS_COMPLETED,
data: { address }
})
})
}
}
export function doCheckAddressIsMine(address) {
return function(dispatch, getState) {
dispatch({
type: types.CHECK_ADDRESS_IS_MINE_STARTED
})
lbry.checkAddressIsMine(address, (isMine) => {
if (!isMine) dispatch(doGetNewAddress())
dispatch({
type: types.CHECK_ADDRESS_IS_MINE_COMPLETED
})
})
}
}
export function doSendDraftTransaction() {
return function(dispatch, getState) {
const state = getState()
const draftTx = selectDraftTransaction(state)
const balance = selectBalance(state)
const amount = selectDraftTransactionAmount(state)
if (balance - amount < 1) {
return dispatch(doOpenModal('insufficientBalance'))
}
dispatch({
type: types.SEND_TRANSACTION_STARTED,
})
const successCallback = (results) => {
if(results === true) {
dispatch({
type: types.SEND_TRANSACTION_COMPLETED,
})
dispatch(doOpenModal('transactionSuccessful'))
}
else {
dispatch({
type: types.SEND_TRANSACTION_FAILED,
data: { error: results }
})
dispatch(doOpenModal('transactionFailed'))
}
}
const errorCallback = (error) => {
dispatch({
type: types.SEND_TRANSACTION_FAILED,
data: { error: error.message }
})
dispatch(doOpenModal('transactionFailed'))
}
lbry.sendToAddress(draftTx.amount, draftTx.address, successCallback, errorCallback);
}
}
export function doSetDraftTransactionAmount(amount) {
return {
type: types.SET_DRAFT_TRANSACTION_AMOUNT,
data: { amount }
}
}
export function doSetDraftTransactionAddress(address) {
return {
type: types.SET_DRAFT_TRANSACTION_ADDRESS,
data: { address }
}
}

View file

@ -1,7 +1,7 @@
import React from 'react'
import Router from 'component/router'
import Drawer from 'component/drawer';
import Header from 'component/header.js';
import Header from 'component/header';
import ErrorModal from 'component/errorModal'
import DownloadingModal from 'component/downloadingModal'
import UpgradeModal from 'component/upgradeModal'

View file

@ -97,54 +97,6 @@ export let CreditAmount = React.createClass({
}
});
export let FilePrice = React.createClass({
_isMounted: false,
propTypes: {
uri: React.PropTypes.string.isRequired,
look: React.PropTypes.oneOf(['indicator', 'plain']),
},
getDefaultProps: function() {
return {
look: 'indicator',
}
},
componentWillMount: function() {
this.setState({
cost: null,
isEstimate: null,
});
},
componentDidMount: function() {
this._isMounted = true;
lbry.getCostInfo(this.props.uri).then(({cost, includesData}) => {
if (this._isMounted) {
this.setState({
cost: cost,
isEstimate: !includesData,
});
}
}, (err) => {
// If we get an error looking up cost information, do nothing
});
},
componentWillUnmount: function() {
this._isMounted = false;
},
render: function() {
if (this.state.cost === null) {
return <span className={`credit-amount credit-amount--${this.props.look}`}>???</span>;
}
return <CreditAmount label={false} amount={this.state.cost} isEstimate={this.state.isEstimate} showFree={true} />
}
});
var addressStyle = {
fontFamily: '"Consolas", "Lucida Console", "Adobe Source Code Pro", monospace',
};

View file

@ -7,12 +7,16 @@ import {
doNavigate,
doCloseDrawer,
doLogoClick,
doUpdateBalance,
} from 'actions/app'
import {
doUpdateBalance,
} from 'actions/wallet'
import {
selectCurrentPage,
selectBalance,
} from 'selectors/app'
import {
selectBalance,
} from 'selectors/wallet'
const select = (state) => ({
currentPage: selectCurrentPage(state),

View file

@ -1,270 +0,0 @@
import React from 'react';
import lbry from '../lbry.js';
import lbryuri from '../lbryuri.js';
import {Icon, FilePrice} from '../component/common.js';
import {Modal} from './modal.js';
import {FormField} from './form.js';
import Link from 'component/link';
import {ToolTip} from '../component/tooltip.js';
import {DropDownMenu, DropDownMenuItem} from './menu.js';
const {shell} = require('electron');
let FileActionsRow = React.createClass({
_isMounted: false,
_fileInfoSubscribeId: null,
propTypes: {
uri: React.PropTypes.string,
outpoint: React.PropTypes.string.isRequired,
metadata: React.PropTypes.oneOfType([React.PropTypes.object, React.PropTypes.string]),
contentType: React.PropTypes.string.isRequired,
},
getInitialState: function() {
return {
fileInfo: null,
modal: null,
menuOpen: false,
deleteChecked: false,
attemptingDownload: false,
attemptingRemove: false,
}
},
onFileInfoUpdate: function(fileInfo) {
if (this._isMounted) {
this.setState({
fileInfo: fileInfo ? fileInfo : false,
attemptingDownload: fileInfo ? false : this.state.attemptingDownload
});
}
},
tryDownload: function() {
this.setState({
attemptingDownload: true,
attemptingRemove: false
});
lbry.getCostInfo(this.props.uri).then(({cost}) => {
lbry.getBalance((balance) => {
if (cost > balance) {
this.setState({
modal: 'notEnoughCredits',
attemptingDownload: false,
});
} else if (this.state.affirmedPurchase) {
lbry.get({uri: this.props.uri}).then((streamInfo) => {
if (streamInfo === null || typeof streamInfo !== 'object') {
this.setState({
modal: 'timedOut',
attemptingDownload: false,
});
}
});
} else {
this.setState({
attemptingDownload: false,
modal: 'affirmPurchase'
})
}
});
});
},
closeModal: function() {
this.setState({
modal: null,
})
},
onDownloadClick: function() {
if (!this.state.fileInfo && !this.state.attemptingDownload) {
this.tryDownload();
}
},
onOpenClick: function() {
if (this.state.fileInfo && this.state.fileInfo.download_path) {
shell.openItem(this.state.fileInfo.download_path);
}
},
handleDeleteCheckboxClicked: function(event) {
this.setState({
deleteChecked: event.target.checked,
});
},
handleRevealClicked: function() {
if (this.state.fileInfo && this.state.fileInfo.download_path) {
shell.showItemInFolder(this.state.fileInfo.download_path);
}
},
handleRemoveClicked: function() {
this.setState({
modal: 'confirmRemove',
});
},
handleRemoveConfirmed: function() {
lbry.removeFile(this.props.outpoint, this.state.deleteChecked);
this.setState({
modal: null,
fileInfo: false,
attemptingDownload: false
});
},
onAffirmPurchase: function() {
this.setState({
affirmedPurchase: true,
modal: null
});
this.tryDownload();
},
openMenu: function() {
this.setState({
menuOpen: !this.state.menuOpen,
});
},
componentDidMount: function() {
this._isMounted = true;
this._fileInfoSubscribeId = lbry.fileInfoSubscribe(this.props.outpoint, this.onFileInfoUpdate);
},
componentWillUnmount: function() {
this._isMounted = false;
if (this._fileInfoSubscribeId) {
lbry.fileInfoUnsubscribe(this.props.outpoint, this._fileInfoSubscribeId);
}
},
render: function() {
if (this.state.fileInfo === null)
{
return null;
}
const openInFolderMessage = window.navigator.platform.startsWith('Mac') ? 'Open in Finder' : 'Open in Folder',
showMenu = !!this.state.fileInfo;
let linkBlock;
if (this.state.fileInfo === false && !this.state.attemptingDownload) {
linkBlock = <Link button="text" label="Download" icon="icon-download" onClick={this.onDownloadClick} />;
} else if (this.state.attemptingDownload || (!this.state.fileInfo.completed && !this.state.fileInfo.isMine)) {
const
progress = this.state.fileInfo ? this.state.fileInfo.written_bytes / this.state.fileInfo.total_bytes * 100 : 0,
label = this.state.fileInfo ? progress.toFixed(0) + '% complete' : 'Connecting...',
labelWithIcon = <span className="button__content"><Icon icon="icon-download" /><span>{label}</span></span>;
linkBlock = (
<div className="faux-button-block file-actions__download-status-bar button-set-item">
<div className="faux-button-block file-actions__download-status-bar-overlay" style={{ width: progress + '%' }}>{labelWithIcon}</div>
{labelWithIcon}
</div>
);
} else {
linkBlock = <Link label="Open" button="text" icon="icon-folder-open" onClick={this.onOpenClick} />;
}
const uri = lbryuri.normalize(this.props.uri);
const title = this.props.metadata ? this.props.metadata.title : uri;
return (
<div>
{this.state.fileInfo !== null || this.state.fileInfo.isMine
? linkBlock
: null}
{ showMenu ?
<DropDownMenu>
<DropDownMenuItem key={0} onClick={this.handleRevealClicked} label={openInFolderMessage} />
<DropDownMenuItem key={1} onClick={this.handleRemoveClicked} label="Remove..." />
</DropDownMenu> : '' }
<Modal type="confirm" isOpen={this.state.modal == 'affirmPurchase'}
contentLabel="Confirm Purchase" onConfirmed={this.onAffirmPurchase} onAborted={this.closeModal}>
Are you sure you'd like to buy <strong>{title}</strong> for <strong><FilePrice uri={uri} metadata={this.props.metadata} label={false} look="plain" /></strong> credits?
</Modal>
<Modal isOpen={this.state.modal == 'notEnoughCredits'} contentLabel="Not enough credits"
onConfirmed={this.closeModal}>
You don't have enough LBRY credits to pay for this stream.
</Modal>
<Modal isOpen={this.state.modal == 'timedOut'} contentLabel="Download failed"
onConfirmed={this.closeModal}>
LBRY was unable to download the stream <strong>{uri}</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>{title}</cite> from LBRY?</p>
<label><FormField type="checkbox" checked={this.state.deleteChecked} onClick={this.handleDeleteCheckboxClicked} /> Delete this file from my computer</label>
</Modal>
</div>
);
}
});
export let FileActions = React.createClass({
_isMounted: false,
_fileInfoSubscribeId: null,
propTypes: {
uri: React.PropTypes.string,
outpoint: React.PropTypes.string.isRequired,
metadata: React.PropTypes.oneOfType([React.PropTypes.object, React.PropTypes.string]),
contentType: React.PropTypes.string,
},
getInitialState: function() {
return {
available: true,
forceShowActions: false,
fileInfo: null,
}
},
onShowFileActionsRowClicked: function() {
this.setState({
forceShowActions: true,
});
},
onFileInfoUpdate: function(fileInfo) {
if (this.isMounted) {
this.setState({
fileInfo: fileInfo,
});
}
},
componentDidMount: function() {
this._isMounted = true;
this._fileInfoSubscribeId = lbry.fileInfoSubscribe(this.props.outpoint, this.onFileInfoUpdate);
lbry.get_availability({uri: this.props.uri}, (availability) => {
if (this._isMounted) {
this.setState({
available: availability > 0,
});
}
}, () => {
// Take any error to mean the file is unavailable
if (this._isMounted) {
this.setState({
available: false,
});
}
});
},
componentWillUnmount: function() {
this._isMounted = false;
if (this._fileInfoSubscribeId) {
lbry.fileInfoUnsubscribe(this.props.outpoint, this._fileInfoSubscribeId);
}
},
render: function() {
const fileInfo = this.state.fileInfo;
if (fileInfo === null) {
return null;
}
return (<section className="file-actions">
{
fileInfo || this.state.available || this.state.forceShowActions
? <FileActionsRow outpoint={this.props.outpoint} metadata={this.props.metadata} uri={this.props.uri}
contentType={this.props.contentType} />
: <div>
<div className="button-set-item empty">Content unavailable.</div>
<ToolTip label="Why?"
body="The content on LBRY is hosted by its users. It appears there are no users connected that have this file at the moment."
className="button-set-item" />
<Link label="Try Anyway" onClick={this.onShowFileActionsRowClicked} className="button-text button-set-item" />
</div>
}
</section>);
}
});

View file

@ -1,276 +0,0 @@
import React from 'react';
import lbry from '../lbry.js';
import lbryuri from '../lbryuri.js';
import Link from 'component/link';
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 (
<section className={ 'file-tile card ' + (obscureNsfw ? 'card--obscured ' : '') } onMouseEnter={this.handleMouseOver} onMouseLeave={this.handleMouseOut}>
<div className={"row-fluid card__inner file-tile__row"}>
<div className="span3 file-tile__thumbnail-container">
<a href={'?show=' + uri}><Thumbnail className="file-tile__thumbnail" {... metadata && metadata.thumbnail ? {src: metadata.thumbnail} : {}} alt={'Photo for ' + this.props.uri} /></a>
</div>
<div className="span9">
<div className="card__title-primary">
{ !this.props.hidePrice
? <FilePrice uri={this.props.uri} />
: null}
<div className="meta"><a href={'?show=' + this.props.uri}>{uri}</a></div>
<h3>
<a href={'?show=' + uri} title={title}>
<TruncatedText lines={1}>
{title}
</TruncatedText>
</a>
</h3>
</div>
<div className="card__actions">
<FileActions uri={this.props.uri} outpoint={this.props.outpoint} metadata={metadata} contentType={this.props.contentType} />
</div>
<div className="card__content">
<p className="file-tile__description">
<TruncatedText lines={2}>
{isConfirmed
? metadata.description
: <span className="empty">This file is pending confirmation.</span>}
</TruncatedText>
</p>
</div>
</div>
</div>
{this.state.showNsfwHelp
? <div className='card-overlay'>
<p>
This content is Not Safe For Work.
To view adult content, please change your <Link className="button-text" href="?settings" label="Settings" />.
</p>
</div>
: null}
</section>
);
}
});
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 (
<section className={ 'card card--small card--link ' + (obscureNsfw ? 'card--obscured ' : '') } onMouseEnter={this.handleMouseOver} onMouseLeave={this.handleMouseOut}>
<div className="card__inner">
<a href={primaryUrl} className="card__link">
<div className="card__title-identity">
<h5 title={title}><TruncatedText lines={1}>{title}</TruncatedText></h5>
<div className="card__subtitle">
{ !this.props.hidePrice ? <span style={{float: "right"}}><FilePrice uri={this.props.uri} metadata={metadata} /></span> : null}
<UriIndicator uri={uri} metadata={metadata} contentType={this.props.contentType}
hasSignature={this.props.hasSignature} signatureIsValid={this.props.signatureIsValid} />
</div>
</div>
<div className="card__media" style={{ backgroundImage: "url('" + metadata.thumbnail + "')" }}></div>
<div className="card__content card__subtext card__subtext--two-lines">
<TruncatedText lines={2}>
{isConfirmed
? metadata.description
: <span className="empty">This file is pending confirmation.</span>}
</TruncatedText>
</div>
</a>
{this.state.showNsfwHelp && this.state.hovered
? <div className='card-overlay'>
<p>
This content is Not Safe For Work.
To view adult content, please change your <Link className="button-text" href="?settings" label="Settings" />.
</p>
</div>
: null}
</div>
</section>
);
}
});
export let FileTile = React.createClass({
_isMounted: false,
propTypes: {
uri: React.PropTypes.string.isRequired,
},
getInitialState: function() {
return {
outpoint: null,
claimInfo: null
}
},
componentDidMount: function() {
this._isMounted = true;
lbry.resolve({uri: this.props.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,
});
}
});
},
componentWillUnmount: function() {
this._isMounted = false;
},
render: function() {
if (!this.state.claimInfo) {
if (this.props.displayStyle == 'card') {
return <FileCardStream outpoint={null} metadata={{title: this.props.uri, description: "Loading..."}} contentType={null} hidePrice={true}
hasSignature={false} signatureIsValid={false} uri={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' ?
<FileCardStream outpoint={txid + ':' + nout} metadata={metadata} contentType={contentType}
hasSignature={has_signature} signatureIsValid={signature_is_valid} {... this.props}/> :
<FileTileStream outpoint={txid + ':' + nout} metadata={metadata} contentType={contentType}
hasSignature={has_signature} signatureIsValid={signature_is_valid} {... this.props} />;
}
});

View file

@ -0,0 +1,68 @@
import React from 'react'
import {
connect,
} from 'react-redux'
import {
selectObscureNsfw,
selectHidePrice,
selectHasSignature,
selectPlatform,
} from 'selectors/app'
import {
makeSelectFileInfoForUri,
makeSelectDownloadingForUri,
makeSelectLoadingForUri,
} from 'selectors/file_info'
import {
makeSelectAvailabilityForUri,
} from 'selectors/availability'
import {
selectCurrentModal,
} from 'selectors/app'
import {
doCloseModal,
doOpenModal,
} from 'actions/app'
import {
doOpenFileInShell,
doOpenFileInFolder,
doDeleteFile,
} from 'actions/file_info'
import {
doWatchVideo,
doLoadVideo,
} from 'actions/content'
import FileActions from './view'
const makeSelect = () => {
const selectFileInfoForUri = makeSelectFileInfoForUri()
const selectAvailabilityForUri = makeSelectAvailabilityForUri()
const selectDownloadingForUri = makeSelectDownloadingForUri()
const selectLoadingForUri = makeSelectLoadingForUri()
const select = (state, props) => ({
obscureNsfw: selectObscureNsfw(state),
hidePrice: selectHidePrice(state),
hasSignature: selectHasSignature(state),
fileInfo: selectFileInfoForUri(state, props),
availability: selectAvailabilityForUri(state, props),
platform: selectPlatform(state),
modal: selectCurrentModal(state),
downloading: selectDownloadingForUri(state, props),
loading: selectLoadingForUri(state, props),
})
return select
}
const perform = (dispatch) => ({
closeModal: () => dispatch(doCloseModal()),
openInFolder: (fileInfo) => dispatch(doOpenFileInFolder(fileInfo)),
openInShell: (fileInfo) => dispatch(doOpenFileInShell(fileInfo)),
deleteFile: (fileInfo, deleteFromComputer) => dispatch(doDeleteFile(fileInfo, deleteFromComputer)),
openModal: (modal) => dispatch(doOpenModal(modal)),
downloadClick: () => dispatch(doWatchVideo()),
loadVideo: () => dispatch(doLoadVideo())
})
export default connect(makeSelect, perform)(FileActions)

View file

@ -0,0 +1,345 @@
import React from 'react';
import lbry from 'lbry';
import lbryuri from 'lbryuri';
import {Icon,} from 'component/common';
import FilePrice from 'component/filePrice'
import {Modal} from 'component/modal';
import {FormField} from 'component/form';
import Link from 'component/link';
import {ToolTip} from 'component/tooltip';
import {DropDownMenu, DropDownMenuItem} from 'component/menu';
class FileActionsRow extends React.Component {
constructor(props) {
super(props)
this.state = {
deleteChecked: false,
}
}
handleDeleteCheckboxClicked(event) {
this.setState({
deleteChecked: event.target.checked,
})
}
onAffirmPurchase() {
this.props.closeModal()
this.props.loadVideo()
}
render() {
const {
fileInfo,
platform,
downloading,
loading,
uri,
deleteFile,
openInFolder,
openInShell,
modal,
openModal,
affirmPurchase,
closeModal,
downloadClick,
} = this.props
const {
deleteChecked,
} = this.state
const metadata = fileInfo ? fileInfo.metadata : null
if (!fileInfo)
{
return null;
}
const openInFolderMessage = platform.startsWith('Mac') ? 'Open in Finder' : 'Open in Folder',
showMenu = Object.keys(fileInfo).length != 0;
let linkBlock;
if (Object.keys(fileInfo).length == 0 && !downloading && !loading) {
linkBlock = <Link button="text" label="Download" icon="icon-download" onClick={downloadClick} />;
} else if (downloading || loading) {
const
progress = (fileInfo && fileInfo.written_bytes) ? fileInfo.written_bytes / fileInfo.total_bytes * 100 : 0,
label = fileInfo ? progress.toFixed(0) + '% complete' : 'Connecting...',
labelWithIcon = <span className="button__content"><Icon icon="icon-download" /><span>{label}</span></span>;
linkBlock = (
<div className="faux-button-block file-actions__download-status-bar button-set-item">
<div className="faux-button-block file-actions__download-status-bar-overlay" style={{ width: progress + '%' }}>{labelWithIcon}</div>
{labelWithIcon}
</div>
);
} else {
linkBlock = <Link label="Open" button="text" icon="icon-folder-open" onClick={() => openInShell(fileInfo)} />;
}
const title = metadata ? metadata.title : uri;
return (
<div>
{fileInfo !== null || fileInfo.isMine
? linkBlock
: null}
{ showMenu ?
<DropDownMenu>
<DropDownMenuItem key={0} onClick={() => openInFolder(fileInfo)} label={openInFolderMessage} />
<DropDownMenuItem key={1} onClick={() => openModal('confirmRemove')} label="Remove..." />
</DropDownMenu> : '' }
<Modal type="confirm" isOpen={modal == 'affirmPurchase'}
contentLabel="Confirm Purchase" onConfirmed={this.onAffirmPurchase.bind(this)} onAborted={closeModal}>
Are you sure you'd like to buy <strong>{title}</strong> for <strong><FilePrice uri={uri} look="plain" /></strong> credits?
</Modal>
<Modal isOpen={modal == 'notEnoughCredits'} contentLabel="Not enough credits"
onConfirmed={closeModal}>
You don't have enough LBRY credits to pay for this stream.
</Modal>
<Modal isOpen={modal == 'timedOut'} contentLabel="Download failed"
onConfirmed={closeModal}>
LBRY was unable to download the stream <strong>{uri}</strong>.
</Modal>
<Modal isOpen={modal == 'confirmRemove'}
contentLabel="Not enough credits"
type="confirm"
confirmButtonLabel="Remove"
onConfirmed={() => deleteFile(uri, fileInfo, deleteChecked)}
onAborted={closeModal}>
<p>Are you sure you'd like to remove <cite>{title}</cite> from LBRY?</p>
<label><FormField type="checkbox" checked={deleteChecked} onClick={this.handleDeleteCheckboxClicked.bind(this)} /> Delete this file from my computer</label>
</Modal>
</div>
);
}
}
// const FileActionsRow = React.createClass({
// _isMounted: false,
// _fileInfoSubscribeId: null,
// propTypes: {
// uri: React.PropTypes.string,
// outpoint: React.PropTypes.string.isRequired,
// metadata: React.PropTypes.oneOfType([React.PropTypes.object, React.PropTypes.string]),
// contentType: React.PropTypes.string.isRequired,
// },
// getInitialState: function() {
// return {
// fileInfo: null,
// modal: null,
// menuOpen: false,
// deleteChecked: false,
// attemptingDownload: false,
// attemptingRemove: false,
// }
// },
// onFileInfoUpdate: function(fileInfo) {
// if (this._isMounted) {
// this.setState({
// fileInfo: fileInfo ? fileInfo : false,
// attemptingDownload: fileInfo ? false : this.state.attemptingDownload
// });
// }
// },
// tryDownload: function() {
// this.setState({
// attemptingDownload: true,
// attemptingRemove: false
// });
// lbry.getCostInfo(this.props.uri).then(({cost}) => {
// lbry.getBalance((balance) => {
// if (cost > balance) {
// this.setState({
// modal: 'notEnoughCredits',
// attemptingDownload: false,
// });
// } else if (this.state.affirmedPurchase) {
// lbry.get({uri: this.props.uri}).then((streamInfo) => {
// if (streamInfo === null || typeof streamInfo !== 'object') {
// this.setState({
// modal: 'timedOut',
// attemptingDownload: false,
// });
// }
// });
// } else {
// this.setState({
// attemptingDownload: false,
// modal: 'affirmPurchase'
// })
// }
// });
// });
// },
// closeModal: function() {
// this.setState({
// modal: null,
// })
// },
// onDownloadClick: function() {
// if (!this.state.fileInfo && !this.state.attemptingDownload) {
// this.tryDownload();
// }
// },
// onOpenClick: function() {
// if (this.state.fileInfo && this.state.fileInfo.download_path) {
// shell.openItem(this.state.fileInfo.download_path);
// }
// },
// handleDeleteCheckboxClicked: function(event) {
// this.setState({
// deleteChecked: event.target.checked,
// });
// },
// handleRevealClicked: function() {
// if (this.state.fileInfo && this.state.fileInfo.download_path) {
// shell.showItemInFolder(this.state.fileInfo.download_path);
// }
// },
// handleRemoveClicked: function() {
// this.setState({
// modal: 'confirmRemove',
// });
// },
// handleRemoveConfirmed: function() {
// lbry.removeFile(this.props.outpoint, this.state.deleteChecked);
// this.setState({
// modal: null,
// fileInfo: false,
// attemptingDownload: false
// });
// },
// onAffirmPurchase: function() {
// this.setState({
// affirmedPurchase: true,
// modal: null
// });
// this.tryDownload();
// },
// openMenu: function() {
// this.setState({
// menuOpen: !this.state.menuOpen,
// });
// },
// componentDidMount: function() {
// this._isMounted = true;
// this._fileInfoSubscribeId = lbry.fileInfoSubscribe(this.props.outpoint, this.onFileInfoUpdate);
// },
// componentWillUnmount: function() {
// this._isMounted = false;
// if (this._fileInfoSubscribeId) {
// lbry.fileInfoUnsubscribe(this.props.outpoint, this._fileInfoSubscribeId);
// }
// },
// render: function() {
// if (this.state.fileInfo === null)
// {
// return null;
// }
// const openInFolderMessage = window.navigator.platform.startsWith('Mac') ? 'Open in Finder' : 'Open in Folder',
// showMenu = !!this.state.fileInfo;
// let linkBlock;
// if (this.state.fileInfo === false && !this.state.attemptingDownload) {
// linkBlock = <Link button="text" label="Download" icon="icon-download" onClick={this.onDownloadClick} />;
// } else if (this.state.attemptingDownload || (!this.state.fileInfo.completed && !this.state.fileInfo.isMine)) {
// const
// progress = this.state.fileInfo ? this.state.fileInfo.written_bytes / this.state.fileInfo.total_bytes * 100 : 0,
// label = this.state.fileInfo ? progress.toFixed(0) + '% complete' : 'Connecting...',
// labelWithIcon = <span className="button__content"><Icon icon="icon-download" /><span>{label}</span></span>;
// linkBlock = (
// <div className="faux-button-block file-actions__download-status-bar button-set-item">
// <div className="faux-button-block file-actions__download-status-bar-overlay" style={{ width: progress + '%' }}>{labelWithIcon}</div>
// {labelWithIcon}
// </div>
// );
// } else {
// linkBlock = <Link label="Open" button="text" icon="icon-folder-open" onClick={this.onOpenClick} />;
// }
// const uri = lbryuri.normalize(this.props.uri);
// const title = this.props.metadata ? this.props.metadata.title : uri;
// return (
// <div>
// {this.state.fileInfo !== null || this.state.fileInfo.isMine
// ? linkBlock
// : null}
// { showMenu ?
// <DropDownMenu>
// <DropDownMenuItem key={0} onClick={this.handleRevealClicked} label={openInFolderMessage} />
// <DropDownMenuItem key={1} onClick={this.handleRemoveClicked} label="Remove..." />
// </DropDownMenu> : '' }
// <Modal type="confirm" isOpen={this.state.modal == 'affirmPurchase'}
// contentLabel="Confirm Purchase" onConfirmed={this.onAffirmPurchase} onAborted={this.closeModal}>
// Are you sure you'd like to buy <strong>{title}</strong> for <strong><FilePrice uri={uri} look="plain" /></strong> credits?
// </Modal>
// <Modal isOpen={this.state.modal == 'notEnoughCredits'} contentLabel="Not enough credits"
// onConfirmed={this.closeModal}>
// You don't have enough LBRY credits to pay for this stream.
// </Modal>
// <Modal isOpen={this.state.modal == 'timedOut'} contentLabel="Download failed"
// onConfirmed={this.closeModal}>
// LBRY was unable to download the stream <strong>{uri}</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>{title}</cite> from LBRY?</p>
// <label><FormField type="checkbox" checked={this.state.deleteChecked} onClick={this.handleDeleteCheckboxClicked} /> Delete this file from my computer</label>
// </Modal>
// </div>
// );
// }
// });
class FileActions extends React.Component {
constructor(props) {
super(props)
this._isMounted = false
this._fileInfoSubscribeId = null
this.state = {
available: true,
forceShowActions: false,
fileInfo: null,
}
}
onShowFileActionsRowClicked() {
this.setState({
forceShowActions: true,
});
}
render() {
const {
fileInfo,
availability,
} = this.props
if (fileInfo === null) {
return null;
}
return (<section className="file-actions">
{
fileInfo || this.state.available || this.state.forceShowActions
? <FileActionsRow {...this.props} />
: <div>
<div className="button-set-item empty">Content unavailable.</div>
<ToolTip label="Why?"
body="The content on LBRY is hosted by its users. It appears there are no users connected that have this file at the moment."
className="button-set-item" />
<Link label="Try Anyway" onClick={this.onShowFileActionsRowClicked.bind(this)} className="button-text button-set-item" />
</div>
}
</section>);
}
}
export default FileActions

View file

@ -0,0 +1,44 @@
import React from 'react'
import {
connect
} from 'react-redux'
import {
doNavigate,
} from 'actions/app'
import {
selectHidePrice,
selectObscureNsfw,
} from 'selectors/app'
import {
makeSelectClaimForUri,
makeSelectSourceForUri,
makeSelectMetadataForUri,
} from 'selectors/claims'
import {
makeSelectFileInfoForUri,
} from 'selectors/file_info'
import FileCardStream from './view'
const makeSelect = () => {
const selectClaimForUri = makeSelectClaimForUri()
const selectFileInfoForUri = makeSelectFileInfoForUri()
const selectMetadataForUri = makeSelectMetadataForUri()
const selectSourceForUri = makeSelectSourceForUri()
const select = (state, props) => ({
claim: selectClaimForUri(state, props),
fileInfo: selectFileInfoForUri(state, props),
hidePrice: selectHidePrice(state),
obscureNsfw: selectObscureNsfw(state),
hasSignature: false,
metadata: selectMetadataForUri(state, props),
source: selectSourceForUri(state, props),
})
return select
}
const perform = (dispatch) => ({
navigate: (path) => dispatch(doNavigate(path)),
})
export default connect(makeSelect, perform)(FileCardStream)

View file

@ -0,0 +1,106 @@
import React from 'react';
import lbry from 'lbry.js';
import lbryuri from 'lbryuri.js';
import Link from 'component/link';
import {Thumbnail, TruncatedText,} from 'component/common';
import FilePrice from 'component/filePrice'
import UriIndicator from 'component/channel-indicator';
class FileCardStream extends React.Component {
constructor(props) {
super(props)
this._fileInfoSubscribeId = null
this._isMounted = null
this._metadata = null
this.state = {
showNsfwHelp: false,
isHidden: false,
}
}
componentDidMount() {
this._isMounted = true;
if (this.props.hideOnRemove) {
this._fileInfoSubscribeId = lbry.fileInfoSubscribe(this.props.outpoint, this.onFileInfoUpdate);
}
}
componentWillUnmount() {
if (this._fileInfoSubscribeId) {
lbry.fileInfoUnsubscribe(this.props.outpoint, this._fileInfoSubscribeId);
}
}
onFileInfoUpdate(fileInfo) {
if (!fileInfo && this._isMounted && this.props.hideOnRemove) {
this.setState({
isHidden: true
});
}
}
handleMouseOver() {
this.setState({
hovered: true,
});
}
handleMouseOut() {
this.setState({
hovered: false,
});
}
render() {
if (this.state.isHidden) {
return null;
}
// if (!this.props.metadata) {
// 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 (
<section className={ 'card card--small card--link ' + (obscureNsfw ? 'card--obscured ' : '') } onMouseEnter={this.handleMouseOver.bind(this)} onMouseLeave={this.handleMouseOut.bind(this)}>
<div className="card__inner">
<a href="#" onClick={() => this.props.navigate(primaryUrl)} className="card__link">
<div className="card__title-identity">
<h5 title={title}><TruncatedText lines={1}>{title}</TruncatedText></h5>
<div className="card__subtitle">
{ !this.props.hidePrice ? <span style={{float: "right"}}><FilePrice uri={lbryuri.normalize(this.props.uri)} /></span> : null}
<UriIndicator uri={uri} metadata={metadata} contentType={this.props.contentType}
hasSignature={this.props.hasSignature} signatureIsValid={this.props.signatureIsValid} />
</div>
</div>
{metadata &&
<div className="card__media" style={{ backgroundImage: "url('" + metadata.thumbnail + "')" }}></div>
}
<div className="card__content card__subtext card__subtext--two-lines">
<TruncatedText lines={2}>
{isConfirmed
? metadata.description
: <span className="empty">This file is pending confirmation.</span>}
</TruncatedText>
</div>
</a>
{this.state.showNsfwHelp && this.state.hovered
? <div className='card-overlay'>
<p>
This content is Not Safe For Work.
To view adult content, please change your <Link className="button-text" href="?settings" label="Settings" />.
</p>
</div>
: null}
</div>
</section>
);
}
}
export default FileCardStream

View file

@ -0,0 +1,13 @@
import React from 'react'
import {
connect
} from 'react-redux'
import FileList from './view'
const select = (state) => ({
})
const perform = (dispatch) => ({
})
export default connect(select, perform)(FileList)

View file

@ -0,0 +1,184 @@
import React from 'react';
import lbry from 'lbry.js';
import lbryuri from 'lbryuri.js';
import Link from 'component/link';
import {FormField} from 'component/form.js';
import FileTileStream from 'component/fileTileStream';
import rewards from 'rewards.js';
import lbryio from 'lbryio.js';
import {BusyMessage, Thumbnail} from 'component/common.js';
class FileList extends React.Component {
constructor(props) {
super(props)
this.state = {
sortBy: 'date',
}
this._sortFunctions = {
date: function(fileInfos) {
return fileInfos.slice().reverse();
},
title: function(fileInfos) {
return fileInfos.slice().sort(function(fileInfo1, fileInfo2) {
const title1 = fileInfo1.metadata ? fileInfo1.metadata.stream.metadata.title.toLowerCase() : fileInfo1.name;
const title2 = fileInfo2.metadata ? fileInfo2.metadata.stream.metadata.title.toLowerCase() : fileInfo2.name;
if (title1 < title2) {
return -1;
} else if (title1 > title2) {
return 1;
} else {
return 0;
}
})
},
filename: function(fileInfos) {
return fileInfos.slice().sort(function({file_name: fileName1}, {file_name: fileName2}) {
const fileName1Lower = fileName1.toLowerCase();
const fileName2Lower = fileName2.toLowerCase();
if (fileName1Lower < fileName2Lower) {
return -1;
} else if (fileName2Lower > fileName1Lower) {
return 1;
} else {
return 0;
}
})
},
}
}
handleSortChanged(event) {
this.setState({
sortBy: event.target.value,
})
}
render() {
const {
handleSortChanged,
fileInfos,
hidePrices,
} = this.props
const {
sortBy,
} = this.state
const content = []
this._sortFunctions[sortBy](fileInfos).forEach(fileInfo => {
const uri = lbryuri.build({
contentName: fileInfo.name,
channelName: fileInfo.channel_name,
})
content.push(<FileTileStream key={uri} uri={uri} hidePrice={hidePrices} />)
})
return (
<section>
<span className='sort-section'>
Sort by { ' ' }
<FormField type="select" onChange={this.handleSortChanged.bind(this)}>
<option value="date">Date</option>
<option value="title">Title</option>
<option value="filename">File name</option>
</FormField>
</span>
{content}
</section>
)
}
}
// const FileList = React.createClass({
// _sortFunctions: {
// date: function(fileInfos) {
// return fileInfos.slice().reverse();
// },
// title: function(fileInfos) {
// return fileInfos.slice().sort(function(fileInfo1, fileInfo2) {
// const title1 = fileInfo1.metadata ? fileInfo1.metadata.title.toLowerCase() : fileInfo1.name;
// const title2 = fileInfo2.metadata ? fileInfo2.metadata.title.toLowerCase() : fileInfo2.name;
// if (title1 < title2) {
// return -1;
// } else if (title1 > title2) {
// return 1;
// } else {
// return 0;
// }
// });
// },
// filename: function(fileInfos) {
// return fileInfos.slice().sort(function({file_name: fileName1}, {file_name: fileName2}) {
// const fileName1Lower = fileName1.toLowerCase();
// const fileName2Lower = fileName2.toLowerCase();
// if (fileName1Lower < fileName2Lower) {
// return -1;
// } else if (fileName2Lower > fileName1Lower) {
// return 1;
// } else {
// return 0;
// }
// });
// },
// },
// propTypes: {
// fileInfos: React.PropTypes.array.isRequired,
// hidePrices: React.PropTypes.bool,
// },
// getDefaultProps: function() {
// return {
// hidePrices: false,
// };
// },
// getInitialState: function() {
// return {
// sortBy: 'date',
// };
// },
// handleSortChanged: function(event) {
// this.setState({
// sortBy: event.target.value,
// });
// },
// render: function() {
// var content = [],
// seenUris = {};
// console.debug(this.props)
// const fileInfosSorted = this._sortFunctions[this.state.sortBy](this.props.fileInfos);
// for (let {outpoint, name, channel_name, metadata, mime_type, claim_id, has_signature, signature_is_valid} of fileInfosSorted) {
// if (seenUris[name] || !claim_id) {
// continue;
// }
// let streamMetadata;
// if (metadata) {
// streamMetadata = metadata.stream.metadata;
// } else {
// streamMetadata = null;
// }
// const uri = lbryuri.build({contentName: name, channelName: channel_name});
// seenUris[name] = true;
// content.push(<FileTileStream key={outpoint} uri={uri} hideOnRemove={true} />)
// }
// return (
// <section>
// <span className='sort-section'>
// Sort by { ' ' }
// <FormField type="select" onChange={this.handleSortChanged}>
// <option value="date">Date</option>
// <option value="title">Title</option>
// <option value="filename">File name</option>
// </FormField>
// </span>
// {content}
// </section>
// );
// }
// });
export default FileList

View file

@ -0,0 +1,22 @@
import React from 'react'
import {
connect,
} from 'react-redux'
import {
makeSelectCostInfoForUri,
} from 'selectors/cost_info'
import FilePrice from './view'
const makeSelect = () => {
const selectCostInfoForUri = makeSelectCostInfoForUri()
const select = (state, props) => ({
costInfo: selectCostInfoForUri(state, props),
})
return select
}
const perform = (dispatch) => ({
})
export default connect(makeSelect, perform)(FilePrice)

View file

@ -0,0 +1,21 @@
import React from 'react'
import {
CreditAmount,
} from 'component/common'
const FilePrice = (props) => {
const {
costInfo,
look = 'indicator',
} = props
const isEstimate = costInfo ? !costInfo.includesData : null
if (!costInfo) {
return <span className={`credit-amount credit-amount--${look}`}>???</span>;
}
return <CreditAmount label={false} amount={costInfo.cost} isEstimate={isEstimate} showFree={true} />
}
export default FilePrice

View file

@ -0,0 +1,27 @@
import React from 'react'
import {
connect
} from 'react-redux'
import {
makeSelectClaimForUri,
} from 'selectors/claims'
import {
makeSelectFileInfoForUri,
} from 'selectors/file_info'
import FileTile from './view'
const makeSelect = () => {
const selectClaimForUri = makeSelectClaimForUri()
const selectFileInfoForUri = makeSelectFileInfoForUri()
const select = (state, props) => ({
claim: selectClaimForUri(state, props),
fileInfo: selectFileInfoForUri(state, props),
})
return select
}
const perform = (dispatch) => ({
})
export default connect(makeSelect, perform)(FileTile)

View file

@ -0,0 +1,31 @@
import React from 'react';
import lbry from 'lbry.js';
import lbryuri from 'lbryuri.js';
import Link from 'component/link';
import FileCardStream from 'component/fileCardStream'
import FileTileStream from 'component/fileTileStream'
import FileActions from 'component/fileActions';
class FileTile extends React.Component {
render() {
const {
displayStyle,
uri,
claim,
} = this.props
if(!claim) {
if (displayStyle == 'card') {
return <FileCardStream uri={uri} />
}
return null
}
return displayStyle == 'card' ?
<FileCardStream uri={uri} />
:
<FileTileStream uri={uri} key={uri} />
}
}
export default FileTile

View file

@ -0,0 +1,50 @@
import React from 'react'
import {
connect
} from 'react-redux'
import {
doNavigate,
} from 'actions/app'
import {
makeSelectClaimForUri,
makeSelectSourceForUri,
makeSelectMetadataForUri,
} from 'selectors/claims'
import {
makeSelectFileInfoForUri,
} from 'selectors/file_info'
import {
makeSelectFetchingAvailabilityForUri,
makeSelectAvailabilityForUri,
} from 'selectors/availability'
import {
selectObscureNsfw,
} from 'selectors/app'
import FileTileStream from './view'
const makeSelect = () => {
const selectClaimForUri = makeSelectClaimForUri()
const selectFileInfoForUri = makeSelectFileInfoForUri()
const selectFetchingAvailabilityForUri = makeSelectFetchingAvailabilityForUri()
const selectAvailabilityForUri = makeSelectAvailabilityForUri()
const selectMetadataForUri = makeSelectMetadataForUri()
const selectSourceForUri = makeSelectSourceForUri()
const select = (state, props) => ({
claim: selectClaimForUri(state, props),
fileInfo: selectFileInfoForUri(state, props),
fetchingAvailability: selectFetchingAvailabilityForUri(state, props),
selectAvailabilityForUri: selectAvailabilityForUri(state, props),
obscureNsfw: selectObscureNsfw(state),
metadata: selectMetadataForUri(state, props),
source: selectSourceForUri(state, props),
})
return select
}
const perform = (dispatch) => ({
navigate: (path) => dispatch(doNavigate(path))
})
export default connect(makeSelect, perform)(FileTileStream)

View file

@ -0,0 +1,126 @@
import React from 'react';
import lbry from 'lbry.js';
import lbryuri from 'lbryuri.js';
import Link from 'component/link';
import FileActions from 'component/fileActions';
import {Thumbnail, TruncatedText,} from 'component/common.js';
import FilePrice from 'component/filePrice'
import UriIndicator from 'component/channel-indicator.js';
/*should be merged into FileTile once FileTile is refactored to take a single id*/
class FileTileStream extends React.Component {
constructor(props) {
super(props)
this._fileInfoSubscribeId = null
this._isMounted = null
this.state = {
showNsfwHelp: false,
isHidden: false,
}
}
componentDidMount() {
this._isMounted = true;
if (this.props.hideOnRemove) {
this._fileInfoSubscribeId = lbry.fileInfoSubscribe(this.props.outpoint, this.onFileInfoUpdate);
}
}
componentWillUnmount() {
if (this._fileInfoSubscribeId) {
lbry.fileInfoUnsubscribe(this.props.outpoint, this._fileInfoSubscribeId);
}
}
onFileInfoUpdate(fileInfo) {
if (!fileInfo && this._isMounted && this.props.hideOnRemove) {
this.setState({
isHidden: true
});
}
}
handleMouseOver() {
if (this.props.obscureNsfw && this.props.metadata && this.props.metadata.nsfw) {
this.setState({
showNsfwHelp: true,
});
}
}
handleMouseOut() {
if (this.state.showNsfwHelp) {
this.setState({
showNsfwHelp: false,
});
}
}
render() {
if (this.state.isHidden) {
return null;
}
const {
metadata,
navigate,
} = this.props
const uri = lbryuri.normalize(this.props.uri);
const isConfirmed = !!metadata;
const title = isConfirmed ? metadata.title : uri;
const obscureNsfw = this.props.obscureNsfw && isConfirmed && metadata.nsfw;
return (
<section className={ 'file-tile card ' + (obscureNsfw ? 'card--obscured ' : '') } onMouseEnter={this.handleMouseOver.bind(this)} onMouseLeave={this.handleMouseOut.bind(this)}>
<div className={"row-fluid card__inner file-tile__row"}>
<div className="span3 file-tile__thumbnail-container">
<a href="#" onClick={() => navigate(`show=${uri}`)}>
{metadata && metadata.thumbnail ?
<Thumbnail key={this.props.uri} className="file-tile__thumbnail" src={metadata.thumbnail} alt={'Photo for ' + this.props.uri} />
:
<Thumbnail className="file-tile__thumbnail" alt={'Photo for ' + this.props.uri} />
}
</a>
</div>
<div className="span9">
<div className="card__title-primary">
{ !this.props.hidePrice
? <FilePrice uri={this.props.uri} />
: null}
<div className="meta"><a href="#" onClick={() => navigate(`show=${uri}`)}>{uri}</a></div>
<h3>
<a href="#" onClick={() => navigate(`show=${uri}`)} title={title}>
<TruncatedText lines={1}>
{title}
</TruncatedText>
</a>
</h3>
</div>
<div className="card__actions">
</div>
<div className="card__content">
<p className="file-tile__description">
<TruncatedText lines={2}>
{isConfirmed
? metadata.description
: <span className="empty">This file is pending confirmation.</span>}
</TruncatedText>
</p>
</div>
</div>
</div>
{this.state.showNsfwHelp
? <div className='card-overlay'>
<p>
This content is Not Safe For Work.
To view adult content, please change your <Link className="button-text" href="#" onClick={() => navigate('settings')} label="Settings" />.
</p>
</div>
: null}
</section>
);
}
}
export default FileTileStream

View file

@ -0,0 +1,33 @@
import React from 'react'
import {
connect
} from 'react-redux'
import {
selectCurrentPage,
selectHeaderLinks,
selectPageTitle,
} from 'selectors/app'
import {
doNavigate,
} from 'actions/app'
import {
doSearchContent,
doActivateSearch,
doDeactivateSearch,
} from 'actions/search'
import Header from './view'
const select = (state) => ({
currentPage: selectCurrentPage(state),
subLinks: selectHeaderLinks(state),
pageTitle: selectPageTitle(state),
})
const perform = (dispatch) => ({
navigate: (path) => dispatch(doNavigate(path)),
search: (query) => dispatch(doSearchContent(query)),
activateSearch: () => dispatch(doActivateSearch()),
deactivateSearch: () => setTimeout(() => { dispatch(doDeactivateSearch()) }, 50),
})
export default connect(select, perform)(Header)

View file

@ -1,5 +1,5 @@
import React from 'react';
import {Icon} from './common.js';
import {Icon} from 'component/common.js';
import Link from 'component/link';
var Header = React.createClass({
@ -42,7 +42,7 @@ var Header = React.createClass({
//@TODO: Switch to React.js timing
var searchTerm = event.target.value;
this.userTypingTimer = setTimeout(() => {
this.props.onSearch(searchTerm);
this.props.search(searchTerm);
}, 800); // 800ms delay, tweak for faster/slower
},
@ -51,16 +51,18 @@ var Header = React.createClass({
<header id="header" className={ (this.state.isScrolled ? 'header-scrolled' : 'header-unscrolled') + ' ' + (this.props.links ? 'header-with-subnav' : 'header-no-subnav') }>
<div className="header-top-bar">
<Link onClick={this.props.onOpenDrawer} icon="icon-bars" className="open-drawer-link" />
<h1>{ this.state.title }</h1>
<h1>{ this.props.pageTitle }</h1>
<div className="header-search">
<Icon icon="icon-search" />
<input type="search" onChange={this.onQueryChange} defaultValue={this.props.initialQuery}
placeholder="Find movies, music, games, and more"/>
<input type="search" onChange={this.onQueryChange}
onFocus={() => this.props.activateSearch()}
onBlur={() => this.props.deactivateSearch()}
placeholder="Find movies, music, games, and more" />
</div>
</div>
{
this.props.links ?
<SubHeader links={this.props.links} viewingPage={this.props.viewingPage} /> :
<SubHeader {...this.props} /> :
''
}
</header>
@ -68,24 +70,28 @@ var Header = React.createClass({
}
});
var SubHeader = React.createClass({
render: function() {
var links = [],
viewingUrl = '?' + this.props.viewingPage;
const SubHeader = (props) => {
const {
subLinks,
currentPage,
navigate,
} = props
for (let link of Object.keys(this.props.links)) {
const links = []
for(let link of Object.keys(subLinks)) {
links.push(
<a href={link} key={link} className={ viewingUrl == link ? 'sub-header-selected' : 'sub-header-unselected' }>
{this.props.links[link]}
<a href="#" onClick={() => navigate(link)} key={link} className={link == currentPage ? 'sub-header-selected' : 'sub-header-unselected' }>
{subLinks[link]}
</a>
);
)
}
return (
<nav className="sub-header">
{links}
</nav>
);
}
});
)
}
export default Header;

View file

@ -3,17 +3,15 @@ import SettingsPage from 'page/settings.js';
import HelpPage from 'page/help';
import ReportPage from 'page/report.js';
import StartPage from 'page/start.js';
import WalletPage from 'page/wallet.js';
import DetailPage from 'page/show.js';
import WalletPage from 'page/wallet';
import ShowPage from 'page/showPage';
import PublishPage from 'page/publish.js';
import DiscoverPage from 'page/discover.js';
import DiscoverPage from 'page/discover';
import SplashScreen from 'component/splash.js';
import RewardsPage from 'page/rewards.js';
import DeveloperPage from 'page/developer.js';
import {
FileListDownloaded,
FileListPublished
} from 'page/file-list.js';
import FileListDownloaded from 'page/fileListDownloaded'
import FileListPublished from 'page/fileListPublished'
const route = (page, routesMap) => {
const component = routesMap[page]
@ -38,7 +36,7 @@ const Router = (props) => {
'wallet': <WalletPage {...props} />,
'send': <WalletPage {...props} />,
'receive': <WalletPage {...props} />,
'show': <DetailPage {...props} />,
'show': <ShowPage {...props} />,
'publish': <PublishPage {...props} />,
'developer': <DeveloperPage {...props} />,
'discover': <DiscoverPage {...props} />,

View file

@ -1,5 +1,11 @@
export const UPDATE_BALANCE = 'UPDATE_BALANCE'
export const NAVIGATE = 'NAVIGATE'
export const OPEN_MODAL = 'OPEN_MODAL'
export const CLOSE_MODAL = 'CLOSE_MODAL'
export const OPEN_DRAWER = 'OPEN_DRAWER'
export const CLOSE_DRAWER = 'CLOSE_DRAWER'
export const DAEMON_READY = 'DAEMON_READY'
// Upgrades
export const UPGRADE_CANCELLED = 'UPGRADE_CANCELLED'
@ -12,10 +18,49 @@ export const UPDATE_VERSION = 'UPDATE_VERSION'
export const SKIP_UPGRADE = 'SKIP_UPGRADE'
export const START_UPGRADE = 'START_UPGRADE'
export const OPEN_MODAL = 'OPEN_MODAL'
export const CLOSE_MODAL = 'CLOSE_MODAL'
// Wallet
export const GET_NEW_ADDRESS_STARTED = 'GET_NEW_ADDRESS_STARTED'
export const GET_NEW_ADDRESS_COMPLETED = 'GET_NEW_ADDRESS_COMPLETED'
export const FETCH_TRANSACTIONS_STARTED = 'FETCH_TRANSACTIONS_STARTED'
export const FETCH_TRANSACTIONS_COMPLETED = 'FETCH_TRANSACTIONS_COMPLETED'
export const UPDATE_BALANCE = 'UPDATE_BALANCE'
export const CHECK_ADDRESS_IS_MINE_STARTED = 'CHECK_ADDRESS_IS_MINE_STARTED'
export const CHECK_ADDRESS_IS_MINE_COMPLETED = 'CHECK_ADDRESS_IS_MINE_COMPLETED'
export const SET_DRAFT_TRANSACTION_AMOUNT = 'SET_DRAFT_TRANSACTION_AMOUNT'
export const SET_DRAFT_TRANSACTION_ADDRESS = 'SET_DRAFT_TRANSACTION_ADDRESS'
export const SEND_TRANSACTION_STARTED = 'SEND_TRANSACTION_STARTED'
export const SEND_TRANSACTION_COMPLETED = 'SEND_TRANSACTION_COMPLETED'
export const SEND_TRANSACTION_FAILED = 'SEND_TRANSACTION_FAILED'
export const OPEN_DRAWER = 'OPEN_DRAWER'
export const CLOSE_DRAWER = 'CLOSE_DRAWER'
// Content
export const FETCH_FEATURED_CONTENT_STARTED = 'FETCH_FEATURED_CONTENT_STARTED'
export const FETCH_FEATURED_CONTENT_COMPLETED = 'FETCH_FEATURED_CONTENT_COMPLETED'
export const RESOLVE_URI_STARTED = 'RESOLVE_URI_STARTED'
export const RESOLVE_URI_COMPLETED = 'RESOLVE_URI_COMPLETED'
export const FETCH_DOWNLOADED_CONTENT_STARTED = 'FETCH_DOWNLOADED_CONTENT_STARTED'
export const FETCH_DOWNLOADED_CONTENT_COMPLETED = 'FETCH_DOWNLOADED_CONTENT_COMPLETED'
export const FETCH_PUBLISHED_CONTENT_STARTED = 'FETCH_PUBLISHED_CONTENT_STARTED'
export const FETCH_PUBLISHED_CONTENT_COMPLETED = 'FETCH_PUBLISHED_CONTENT_COMPLETED'
export const FETCH_FILE_INFO_STARTED = 'FETCH_FILE_INFO_STARTED'
export const FETCH_FILE_INFO_COMPLETED = 'FETCH_FILE_INFO_COMPLETED'
export const FETCH_COST_INFO_STARTED = 'FETCH_COST_INFO_STARTED'
export const FETCH_COST_INFO_COMPLETED = 'FETCH_COST_INFO_COMPLETED'
export const LOADING_VIDEO_STARTED = 'LOADING_VIDEO_STARTED'
export const LOADING_VIDEO_COMPLETED = 'LOADING_VIDEO_COMPLETED'
export const LOADING_VIDEO_FAILED = 'LOADING_VIDEO_FAILED'
export const DOWNLOADING_STARTED = 'DOWNLOADING_STARTED'
export const DOWNLOADING_PROGRESSED = 'DOWNLOADING_PROGRESSED'
export const DOWNLOADING_COMPLETED = 'DOWNLOADING_COMPLETED'
export const PLAY_VIDEO_STARTED = 'PLAY_VIDEO_STARTED'
export const FETCH_AVAILABILITY_STARTED = 'FETCH_AVAILABILITY_STARTED'
export const FETCH_AVAILABILITY_COMPLETED = 'FETCH_AVAILABILITY_COMPLETED'
export const DELETE_FILE_STARTED = 'DELETE_FILE_STARTED'
export const DELETE_FILE_COMPLETED = 'DELETE_FILE_COMPLETED'
export const FETCH_MY_CLAIMS_COMPLETED = 'FETCH_MY_CLAIMS_COMPLETED'
export const START_SEARCH = 'START_SEARCH'
// Search
export const SEARCH_STARTED = 'SEARCH_STARTED'
export const SEARCH_COMPLETED = 'SEARCH_COMPLETED'
export const SEARCH_CANCELLED = 'SEARCH_CANCELLED'
export const ACTIVATE_SEARCH = 'ACTIVATE_SEARCH'
export const DEACTIVATE_SEARCH = 'DEACTIVATE_SEARCH'

View file

@ -287,7 +287,7 @@ lbry.getMyClaims = function(callback) {
lbry.removeFile = function(outpoint, deleteTargetFile=true, callback) {
this._removedFiles.push(outpoint);
this._updateFileInfoSubscribers(outpoint);
// this._updateFileInfoSubscribers(outpoint);
lbry.file_delete({
outpoint: outpoint,

View file

@ -5,6 +5,8 @@ const queryTimeout = 3000;
const maxQueryTries = 2;
const defaultServers = [
'http://lighthouse7.lbry.io:50005',
'http://lighthouse8.lbry.io:50005',
'http://lighthouse9.lbry.io:50005',
];
const path = '/';

View file

@ -9,6 +9,10 @@ import SnackBar from './component/snack-bar.js';
import {AuthOverlay} from './component/auth.js';
import { Provider } from 'react-redux';
import store from 'store.js';
import { runTriggers } from 'triggers'
import {
doDaemonReady
} from 'actions/app'
const {remote} = require('electron');
const contextMenu = remote.require('./menu/context-menu');
@ -23,6 +27,8 @@ window.addEventListener('contextmenu', (event) => {
});
const initialState = app.store.getState();
app.store.subscribe(runTriggers);
runTriggers();
var init = function() {
window.lbry = lbry;
@ -34,7 +40,7 @@ var init = function() {
})
function onDaemonReady() {
window.sessionStorage.setItem('loaded', 'y'); //once we've made it here once per session, we don't need to show splash again
app.store.dispatch(doDaemonReady())
ReactDOM.render(<Provider store={store}><div>{ lbryio.enabled ? <AuthOverlay/> : '' }<App /><SnackBar /></div></Provider>, canvas)
}

View file

@ -1,207 +0,0 @@
import React from 'react';
import lbry from '../lbry.js';
import lbryio from '../lbryio.js';
import lbryuri from '../lbryuri.js';
import lighthouse from '../lighthouse.js';
import {FileTile, FileTileStream} from '../component/file-tile.js';
import Link from '../component/link';
import {ToolTip} from '../component/tooltip.js';
import {BusyMessage} from '../component/common.js';
var fetchResultsStyle = {
color: '#888',
textAlign: 'center',
fontSize: '1.2em'
};
var SearchActive = React.createClass({
render: function() {
return (
<div style={fetchResultsStyle}>
<BusyMessage message="Looking up the Dewey Decimals" />
</div>
);
}
});
var searchNoResultsStyle = {
textAlign: 'center'
}, searchNoResultsMessageStyle = {
fontStyle: 'italic',
marginRight: '5px'
};
var SearchNoResults = React.createClass({
render: function() {
return (
<section style={searchNoResultsStyle}>
<span style={searchNoResultsMessageStyle}>No one has checked anything in for {this.props.query} yet.</span>
<Link label="Be the first" href="?publish" />
</section>
);
}
});
var SearchResults = React.createClass({
render: function() {
var rows = [],
seenNames = {}; //fix this when the search API returns claim IDs
for (let {name, claim, claim_id, channel_name, channel_id, txid, nout} of this.props.results) {
const uri = lbryuri.build({
channelName: channel_name,
contentName: name,
claimId: channel_id || claim_id,
});
rows.push(
<FileTileStream key={name} uri={uri} outpoint={txid + ':' + nout} metadata={claim.stream.metadata} contentType={claim.stream.source.contentType} />
);
}
return (
<div>{rows}</div>
);
}
});
const communityCategoryToolTipText = ('Community Content is a public space where anyone can share content with the ' +
'rest of the LBRY community. Bid on the names "one," "two," "three," "four" and ' +
'"five" to put your content here!');
var FeaturedCategory = React.createClass({
render: function() {
return (<div className="card-row card-row--small">
{ this.props.category ?
<h3 className="card-row__header">{this.props.category}
{ this.props.category == "community" ?
<ToolTip label="What's this?" body={communityCategoryToolTipText} className="tooltip--header"/>
: '' }</h3>
: '' }
{ this.props.names.map((name) => { return <FileTile key={name} displayStyle="card" uri={name} /> }) }
</div>)
}
})
var FeaturedContent = React.createClass({
getInitialState: function() {
return {
featuredUris: {},
failed: false
};
},
componentWillMount: function() {
lbryio.call('discover', 'list', { version: "early-access" } ).then(({Categories, Uris}) => {
let featuredUris = {}
Categories.forEach((category) => {
if (Uris[category] && Uris[category].length) {
featuredUris[category] = Uris[category]
}
})
this.setState({ featuredUris: featuredUris });
}, () => {
this.setState({
failed: true
})
});
},
render: function() {
return (
this.state.failed ?
<div className="empty">Failed to load landing content.</div> :
<div>
{
Object.keys(this.state.featuredUris).map(function(category) {
return this.state.featuredUris[category].length ?
<FeaturedCategory key={category} category={category} names={this.state.featuredUris[category]} /> :
'';
}.bind(this))
}
</div>
);
}
});
var DiscoverPage = React.createClass({
userTypingTimer: null,
propTypes: {
showWelcome: React.PropTypes.bool.isRequired,
},
componentDidUpdate: function() {
if (this.props.query != this.state.query)
{
this.handleSearchChanged(this.props.query);
}
},
getDefaultProps: function() {
return {
showWelcome: false,
}
},
componentWillReceiveProps: function(nextProps, nextState) {
if (nextProps.query != nextState.query)
{
this.handleSearchChanged(nextProps.query);
}
},
handleSearchChanged: function(query) {
this.setState({
searching: true,
query: query,
});
lighthouse.search(query).then(this.searchCallback);
},
handleWelcomeDone: function() {
this.setState({
welcomeComplete: true,
});
},
componentWillMount: function() {
document.title = "Discover";
if (this.props.query) {
// Rendering with a query already typed
this.handleSearchChanged(this.props.query);
}
},
getInitialState: function() {
return {
welcomeComplete: false,
results: [],
query: this.props.query,
searching: ('query' in this.props) && (this.props.query.length > 0)
};
},
searchCallback: function(results) {
if (this.state.searching) //could have canceled while results were pending, in which case nothing to do
{
this.setState({
results: results,
searching: false //multiple searches can be out, we're only done if we receive one we actually care about
});
}
},
render: function() {
return (
<main>
<FeaturedContent />
{ this.state.searching ? <SearchActive /> : null }
{ !this.state.searching && this.props.query && this.state.results.length ? <SearchResults results={this.state.results} /> : null }
{ !this.state.searching && this.props.query && !this.state.results.length ? <SearchNoResults query={this.props.query} /> : null }
{ !this.props.query && !this.state.searching ? <FeaturedContent /> : null }
</main>
);
}
});
export default DiscoverPage;

View file

@ -0,0 +1,30 @@
import React from 'react'
import {
connect
} from 'react-redux'
import {
selectFeaturedContentByCategory
} from 'selectors/content'
import {
doSearchContent,
} from 'actions/search'
import {
selectIsSearching,
selectSearchQuery,
selectCurrentSearchResults,
selectSearchActivated,
} from 'selectors/search'
import DiscoverPage from './view'
const select = (state) => ({
featuredContentByCategory: selectFeaturedContentByCategory(state),
isSearching: selectIsSearching(state),
query: selectSearchQuery(state),
results: selectCurrentSearchResults(state),
searchActive: selectSearchActivated(state),
})
const perform = (dispatch) => ({
})
export default connect(select, perform)(DiscoverPage)

View file

@ -0,0 +1,126 @@
import React from 'react';
import lbry from 'lbry.js';
import lbryio from 'lbryio.js';
import lbryuri from 'lbryuri.js';
import lighthouse from 'lighthouse.js';
import FileTile from 'component/fileTile';
import FileTileStream from 'component/fileTileStream'
import Link from 'component/link';
import {ToolTip} from 'component/tooltip.js';
import {BusyMessage} from 'component/common.js';
const fetchResultsStyle = {
color: '#888',
textAlign: 'center',
fontSize: '1.2em'
}
const SearchActive = (props) => {
return (
<div style={fetchResultsStyle}>
<BusyMessage message="Looking up the Dewey Decimals" />
</div>
)
}
const searchNoResultsStyle = {
textAlign: 'center'
}, searchNoResultsMessageStyle = {
fontStyle: 'italic',
marginRight: '5px'
};
const SearchNoResults = (props) => {
const {
query,
} = props
return (
<section style={searchNoResultsStyle}>
<span style={searchNoResultsMessageStyle}>No one has checked anything in for {query} yet.</span>
<Link label="Be the first" href="?publish" />
</section>
)
}
const SearchResults = (props) => {
const {
results
} = props
const rows = [],
seenNames = {}; //fix this when the search API returns claim IDs
for (let {name, claim, claim_id, channel_name, channel_id, txid, nout} of results) {
const uri = lbryuri.build({
channelName: channel_name,
contentName: name,
claimId: channel_id || claim_id,
});
rows.push(
<FileTileStream key={uri} uri={uri} />
);
}
return (
<div>{rows}</div>
)
}
const communityCategoryToolTipText = ('Community Content is a public space where anyone can share content with the ' +
'rest of the LBRY community. Bid on the names "one," "two," "three," "four" and ' +
'"five" to put your content here!');
const FeaturedCategory = (props) => {
const {
category,
names,
} = props
return (
<div className="card-row card-row--small">
<h3 className="card-row__header">{category}
{category &&
<ToolTip label="What's this?" body={communityCategoryToolTipText} className="tooltip--header" />}
</h3>
{names && names.map(name => <FileTile key={name} displayStyle="card" uri={name} />)}
</div>
)
}
const FeaturedContent = (props) => {
const {
featuredContentByCategory,
} = props
const categories = Object.keys(featuredContentByCategory)
return (
<div>
{categories.map(category =>
<FeaturedCategory key={category} category={category} names={featuredContentByCategory[category]} />
)}
</div>
)
}
const DiscoverPage = (props) => {
const {
isSearching,
query,
results,
searchActive,
} = props
return (
<main>
{ (!searchActive || (!isSearching && !query)) && <FeaturedContent {...props} /> }
{ searchActive && isSearching ? <SearchActive /> : null }
{ searchActive && !isSearching && query && results.length ? <SearchResults results={results} /> : null }
{ searchActive && !isSearching && query && !results.length ? <SearchNoResults query={query} /> : null }
</main>
);
}
export default DiscoverPage;

View file

@ -1,220 +0,0 @@
import React from 'react';
import lbry from '../lbry.js';
import lbryuri from '../lbryuri.js';
import Link from 'component/link';
import {FormField} from '../component/form.js';
import {FileTileStream} from '../component/file-tile.js';
import rewards from '../rewards.js';
import lbryio from '../lbryio.js';
import {BusyMessage, Thumbnail} from '../component/common.js';
export let FileListDownloaded = React.createClass({
_isMounted: false,
getInitialState: function() {
return {
fileInfos: null,
};
},
componentDidMount: function() {
this._isMounted = true;
document.title = "Downloaded Files";
lbry.claim_list_mine().then((myClaimInfos) => {
if (!this._isMounted) { return; }
lbry.file_list().then((fileInfos) => {
if (!this._isMounted) { return; }
const myClaimOutpoints = myClaimInfos.map(({txid, nout}) => txid + ':' + nout);
this.setState({
fileInfos: fileInfos.filter(({outpoint}) => !myClaimOutpoints.includes(outpoint)),
});
});
});
},
componentWillUnmount: function() {
this._isMounted = false;
},
render: function() {
if (this.state.fileInfos === null) {
return (
<main className="page">
<BusyMessage message="Loading" />
</main>
);
} else if (!this.state.fileInfos.length) {
return (
<main className="page">
<span>You haven't downloaded anything from LBRY yet. Go <Link href="?discover" label="search for your first download" />!</span>
</main>
);
} else {
return (
<main className="page">
<FileList fileInfos={this.state.fileInfos} hidePrices={true} />
</main>
);
}
}
});
export let FileListPublished = React.createClass({
_isMounted: false,
getInitialState: function () {
return {
fileInfos: null,
};
},
_requestPublishReward: function() {
lbryio.call('reward', 'list', {}).then(function(userRewards) {
//already rewarded
if (userRewards.filter(function (reward) {
return reward.RewardType == rewards.TYPE_FIRST_PUBLISH && reward.TransactionID;
}).length) {
return;
}
else {
rewards.claimReward(rewards.TYPE_FIRST_PUBLISH).catch(() => {})
}
});
},
componentDidMount: function () {
this._isMounted = true;
this._requestPublishReward();
document.title = "Published Files";
lbry.claim_list_mine().then((claimInfos) => {
if (!this._isMounted) { return; }
lbry.file_list().then((fileInfos) => {
if (!this._isMounted) { return; }
const myClaimOutpoints = claimInfos.map(({txid, nout}) => txid + ':' + nout);
this.setState({
fileInfos: fileInfos.filter(({outpoint}) => myClaimOutpoints.includes(outpoint)),
});
});
});
},
componentWillUnmount: function() {
this._isMounted = false;
},
render: function () {
if (this.state.fileInfos === null) {
return (
<main className="page">
<BusyMessage message="Loading" />
</main>
);
}
else if (!this.state.fileInfos.length) {
return (
<main className="page">
<span>You haven't published anything to LBRY yet.</span> Try <Link href="?publish" label="publishing" />!
</main>
);
}
else {
return (
<main className="page">
<FileList fileInfos={this.state.fileInfos} />
</main>
);
}
}
});
export let FileList = React.createClass({
_sortFunctions: {
date: function(fileInfos) {
return fileInfos.slice().reverse();
},
title: function(fileInfos) {
return fileInfos.slice().sort(function(fileInfo1, fileInfo2) {
const title1 = fileInfo1.metadata ? fileInfo1.metadata.title.toLowerCase() : fileInfo1.name;
const title2 = fileInfo2.metadata ? fileInfo2.metadata.title.toLowerCase() : fileInfo2.name;
if (title1 < title2) {
return -1;
} else if (title1 > title2) {
return 1;
} else {
return 0;
}
});
},
filename: function(fileInfos) {
return fileInfos.slice().sort(function({file_name: fileName1}, {file_name: fileName2}) {
const fileName1Lower = fileName1.toLowerCase();
const fileName2Lower = fileName2.toLowerCase();
if (fileName1Lower < fileName2Lower) {
return -1;
} else if (fileName2Lower > fileName1Lower) {
return 1;
} else {
return 0;
}
});
},
},
propTypes: {
fileInfos: React.PropTypes.array.isRequired,
hidePrices: React.PropTypes.bool,
},
getDefaultProps: function() {
return {
hidePrices: false,
};
},
getInitialState: function() {
return {
sortBy: 'date',
};
},
handleSortChanged: function(event) {
this.setState({
sortBy: event.target.value,
});
},
render: function() {
var content = [],
seenUris = {};
const fileInfosSorted = this._sortFunctions[this.state.sortBy](this.props.fileInfos);
for (let {outpoint, name, channel_name, metadata, mime_type, claim_id, has_signature, signature_is_valid} of fileInfosSorted) {
if (seenUris[name] || !claim_id) {
continue;
}
let streamMetadata;
if (metadata) {
streamMetadata = metadata.stream.metadata;
} else {
streamMetadata = null;
}
const uri = lbryuri.build({contentName: name, channelName: channel_name});
seenUris[name] = true;
content.push(<FileTileStream key={outpoint} outpoint={outpoint} uri={uri} hideOnRemove={true}
hidePrice={this.props.hidePrices} metadata={streamMetadata} contentType={mime_type}
hasSignature={has_signature} signatureIsValid={signature_is_valid} />);
}
return (
<section>
<span className='sort-section'>
Sort by { ' ' }
<FormField type="select" onChange={this.handleSortChanged}>
<option value="date">Date</option>
<option value="title">Title</option>
<option value="filename">File name</option>
</FormField>
</span>
{content}
</section>
);
}
});

View file

@ -0,0 +1,25 @@
import React from 'react'
import {
connect
} from 'react-redux'
import {
selectFetchingDownloadedContent,
} from 'selectors/content'
import {
selectDownloadedFileInfo,
} from 'selectors/file_info'
import {
doNavigate,
} from 'actions/app'
import FileListDownloaded from './view'
const select = (state) => ({
downloadedContent: selectDownloadedFileInfo(state),
fetching: selectFetchingDownloadedContent(state),
})
const perform = (dispatch) => ({
navigate: (path) => dispatch(doNavigate(path)),
})
export default connect(select, perform)(FileListDownloaded)

View file

@ -0,0 +1,42 @@
import React from 'react';
import lbry from 'lbry.js';
import lbryuri from 'lbryuri.js';
import Link from 'component/link';
import {FormField} from 'component/form.js';
import {FileTileStream} from 'component/fileTile';
import rewards from 'rewards.js';
import lbryio from 'lbryio.js';
import {BusyMessage, Thumbnail} from 'component/common.js';
import FileList from 'component/fileList'
class FileListDownloaded extends React.Component {
render() {
const {
downloadedContent,
fetching,
navigate,
} = this.props
if (fetching) {
return (
<main className="page">
<BusyMessage message="Loading" />
</main>
);
} else if (!downloadedContent.length) {
return (
<main className="page">
<span>You haven't downloaded anything from LBRY yet. Go <Link href="#" onClick={() => navigate('discover')} label="search for your first download" />!</span>
</main>
);
} else {
return (
<main className="page">
<FileList fileInfos={downloadedContent} hidePrices={true} />
</main>
);
}
}
}
export default FileListDownloaded

View file

@ -0,0 +1,25 @@
import React from 'react'
import {
connect
} from 'react-redux'
import {
selectFetchingPublishedContent,
} from 'selectors/content'
import {
selectPublishedFileInfo,
} from 'selectors/file_info'
import {
doNavigate,
} from 'actions/app'
import FileListPublished from './view'
const select = (state) => ({
publishedContent: selectPublishedFileInfo(state),
fetching: selectFetchingPublishedContent(state),
})
const perform = (dispatch) => ({
navigate: (path) => dispatch(doNavigate(path)),
})
export default connect(select, perform)(FileListPublished)

View file

@ -0,0 +1,126 @@
import React from 'react';
import lbry from 'lbry.js';
import lbryuri from 'lbryuri.js';
import Link from 'component/link';
import {FormField} from 'component/form.js';
import {FileTileStream} from 'component/fileTile';
import rewards from 'rewards.js';
import lbryio from 'lbryio.js';
import {BusyMessage, Thumbnail} from 'component/common.js';
import FileList from 'component/fileList'
class FileListPublished extends React.Component {
componentDidUpdate() {
if(this.props.publishedContent.length > 0) this._requestPublishReward()
}
_requestPublishReward() {
lbryio.call('reward', 'list', {}).then(function(userRewards) {
//already rewarded
if (userRewards.filter(function (reward) {
return reward.RewardType == rewards.TYPE_FIRST_PUBLISH && reward.TransactionID
}).length) {
return
}
else {
rewards.claimReward(rewards.TYPE_FIRST_PUBLISH).catch(() => {})
}
})
}
render() {
const {
publishedContent,
fetching,
navigate,
} = this.props
if (fetching) {
return (
<main className="page">
<BusyMessage message="Loading" />
</main>
);
} else if (!publishedContent.length) {
return (
<main className="page">
<span>You haven't downloaded anything from LBRY yet. Go <Link href="#" onClick={() => navigate('discover')} label="search for your first download" />!</span>
</main>
);
} else {
return (
<main className="page">
<FileList fileInfos={publishedContent} hidePrices={true} />
</main>
);
}
}
}
// const FileListPublished = React.createClass({
// _isMounted: false,
// getInitialState: function () {
// return {
// fileInfos: null,
// };
// },
// _requestPublishReward: function() {
// lbryio.call('reward', 'list', {}).then(function(userRewards) {
// //already rewarded
// if (userRewards.filter(function (reward) {
// return reward.RewardType == rewards.TYPE_FIRST_PUBLISH && reward.TransactionID;
// }).length) {
// return;
// }
// else {
// rewards.claimReward(rewards.TYPE_FIRST_PUBLISH).catch(() => {})
// }
// });
// },
// componentDidMount: function () {
// this._isMounted = true;
// this._requestPublishReward();
// document.title = "Published Files";
// lbry.claim_list_mine().then((claimInfos) => {
// if (!this._isMounted) { return; }
// lbry.file_list().then((fileInfos) => {
// if (!this._isMounted) { return; }
// const myClaimOutpoints = claimInfos.map(({txid, nout}) => txid + ':' + nout);
// this.setState({
// fileInfos: fileInfos.filter(({outpoint}) => myClaimOutpoints.includes(outpoint)),
// });
// });
// });
// },
// componentWillUnmount: function() {
// this._isMounted = false;
// },
// render: function () {
// if (this.state.fileInfos === null) {
// return (
// <main className="page">
// <BusyMessage message="Loading" />
// </main>
// );
// }
// else if (!this.state.fileInfos.length) {
// return (
// <main className="page">
// <span>You haven't published anything to LBRY yet.</span> Try <Link href="?publish" label="publishing" />!
// </main>
// );
// }
// else {
// return (
// <main className="page">
// <FileList fileInfos={this.state.fileInfos} />
// </main>
// );
// }
// }
// });
export default FileListPublished

View file

@ -1,139 +0,0 @@
import React from 'react';
import lbry from '../lbry.js';
import lighthouse from '../lighthouse.js';
import lbryuri from '../lbryuri.js';
import {Video} from '../page/watch.js'
import {TruncatedText, Thumbnail, FilePrice, BusyMessage} from '../component/common.js';
import {FileActions} from '../component/file-actions.js';
import Link from '../component/link';
import UriIndicator from '../component/channel-indicator.js';
var FormatItem = React.createClass({
propTypes: {
metadata: React.PropTypes.object,
contentType: React.PropTypes.string,
uri: React.PropTypes.string,
outpoint: React.PropTypes.string,
},
render: function() {
const {thumbnail, author, title, description, language, license} = this.props.metadata;
const mediaType = lbry.getMediaType(this.props.contentType);
return (
<table className="table-standard">
<tbody>
<tr>
<td>Content-Type</td><td>{this.props.contentType}</td>
</tr>
<tr>
<td>Author</td><td>{author}</td>
</tr>
<tr>
<td>Language</td><td>{language}</td>
</tr>
<tr>
<td>License</td><td>{license}</td>
</tr>
</tbody>
</table>
);
}
});
let ShowPage = React.createClass({
_uri: null,
propTypes: {
uri: React.PropTypes.string,
},
getInitialState: function() {
return {
metadata: null,
contentType: null,
hasSignature: false,
signatureIsValid: false,
cost: null,
costIncludesData: null,
uriLookupComplete: null,
isDownloaded: null,
};
},
componentWillMount: function() {
this._uri = lbryuri.normalize(this.props.uri);
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: outpoint,
metadata: metadata,
hasSignature: has_signature,
signatureIsValid: signature_is_valid,
contentType: contentType,
uriLookupComplete: true,
});
});
lbry.getCostInfo(this._uri).then(({cost, includesData}) => {
this.setState({
cost: cost,
costIncludesData: includesData,
});
});
},
render: function() {
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} outpoint={this.state.outpoint} /> :
(metadata ? <Thumbnail src={metadata.thumbnail} /> : <Thumbnail />) }
</section>
<section className="card">
<div className="card__inner">
<div className="card__title-identity">
{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>
<div className="card__subtitle">
<UriIndicator uri={this._uri} hasSignature={this.state.hasSignature} signatureIsValid={this.state.signatureIsValid} />
</div>
<div className="card__actions">
<FileActions uri={this._uri} outpoint={this.state.outpoint} metadata={metadata} contentType={this.state.contentType} />
</div>
</div> : '' }
</div>
{ this.state.uriLookupComplete ?
<div>
<div className="card__content card__subtext card__subtext card__subtext--allow-newlines">
{metadata.description}
</div>
</div>
: <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>
</section>
</main>
);
}
});
export default ShowPage;

View file

@ -0,0 +1,33 @@
import React from 'react'
import {
connect
} from 'react-redux'
import {
selectCurrentUri,
} from 'selectors/app'
import {
selectCurrentUriIsDownloaded,
} from 'selectors/file_info'
import {
selectCurrentUriClaim,
} from 'selectors/claims'
import {
selectCurrentUriFileInfo,
} from 'selectors/file_info'
import {
selectCurrentUriCostInfo,
} from 'selectors/cost_info'
import ShowPage from './view'
const select = (state) => ({
claim: selectCurrentUriClaim(state),
uri: selectCurrentUri(state),
isDownloaded: selectCurrentUriIsDownloaded(state),
fileInfo: selectCurrentUriFileInfo(state),
costInfo: selectCurrentUriCostInfo(state),
})
const perform = (dispatch) => ({
})
export default connect(select, perform)(ShowPage)

View file

@ -0,0 +1,135 @@
import React from 'react';
import lbry from 'lbry.js';
import lighthouse from 'lighthouse.js';
import lbryuri from 'lbryuri.js';
import Video from 'page/video'
import {
TruncatedText,
Thumbnail,
BusyMessage,
} from 'component/common';
import FilePrice from 'component/filePrice'
import FileActions from 'component/fileActions';
import Link from 'component/link';
import UriIndicator from 'component/channel-indicator.js';
const FormatItem = (props) => {
const {
contentType,
metadata,
metadata: {
thumbnail,
author,
title,
description,
language,
license,
},
cost,
uri,
outpoint,
costIncludesData,
} = props
const mediaType = lbry.getMediaType(contentType);
return (
<table className="table-standard">
<tbody>
<tr>
<td>Content-Type</td><td>{contentType}</td>
</tr>
<tr>
<td>Author</td><td>{author}</td>
</tr>
<tr>
<td>Language</td><td>{language}</td>
</tr>
<tr>
<td>License</td><td>{license}</td>
</tr>
</tbody>
</table>
)
}
const ShowPage = (props) => {
const {
claim,
claim: {
txid,
nout,
has_signature: hasSignature,
signature_is_valid: signatureIsValid,
value,
value: {
stream,
stream: {
metadata,
source,
metadata: {
title,
} = {},
source: {
contentType,
} = {},
} = {},
} = {},
},
uri,
isDownloaded,
fileInfo,
costInfo,
costInfo: {
cost,
includesData: costIncludesData,
} = {},
} = props
const outpoint = txid + ':' + nout;
const uriLookupComplete = !!claim && Object.keys(claim).length
return (
<main className="constrained-page">
<section className="show-page-media">
{ contentType && contentType.startsWith('video/') ?
<Video className="video-embedded" uri={uri} metadata={metadata} outpoint={outpoint} /> :
(metadata ? <Thumbnail src={metadata.thumbnail} /> : <Thumbnail />) }
</section>
<section className="card">
<div className="card__inner">
<div className="card__title-identity">
{isDownloaded === false
? <span style={{float: "right"}}><FilePrice uri={lbryuri.normalize(uri)} /></span>
: null}
<h1>{title}</h1>
{ uriLookupComplete ?
<div>
<div className="card__subtitle">
<UriIndicator uri={uri} hasSignature={hasSignature} signatureIsValid={signatureIsValid} />
</div>
<div className="card__actions">
<FileActions uri={uri} outpoint={outpoint} metadata={metadata} contentType={contentType} />
</div>
</div> : '' }
</div>
{ uriLookupComplete ?
<div>
<div className="card__content card__subtext card__subtext card__subtext--allow-newlines">
{metadata.description}
</div>
</div>
: <div className="card__content"><BusyMessage message="Loading magic decentralized data..." /></div> }
</div>
{ metadata ?
<div className="card__content">
<FormatItem metadata={metadata} contentType={contentType} cost={cost} uri={uri} outpoint={outpoint} costIncludesData={costIncludesData} />
</div> : '' }
<div className="card__content">
<Link href="https://lbry.io/dmca" label="report" className="button-text-help" />
</div>
</section>
</main>
)
}
export default ShowPage;

42
ui/js/page/video/index.js Normal file
View file

@ -0,0 +1,42 @@
import React from 'react'
import {
connect,
} from 'react-redux'
import {
doCloseModal,
} from 'actions/app'
import {
selectCurrentModal,
} from 'selectors/app'
import {
doWatchVideo,
doLoadVideo,
} from 'actions/content'
import {
selectLoadingCurrentUri,
selectCurrentUriFileReadyToPlay,
selectCurrentUriIsPlaying,
selectCurrentUriFileInfo,
selectDownloadingCurrentUri,
} from 'selectors/file_info'
import {
selectCurrentUriCostInfo,
} from 'selectors/cost_info'
import Video from './view'
const select = (state) => ({
costInfo: selectCurrentUriCostInfo(state),
fileInfo: selectCurrentUriFileInfo(state),
modal: selectCurrentModal(state),
isLoading: selectLoadingCurrentUri(state),
readyToPlay: selectCurrentUriFileReadyToPlay(state),
isDownloading: selectDownloadingCurrentUri(state),
})
const perform = (dispatch) => ({
loadVideo: () => dispatch(doLoadVideo()),
watchVideo: (elem) => dispatch(doWatchVideo()),
closeModal: () => dispatch(doCloseModal()),
})
export default connect(select, perform)(Video)

183
ui/js/page/video/view.jsx Normal file
View file

@ -0,0 +1,183 @@
import React from 'react';
import {
Icon,
Thumbnail,
} from 'component/common';
import FilePrice from 'component/filePrice'
import Link from 'component/link';
import lbry from 'lbry';
import Modal from 'component/modal';
import lbryio from 'lbryio';
import rewards from 'rewards';
import LoadScreen from 'component/load_screen'
const fs = require('fs');
const VideoStream = require('videostream');
class WatchLink extends React.Component {
confirmPurchaseClick() {
this.props.closeModal()
this.props.startPlaying()
this.props.loadVideo()
}
render() {
const {
button,
label,
className,
onWatchClick,
metadata,
metadata: {
title,
},
uri,
modal,
closeModal,
isLoading,
costInfo,
fileInfo,
} = this.props
return (<div>
<Link button={ button ? button : null }
disabled={isLoading || costInfo.cost == undefined || fileInfo === undefined}
label={label ? label : ""}
className="video__play-button"
icon="icon-play"
onClick={onWatchClick} />
{modal}
<Modal contentLabel="Not enough credits" isOpen={modal == 'notEnoughCredits'} onConfirmed={closeModal}>
You don't have enough LBRY credits to pay for this stream.
</Modal>
<Modal
type="confirm"
isOpen={modal == 'affirmPurchase'}
contentLabel="Confirm Purchase"
onConfirmed={this.confirmPurchaseClick.bind(this)}
onAborted={closeModal}>
Are you sure you'd like to buy <strong>{this.props.metadata.title}</strong> for <strong><FilePrice uri={uri} look="plain" /></strong> credits?
</Modal>
<Modal
isOpen={modal == 'timedOut'} onConfirmed={closeModal} contentLabel="Timed Out">
Sorry, your download timed out :(
</Modal>
</div>);
}
}
class Video extends React.Component {
constructor(props) {
super(props)
// TODO none of this mouse handling stuff seems to actually do anything?
this._controlsHideDelay = 3000 // Note: this needs to be shorter than the built-in delay in Electron, or Electron will hide the controls before us
this._controlsHideTimeout = null
this.state = {}
}
handleMouseMove() {
if (this._controlsTimeout) {
clearTimeout(this._controlsTimeout);
}
if (!this.state.controlsShown) {
this.setState({
controlsShown: true,
});
}
this._controlsTimeout = setTimeout(() => {
if (!this.isMounted) {
return;
}
this.setState({
controlsShown: false,
});
}, this._controlsHideDelay);
}
handleMouseLeave() {
if (this._controlsTimeout) {
clearTimeout(this._controlsTimeout);
}
if (this.state.controlsShown) {
this.setState({
controlsShown: false,
});
}
}
onWatchClick() {
this.props.watchVideo().then(() => {
if (!this.props.modal) {
this.setState({
isPlaying: true
})
}
})
}
startPlaying() {
this.setState({
isPlaying: true
})
}
render() {
const {
readyToPlay = false,
thumbnail,
metadata,
isLoading,
isDownloading,
fileInfo,
} = this.props
const {
isPlaying = false,
} = this.state
let loadStatusMessage = ''
if (isLoading) {
loadStatusMessage = "Requesting stream... it may sit here for like 15-20 seconds in a really awkward way... we're working on it"
} else if (isDownloading) {
loadStatusMessage = "Downloading stream... not long left now!"
}
return (
<div onMouseMove={this.handleMouseMove.bind(this)} onMouseLeave={this.handleMouseLeave.bind(this)} className={"video " + this.props.className + (isPlaying && readyToPlay ? " video--active" : " video--hidden")}>{
isPlaying ?
!readyToPlay ?
<span>this is the world's worst loading screen and we shipped our software with it anyway... <br /><br />{loadStatusMessage}</span> :
<VideoPlayer downloadPath={fileInfo.download_path} /> :
<div className="video__cover" style={{backgroundImage: 'url("' + metadata.thumbnail + '")'}}>
<WatchLink icon="icon-play" onWatchClick={this.onWatchClick.bind(this)} startPlaying={this.startPlaying.bind(this)} {...this.props}></WatchLink>
</div>
}</div>
);
}
}
class VideoPlayer extends React.PureComponent {
componentDidMount() {
const elem = this.refs.video
const {
downloadPath,
} = this.props
const mediaFile = {
createReadStream: (opts) =>
fs.createReadStream(downloadPath, opts)
}
const videostream = VideoStream(mediaFile, elem)
elem.play()
}
render() {
return (
<video controls id="video" ref="video"></video>
)
}
}
export default Video

View file

@ -1,317 +0,0 @@
import React from 'react';
import lbry from '../lbry.js';
import Link from 'component/link';
import Modal from '../component/modal.js';
import {FormField, FormRow} from '../component/form.js';
import {Address, BusyMessage, CreditAmount} from '../component/common.js';
var AddressSection = React.createClass({
_refreshAddress: function(event) {
if (typeof event !== 'undefined') {
event.preventDefault();
}
lbry.getUnusedAddress((address) => {
window.localStorage.setItem('wallet_address', address);
this.setState({
address: address,
});
});
},
_getNewAddress: function(event) {
if (typeof event !== 'undefined') {
event.preventDefault();
}
lbry.wallet_new_address().then(function(address) {
window.localStorage.setItem('wallet_address', address);
this.setState({
address: address,
});
}.bind(this))
},
getInitialState: function() {
return {
address: null,
modal: null,
}
},
componentWillMount: function() {
var address = window.localStorage.getItem('wallet_address');
if (address === null) {
this._refreshAddress();
} else {
lbry.checkAddressIsMine(address, (isMine) => {
if (isMine) {
this.setState({
address: address,
});
} else {
this._refreshAddress();
}
});
}
},
render: function() {
return (
<section className="card">
<div className="card__title-primary">
<h3>Wallet Address</h3>
</div>
<div className="card__content">
<Address address={this.state.address} />
</div>
<div className="card__actions">
<Link label="Get New Address" button="primary" icon='icon-refresh' onClick={this._getNewAddress} />
</div>
<div className="card__content">
<div className="help">
<p>Other LBRY users may send credits to you by entering this address on the "Send" page.</p>
<p>You can generate a new address at any time, and any previous addresses will continue to work. Using multiple addresses can be helpful for keeping track of incoming payments from multiple sources.</p>
</div>
</div>
</section>
);
}
});
var SendToAddressSection = React.createClass({
handleSubmit: function(event) {
if (typeof event !== 'undefined') {
event.preventDefault();
}
if ((this.state.balance - this.state.amount) < 1)
{
this.setState({
modal: 'insufficientBalance',
});
return;
}
this.setState({
results: "",
});
lbry.sendToAddress(this.state.amount, this.state.address, (results) => {
if(results === true)
{
this.setState({
results: "Your transaction was successfully placed in the queue.",
});
}
else
{
this.setState({
results: "Something went wrong: " + results
});
}
}, (error) => {
this.setState({
results: "Something went wrong: " + error.message
})
});
},
closeModal: function() {
this.setState({
modal: null,
});
},
getInitialState: function() {
return {
address: "",
amount: 0.0,
balance: <BusyMessage message="Checking balance" />,
results: "",
}
},
componentWillMount: function() {
lbry.getBalance((results) => {
this.setState({
balance: results,
});
});
},
setAmount: function(event) {
this.setState({
amount: parseFloat(event.target.value),
})
},
setAddress: function(event) {
this.setState({
address: event.target.value,
})
},
render: function() {
return (
<section className="card">
<form onSubmit={this.handleSubmit}>
<div className="card__title-primary">
<h3>Send Credits</h3>
</div>
<div className="card__content">
<FormRow label="Amount" postfix="LBC" step="0.01" type="number" placeholder="1.23" size="10" onChange={this.setAmount} />
</div>
<div className="card__content">
<FormRow label="Recipient Address" placeholder="bbFxRyXXXXXXXXXXXZD8nE7XTLUxYnddTs" type="text" size="60" onChange={this.setAddress} />
</div>
<div className="card__actions card__actions--form-submit">
<Link button="primary" label="Send" onClick={this.handleSubmit} disabled={!(parseFloat(this.state.amount) > 0.0) || this.state.address == ""} />
<input type='submit' className='hidden' />
</div>
{
this.state.results ?
<div className="card__content">
<h4>Results</h4>
{this.state.results}
</div> : ''
}
</form>
<Modal isOpen={this.state.modal === 'insufficientBalance'} contentLabel="Insufficient balance"
onConfirmed={this.closeModal}>
Insufficient balance: after this transaction you would have less than 1 LBC in your wallet.
</Modal>
</section>
);
}
});
var TransactionList = React.createClass({
getInitialState: function() {
return {
transactionItems: null,
}
},
componentWillMount: function() {
lbry.call('get_transaction_history', {}, (results) => {
if (results.length == 0) {
this.setState({ transactionItems: [] })
} else {
var transactionItems = [],
condensedTransactions = {};
results.forEach(function(tx) {
var txid = tx["txid"];
if (!(txid in condensedTransactions)) {
condensedTransactions[txid] = 0;
}
condensedTransactions[txid] += parseFloat(tx["value"]);
});
results.reverse().forEach(function(tx) {
var txid = tx["txid"];
if (condensedTransactions[txid] && condensedTransactions[txid] != 0)
{
transactionItems.push({
id: txid,
date: tx["timestamp"] ? (new Date(parseInt(tx["timestamp"]) * 1000)) : null,
amount: condensedTransactions[txid]
});
delete condensedTransactions[txid];
}
});
this.setState({ transactionItems: transactionItems });
}
});
},
render: function() {
var rows = [];
if (this.state.transactionItems && this.state.transactionItems.length > 0)
{
this.state.transactionItems.forEach(function(item) {
rows.push(
<tr key={item.id}>
<td>{ (item.amount > 0 ? '+' : '' ) + item.amount }</td>
<td>{ item.date ? item.date.toLocaleDateString() : <span className="empty">(Transaction pending)</span> }</td>
<td>{ item.date ? item.date.toLocaleTimeString() : <span className="empty">(Transaction pending)</span> }</td>
<td>
<a className="button-text" href={"https://explorer.lbry.io/tx/"+item.id} target="_blank">{item.id.substr(0, 7)}</a>
</td>
</tr>
);
});
}
return (
<section className="card">
<div className="card__title-primary">
<h3>Transaction History</h3>
</div>
<div className="card__content">
{ this.state.transactionItems === null ? <BusyMessage message="Loading transactions" /> : '' }
{ this.state.transactionItems && rows.length === 0 ? <div className="empty">You have no transactions.</div> : '' }
{ this.state.transactionItems && rows.length > 0 ?
<table className="table-standard table-stretch">
<thead>
<tr>
<th>Amount</th>
<th>Date</th>
<th>Time</th>
<th>Transaction</th>
</tr>
</thead>
<tbody>
{rows}
</tbody>
</table>
: ''
}
</div>
</section>
);
}
});
var WalletPage = React.createClass({
_balanceSubscribeId: null,
propTypes: {
viewingPage: React.PropTypes.string,
},
componentDidMount: function() {
document.title = "My Wallet";
},
/*
Below should be refactored so that balance is shared all of wallet page. Or even broader?
What is the proper React pattern for sharing a global state like balance?
*/
getInitialState: function() {
return {
balance: null,
}
},
componentWillMount: function() {
this._balanceSubscribeId = lbry.balanceSubscribe((results) => {
this.setState({
balance: results,
})
});
},
componentWillUnmount: function() {
if (this._balanceSubscribeId) {
lbry.balanceUnsubscribe(this._balanceSubscribeId);
}
},
render: function() {
return (
<main className="page">
<section className="card">
<div className="card__title-primary">
<h3>Balance</h3>
</div>
<div className="card__content">
{ this.state.balance === null ? <BusyMessage message="Checking balance" /> : ''}
{ this.state.balance !== null ? <CreditAmount amount={this.state.balance} precision={8} /> : '' }
</div>
</section>
{ this.props.viewingPage === 'wallet' ? <TransactionList /> : '' }
{ this.props.viewingPage === 'send' ? <SendToAddressSection /> : '' }
{ this.props.viewingPage === 'receive' ? <AddressSection /> : '' }
</main>
);
}
});
export default WalletPage;

View file

@ -0,0 +1,53 @@
import React from 'react'
import {
connect
} from 'react-redux'
import {
doCloseModal,
} from 'actions/app'
import {
doGetNewAddress,
doCheckAddressIsMine,
doSendDraftTransaction,
doSetDraftTransactionAmount,
doSetDraftTransactionAddress,
} from 'actions/wallet'
import {
selectCurrentPage,
selectCurrentModal,
} from 'selectors/app'
import {
selectBalance,
selectTransactions,
selectTransactionItems,
selectIsFetchingTransactions,
selectReceiveAddress,
selectGettingNewAddress,
selectDraftTransactionAmount,
selectDraftTransactionAddress,
} from 'selectors/wallet'
import WalletPage from './view'
const select = (state) => ({
currentPage: selectCurrentPage(state),
balance: selectBalance(state),
transactions: selectTransactions(state),
fetchingTransactions: selectIsFetchingTransactions(state),
transactionItems: selectTransactionItems(state),
receiveAddress: selectReceiveAddress(state),
gettingNewAddress: selectGettingNewAddress(state),
modal: selectCurrentModal(state),
address: selectDraftTransactionAddress(state),
amount: selectDraftTransactionAmount(state),
})
const perform = (dispatch) => ({
closeModal: () => dispatch(doCloseModal()),
getNewAddress: () => dispatch(doGetNewAddress()),
checkAddressIsMine: (address) => dispatch(doCheckAddressIsMine(address)),
sendToAddress: () => dispatch(doSendDraftTransaction()),
setAmount: (event) => dispatch(doSetDraftTransactionAmount(event.target.value)),
setAddress: (event) => dispatch(doSetDraftTransactionAddress(event.target.value)),
})
export default connect(select, perform)(WalletPage)

265
ui/js/page/wallet/view.jsx Normal file
View file

@ -0,0 +1,265 @@
import React from 'react';
import lbry from 'lbry.js';
import Link from 'component/link';
import Modal from 'component/modal';
import {
FormField,
FormRow
} from 'component/form';
import {
Address,
BusyMessage,
CreditAmount
} from 'component/common';
class AddressSection extends React.Component {
componentWillMount() {
this.props.checkAddressIsMine(this.props.receiveAddress)
}
render() {
const {
receiveAddress,
getNewAddress,
gettingNewAddress,
} = this.props
return (
<section className="card">
<div className="card__title-primary">
<h3>Wallet Address</h3>
</div>
<div className="card__content">
<Address address={receiveAddress} />
</div>
<div className="card__actions">
<Link label="Get New Address" button="primary" icon='icon-refresh' onClick={getNewAddress} disabled={gettingNewAddress} />
</div>
<div className="card__content">
<div className="help">
<p>Other LBRY users may send credits to you by entering this address on the "Send" page.</p>
<p>You can generate a new address at any time, and any previous addresses will continue to work. Using multiple addresses can be helpful for keeping track of incoming payments from multiple sources.</p>
</div>
</div>
</section>
);
}
}
const SendToAddressSection = (props) => {
const {
sendToAddress,
closeModal,
modal,
setAmount,
setAddress,
amount,
address,
} = props
return (
<section className="card">
<form onSubmit={sendToAddress}>
<div className="card__title-primary">
<h3>Send Credits</h3>
</div>
<div className="card__content">
<FormRow label="Amount" postfix="LBC" step="0.01" type="number" placeholder="1.23" size="10" onChange={setAmount} value={amount} />
</div>
<div className="card__content">
<FormRow label="Recipient Address" placeholder="bbFxRyXXXXXXXXXXXZD8nE7XTLUxYnddTs" type="text" size="60" onChange={setAddress} value={address} />
</div>
<div className="card__actions card__actions--form-submit">
<Link button="primary" label="Send" onClick={sendToAddress} disabled={!(parseFloat(amount) > 0.0) || !address} />
<input type='submit' className='hidden' />
</div>
</form>
{modal == 'insufficientBalance' && <Modal isOpen={true} contentLabel="Insufficient balance" onConfirmed={closeModal}>
Insufficient balance: after this transaction you would have less than 1 LBC in your wallet.
</Modal>}
{modal == 'transactionSuccessful' && <Modal isOpen={true} contentLabel="Transaction successful" onConfirmed={closeModal}>
Your transaction was successfully placed in the queue.
</Modal>}
{modal == 'transactionFailed' && <Modal isOpen={true} contentLabel="Transaction failed" onConfirmed={closeModal}>
Something went wrong:
</Modal>}
</section>
)
}
// var SendToAddressSection = React.createClass({
// handleSubmit: function(event) {
// if (typeof event !== 'undefined') {
// event.preventDefault();
// }
// if ((this.state.balance - this.state.amount) < 1)
// {
// this.setState({
// modal: 'insufficientBalance',
// });
// return;
// }
// this.setState({
// results: "",
// });
// lbry.sendToAddress(this.state.amount, this.state.address, (results) => {
// if(results === true)
// {
// this.setState({
// results: "Your transaction was successfully placed in the queue.",
// });
// }
// else
// {
// this.setState({
// results: "Something went wrong: " + results
// });
// }
// }, (error) => {
// this.setState({
// results: "Something went wrong: " + error.message
// })
// });
// },
// closeModal: function() {
// this.setState({
// modal: null,
// });
// },
// getInitialState: function() {
// return {
// address: "",
// amount: 0.0,
// balance: <BusyMessage message="Checking balance" />,
// results: "",
// }
// },
// componentWillMount: function() {
// lbry.getBalance((results) => {
// this.setState({
// balance: results,
// });
// });
// },
// setAmount: function(event) {
// this.setState({
// amount: parseFloat(event.target.value),
// })
// },
// setAddress: function(event) {
// this.setState({
// address: event.target.value,
// })
// },
// render: function() {
// return (
// <section className="card">
// <form onSubmit={this.handleSubmit}>
// <div className="card__title-primary">
// <h3>Send Credits</h3>
// </div>
// <div className="card__content">
// <FormRow label="Amount" postfix="LBC" step="0.01" type="number" placeholder="1.23" size="10" onChange={this.setAmount} />
// </div>
// <div className="card__content">
// <FormRow label="Recipient Address" placeholder="bbFxRyXXXXXXXXXXXZD8nE7XTLUxYnddTs" type="text" size="60" onChange={this.setAddress} />
// </div>
// <div className="card__actions card__actions--form-submit">
// <Link button="primary" label="Send" onClick={this.handleSubmit} disabled={!(parseFloat(this.state.amount) > 0.0) || this.state.address == ""} />
// <input type='submit' className='hidden' />
// </div>
// {
// this.state.results ?
// <div className="card__content">
// <h4>Results</h4>
// {this.state.results}
// </div> : ''
// }
// </form>
// <Modal isOpen={this.state.modal === 'insufficientBalance'} contentLabel="Insufficient balance"
// onConfirmed={this.closeModal}>
// Insufficient balance: after this transaction you would have less than 1 LBC in your wallet.
// </Modal>
// </section>
// );
// }
// });
const TransactionList = (props) => {
const {
fetchingTransactions,
transactionItems,
} = props
const rows = []
if (transactionItems.length > 0) {
transactionItems.forEach(function(item) {
rows.push(
<tr key={item.id}>
<td>{ (item.amount > 0 ? '+' : '' ) + item.amount }</td>
<td>{ item.date ? item.date.toLocaleDateString() : <span className="empty">(Transaction pending)</span> }</td>
<td>{ item.date ? item.date.toLocaleTimeString() : <span className="empty">(Transaction pending)</span> }</td>
<td>
<a className="button-text" href={"https://explorer.lbry.io/tx/"+item.id} target="_blank">{item.id.substr(0, 7)}</a>
</td>
</tr>
);
});
}
return (
<section className="card">
<div className="card__title-primary">
<h3>Transaction History</h3>
</div>
<div className="card__content">
{ fetchingTransactions ? <BusyMessage message="Loading transactions" /> : '' }
{ !fetchingTransactions && rows.length === 0 ? <div className="empty">You have no transactions.</div> : '' }
{ rows.length > 0 ?
<table className="table-standard table-stretch">
<thead>
<tr>
<th>Amount</th>
<th>Date</th>
<th>Time</th>
<th>Transaction</th>
</tr>
</thead>
<tbody>
{rows}
</tbody>
</table>
: ''
}
</div>
</section>
)
}
const WalletPage = (props) => {
const {
balance,
currentPage
} = props
return (
<main className="page">
<section className="card">
<div className="card__title-primary">
<h3>Balance</h3>
</div>
<div className="card__content">
<CreditAmount amount={balance} precision={8} />
</div>
</section>
{ currentPage === 'wallet' ? <TransactionList {...props} /> : '' }
{ currentPage === 'send' ? <SendToAddressSection {...props} /> : '' }
{ currentPage === 'receive' ? <AddressSection {...props} /> : '' }
</main>
)
}
export default WalletPage;

View file

@ -1,215 +0,0 @@
import React from 'react';
import {Icon, Thumbnail, FilePrice} from '../component/common.js';
import Link from '../component/link';
import lbry from '../lbry.js';
import Modal from '../component/modal.js';
import lbryio from '../lbryio.js';
import rewards from '../rewards.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,
metadata: React.PropTypes.object,
downloadStarted: React.PropTypes.bool,
onGet: React.PropTypes.func,
},
getInitialState: function() {
affirmedPurchase: false
},
play: function() {
lbry.get({uri: this.props.uri}).then((streamInfo) => {
if (streamInfo === null || typeof streamInfo !== 'object') {
this.setState({
modal: 'timedOut',
attemptingDownload: false,
});
}
lbryio.call('file', 'view', {
uri: this.props.uri,
outpoint: streamInfo.outpoint,
claimId: streamInfo.claim_id
}).catch(() => {})
});
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.play()
} else {
lbry.file_list({outpoint: this.props.outpoint}).then((fileInfo) => {
if (fileInfo) { // Already downloaded
this.play();
} 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.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>);
}
});
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,
propTypes: {
uri: React.PropTypes.string.isRequired,
metadata: React.PropTypes.object,
outpoint: React.PropTypes.string,
},
getInitialState: function() {
return {
downloadStarted: false,
readyToPlay: false,
isPlaying: false,
isPurchased: false,
loadStatusMessage: "Requesting stream... it may sit here for like 15-20 seconds in a really awkward way... we're working on it",
mimeType: null,
controlsShown: false,
};
},
onGet: function() {
lbry.get({uri: this.props.uri}).then((fileInfo) => {
this.updateLoadStatus();
});
this.setState({
isPlaying: true
})
},
componentDidMount: function() {
if (this.props.autoplay) {
this.start()
}
},
handleMouseMove: function() {
if (this._controlsTimeout) {
clearTimeout(this._controlsTimeout);
}
if (!this.state.controlsShown) {
this.setState({
controlsShown: true,
});
}
this._controlsTimeout = setTimeout(() => {
if (!this.isMounted) {
return;
}
this.setState({
controlsShown: false,
});
}, this._controlsHideDelay);
},
handleMouseLeave: function() {
if (this._controlsTimeout) {
clearTimeout(this._controlsTimeout);
}
if (this.state.controlsShown) {
this.setState({
controlsShown: false,
});
}
},
updateLoadStatus: function() {
lbry.file_list({
outpoint: this.props.outpoint,
full_status: true,
}).then(([status]) => {
if (!status || status.written_bytes == 0) {
// Download hasn't started yet, so update status message (if available) then try again
// TODO: Would be nice to check if we have the MOOV before starting playing
if (status) {
this.setState({
loadStatusMessage: status.message
});
}
setTimeout(() => { this.updateLoadStatus() }, 250);
} else {
this.setState({
readyToPlay: true,
mimeType: status.mime_type,
})
const mediaFile = {
createReadStream: function (opts) {
// Return a readable stream that provides the bytes
// between offsets "start" and "end" inclusive
console.log('Stream between ' + opts.start + ' and ' + opts.end + '.');
return fs.createReadStream(status.download_path, opts)
}
};
rewards.claimNextPurchaseReward()
var elem = this.refs.video;
var videostream = VideoStream(mediaFile, elem);
elem.play();
}
});
},
render: function() {
return (
<div className={"video " + this.props.className + (this.state.isPlaying && this.state.readyToPlay ? " video--active" : " video--hidden")}>{
this.state.isPlaying ?
!this.state.readyToPlay ?
<span>this is the world's worst 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} metadata={this.props.metadata} outpoint={this.props.outpoint} onGet={this.onGet} icon="icon-play"></WatchLink>
</div>
}</div>
);
}
})

View file

@ -1,23 +1,23 @@
import * as types from 'constants/action_types'
import lbry from 'lbry'
const reducers = {}
const defaultState = {
isLoaded: false,
currentPage: 'discover',
currentPath: 'discover',
platform: process.platform,
drawerOpen: sessionStorage.getItem('drawerOpen') || true,
upgradeSkipped: sessionStorage.getItem('upgradeSkipped')
}
reducers[types.UPDATE_BALANCE] = function(state, action) {
return Object.assign({}, state, {
balance: action.data.balance
})
upgradeSkipped: sessionStorage.getItem('upgradeSkipped'),
daemonReady: false,
platform: window.navigator.platform,
obscureNsfw: !lbry.getClientSetting('showNsfw'),
hidePrice: false,
hasSignature: false,
}
reducers[types.NAVIGATE] = function(state, action) {
return Object.assign({}, state, {
currentPage: action.data.path
currentPath: action.data.path,
})
}
@ -98,6 +98,13 @@ reducers[types.UPGRADE_DOWNLOAD_PROGRESSED] = function(state, action) {
})
}
reducers[types.DAEMON_READY] = function(state, action) {
window.sessionStorage.setItem('loaded', 'y')
return Object.assign({}, state, {
daemonReady: true
})
}
export default function reducer(state = defaultState, action) {
const handler = reducers[action.type];
if (handler) return handler(state, action);

View file

@ -0,0 +1,45 @@
import * as types from 'constants/action_types'
const reducers = {}
const defaultState = {
}
reducers[types.FETCH_AVAILABILITY_STARTED] = function(state, action) {
const {
uri,
} = action.data
const newFetching = Object.assign({}, state.fetching)
const newByUri = Object.assign({}, newFetching.byUri)
newByUri[uri] = true
newFetching.byUri = newByUri
return Object.assign({}, state, {
fetching: newFetching,
})
}
reducers[types.FETCH_AVAILABILITY_COMPLETED] = function(state, action) {
const {
uri,
availability,
} = action.data
const newFetching = Object.assign({}, state.fetching)
const newFetchingByUri = Object.assign({}, newFetching.byUri)
const newAvailabilityByUri = Object.assign({}, state.byUri)
delete newFetchingByUri[uri]
newFetching.byUri = newFetchingByUri
newAvailabilityByUri[uri] = availability
return Object.assign({}, state, {
fetching: newFetching,
byUri: newAvailabilityByUri
})
}
export default function reducer(state = defaultState, action) {
const handler = reducers[action.type];
if (handler) return handler(state, action);
return state;
}

View file

@ -0,0 +1,27 @@
import * as types from 'constants/action_types'
const reducers = {}
const defaultState = {
}
reducers[types.RESOLVE_URI_COMPLETED] = function(state, action) {
const {
uri,
certificate,
} = action.data
if (!certificate) return state
const newByUri = Object.assign({}, state.byUri)
newByUri[uri] = certificate
return Object.assign({}, state, {
byUri: newByUri,
})
}
export default function reducer(state = defaultState, action) {
const handler = reducers[action.type];
if (handler) return handler(state, action);
return state;
}

42
ui/js/reducers/claims.js Normal file
View file

@ -0,0 +1,42 @@
import * as types from 'constants/action_types'
import lbryuri from 'lbryuri'
const reducers = {}
const defaultState = {
}
reducers[types.RESOLVE_URI_COMPLETED] = function(state, action) {
const {
uri,
claim,
} = action.data
const newByUri = Object.assign({}, state.byUri)
newByUri[uri] = claim
return Object.assign({}, state, {
byUri: newByUri,
})
}
reducers[types.FETCH_MY_CLAIMS_COMPLETED] = function(state, action) {
const {
claims,
} = action.data
const newMine = Object.assign({}, state.mine)
const newById = Object.assign({}, newMine.byId)
claims.forEach(claim => {
newById[claim.claim_id] = claim
})
newMine.byId = newById
return Object.assign({}, state, {
mine: newMine,
})
}
export default function reducer(state = defaultState, action) {
const handler = reducers[action.type];
if (handler) return handler(state, action);
return state;
}

103
ui/js/reducers/content.js Normal file
View file

@ -0,0 +1,103 @@
import * as types from 'constants/action_types'
const reducers = {}
const defaultState = {
}
reducers[types.FETCH_FEATURED_CONTENT_STARTED] = function(state, action) {
return Object.assign({}, state, {
fetchingFeaturedContent: true
})
}
reducers[types.FETCH_FEATURED_CONTENT_COMPLETED] = function(state, action) {
const {
uris
} = action.data
const newFeaturedContent = Object.assign({}, state.featuredContent, {
byCategory: uris,
})
return Object.assign({}, state, {
fetchingFeaturedContent: false,
featuredContent: newFeaturedContent
})
}
reducers[types.RESOLVE_URI_STARTED] = function(state, action) {
const {
uri
} = action.data
const oldResolving = state.resolvingUris || []
const newResolving = Object.assign([], oldResolving)
if (newResolving.indexOf(uri) == -1) newResolving.push(uri)
return Object.assign({}, state, {
resolvingUris: newResolving
})
}
reducers[types.RESOLVE_URI_COMPLETED] = function(state, action) {
const {
uri,
} = action.data
const resolvingUris = state.resolvingUris
const index = state.resolvingUris.indexOf(uri)
const newResolvingUris = [
...resolvingUris.slice(0, index),
...resolvingUris.slice(index + 1)
]
const newState = Object.assign({}, state, {
resolvingUris: newResolvingUris,
})
return Object.assign({}, state, newState)
}
reducers[types.FETCH_DOWNLOADED_CONTENT_STARTED] = function(state, action) {
return Object.assign({}, state, {
fetchingDownloadedContent: true,
})
}
reducers[types.FETCH_DOWNLOADED_CONTENT_COMPLETED] = function(state, action) {
const {
fileInfos
} = action.data
const newDownloadedContent = Object.assign({}, state.downloadedContent, {
fileInfos
})
return Object.assign({}, state, {
downloadedContent: newDownloadedContent,
fetchingDownloadedContent: false,
})
}
reducers[types.FETCH_PUBLISHED_CONTENT_STARTED] = function(state, action) {
return Object.assign({}, state, {
fetchingPublishedContent: true,
})
}
reducers[types.FETCH_PUBLISHED_CONTENT_COMPLETED] = function(state, action) {
const {
fileInfos
} = action.data
const newPublishedContent = Object.assign({}, state.publishedContent, {
fileInfos
})
return Object.assign({}, state, {
publishedContent: newPublishedContent,
fetchingPublishedContent: false,
})
}
export default function reducer(state = defaultState, action) {
const handler = reducers[action.type];
if (handler) return handler(state, action);
return state;
}

View file

@ -0,0 +1,40 @@
import * as types from 'constants/action_types'
const reducers = {}
const defaultState = {
}
reducers[types.FETCH_COST_INFO_STARTED] = function(state, action) {
const {
uri,
} = action.data
const newFetching = Object.assign({}, state.fetching)
newFetching[uri] = true
return Object.assign({}, state, {
fetching: newFetching,
})
}
reducers[types.FETCH_COST_INFO_COMPLETED] = function(state, action) {
const {
uri,
costInfo,
} = action.data
const newByUri = Object.assign({}, state.byUri)
const newFetching = Object.assign({}, state.fetching)
newByUri[uri] = costInfo
delete newFetching[uri]
return Object.assign({}, state, {
byUri: newByUri,
fetching: newFetching,
})
}
export default function reducer(state = defaultState, action) {
const handler = reducers[action.type];
if (handler) return handler(state, action);
return state;
}

206
ui/js/reducers/file_info.js Normal file
View file

@ -0,0 +1,206 @@
import * as types from 'constants/action_types'
import lbryuri from 'lbryuri'
const reducers = {}
const defaultState = {
}
reducers[types.FETCH_FILE_INFO_STARTED] = function(state, action) {
const {
uri,
} = action.data
const newFetching = Object.assign({}, state.fetching)
newFetching[uri] = true
return Object.assign({}, state, {
fetching: newFetching,
})
}
reducers[types.FETCH_FILE_INFO_COMPLETED] = function(state, action) {
const {
uri,
fileInfo,
} = action.data
const newByUri = Object.assign({}, state.byUri)
const newFetching = Object.assign({}, state.fetching)
newByUri[uri] = fileInfo || {}
delete newFetching[uri]
return Object.assign({}, state, {
byUri: newByUri,
fetching: newFetching,
})
}
reducers[types.DOWNLOADING_STARTED] = function(state, action) {
const {
uri,
fileInfo,
} = action.data
const newByUri = Object.assign({}, state.byUri)
const newDownloading = Object.assign({}, state.downloading)
const newDownloadingByUri = Object.assign({}, newDownloading.byUri)
const newLoading = Object.assign({}, state.loading)
const newLoadingByUri = Object.assign({}, newLoading)
newDownloadingByUri[uri] = true
newDownloading.byUri = newDownloadingByUri
newByUri[uri] = fileInfo
delete newLoadingByUri[uri]
newLoading.byUri = newLoadingByUri
return Object.assign({}, state, {
downloading: newDownloading,
byUri: newByUri,
loading: newLoading,
})
}
reducers[types.DOWNLOADING_PROGRESSED] = function(state, action) {
const {
uri,
fileInfo,
} = action.data
const newByUri = Object.assign({}, state.byUri)
const newDownloading = Object.assign({}, state.downloading)
newByUri[uri] = fileInfo
newDownloading[uri] = true
return Object.assign({}, state, {
byUri: newByUri,
downloading: newDownloading
})
}
reducers[types.DOWNLOADING_COMPLETED] = function(state, action) {
const {
uri,
fileInfo,
} = action.data
const newByUri = Object.assign({}, state.byUri)
const newDownloading = Object.assign({}, state.downloading)
const newDownloadingByUri = Object.assign({}, newDownloading.byUri)
newByUri[uri] = fileInfo
delete newDownloadingByUri[uri]
newDownloading.byUri = newDownloadingByUri
return Object.assign({}, state, {
byUri: newByUri,
downloading: newDownloading,
})
}
reducers[types.DELETE_FILE_STARTED] = function(state, action) {
const {
uri,
} = action.data
const newDeleting = Object.assign({}, state.deleting)
const newByUri = Object.assign({}, newDeleting.byUri)
newByUri[uri] = true
newDeleting.byUri = newByUri
return Object.assign({}, state, {
deleting: newDeleting,
})
}
reducers[types.DELETE_FILE_COMPLETED] = function(state, action) {
const {
uri,
} = action.data
const newDeleting = Object.assign({}, state.deleting)
const newDeletingByUri = Object.assign({}, newDeleting.byUri)
const newByUri = Object.assign({}, state.byUri)
delete newDeletingByUri[uri]
newDeleting.byUri = newDeletingByUri
delete newByUri[uri]
return Object.assign({}, state, {
deleting: newDeleting,
byUri: newByUri,
})
}
reducers[types.LOADING_VIDEO_STARTED] = function(state, action) {
const {
uri,
} = action.data
const newLoading = Object.assign({}, state.loading)
const newByUri = Object.assign({}, newLoading.byUri)
newByUri[uri] = true
newLoading.byUri = newByUri
return Object.assign({}, state, {
loading: newLoading,
})
}
reducers[types.LOADING_VIDEO_FAILED] = function(state, action) {
const {
uri,
} = action.data
const newLoading = Object.assign({}, state.loading)
const newByUri = Object.assign({}, newLoading.byUri)
delete newByUri[uri]
newLoading.byUri = newByUri
return Object.assign({}, state, {
loading: newLoading,
})
}
reducers[types.FETCH_DOWNLOADED_CONTENT_COMPLETED] = function(state, action) {
const {
fileInfos,
} = action.data
const newByUri = Object.assign({}, state.byUri)
fileInfos.forEach(fileInfo => {
const uri = lbryuri.build({
channelName: fileInfo.channel_name,
contentName: fileInfo.name,
})
newByUri[uri] = fileInfo
})
return Object.assign({}, state, {
byUri: newByUri
})
}
reducers[types.FETCH_PUBLISHED_CONTENT_COMPLETED] = function(state, action) {
const {
fileInfos
} = action.data
const newByUri = Object.assign({}, state.byUri)
fileInfos.forEach(fileInfo => {
const uri = lbryuri.build({
channelName: fileInfo.channel_name,
contentName: fileInfo.name,
})
newByUri[uri] = fileInfo
})
return Object.assign({}, state, {
byUri: newByUri
})
}
export default function reducer(state = defaultState, action) {
const handler = reducers[action.type];
if (handler) return handler(state, action);
return state;
}

11
ui/js/reducers/rewards.js Normal file
View file

@ -0,0 +1,11 @@
import * as types from 'constants/action_types'
const reducers = {}
const defaultState = {
}
export default function reducer(state = defaultState, action) {
const handler = reducers[action.type];
if (handler) return handler(state, action);
return state;
}

60
ui/js/reducers/search.js Normal file
View file

@ -0,0 +1,60 @@
import * as types from 'constants/action_types'
import lbryuri from 'lbryuri'
const reducers = {}
const defaultState = {
}
reducers[types.SEARCH_STARTED] = function(state, action) {
const {
query,
} = action.data
return Object.assign({}, state, {
searching: true,
query: query,
})
}
reducers[types.SEARCH_COMPLETED] = function(state, action) {
const {
query,
results,
} = action.data
const oldResults = Object.assign({}, state.results)
const newByQuery = Object.assign({}, oldResults.byQuery)
newByQuery[query] = results
const newResults = Object.assign({}, oldResults, {
byQuery: newByQuery
})
return Object.assign({}, state, {
searching: false,
results: newResults,
})
}
reducers[types.SEARCH_CANCELLED] = function(state, action) {
return Object.assign({}, state, {
searching: false,
query: undefined,
})
}
reducers[types.ACTIVATE_SEARCH] = function(state, action) {
return Object.assign({}, state, {
activated: true,
})
}
reducers[types.DEACTIVATE_SEARCH] = function(state, action) {
return Object.assign({}, state, {
activated: false,
})
}
export default function reducer(state = defaultState, action) {
const handler = reducers[action.type];
if (handler) return handler(state, action);
return state;
}

131
ui/js/reducers/wallet.js Normal file
View file

@ -0,0 +1,131 @@
import * as types from 'constants/action_types'
const reducers = {}
const address = sessionStorage.getItem('receiveAddress')
const buildDraftTransaction = () => ({
amount: undefined,
address: undefined
})
const defaultState = {
balance: 0,
transactions: [],
fetchingTransactions: false,
receiveAddress: address,
gettingNewAddress: false,
draftTransaction: buildDraftTransaction()
}
reducers[types.FETCH_TRANSACTIONS_STARTED] = function(state, action) {
return Object.assign({}, state, {
fetchingTransactions: true
})
}
reducers[types.FETCH_TRANSACTIONS_COMPLETED] = function(state, action) {
const oldTransactions = Object.assign({}, state.transactions)
const byId = Object.assign({}, oldTransactions.byId)
const { transactions } = action.data
transactions.forEach((transaction) => {
byId[transaction.txid] = transaction
})
const newTransactions = Object.assign({}, oldTransactions, {
byId: byId
})
return Object.assign({}, state, {
transactions: newTransactions,
fetchingTransactions: false
})
}
reducers[types.GET_NEW_ADDRESS_STARTED] = function(state, action) {
return Object.assign({}, state, {
gettingNewAddress: true
})
}
reducers[types.GET_NEW_ADDRESS_COMPLETED] = function(state, action) {
const { address } = action.data
sessionStorage.setItem('receiveAddress', address)
return Object.assign({}, state, {
gettingNewAddress: false,
receiveAddress: address
})
}
reducers[types.UPDATE_BALANCE] = function(state, action) {
return Object.assign({}, state, {
balance: action.data.balance
})
}
reducers[types.CHECK_ADDRESS_IS_MINE_STARTED] = function(state, action) {
return Object.assign({}, state, {
checkingAddressOwnership: true
})
}
reducers[types.CHECK_ADDRESS_IS_MINE_COMPLETED] = function(state, action) {
return Object.assign({}, state, {
checkingAddressOwnership: false
})
}
reducers[types.SET_DRAFT_TRANSACTION_AMOUNT] = function(state, action) {
const oldDraft = state.draftTransaction
const newDraft = Object.assign({}, oldDraft, {
amount: parseFloat(action.data.amount)
})
return Object.assign({}, state, {
draftTransaction: newDraft
})
}
reducers[types.SET_DRAFT_TRANSACTION_ADDRESS] = function(state, action) {
const oldDraft = state.draftTransaction
const newDraft = Object.assign({}, oldDraft, {
address: action.data.address
})
return Object.assign({}, state, {
draftTransaction: newDraft
})
}
reducers[types.SEND_TRANSACTION_STARTED] = function(state, action) {
const newDraftTransaction = Object.assign({}, state.draftTransaction, {
sending: true
})
return Object.assign({}, state, {
draftTransaction: newDraftTransaction
})
}
reducers[types.SEND_TRANSACTION_COMPLETED] = function(state, action) {
return Object.assign({}, state, {
draftTransaction: buildDraftTransaction()
})
}
reducers[types.SEND_TRANSACTION_FAILED] = function(state, action) {
const newDraftTransaction = Object.assign({}, state.draftTransaction, {
sending: false,
error: action.data.error
})
return Object.assign({}, state, {
draftTransaction: newDraftTransaction
})
}
export default function reducer(state = defaultState, action) {
const handler = reducers[action.type];
if (handler) return handler(state, action);
return state;
}

View file

@ -4,30 +4,61 @@ export const _selectState = state => state.app || {}
export const selectIsLoaded = createSelector(
_selectState,
(state) => {
return state.isLoaded
}
(state) => state.isLoaded
)
export const selectCurrentPath = createSelector(
_selectState,
(state) => state.currentPath
)
export const selectCurrentPage = createSelector(
_selectState,
(state) => {
return state.currentPage
selectCurrentPath,
(path) => path.split('=')[0]
)
export const selectCurrentUri = createSelector(
selectCurrentPath,
(path) => {
if (path.match(/=/)) {
return path.split('=')[1]
} else {
return undefined
}
}
)
export const selectBalance = createSelector(
_selectState,
(state) => {
return state.balance || 0
export const selectPageTitle = createSelector(
selectCurrentPage,
selectCurrentUri,
(page, uri) => {
switch(page)
{
case 'discover':
return 'Discover'
case 'wallet':
case 'send':
case 'receive':
case 'claim':
case 'referral':
return 'Wallet'
case 'downloaded':
return 'My Files'
case 'published':
return 'My Files'
case 'publish':
return 'Publish'
case 'help':
return 'Help'
default:
return 'LBRY';
}
}
)
export const selectPlatform = createSelector(
_selectState,
(state) => {
return state.platform
}
(state) => state.platform
)
export const selectUpdateUrl = createSelector(
@ -101,17 +132,17 @@ export const selectHeaderLinks = createSelector(
case 'claim':
case 'referral':
return {
'?wallet' : 'Overview',
'?send' : 'Send',
'?receive' : 'Receive',
'?claim' : 'Claim Beta Code',
'?referral' : 'Check Referral Credit',
'wallet' : 'Overview',
'send' : 'Send',
'receive' : 'Receive',
'claim' : 'Claim Beta Code',
'referral' : 'Check Referral Credit',
};
case 'downloaded':
case 'published':
return {
'?downloaded': 'Downloaded',
'?published': 'Published',
'downloaded': 'Downloaded',
'published': 'Published',
};
default:
return null;
@ -143,3 +174,23 @@ export const selectError = createSelector(
_selectState,
(state) => state.error
)
export const selectDaemonReady = createSelector(
_selectState,
(state) => state.daemonReady
)
export const selectObscureNsfw = createSelector(
_selectState,
(state) => !!state.obscureNsfw
)
export const selectHidePrice = createSelector(
_selectState,
(state) => !!state.hidePrice
)
export const selectHasSignature = createSelector(
_selectState,
(state) => !!state.hasSignature
)

View file

@ -0,0 +1,74 @@
import {
createSelector,
} from 'reselect'
import {
selectDaemonReady,
selectCurrentPage,
selectCurrentUri,
} from 'selectors/app'
const _selectState = state => state.availability
export const selectAvailabilityByUri = createSelector(
_selectState,
(state) => state.byUri || {}
)
export const selectFetchingAvailability = createSelector(
_selectState,
(state) => state.fetching || {}
)
export const selectFetchingAvailabilityByUri = createSelector(
selectFetchingAvailability,
(fetching) => fetching.byUri || {}
)
const selectAvailabilityForUri = (state, props) => {
return selectAvailabilityByUri(state)[props.uri]
}
export const makeSelectAvailabilityForUri = () => {
return createSelector(
selectAvailabilityForUri,
(availability) => availability
)
}
const selectFetchingAvailabilityForUri = (state, props) => {
return selectFetchingAvailabilityByUri(state)[props.uri]
}
export const makeSelectFetchingAvailabilityForUri = () => {
return createSelector(
selectFetchingAvailabilityForUri,
(fetching) => fetching
)
}
export const selectFetchingAvailabilityForCurrentUri = createSelector(
selectCurrentUri,
selectFetchingAvailabilityByUri,
(uri, byUri) => byUri[uri]
)
export const selectAvailabilityForCurrentUri = createSelector(
selectCurrentUri,
selectAvailabilityByUri,
(uri, byUri) => byUri[uri]
)
export const shouldFetchCurrentUriAvailability = createSelector(
selectDaemonReady,
selectCurrentPage,
selectFetchingAvailabilityForCurrentUri,
selectAvailabilityForCurrentUri,
(daemonReady, page, fetching, availability) => {
if (!daemonReady) return false
if (page != 'show') return false
if (fetching) return false
if (availability) return false
return true
}
)

89
ui/js/selectors/claims.js Normal file
View file

@ -0,0 +1,89 @@
import {
createSelector,
} from 'reselect'
import lbryuri from 'lbryuri'
import {
selectCurrentUri,
} from 'selectors/app'
export const _selectState = state => state.claims || {}
export const selectClaimsByUri = createSelector(
_selectState,
(state) => state.byUri || {}
)
export const selectCurrentUriClaim = createSelector(
selectCurrentUri,
selectClaimsByUri,
(uri, byUri) => byUri[uri] || {}
)
export const selectCurrentUriClaimOutpoint = createSelector(
selectCurrentUriClaim,
(claim) => `${claim.txid}:${claim.nout}`
)
const selectClaimForUri = (state, props) => {
const uri = lbryuri.normalize(props.uri)
return selectClaimsByUri(state)[uri]
}
export const makeSelectClaimForUri = () => {
return createSelector(
selectClaimForUri,
(claim) => claim
)
}
const selectMetadataForUri = (state, props) => {
const claim = selectClaimForUri(state, props)
const metadata = claim && claim.value && claim.value.stream && claim.value.stream.metadata
return metadata ? metadata : undefined
}
export const makeSelectMetadataForUri = () => {
return createSelector(
selectMetadataForUri,
(metadata) => metadata
)
}
const selectSourceForUri = (state, props) => {
const claim = selectClaimForUri(state, props)
const source = claim && claim.value && claim.value.stream && claim.value.stream.source
return source ? source : undefined
}
export const makeSelectSourceForUri = () => {
return createSelector(
selectSourceForUri,
(source) => source
)
}
export const selectMyClaims = createSelector(
_selectState,
(state) => state.mine || {}
)
export const selectMyClaimsById = createSelector(
selectMyClaims,
(mine) => mine.byId || {}
)
export const selectMyClaimsOutpoints = createSelector(
selectMyClaimsById,
(byId) => {
const outpoints = []
Object.keys(byId).forEach(key => {
const claim = byId[key]
const outpoint = `${claim.txid}:${claim.nout}`
outpoints.push(outpoint)
})
return outpoints
}
)

View file

@ -0,0 +1,98 @@
import { createSelector } from 'reselect'
import {
selectDaemonReady,
selectCurrentPage,
selectCurrentUri,
} from 'selectors/app'
export const _selectState = state => state.content || {}
export const selectFeaturedContent = createSelector(
_selectState,
(state) => state.featuredContent || {}
)
export const selectFeaturedContentByCategory = createSelector(
selectFeaturedContent,
(featuredContent) => featuredContent.byCategory || {}
)
export const selectFetchingFeaturedContent = createSelector(
_selectState,
(state) => !!state.fetchingFeaturedContent
)
export const shouldFetchFeaturedContent = createSelector(
selectDaemonReady,
selectCurrentPage,
selectFetchingFeaturedContent,
selectFeaturedContentByCategory,
(daemonReady, page, fetching, byCategory) => {
if (!daemonReady) return false
if (page != 'discover') return false
if (fetching) return false
if (Object.keys(byCategory).length != 0) return false
return true
}
)
export const selectFetchingFileInfos = createSelector(
_selectState,
(state) => state.fetchingFileInfos || {}
)
export const selectFetchingDownloadedContent = createSelector(
_selectState,
(state) => !!state.fetchingDownloadedContent
)
export const selectDownloadedContent = createSelector(
_selectState,
(state) => state.downloadedContent || {}
)
export const selectDownloadedContentFileInfos = createSelector(
selectDownloadedContent,
(downloadedContent) => downloadedContent.fileInfos || []
)
export const shouldFetchDownloadedContent = createSelector(
selectDaemonReady,
selectCurrentPage,
selectFetchingDownloadedContent,
selectDownloadedContent,
(daemonReady, page, fetching, content) => {
if (!daemonReady) return false
if (page != 'downloaded') return false
if (fetching) return false
if (Object.keys(content).length != 0) return false
return true
}
)
export const selectFetchingPublishedContent = createSelector(
_selectState,
(state) => !!state.fetchingPublishedContent
)
export const selectPublishedContent = createSelector(
_selectState,
(state) => state.publishedContent || {}
)
export const shouldFetchPublishedContent = createSelector(
selectDaemonReady,
selectCurrentPage,
selectFetchingPublishedContent,
selectPublishedContent,
(daemonReady, page, fetching, content) => {
if (!daemonReady) return false
if (page != 'published') return false
if (fetching) return false
if (Object.keys(content).length != 0) return false
return true
}
)

View file

@ -0,0 +1,54 @@
import { createSelector } from 'reselect'
import {
selectCurrentUri,
selectCurrentPage,
} from 'selectors/app'
export const _selectState = state => state.costInfo || {}
export const selectAllCostInfoByUri = createSelector(
_selectState,
(state) => state.byUri || {}
)
export const selectCurrentUriCostInfo = createSelector(
selectCurrentUri,
selectAllCostInfoByUri,
(uri, byUri) => byUri[uri] || {}
)
export const selectFetchingCostInfo = createSelector(
_selectState,
(state) => state.fetching || {}
)
export const selectFetchingCurrentUriCostInfo = createSelector(
selectCurrentUri,
selectFetchingCostInfo,
(uri, byUri) => !!byUri[uri]
)
export const shouldFetchCurrentUriCostInfo = createSelector(
selectCurrentPage,
selectCurrentUri,
selectFetchingCurrentUriCostInfo,
selectCurrentUriCostInfo,
(page, uri, fetching, costInfo) => {
if (page != 'show') return false
if (fetching) return false
if (Object.keys(costInfo).length != 0) return false
return true
}
)
const selectCostInfoForUri = (state, props) => {
return selectAllCostInfoByUri(state)[props.uri]
}
export const makeSelectCostInfoForUri = () => {
return createSelector(
selectCostInfoForUri,
(costInfo) => costInfo
)
}

View file

@ -0,0 +1,172 @@
import {
createSelector,
} from 'reselect'
import {
selectCurrentUri,
selectCurrentPage,
} from 'selectors/app'
import {
selectMyClaimsOutpoints,
} from 'selectors/claims'
export const _selectState = state => state.fileInfo || {}
export const selectAllFileInfoByUri = createSelector(
_selectState,
(state) => state.byUri || {}
)
export const selectCurrentUriRawFileInfo = createSelector(
selectCurrentUri,
selectAllFileInfoByUri,
(uri, byUri) => byUri[uri]
)
export const selectCurrentUriFileInfo = createSelector(
selectCurrentUriRawFileInfo,
(fileInfo) => fileInfo
)
export const selectFetchingFileInfo = createSelector(
_selectState,
(state) => state.fetching || {}
)
export const selectFetchingCurrentUriFileInfo = createSelector(
selectCurrentUri,
selectFetchingFileInfo,
(uri, byUri) => !!byUri[uri]
)
export const selectDownloading = createSelector(
_selectState,
(state) => state.downloading || {}
)
export const selectDownloadingByUri = createSelector(
selectDownloading,
(downloading) => downloading.byUri || {}
)
export const selectDownloadingCurrentUri = createSelector(
selectCurrentUri,
selectDownloadingByUri,
(uri, byUri) => !!byUri[uri]
)
export const selectCurrentUriIsDownloaded = createSelector(
selectCurrentUriFileInfo,
(fileInfo) => {
if (!fileInfo) return false
if (!fileInfo.completed) return false
if (!fileInfo.written_bytes > 0) return false
return true
}
)
export const shouldFetchCurrentUriFileInfo = createSelector(
selectCurrentPage,
selectCurrentUri,
selectFetchingCurrentUriFileInfo,
selectCurrentUriFileInfo,
(page, uri, fetching, fileInfo) => {
if (page != 'show') return false
if (fetching) return false
if (fileInfo != undefined) return false
return true
}
)
const selectFileInfoForUri = (state, props) => {
return selectAllFileInfoByUri(state)[props.uri]
}
export const makeSelectFileInfoForUri = () => {
return createSelector(
selectFileInfoForUri,
(fileInfo) => fileInfo
)
}
const selectDownloadingForUri = (state, props) => {
const byUri = selectDownloadingByUri(state)
return byUri[props.uri]
}
export const makeSelectDownloadingForUri = () => {
return createSelector(
selectDownloadingForUri,
(downloadingForUri) => !!downloadingForUri
)
}
export const selectLoading = createSelector(
_selectState,
(state) => state.loading || {}
)
export const selectLoadingByUri = createSelector(
selectLoading,
(loading) => loading.byUri || {}
)
export const selectLoadingCurrentUri = createSelector(
selectLoadingByUri,
selectCurrentUri,
(byUri, uri) => !!byUri[uri]
)
// TODO make this smarter so it doesn't start playing and immediately freeze
// while downloading more.
export const selectCurrentUriFileReadyToPlay = createSelector(
selectCurrentUriFileInfo,
(fileInfo) => (fileInfo || {}).written_bytes > 0
)
const selectLoadingForUri = (state, props) => {
const byUri = selectLoadingByUri(state)
return byUri[props.uri]
}
export const makeSelectLoadingForUri = () => {
return createSelector(
selectLoadingForUri,
(loading) => !!loading
)
}
export const selectDownloadedFileInfo = createSelector(
selectAllFileInfoByUri,
(byUri) => {
const fileInfoList = []
Object.keys(byUri).forEach(key => {
const fileInfo = byUri[key]
if (fileInfo.completed || fileInfo.written_bytes) {
fileInfoList.push(fileInfo)
}
})
return fileInfoList
}
)
export const selectPublishedFileInfo = createSelector(
selectAllFileInfoByUri,
selectMyClaimsOutpoints,
(byUri, outpoints) => {
const fileInfos = []
outpoints.forEach(outpoint => {
Object.keys(byUri).forEach(key => {
const fileInfo = byUri[key]
if (fileInfo.outpoint == outpoint) {
fileInfos.push(fileInfo)
}
})
})
return fileInfos
}
)

View file

@ -0,0 +1,3 @@
import { createSelector } from 'reselect'
export const _selectState = state => state.rewards || {}

34
ui/js/selectors/search.js Normal file
View file

@ -0,0 +1,34 @@
import { createSelector } from 'reselect'
export const _selectState = state => state.search || {}
export const selectSearchQuery = createSelector(
_selectState,
(state) => state.query
)
export const selectIsSearching = createSelector(
_selectState,
(state) => !!state.searching
)
export const selectSearchResults = createSelector(
_selectState,
(state) => state.results || {}
)
export const selectSearchResultsByQuery = createSelector(
selectSearchResults,
(results) => results.byQuery || {}
)
export const selectCurrentSearchResults = createSelector(
selectSearchQuery,
selectSearchResultsByQuery,
(query, byQuery) => byQuery[query] || []
)
export const selectSearchActivated = createSelector(
_selectState,
(state) => !!state.activated
)

109
ui/js/selectors/wallet.js Normal file
View file

@ -0,0 +1,109 @@
import { createSelector } from 'reselect'
import {
selectCurrentPage,
selectDaemonReady,
} from 'selectors/app'
export const _selectState = state => state.wallet || {}
export const selectBalance = createSelector(
_selectState,
(state) => state.balance || 0
)
export const selectTransactions = createSelector(
_selectState,
(state) => state.transactions || {}
)
export const selectTransactionsById = createSelector(
selectTransactions,
(transactions) => transactions.byId || {}
)
export const selectTransactionItems = createSelector(
selectTransactionsById,
(byId) => {
const transactionItems = []
const txids = Object.keys(byId)
txids.forEach((txid) => {
const tx = byId[txid]
transactionItems.push({
id: txid,
date: tx.timestamp ? (new Date(parseInt(tx.timestamp) * 1000)) : null,
amount: parseFloat(tx.value)
})
})
return transactionItems.reverse()
}
)
export const selectIsFetchingTransactions = createSelector(
_selectState,
(state) => state.fetchingTransactions
)
export const shouldFetchTransactions = createSelector(
selectCurrentPage,
selectTransactions,
selectIsFetchingTransactions,
(page, transactions, fetching) => {
if (page != 'wallet') return false
if (fetching) return false
if (transactions.length != 0) return false
return true
}
)
export const selectReceiveAddress = createSelector(
_selectState,
(state) => state.receiveAddress
)
export const selectGettingNewAddress = createSelector(
_selectState,
(state) => state.gettingNewAddress
)
export const shouldGetReceiveAddress = createSelector(
selectReceiveAddress,
selectGettingNewAddress,
selectDaemonReady,
(address, fetching, daemonReady) => {
if (!daemonReady) return false
if (fetching) return false
if (address) return false
return true
}
)
export const shouldCheckAddressIsMine = createSelector(
_selectState,
selectCurrentPage,
selectReceiveAddress,
selectDaemonReady,
(state, page, address, daemonReady) => {
if (!daemonReady) return false
if (address === undefined) return false
if (state.addressOwnershipChecked) return false
return true
}
)
export const selectDraftTransaction = createSelector(
_selectState,
(state) => state.draftTransaction || {}
)
export const selectDraftTransactionAmount = createSelector(
selectDraftTransaction,
(draft) => draft.amount
)
export const selectDraftTransactionAddress = createSelector(
selectDraftTransaction,
(draft) => draft.address
)

View file

@ -6,6 +6,15 @@ import {
createLogger
} from 'redux-logger'
import appReducer from 'reducers/app';
import availabilityReducer from 'reducers/availability'
import certificatesReducer from 'reducers/certificates'
import claimsReducer from 'reducers/claims'
import contentReducer from 'reducers/content';
import costInfoReducer from 'reducers/cost_info'
import fileInfoReducer from 'reducers/file_info'
import rewardsReducer from 'reducers/rewards'
import searchReducer from 'reducers/search'
import walletReducer from 'reducers/wallet'
function isFunction(object) {
return typeof object === 'function';
@ -15,11 +24,43 @@ function isNotFunction(object) {
return !isFunction(object);
}
function createBulkThunkMiddleware() {
return ({ dispatch, getState }) => next => (action) => {
if (action.type === 'BATCH_ACTIONS') {
action.actions.filter(isFunction).map(actionFn =>
actionFn(dispatch, getState)
)
}
return next(action)
}
}
function enableBatching(reducer) {
return function batchingReducer(state, action) {
switch (action.type) {
case 'BATCH_ACTIONS':
return action.actions.filter(isNotFunction).reduce(batchingReducer, state)
default:
return reducer(state, action)
}
}
}
const reducers = redux.combineReducers({
app: appReducer,
availability: availabilityReducer,
certificates: certificatesReducer,
claims: claimsReducer,
fileInfo: fileInfoReducer,
content: contentReducer,
costInfo: costInfoReducer,
rewards: rewardsReducer,
search: searchReducer,
wallet: walletReducer,
});
var middleware = [thunk]
const bulkThunk = createBulkThunkMiddleware()
const middleware = [thunk, bulkThunk]
if (env === 'development') {
const logger = createLogger({
@ -28,10 +69,10 @@ if (env === 'development') {
middleware.push(logger)
}
var createStoreWithMiddleware = redux.compose(
const createStoreWithMiddleware = redux.compose(
redux.applyMiddleware(...middleware)
)(redux.createStore);
var reduxStore = createStoreWithMiddleware(reducers);
const reduxStore = createStoreWithMiddleware(enableBatching(reducers));
export default reduxStore;

91
ui/js/triggers.js Normal file
View file

@ -0,0 +1,91 @@
import {
shouldFetchTransactions,
shouldGetReceiveAddress,
} from 'selectors/wallet'
import {
shouldFetchFeaturedContent,
shouldFetchDownloadedContent,
shouldFetchPublishedContent,
} from 'selectors/content'
import {
shouldFetchCurrentUriFileInfo,
} from 'selectors/file_info'
import {
shouldFetchCurrentUriCostInfo,
} from 'selectors/cost_info'
import {
shouldFetchCurrentUriAvailability,
} from 'selectors/availability'
import {
doFetchTransactions,
doGetNewAddress,
} from 'actions/wallet'
import {
doFetchFeaturedContent,
doFetchDownloadedContent,
doFetchPublishedContent,
} from 'actions/content'
import {
doFetchCurrentUriFileInfo,
} from 'actions/file_info'
import {
doFetchCurrentUriCostInfo,
} from 'actions/cost_info'
import {
doFetchCurrentUriAvailability,
} from 'actions/availability'
const triggers = []
triggers.push({
selector: shouldFetchTransactions,
action: doFetchTransactions,
})
triggers.push({
selector: shouldGetReceiveAddress,
action: doGetNewAddress
})
triggers.push({
selector: shouldFetchFeaturedContent,
action: doFetchFeaturedContent,
})
triggers.push({
selector: shouldFetchDownloadedContent,
action: doFetchDownloadedContent,
})
triggers.push({
selector: shouldFetchPublishedContent,
action: doFetchPublishedContent,
})
triggers.push({
selector: shouldFetchCurrentUriFileInfo,
action: doFetchCurrentUriFileInfo,
})
triggers.push({
selector: shouldFetchCurrentUriCostInfo,
action: doFetchCurrentUriCostInfo,
})
triggers.push({
selector: shouldFetchCurrentUriAvailability,
action: doFetchCurrentUriAvailability,
})
const runTriggers = function() {
triggers.forEach(function(trigger) {
const state = app.store.getState();
const should = trigger.selector(state)
if (trigger.selector(state)) app.store.dispatch(trigger.action())
});
}
module.exports = {
triggers: triggers,
runTriggers: runTriggers
}

View file

@ -0,0 +1,9 @@
// https://github.com/reactjs/redux/issues/911
function batchActions(...actions) {
return {
type: 'BATCH_ACTIONS',
actions: actions
};
}
export default batchActions

View file

@ -3,7 +3,8 @@
"version": "0.10.0rc5",
"description": "LBRY UI",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --devtool eval --progress --colors --inline"
},
"keywords": [
"lbry"
@ -54,6 +55,7 @@
"json-loader": "^0.5.4",
"node-sass": "^3.13.0",
"webpack": "^1.13.3",
"webpack-dev-server": "^2.4.4",
"webpack-target-electron-renderer": "^0.4.0"
}
}