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

Merge pull request #70 from lbryio/modals

Browse source 
Use React Modal dialogs for all alerts and confirmation boxes
This commit is contained in:
alexliebowitz 2016-11-10 07:05:16 -05:00 committed by GitHub
commit 14565ec586
11 changed files with 371 additions and 103 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
dist/index.html vendored
View file

@ -20,8 +20,9 @@
</head>
<body>
<div id="canvas"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-modal/1.5.2/react-modal.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.7.4/polyfill.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Clamp.js/0.5.1/clamp.min.js"></script>
<script src="./js/mediaelement/jquery.js"></script>
@ -32,6 +33,7 @@
<script src="./js/component/form.js?i=0"></script>
<script src="./js/component/link.js?i=0"></script>
<script src="./js/component/menu.js?i=0"></script>
<script src="./js/component/modal.js?i=0"></script>
<script src="./js/component/header.js?i=0"></script>
<script src="./js/component/drawer.js?i=0"></script>
<script src="./js/component/splash.js?i=0"></script>

60
js/app.js
View file

@ -11,35 +11,37 @@ var App = React.createClass({
viewingPage: viewingPage,
drawerOpen: drawerOpenRaw !== null ? JSON.parse(drawerOpenRaw) : true,
pageArgs: val,
modal: null,
startNotice: null,
updateUrl: null,
isOldOSX: null,
};
},
componentDidMount: function() {
lbry.getStartNotice(function(notice) {
if (notice) {
alert(notice);
this.setState({
modal: 'startNotice',
startNotice: notice
});
}
});
},
componentWillMount: function() {
lbry.checkNewVersionAvailable(function(isAvailable) {
lbry.checkNewVersionAvailable((isAvailable) => {
if (!isAvailable || sessionStorage.getItem('upgradeSkipped')) {
return;
}
var message = 'The version of LBRY you\'re using is not up to date.\n\n' +
'Choose "OK" to download the latest version.';
lbry.getVersionInfo(function(versionInfo) {
lbry.getVersionInfo((versionInfo) => {
var isOldOSX = false;
if (versionInfo.os_system == 'Darwin') {
var updateUrl = 'https://lbry.io/get/lbry.dmg';
var maj, min, patch;
[maj, min, patch] = versionInfo.lbrynet_version.split('.');
if (maj == 0 && min <= 2 && patch <= 2) {
// On OS X with version <= 0.2.2, we need to notify user to close manually close LBRY
message += '\n\nBefore installing the new version, make sure to exit LBRY, if you started the app ' +
'click that LBRY icon in your status bar and choose "Quit."';
isOldOSX = true;
}
} else if (versionInfo.os_system == 'Linux') {
var updateUrl = 'https://lbry.io/get/lbry.deb';
@ -49,13 +51,11 @@ var App = React.createClass({
var updateUrl = 'https://lbry.io/get';
}
if (window.confirm(message))
{
lbry.stop();
window.location = updateUrl;
} else {
sessionStorage.setItem('upgradeSkipped', true);
};
this.setState({
modal: 'upgrade',
isOldOSX: isOldOSX,
updateUrl: updateUrl,
})
});
});
},
@ -67,6 +67,21 @@ var App = React.createClass({
sessionStorage.setItem('drawerOpen', false);
this.setState({ drawerOpen: false });
},
closeModal: function() {
this.setState({
modal: null,
});
},
handleUpgradeClicked: function() {
lbry.stop();
window.location = this.state.updateUrl;
},
handleSkipClicked: function() {
sessionStorage.setItem('upgradeSkipped', true);
this.setState({
modal: null,
});
},
onSearch: function(term) {
this.setState({
viewingPage: 'discover',
@ -151,6 +166,17 @@ var App = React.createClass({
<Header onOpenDrawer={this.openDrawer} onSearch={this.onSearch} links={headerLinks} viewingPage={this.state.viewingPage} />
{mainContent}
</div>
<Modal isOpen={this.state.modal == 'startNotice'} onConfirmed={this.closeModal}>
{this.state.startNotice}
</Modal>
<Modal isOpen={this.state.modal == 'upgrade'} type="confirm" confirmButtonLabel="Upgrade" abortButtonLabel="Skip"
onConfirmed={this.handleUpgradeClicked} onAborted={this.handleSkipClicked} >
<p>The version of LBRY you're using is not up to date. Choose "Upgrade" to get the latest version.</p>
{this.state.isOldOSX
? <p>Before installing the new version, make sure to exit LBRY. If you started the app, click the LBRY icon in your status bar and choose "Quit."</p>
: null}
</Modal>
</div>
);
}

57
js/component/link.js
View file

@ -93,13 +93,22 @@ var DownloadLink = React.createClass({
getInitialState: function() {
return {
downloading: false,
filePath: null,
modal: null,
}
},
closeModal: function() {
this.setState({
modal: null,
})
},
handleClick: function() {
lbry.getCostEstimate(this.props.streamName, (amount) => {
lbry.getBalance((balance) => {
if (amount > balance) {
alert("You don't have enough LBRY credits to pay for this stream.");
this.setState({
modal: 'notEnoughCredits',
});
} else {
this.startDownload();
}
@ -113,15 +122,27 @@ var DownloadLink = React.createClass({
});
lbry.getStream(this.props.streamName, (streamInfo) => {
alert('Downloading to ' + streamInfo.path);
console.log(streamInfo);
this.setState({
modal: 'downloadStarted',
filePath: streamInfo.path,
});
});
}
},
render: function() {
var label = (!this.state.downloading ? this.props.label : this.props.downloadingLabel);
return <Link button={this.props.button} hidden={this.props.hidden} style={this.props.style}
disabled={this.state.downloading} label={label} icon={this.props.icon} onClick={this.handleClick} />;
return (
<span className="button-container">
<Link button={this.props.button} hidden={this.props.hidden} style={this.props.style}
disabled={this.state.downloading} label={label} icon={this.props.icon} onClick={this.handleClick} />
<Modal isOpen={this.state.modal == 'downloadStarted'} onConfirmed={this.closeModal}>
Downloading to {this.state.filePath}
</Modal>
<Modal isOpen={this.state.modal == 'notEnoughCredits'} onConfirmed={this.closeModal}>
You don't have enough LBRY credits to pay for this stream.
</Modal>
</span>
);
}
});
@ -138,22 +159,40 @@ var WatchLink = React.createClass({
lbry.getCostEstimate(this.props.streamName, (amount) => {
lbry.getBalance((balance) => {
if (amount > balance) {
alert("You don't have enough LBRY credits to pay for this stream.");
this.setState({
modal: 'notEnoughCredits',
});
} else {
window.location = '?watch=' + this.props.streamName;
}
});
});
},
getInitialState: function() {
return {
modal: null,
};
},
closeModal: function() {
this.setState({
modal: null,
});
},
getDefaultProps: function() {
return {
icon: 'icon-play',
label: 'Watch',
}
},
render: function() {
return <Link button={this.props.button} hidden={this.props.hidden} style={this.props.style}
label={this.props.label} icon={this.props.icon} onClick={this.handleClick} />;
return (
<span className="button-container">
<Link button={this.props.button} hidden={this.props.hidden} style={this.props.style}
label={this.props.label} icon={this.props.icon} onClick={this.handleClick} />
<Modal isOpen={this.state.modal == 'notEnoughCredits'} onConfirmed={this.closeModal}>
You don't have enough LBRY credits to pay for this stream.
</Modal>
</span>
);
}
});

57
js/component/modal.js Normal file
View file

@ -0,0 +1,57 @@
var Modal = React.createClass({
propTypes: {
type: React.PropTypes.oneOf(['alert', 'confirm', 'custom']),
onConfirmed: React.PropTypes.func,
onAborted: React.PropTypes.func,
confirmButtonLabel: React.PropTypes.string,
abortButtonLabel: React.PropTypes.string,
confirmButtonDisabled: React.PropTypes.bool,
abortButtonDisabled: React.PropTypes.bool,
},
getDefaultProps: function() {
return {
type: 'alert',
confirmButtonLabel: 'OK',
abortButtonLabel: 'Cancel',
confirmButtonDisabled: false,
abortButtonDisabled: false,
};
},
render: function() {
var props = Object.assign({}, this.props);
if (typeof props.className == 'undefined') {
props.className = 'modal';
} else {
props.className += ' modal';
}
if (typeof props.overlayClassName == 'undefined') {
props.overlayClassName = 'modal-overlay';
} else {
props.overlayClassName += ' modal-overlay';
}
props.onCloseRequested = props.onAborted || props.onConfirmed;
if (this.props.type == 'custom') {
var buttons = null;
} else {
var buttons = (
<div className="modal__buttons">
{this.props.type == 'confirm'
? <Link button="alt" label={props.abortButtonLabel} className="modal__button" disabled={this.props.abortButtonDisabled} onClick={props.onAborted} />
: null}
<Link button="primary" label={props.confirmButtonLabel} className="modal__button" disabled={this.props.confirmButtonDisabled} onClick={props.onConfirmed} />
</div>
);
}
return (
<ReactModal {...props}>
{this.props.children}
{buttons}
</ReactModal>
);
}
});

80
js/page/claim_code.js
View file

@ -14,6 +14,10 @@ var ClaimCodePage = React.createClass({
getInitialState: function() {
return {
submitting: false,
modal: null,
referralCredits: null,
activationCredits: null,
failureReason: null,
}
},
handleSubmit: function(event) {
@ -22,15 +26,19 @@ var ClaimCodePage = React.createClass({
}
if (!this.refs.code.value) {
alert('Please enter an invitation code or choose "Skip."');
this.setState({
modal: 'missingCode',
});
return;
} else if (!this.refs.email.value) {
alert('Please enter an email address or choose "Skip."');
this.setState({
modal: 'missingEmail',
});
return;
}
this.setState({
submitting: true
submitting: true,
});
lbry.getNewAddress((address) => {
@ -42,33 +50,25 @@ var ClaimCodePage = React.createClass({
var response = JSON.parse(xhr.responseText);
if (response.success) {
var redeemMessage = 'Your invite code has been redeemed. ';
if (response.referralCredits > 0) {
redeemMessage += 'You have also earned ' + response.referralCredits + ' credits from referrals. A total of ' +
(response.activationCredits + response.referralCredits) + ' will be added to your balance shortly.';
} else if(response.activationCredits > 0) {
redeemMessage += response.activationCredits + ' credits will be added to your balance shortly.';
} else {
redeemMessage += 'The credits will be added to your balance shortly.';
}
alert(redeemMessage);
localStorage.setItem('claimCodeDone', true);
window.location = '?home';
} else {
alert(response.reason);
this.setState({
submitting: false
modal: 'codeRedeemed',
referralCredits: response.referralCredits,
activationCredits: response.activationCredits,
});
} else {
this.setState({
submitting: false,
modal: 'codeRedeemFailed',
failureReason: response.reason,
});
}
});
xhr.addEventListener('error', () => {
this.setState({
submitting: false
submitting: false,
modal: 'couldNotConnect',
});
alert('LBRY couldn\'t connect to our servers to confirm your invitation code. Please check your ' +
'internet connection. If you continue to have problems, you can still browse LBRY and ' +
'visit the Settings page to redeem your code later.');
});
xhr.open('POST', 'https://invites.lbry.io', true);
@ -78,10 +78,19 @@ var ClaimCodePage = React.createClass({
});
},
handleSkip: function() {
alert('Welcome to LBRY! You can visit the Wallet page to redeem an invite code at any time.');
this.setState({
modal: 'skipped',
});
},
handleFinished: function() {
localStorage.setItem('claimCodeDone', true);
window.location = '?home';
},
closeModal: function() {
this.setState({
modal: null,
});
},
render: function() {
return (
<main>
@ -105,6 +114,31 @@ var ClaimCodePage = React.createClass({
</section>
</div>
</form>
<Modal isOpen={this.state.modal == 'missingCode'} onConfirmed={this.closeModal}>
Please enter an invitation code or choose "Skip."
</Modal>
<Modal isOpen={this.state.modal == 'missingEmail'} onConfirmed={this.closeModal}>
Please enter an email address or choose "Skip."
</Modal>
<Modal isOpen={this.state.modal == 'codeRedeemFailed'} onConfirmed={this.closeModal}>
{this.state.failureReason}
</Modal>
<Modal isOpen={this.state.modal == 'codeRedeemed'} onConfirmed={this.handleFinished}>
Your invite code has been redeemed.
{this.state.referralCredits > 0
? `You have also earned {referralCredits} credits from referrals. A total of {activationCredits + referralCredits}
will be added to your balance shortly.`
: (this.state.activationCredits > 0
? `{this.state.activationCredits} credits will be added to your balance shortly.`
: 'The credits will be added to your balance shortly.')}
</Modal>
<Modal isOpen={this.state.modal == 'skipped'} onConfirmed={this.handleFinished}>
Welcome to LBRY! You can visit the Wallet page to redeem an invite code at any time.
</Modal>
<Modal isOpen={this.state.modal == 'couldNotConnect'} onConfirmed={this.closeModal}>
<p>LBRY couldn't connect to our servers to confirm your invitation code. Please check your internet connection.</p>
If you continue to have problems, you can still browse LBRY and visit the Settings page to redeem your code later.
</Modal>
</main>
);
}

47
js/page/my_files.js
View file

@ -5,31 +5,48 @@ var moreMenuStyle = {
right: '13px',
};
var MyFilesRowMoreMenu = React.createClass({
onRevealClicked: function() {
propTypes: {
title: React.PropTypes.string.isRequired,
path: React.PropTypes.string.isRequired,
completed: React.PropTypes.bool.isRequired,
lbryUri: React.PropTypes.string.isRequired,
},
handleRevealClicked: function() {
lbry.revealFile(this.props.path);
},
onRemoveClicked: function() {
handleRemoveClicked: function() {
lbry.deleteFile(this.props.lbryUri, false);
},
onDeleteClicked: function() {
var alertText = 'Are you sure you\'d like to delete "' + this.props.title + '?" This will ' +
(this.completed ? ' stop the download and ' : '') +
'permanently remove the file from your system.';
if (confirm(alertText)) {
lbry.deleteFile(this.props.lbryUri);
}
handleDeleteClicked: function() {
this.setState({
modal: 'confirmDelete',
});
},
handleDeleteConfirmed: function() {
lbry.deleteFile(this.props.lbryUri);
lbry.setState({
modal: null,
});
},
getInitialState: function() {
return {
modal: null,
};
},
render: function() {
return (
<div style={moreMenuStyle}>
<Menu {...this.props}>
<section className="card">
<MenuItem onClick={this.onRevealClicked} label="Reveal file" /> {/* @TODO: Switch to OS specific wording */}
<MenuItem onClick={this.onRemoveClicked} label="Remove from LBRY" />
<MenuItem onClick={this.onDeleteClicked} label="Remove and delete file" />
<MenuItem onClick={this.handleRevealClicked} label="Reveal file" /> {/* @TODO: Switch to OS specific wording */}
<MenuItem onClick={this.handleRemoveClicked} label="Remove from LBRY" />
<MenuItem onClick={this.handleDeleteClicked} label="Remove and delete file" />
</section>
</Menu>
<Modal isOpen={this.state.modal == 'confirmDelete'} type="confirm" confirmButtonLabel="Delete File" onConfirmed={this.handleDeleteConfirmed}>
Are you sure you'd like to delete <cite>{this.props.title}</cite>? This will {this.props.completed ? ' stop the download and ' : ''}
permanently remove the file from your system.
</Modal>
</div>
);
}
@ -123,8 +140,8 @@ var MyFilesRow = React.createClass({
<div style={moreButtonContainerStyle}>
<Link style={moreButtonStyle} ref="moreButton" icon="icon-ellipsis-h" title="More Options" />
<MyFilesRowMoreMenu toggleButton={this.refs.moreButton} title={this.props.title}
lbryUri={this.props.lbryUri} fileName={this.props.fileName}
path={this.props.path}/>
completed={this.props.completed} lbryUri={this.props.lbryUri}
fileName={this.props.fileName} path={this.props.path}/>
</div>
}
</div>

30
js/page/publish.js
View file

@ -81,14 +81,8 @@ var PublishPage = React.createClass({
console.log(publishArgs);
lbry.publish(publishArgs, (message) => {
this.handlePublishStarted();
this.setState({
submitting: false,
});
}, null, (error) => {
this.handlePublishError(error);
this.setState({
submitting: false,
});
});
};
@ -125,18 +119,26 @@ var PublishPage = React.createClass({
otherLicenseUrl: '',
uploadProgress: 0.0,
uploaded: false,
errorMessage: null,
tempFileReady: false,
submitting: false,
modal: null,
};
},
handlePublishStarted: function() {
alert(`Your file ${this.refs.meta_title.getValue()} has been published to LBRY at the address lbry://${this.state.name}!\n\n` +
`You will now be taken to your My Files page, where your newly published file will be listed. Your file will take a few minutes to appear for other LBRY users; until then it will be listed as "pending."`);
this.setState({
modal: 'publishStarted',
});
},
handlePublishStartedConfirmed: function() {
window.location = "?published";
},
handlePublishError: function(error) {
alert(`The following error occurred when attempting to publish your file:\n\n` +
error.message);
this.setState({
submitting: false,
modal: 'error',
errorMessage: error.message,
});
},
handleNameChange: function(event) {
var rawName = event.target.value;
@ -463,6 +465,14 @@ var PublishPage = React.createClass({
<input type='submit' className='hidden' />
</div>
</form>
<Modal isOpen={this.state.modal == 'publishStarted'} onConfirmed={this.handlePublishStartedConfirmed}>
<p>Your file has been published to LBRY at the address <code>lbry://{this.state.name}</code>!</p>
You will now be taken to your My Files page, where your newly published file will be listed. The file will take a few minutes to appear for other LBRY users; until then it will be listed as "pending."
</Modal>
<Modal isOpen={this.state.modal == 'error'} onConfirmed={this.closeModal}>
The following error occurred when attempting to publish your file: {this.state.errorMessage}
</Modal>
</main>
);
}

60
js/page/referral.js
View file

@ -14,6 +14,9 @@ var ReferralPage = React.createClass({
getInitialState: function() {
return {
submitting: false,
modal: null,
referralCredits: null,
failureReason: null,
}
},
handleSubmit: function(event) {
@ -22,15 +25,17 @@ var ReferralPage = React.createClass({
}
if (!this.refs.code.value) {
alert('Please enter a referral code.');
return;
this.setState({
modal: 'missingCode',
});
} else if (!this.refs.email.value) {
alert('Please enter an email address.');
return;
this.setState({
modal: 'missingEmail',
});
}
this.setState({
submitting: true
submitting: true,
});
lbry.getNewAddress((address) => {
@ -42,29 +47,24 @@ var ReferralPage = React.createClass({
var response = JSON.parse(xhr.responseText);
if (response.success) {
if (response.referralCredits > 0) {
alert('You have earned ' + response.referralCredits + ' credits from referrals. ' +
'We will credit your account shortly. Thanks!');
} else {
alert('You have not earned any new referral credits since the last time you checked. ' +
'Please check back in a week or two.');
}
window.location = '?home';
} else {
alert(response.reason);
this.setState({
submitting: false
modal: 'referralInfo',
referralCredits: response.referralCredits,
});
} else {
this.setState({
submitting: false,
modal: 'lookupFailed',
failureReason: response.reason,
});
}
});
xhr.addEventListener('error', () => {
this.setState({
submitting: false
submitting: false,
modal: 'couldNotConnect',
});
alert('LBRY couldn\'t connect to our servers to confirm your referral code. Please check your ' +
'internet connection.');
});
xhr.open('POST', 'https://invites.lbry.io/check', true);
@ -73,6 +73,15 @@ var ReferralPage = React.createClass({
'&email=' + encodeURIComponent(email));
});
},
closeModal: function() {
this.setState({
modal: null,
});
},
handleFinished: function() {
localStorage.setItem('claimCodeDone', true);
window.location = '?home';
},
render: function() {
return (
<main>
@ -94,6 +103,17 @@ var ReferralPage = React.createClass({
</section>
</div>
</form>
<Modal isOpen={this.state.modal == 'referralInfo'} onConfirmed={this.handleFinished}>
{this.state.referralCredits > 0
? `You have earned {response.referralCredits} credits from referrals. We will credit your account shortly. Thanks!`
: 'You have not earned any new referral credits since the last time you checked. Please check back in a week or two.'}
</Modal>
<Modal isOpen={this.state.modal == 'lookupFailed'} onConfirmed={this.closeModal}>
{this.state.failureReason}
</Modal>
<Modal isOpen={this.state.modal == 'couldNotConnect'} onConfirmed={this.closeModal}>
LBRY couldn't connect to our servers to confirm your referral code. Please check your internet connection.
</Modal>
</main>
);
}

13
js/page/report.js
View file

@ -6,9 +6,9 @@ var ReportPage = React.createClass({
});
lbry.reportBug(this._messageArea.value, () => {
this.setState({
submitting: false
submitting: false,
modal: 'submitted',
});
alert("Your bug report has been submitted! Thank you for your feedback.");
});
this._messageArea.value = '';
}
@ -16,9 +16,15 @@ var ReportPage = React.createClass({
componentDidMount: function() {
document.title = "Report an Issue";
},
closeModal: function() {
this.setState({
modal: null,
})
},
getInitialState: function() {
return {
submitting: false,
modal: null,
}
},
render: function() {
@ -38,6 +44,9 @@ var ReportPage = React.createClass({
<h3>Developer?</h3>
You can also <Link href="https://github.com/lbryio/lbry/issues" label="submit an issue on GitHub"/>.
</section>
<Modal isOpen={this.state.modal == 'submitted'} onConfirmed={this.closeModal}>
Your bug report has been submitted! Thank you for your feedback.
</Modal>
</main>
);
}

13
js/page/wallet.js
View file

@ -17,6 +17,7 @@ var AddressSection = React.createClass({
getInitialState: function() {
return {
address: null,
modal: null,
}
},
componentWillMount: function() {
@ -58,7 +59,9 @@ var SendToAddressSection = React.createClass({
if ((this.state.balance - this.state.amount) < 1)
{
alert("Insufficient balance: after this transaction you would have less than 1 LBC in your wallet.")
this.setState({
modal: 'insufficientBalance',
});
return;
}
@ -85,6 +88,11 @@ var SendToAddressSection = React.createClass({
})
});
},
closeModal: function() {
this.setState({
modal: null,
});
},
getInitialState: function() {
return {
address: "",
@ -136,6 +144,9 @@ var SendToAddressSection = React.createClass({
: ''
}
</form>
<Modal isOpen={this.state.modal === 'insufficientBalance'} onConfirmed={this.closeModal}>
Insufficient balance: after this transaction you would have less than 1 LBC in your wallet.
</Modal>
</section>
);
}

51
scss/_gui.scss
View file

@ -132,6 +132,13 @@ input[type="text"], input[type="search"]
}
}
.button-container {
+ .button-container
{
margin-left: 12px;
}
}
.button-block
{
cursor: pointer;
@ -143,10 +150,6 @@ input[type="text"], input[type="search"]
text-align: center;
border-radius: 2px;
text-transform: uppercase;
+ .button-block
{
margin-left: 12px;
}
.icon
{
top: 0em;
@ -225,3 +228,43 @@ input[type="text"], input[type="search"]
margin-top: $spacing-vertical;
}
}
.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;
outline: none;
padding: 40px;
max-width: 250px;
}
.modal__buttons {
display: flex;
flex-direction: row;
justify-content: center;
margin-top: 15px;
}
.modal__button {
margin: 0px 6px;
}