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

more fixes

Browse source
This commit is contained in:
Jeremy Kauffman 2017-04-12 16:23:20 -04:00
parent a5d1695084
commit b38998dc18
13 changed files with 204 additions and 143 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

73
ui/js/component/auth.js
View file

@ -104,21 +104,45 @@ const ConfirmEmailStage = React.createClass({
});
const WelcomeStage = React.createClass({
propTypes: {
endAuth: React.PropTypes.func,
},
getInitialState: function() {
return {
hasReward: false,
rewardAmount: null,
}
},
onRewardClaim: function(reward) {
this.setState({
hasReward: true,
rewardAmount: reward
})
},
render: function() {
// <p>Thank you
return (
<section>
<h3 className="modal__header">Welcome to LBRY.</h3>
<p>LBRY is kind of like a centaur. Totally normal up top, and <em>way different</em> underneath.</p>
<p>On the upper level, LBRY is like other popular video and media sites.</p>
<p>Below, LBRY is like nothing else. Through blockchain and decentralization, LBRY is controlled by it's users -- that is, you.</p>
<p>Here is a reward for reading our weird centaur metaphor:</p>
<div style={{textAlign: "center", marginBottom: "12px"}}>
<RewardLink type="new_user" onRewardClaim={this.onRewardClaim} />
</div>
<p>This reward earned you <em>LBC</em>. LBC is used to watch stuff and to have say in how the network works.</p>
<p>But no need to understand it all just yet! Try watching something next.</p>
</section>
!this.state.hasReward ?
<Modal type="custom" isOpen={true} contentLabel="Welcome to LBRY" {...this.props}>
<section>
<h3 className="modal__header">Welcome to LBRY.</h3>
<p>LBRY is kind of like a centaur. Totally normal up top, and <em>way different</em> underneath.</p>
<p>On the upper level, LBRY is like other popular video and media sites.</p>
<p>Below, LBRY is like nothing else. Using blockchain and decentralization, LBRY is controlled by its users -- that is, you -- and no one else.</p>
<p>Thanks for being a part of it! Here's a nickel, kid.</p>
<div style={{textAlign: "center", marginBottom: "12px"}}>
<RewardLink type="new_user" button="primary" onRewardClaim={this.onRewardClaim} onRewardFailure={this.props.endAuth} />
</div>
</section>
</Modal> :
<Modal type="alert" overlayClassName="modal-overlay modal-overlay--clear" isOpen={true} contentLabel="Welcome to LBRY" {...this.props} onConfirmed={this.props.endAuth}>
<section>
<h3 className="modal__header">About Your Reward</h3>
<p>You earned a reward of 5 LBRY credits, or <em>LBC</em>.</p>
<p>This reward will show in your Wallet momentarily, likely while you are reading this message.</p>
<p>LBC is used to compensate creators, to publish, and to have say in how the network works.</p>
<p>No need to understand it all just yet! Try watching or downloading something next.</p>
</section>
</Modal>
);
}
});
@ -152,12 +176,11 @@ export const AuthOverlay = React.createClass({
error: ErrorStage,
email: SubmitEmailStage,
confirm: ConfirmEmailStage,
welcome: WelcomeStage,
welcome: WelcomeStage
},
getInitialState: function() {
return {
stage: null,
stage: "pending",
stageProps: {}
};
},
@ -183,7 +206,13 @@ export const AuthOverlay = React.createClass({
}
})
} else {
this.endAuth()
lbryio.call('reward', 'list', {}).then(function(userRewards) {
userRewards.filter(function(reward) {
return reward.RewardType == "new_user" && reward.TransactionID;
}).length ?
this.endAuth() :
this.setState({ stage: "welcome" })
}.bind(this));
}
}.bind(this)).catch((err) => {
this.setState({
@ -199,21 +228,17 @@ export const AuthOverlay = React.createClass({
})
},
render: function() {
if (!this.state.stage || lbryio.user && lbryio.user.HasVerifiedEmail) {
if (this.state.stage != "welcome") {
if (!this.state.stage) {
return null;
}
}
const StageContent = this._stages[this.state.stage];
return (
this.state.stage != "welcome" ?
<ModalPage className="modal-page--full"isOpen={true} contentLabel="Authentication" {...this.props}>
<ModalPage className="modal-page--full" isOpen={true} contentLabel="Authentication" {...this.props}>
<h1>LBRY Early Access</h1>
<StageContent {...this.state.stageProps} />
</ModalPage> :
<Modal isOpen={true} contentLabel="Welcome to LBRY" {...this.props} onConfirmed={this.endAuth}>
<StageContent {...this.state.stageProps} />
</Modal>
<StageContent endAuth={this.endAuth} {...this.state.stageProps} />
);
}
});

9
ui/js/component/link.js
View file

@ -60,7 +60,8 @@ export let RewardLink = React.createClass({
propTypes: {
type: React.PropTypes.string.isRequired,
claimed: React.PropTypes.bool,
onRewardClaim: React.PropTypes.func
onRewardClaim: React.PropTypes.func,
onRewardFailure: React.PropTypes.func
},
refreshClaimable: function() {
switch(this.props.type) {
@ -92,7 +93,6 @@ export let RewardLink = React.createClass({
pending: true
})
rewards.claimReward(this.props.type).then(function(reward) {
console.log(reward);
this.setState({
pending: false,
errorMessage: null
@ -108,6 +108,9 @@ export let RewardLink = React.createClass({
}.bind(this))
},
clearError: function() {
if (this.props.onRewardFailure) {
this.props.onRewardFailure()
}
this.setState({
errorMessage: null
})
@ -117,7 +120,7 @@ export let RewardLink = React.createClass({
<div className="reward-link">
{this.props.claimed
? <span><Icon icon="icon-check" /> Reward claimed.</span>
: <Link button="alt" disabled={this.state.pending || !this.state.claimable } label="Claim Reward" onClick={this.claimReward} />}
: <Link button={this.props.button ? this.props.button : 'alt'} disabled={this.state.pending || !this.state.claimable } label="Claim Reward" onClick={this.claimReward} />}
{this.state.errorMessage ?
<Modal isOpen={true} contentLabel="Reward Claim Error" className="error-modal" onConfirmed={this.clearError}>
{this.state.errorMessage}

2
ui/js/component/modal-page.js
View file

@ -6,7 +6,7 @@ export const ModalPage = React.createClass({
return (
<ReactModal onCloseRequested={this.props.onAborted || this.props.onConfirmed} {...this.props}
className={(this.props.className || '') + ' modal-page'}
overlayClassName={(this.props.overlayClassName || '') + ' modal-page-overlay'}>
overlayClassName="modal-overlay">
<div className="modal-page__content">
{this.props.children}
</div>

4
ui/js/component/modal.js
View file

@ -6,6 +6,7 @@ import {Link} from './link.js';
export const Modal = React.createClass({
propTypes: {
type: React.PropTypes.oneOf(['alert', 'confirm', 'custom']),
overlay: React.PropTypes.bool,
onConfirmed: React.PropTypes.func,
onAborted: React.PropTypes.func,
confirmButtonLabel: React.PropTypes.string,
@ -16,6 +17,7 @@ export const Modal = React.createClass({
getDefaultProps: function() {
return {
type: 'alert',
overlay: true,
confirmButtonLabel: 'OK',
abortButtonLabel: 'Cancel',
confirmButtonDisabled: false,
@ -26,7 +28,7 @@ export const Modal = React.createClass({
return (
<ReactModal onCloseRequested={this.props.onAborted || this.props.onConfirmed} {...this.props}
className={(this.props.className || '') + ' modal'}
overlayClassName={(this.props.overlayClassName || '') + ' modal-overlay'}>
overlayClassName={[null, undefined, ""].indexOf(this.props.overlayClassName) === -1 ? this.props.overlayClassName : 'modal-overlay'}>
<div>
{this.props.children}
</div>

1
ui/js/component/snack-bar.js
View file

@ -13,7 +13,6 @@ export const SnackBar = React.createClass({
}
},
handleSnackReceived: function(event) {
// console.log(event);
// if (this._hideTimeout) {
// clearTimeout(this._hideTimeout);
// }

15
ui/js/lbry.js
View file

@ -204,13 +204,6 @@ lbry.resolveName = function(name, callback) {
});
}
lbry.getStream = function(name, callback) {
if (!name) {
throw new Error(`Name required.`);
}
lbry.call('get', { 'name': name }, callback);
};
lbry.getClaimInfo = function(name, callback) {
if (!name) {
throw new Error(`Name required.`);
@ -654,6 +647,14 @@ lbry.claim_list_mine = function(params={}) {
});
}
// lbry.get = function(params={}) {
// return function(params={}) {
// return new Promise((resolve, reject) => {
// jsonrpc.call(lbry.daemonConnectionString, "get", [params], resolve, reject, reject);
// });
// };
// }
lbry = new Proxy(lbry, {
get: function(target, name) {
if (name in target) {

15
ui/js/page/publish.js
View file

@ -3,11 +3,25 @@ import lbry from '../lbry.js';
import uri from '../uri.js';
import {FormField, FormRow} from '../component/form.js';
import {Link} from '../component/link.js';
import rewards from '../rewards.js';
import Modal from '../component/modal.js';
var PublishPage = React.createClass({
_requiredFields: ['meta_title', 'name', 'bid'],
_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)
}
});
},
_updateChannelList: function(channel) {
// Calls API to update displayed list of channels. If a channel name is provided, will select
// that channel at the same time (used immediately after creating a channel)
@ -334,6 +348,7 @@ var PublishPage = React.createClass({
},
componentWillMount: function() {
this._updateChannelList();
this._requestPublishReward();
},
componentDidMount: function() {
document.title = "Publish";

25
ui/js/page/settings.js
View file

@ -78,20 +78,21 @@ var SettingsPage = React.createClass({
if (!this.state.daemonSettings) {
return null;
}
/*
<section className="card">
<div className="card__content">
<h3>Run on Startup</h3>
</div>
<div className="card__content">
<FormRow type="checkbox"
onChange={this.onRunOnStartChange}
defaultChecked={this.state.daemonSettings.run_on_startup}
label="Run LBRY automatically when I start my computer" />
</div>
</section>
*/
return (
<main>
<section className="card">
<div className="card__content">
<h3>Run on Startup</h3>
</div>
<div className="card__content">
<FormRow type="checkbox"
onChange={this.onRunOnStartChange}
defaultChecked={this.state.daemonSettings.run_on_startup}
label="Run LBRY automatically when I start my computer" />
</div>
</section>
<section className="card">
<div className="card__content">
<h3>Download Directory</h3>

31
ui/js/rewards.js
View file

@ -3,23 +3,44 @@ import lbryio from './lbryio.js';
function rewardMessage(type, amount) {
return {
new_developer: "Your reward has been confirmed for registering as a new developer.",
new_developer: "You received ${amount} for registering as a new developer.",
new_user: `You received ${amount} LBC new user reward.`,
confirm_email: "Your reward has been confirmed for verifying your email address.",
first_publish: "Your reward has been confirmed for making your first publication.",
confirm_email: "You received ${amount} LBC for verifying your email address.",
first_channel: "You received ${amount} LBC for creating a publisher identity.",
first_purchase: "You received ${amount} LBC for making your first purchase.",
first_publish: "You received ${amount} LBC for making your first publication.",
}[type];
}
const rewards = {};
rewards.claimReward = function(type) {
rewards.TYPE_NEW_DEVELOPER = "new_developer",
rewards.TYPE_NEW_USER = "new_user",
rewards.TYPE_CONFIRM_EMAIL = "confirm_email",
rewards.TYPE_FIRST_CHANNEL = "first_channel",
rewards.TYPE_FIRST_PURCHASE = "first_purchase",
rewards.TYPE_FIRST_PUBLISH = "first_publish";
rewards.claimReward = function (type) {
return new Promise((resolve, reject) => {
console.log('top of promise body')
lbry.get_new_address().then((address) => {
const params = {
reward_type: type,
wallet_address: address,
};
switch (type) {
case 'first_channel':
//params.transaction_id = RelevantTransactionID;
break;
case 'first_purchase':
//params.transaction_id = RelevantTransactionID;
break;
case 'first_channel':
//params.transaction_id = RelevantTransactionID;
break;
}
lbryio.call('reward', 'new', params, 'post').then(({RewardAmount}) => {
const
message = rewardMessage(type, RewardAmount),

76
ui/scss/_gui.scss
View file

@ -147,79 +147,3 @@ p
font-size: 0.85em;
color: $color-help;
}
.modal-overlay {
position: fixed;
display: flex;
justify-content: center;
align-items: center;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: rgba(255, 255, 255, 0.74902);
z-index: 9999;
}
.modal {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: 1px solid rgb(204, 204, 204);
background: rgb(255, 255, 255);
overflow: auto;
border-radius: 4px;
padding: $spacing-vertical;
box-shadow: $default-box-shadow;
max-width: 400px;
}
.modal__header {
margin-bottom: 5px;
text-align: center;
}
.modal__buttons {
display: flex;
flex-direction: row;
justify-content: center;
margin-top: 15px;
}
.modal__button {
margin: 0px 6px;
}
.error-modal-overlay {
background: rgba(#000, .88);
}
.error-modal__content {
display: flex;
padding: 0px 8px 10px 10px;
}
.error-modal__warning-symbol {
margin-top: 6px;
margin-right: 7px;
}
.download-started-modal__file-path {
word-break: break-all;
}
.error-modal {
max-width: none;
width: 400px;
}
.error-modal__error-list { /*shitty hack/temp fix for long errors making modals unusable*/
border: 1px solid #eee;
padding: 8px;
list-style: none;
max-height: 400px;
max-width: 400px;
overflow-y: hidden;
}

1
ui/scss/all.scss
View file

@ -15,6 +15,7 @@
@import "component/_load-screen.scss";
@import "component/_channel-indicator.scss";
@import "component/_notice.scss";
@import "component/_modal.scss";
@import "component/_modal-page.scss";
@import "component/_snack-bar.scss";
@import "page/_developer.scss";

14
ui/scss/component/_modal-page.scss
View file

@ -1,16 +1,4 @@
.modal-page-overlay {
position: fixed;
display: flex;
justify-content: center;
align-items: center;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: rgba(255, 255, 255, 0.74902);
z-index: 9999;
}
@import "../global";
.modal-page {
position: fixed;

81
ui/scss/component/_modal.scss Normal file
View file

@ -0,0 +1,81 @@
@import "../global";
.modal-overlay {
position: fixed;
display: flex;
justify-content: center;
align-items: center;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: rgba(255, 255, 255, 0.74902);
z-index: 9999;
}
.modal-overlay--clear {
background-color: transparent;
}
.modal {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: 1px solid rgb(204, 204, 204);
background: rgb(255, 255, 255);
overflow: auto;
border-radius: 4px;
padding: $spacing-vertical;
box-shadow: $default-box-shadow;
max-width: 400px;
}
.modal__header {
margin-bottom: 5px;
text-align: center;
}
.modal__buttons {
display: flex;
flex-direction: row;
justify-content: center;
margin-top: 15px;
}
.modal__button {
margin: 0px 6px;
}
.error-modal-overlay {
background: rgba(#000, .88);
}
.error-modal__content {
display: flex;
padding: 0px 8px 10px 10px;
}
.error-modal__warning-symbol {
margin-top: 6px;
margin-right: 7px;
}
.download-started-modal__file-path {
word-break: break-all;
}
.error-modal {
max-width: none;
width: 400px;
}
.error-modal__error-list { /*shitty hack/temp fix for long errors making modals unusable*/
border: 1px solid #eee;
padding: 8px;
list-style: none;
max-height: 400px;
max-width: 400px;
overflow-y: hidden;
}