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

Merge pull request #1 from lbryio/settings-page

Browse source 
merge updates from settings-page
This commit is contained in:
Jack Robison 2016-04-16 01:10:42 -04:00
commit b07aea9cf2
12 changed files with 468 additions and 249 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.gitignore vendored
View file

@ -1,3 +1,5 @@
dist/css/*
dist/js/*
node_modules
.sass-cache
.idea

BIN
dist.zip
View file

Binary file not shown.

8
dist/index.html vendored
View file

@ -20,7 +20,13 @@
<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/babel-polyfill/6.7.4/polyfill.js"></script>
<script src="./js/lbry.js"></script>
<script src="./js/gui.js"></script>
<script src="./js/component/common.js"></script>
<script src="./js/component/splash.js"></script>
<script src="./js/page/home.js"></script>
<script src="./js/page/settings.js"></script>
<script src="./js/app.js"></script>
<script src="./js/main.js"></script>
</body>
</html>

40
js/app.js Normal file
View file

@ -0,0 +1,40 @@
var appStyles = {
width: '800px',
marginLeft: 'auto',
marginRight: 'auto',
};
var App = React.createClass({
getInitialState: function() {
return {
viewingPage: window.location.search === '?settings' ? 'settings' : 'home'
}
},
componentWillMount: function() {
lbry.checkNewVersionAvailable(function(isAvailable) {
if (isAvailable) {
alert("The version of LBRY you're using is not up to date.\n\n" +
"You'll now be taken to lbry.io, where you can download the latest version.");
window.location = "http://www.lbry.io/" + (navigator.userAgent.indexOf('Mac OS X') != -1 ? 'osx' : 'linux');
}
});
},
componentDidMount: function() {
lbry.getStartNotice(function(notice) {
if (notice) {
alert(notice);
}
});
},
render: function() {
if (this.state.viewingPage == 'home') {
var content = <HomePage />;
} else if (this.state.viewingPage == 'settings') {
var content = <SettingsPage />;
}
return (
<div style={appStyles}>
{content}
</div>
);
}
});

50
js/component/common.js Normal file
View file

@ -0,0 +1,50 @@
//component/icon.js
var Icon = React.createClass({
propTypes: {
style: React.PropTypes.object,
},
render: function() {
var className = 'icon ' + this.props.icon;
return <span className={className} style={this.props.style}></span>
}
});
var Link = React.createClass({
render: function() {
console.log(this.props);
var href = this.props.href ? this.props.href : 'javascript:;',
icon = this.props.icon ? <Icon icon={this.props.icon} /> : '',
className = (this.props.button ? 'button-block button-' + this.props.button : 'button-text');
return (
<a className={className} href={href} style={this.props.style ? this.props.style : {}} onClick={this.props.onClick}>
{this.props.icon ? icon : '' }
{this.props.label}
</a>
);
}
});
var creditAmountStyle = {
color: '#216C2A',
fontWeight: 'bold',
fontSize: '0.8em'
}, estimateStyle = {
marginLeft : '5px',
color: '#aaa',
};
var CreditAmount = React.createClass({
propTypes: {
amount: React.PropTypes.number,
},
render: function() {
var formattedAmount = lbry.formatCredits(this.props.amount);
return (
<span className="credit-amount">
<span style={creditAmountStyle}>{formattedAmount}</span>
{ this.props.isEstimate ? <span style={estimateStyle}>(est)</span> : null }
</span>
);
}
});

65
js/component/splash.js Normal file
View file

@ -0,0 +1,65 @@
var splashStyle = {
color: 'white',
backgroundImage: 'url(' + lbry.imagePath('lbry-bg.png') + ')',
backgroundSize: 'cover',
minHeight: '100vh',
minWidth: '100vw',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center'
}, splashMessageStyle = {
marginTop: '24px',
width: '325px',
textAlign: 'center',
};
var SplashScreen = React.createClass({
propTypes: {
message: React.PropTypes.string,
onLoadDone: React.PropTypes.func,
},
getInitialState: function() {
return {
details: 'Starting daemon',
isLagging: false,
}
},
updateStatus: function(checkNum=0, was_lagging=false) {
lbry.getDaemonStatus((status) => {
if (status.code == 'started') {
this.props.onLoadDone();
return;
}
this.setState({
details: status.message + (status.is_lagging ? '' : '...'),
isLagging: status.is_lagging,
});
if (checkNum < 600) {
setTimeout(() => {
this.updateStatus(checkNum + 1, status.is_lagging);
}, 500);
}
});
},
componentDidMount: function() {
this.updateStatus();
},
render: function() {
var imgSrc = lbry.imagePath('lbry-white-485x160.png');
return (
<div className="splash-screen" style={splashStyle}>
<img src={imgSrc} alt="LBRY"/>
<div style={splashMessageStyle}>
<h3>
{this.props.message}
<span className="busy-indicator"></span>
</h3>
<Icon icon='icon-warning' style={this.state.isLagging ? {} : { display: 'none' }}/> <span style={ this.state.isLagging ? {} : {'color': '#c3c3c3'} }>{this.state.details}</span>
</div>
</div>
);
}
});

41
js/lbry.js
View file

@ -6,16 +6,19 @@ var lbry = {
}
};
lbry.call = function (method, params, callback, connectFailedCallback)
lbry.call = function (method, params, callback, errorCallback, connectFailedCallback)
{
var xhr = new XMLHttpRequest;
xhr.addEventListener('load', function() {
var response = JSON.parse(xhr.responseText);
if (response.error) {
throw new Error('Call to method ' + method + ' failed with message: ' + response.error);
if (errorCallback) {
errorCallback(response.error);
}
} else if (callback) {
callback(response.result);
}
callback(response.result);
});
if (connectFailedCallback) {
@ -44,7 +47,7 @@ lbry.connect = function(callback)
lbry.isConnected = true;
callback(true);
} else {
if (tryNum <= 50) { // Move # of tries into constant or config option
if (tryNum <= 600) { // Move # of tries into constant or config option
setTimeout(function () {
checkDaemonRunning(tryNum + 1);
}, 500);
@ -61,11 +64,27 @@ lbry.daemonRunningStatus = function (callback) {
// Returns true/false whether the daemon is running (i.e. fully conncected to the network),
// or null if the AJAX connection to the daemon fails.
lbry.call('is_running', {}, callback, function () {
lbry.call('is_running', {}, callback, null, function () {
callback(null);
});
};
lbry.getDaemonStatus = function (callback) {
lbry.call('daemon_status', {}, callback);
};
lbry.getStartNotice = function(callback) {
lbry.call('get_start_notice', {}, callback);
}
lbry.getSettings = function(callback) {
lbry.call('get_settings', {}, callback);
};
lbry.setSettings = function(settings, callback) {
lbry.call('set_settings', settings, callback);
};
lbry.getBalance = function(callback)
{
lbry.call("get_balance", {}, callback);
@ -76,6 +95,18 @@ lbry.search = function(query, callback)
lbry.call("search_nametrie", { "search": query }, callback);
}
lbry.checkNewVersionAvailable = function(callback) {
lbry.call('version', {}, function() {
// If the "version" method is available, we have a daemon new enough to do version checking
lbry.call('check_for_new_version', {}, callback);
}, function(err) {
if (err.fault == 'NoSuchFunction') {
// If it's not available, we're definitely in an old version
callback(true);
}
});
}
//utilities
lbry.formatCredits = function(amount, precision)
{

13
js/main.js Normal file
View file

@ -0,0 +1,13 @@
//main.js
var init = function() {
var canvas = document.getElementById('canvas');
ReactDOM.render(
<SplashScreen message="Connecting" onLoadDone={function() {
ReactDOM.render(<App/>, canvas);
}}/>,
canvas
);
};
init();

332
js/gui.js → js/page/home.js
View file

@ -1,183 +1,15 @@
//component/icon.js
var Icon = React.createClass({
render: function() {
var className = 'icon ' + this.props.icon;
return <span className={className}></span>
}
});
//component/link.js
var Link = React.createClass({
render: function() {
console.log(this.props);
var href = this.props.href ? this.props.href : 'javascript:;',
icon = this.props.icon ? <Icon icon={this.props.icon} /> : '',
className = (this.props.button ? 'button-block button-' + this.props.button : 'button-text') +
(this.props.fadeIn ? ' fade-in-link' : '');
return (
<a className={className} href={href} style={this.props.style ? this.props.style : {}}>
{this.props.icon ? icon : '' }
{this.props.label}
</a>
);
}
});
//component/splash.js
var splashStyle = {
color: 'white',
backgroundImage: 'url(' + lbry.imagePath('lbry-bg.png') + ')',
backgroundSize: 'cover',
minHeight: '100vh',
minWidth: '100vw',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center'
}, splashMessageStyle = {
marginTop: '24px'
};
var SplashScreen = React.createClass({
propTypes: {
message: React.PropTypes.string,
},
render: function() {
var imgSrc = lbry.imagePath('lbry-white-485x160.png');
return (
<div className="splash-screen" style={splashStyle}>
<img src={imgSrc} alt="LBRY"/>
<div style={splashMessageStyle}>
<h3>
{this.props.message}
<span className="busy-indicator"></span>
</h3>
</div>
</div>
);
}
});
//component/credit-amount.js
var creditAmountStyle = {
color: '#216C2A',
fontWeight: 'bold',
fontSize: '0.8em'
}, estimateStyle = {
marginLeft : '5px',
color: '#aaa',
};
var CreditAmount = React.createClass({
propTypes: {
amount: React.PropTypes.number,
},
render: function() {
var formattedAmount = lbry.formatCredits(this.props.amount);
return (
<span className="credit-amount">
<span style={creditAmountStyle}>{formattedAmount}</span>
{ this.props.isEstimate ? <span style={estimateStyle}>(est)</span> : null }
</span>
);
}
});
//component/header.js
var logoStyle = {
padding: '48px 12px',
textAlign: 'center',
maxHeight: '80px',
},
balanceStyle = {
// float: 'right',
marginTop: '3px'
},
imgStyle = { //@TODO: remove this, img should be properly scaled once size is settled
height: '80px'
};
var Header = React.createClass({
render: function() {
return (
<header>
<TopBar />
<div style={logoStyle}>
<img src="./img/lbry-dark-1600x528.png" style={imgStyle}/>
</div>
</header>
);
}
});
var topBarStyle = {
'float': 'right'
};
var TopBar = React.createClass({
getInitialState: function() {
return {
balance: 0
};
},
componentDidMount: function() {
lbry.getBalance(function(balance) {
this.setState({
balance: balance
});
}.bind(this));
},
render: function() {
return (
<span className='top-bar' style={topBarStyle}>
<span style={balanceStyle}>
<CreditAmount amount={this.state.balance}/>
</span>
<Menu />
</span>
);
}
});
var menuStyle = {
position: 'relative',
top: '3px',
marginLeft: '2px'
}, menuItemStyle = {
marginLeft: '3px'
};
var Menu = React.createClass({
render: function() {
return (
<span className='menu' style={menuStyle}>
<Link href='#' icon="icon-gear" fadeIn={true} style={menuItemStyle} />
</span>
)
}
});
//component/discover.js
var searchInputStyle = {
width: '400px',
display: 'block',
marginBottom: '48px',
marginLeft: 'auto',
marginRight: 'auto'
},
fetchResultsStyle = {
color: '#888',
textAlign: 'center',
fontSize: '1.2em'
};
width: '400px',
display: 'block',
marginBottom: '48px',
marginLeft: 'auto',
marginRight: 'auto'
},
fetchResultsStyle = {
color: '#888',
textAlign: 'center',
fontSize: '1.2em'
};
var SearchActive = React.createClass({
render: function() {
@ -200,10 +32,10 @@ var searchNoResultsStyle = {
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="javascript:alert('aww I do nothing')" />
</section>
<section style={searchNoResultsStyle}>
<span style={searchNoResultsMessageStyle}>No one has checked anything in for {this.props.query} yet.</span>
<Link label="Be the first" href="javascript:alert('aww I do nothing')" />
</section>
);
}
});
@ -216,7 +48,7 @@ var SearchResults = React.createClass({
this.props.results.forEach(function(result) {
rows.push(
<SearchResultRow name={result.name} title={result.stream_name} imgUrl={result.thumbnail}
description={result.description} cost_est={result.cost_est} />
description={result.description} cost_est={result.cost_est} />
);
});
console.log(this.props.results);
@ -229,29 +61,29 @@ var SearchResults = React.createClass({
});
var searchRowImgStyle = {
maxHeight: '100px',
display: 'block',
marginLeft: 'auto',
marginRight: 'auto',
float: 'left'
},
searchRowCostStyle = {
float: 'right',
marginLeft: '20px',
marginTop: '5px',
display: 'inline-block'
},
searchRowNameStyle = {
fontSize: '0.9em',
color: '#666',
marginBottom: '24px',
clear: 'both'
},
searchRowDescriptionStyle = {
color : '#444',
marginBottom: '24px',
fontSize: '0.9em'
};
maxHeight: '100px',
display: 'block',
marginLeft: 'auto',
marginRight: 'auto',
float: 'left'
},
searchRowCostStyle = {
float: 'right',
marginLeft: '20px',
marginTop: '5px',
display: 'inline-block'
},
searchRowNameStyle = {
fontSize: '0.9em',
color: '#666',
marginBottom: '24px',
clear: 'both'
},
searchRowDescriptionStyle = {
color : '#444',
marginBottom: '24px',
fontSize: '0.9em'
};
var SearchResultRow = React.createClass({
@ -340,7 +172,7 @@ var Discover = React.createClass({
return (
<main style={discoverMainStyle}>
<section><input type="search" style={searchInputStyle} onChange={this.onQueryChange}
placeholder="Find movies, music, games, and more"/></section>
placeholder="Find movies, music, games, and more"/></section>
{ this.state.searching ? <SearchActive /> : null }
{ !this.state.searching && this.state.results.length ? <SearchResults results={this.state.results} /> : null }
{ !this.state.searching && !this.state.results.length && this.state.query ? <SearchNoResults query={this.state.query} /> : null }
@ -349,38 +181,68 @@ var Discover = React.createClass({
}
});
//component/home.js
var logoStyle = {
padding: '48px 12px',
textAlign: 'center',
maxHeight: '80px',
},
imgStyle = { //@TODO: remove this, img should be properly scaled once size is settled
height: '80px'
};
var homeStyles = {
width: '800px',
marginLeft: 'auto',
marginRight: 'auto',
};
var Home = React.createClass({
var Header = React.createClass({
render: function() {
return (
<div style={homeStyles}>
<header>
<TopBar onPageChosen={this.handlePageChosen}/>
<div style={logoStyle}>
<img src="./img/lbry-dark-1600x528.png" style={imgStyle}/>
</div>
</header>
);
}
});
var topBarStyle = {
'float': 'right'
},
balanceStyle = {
'marginRight': '5px'
};
var TopBar = React.createClass({
getInitialState: function() {
return {
balance: 0
};
},
componentDidMount: function() {
lbry.getBalance(function(balance) {
this.setState({
balance: balance
});
}.bind(this));
},
render: function() {
return (
<span className='top-bar' style={topBarStyle}>
<span style={balanceStyle}>
<CreditAmount amount={this.state.balance}/>
</span>
<Link href='/?settings' icon="icon-gear" />
</span>
);
}
});
var HomePage = React.createClass({
render: function() {
return (
<div>
<Header />
<Discover />
</div>
);
}
});
//main.js
var init = function() {
var canvas = document.getElementById('canvas');
ReactDOM.render(
<SplashScreen message="Connecting"/>,
canvas
);
lbry.connect(function() {
ReactDOM.render(<Home/>, canvas);
})
};
init();
});

121
js/page/settings.js Normal file
View file

@ -0,0 +1,121 @@
var settingsRadioOptionStyles = {
display: 'block',
marginLeft: '13px'
}, settingsCheckBoxOptionStyles = {
display: 'block',
marginLeft: '13px'
}, settingsNumberFieldStyles = {
width: '40px'
}, downloadDirectoryLabelStyles = {
fontSize: '.9em',
marginLeft: '13px'
}, downloadDirectoryFieldStyles= {
width: '300px'
};
var SettingsPage = React.createClass({
storeSetting: function(setting, val) {
var settings = Object.assign({}, this.state.settings);
settings[setting] = val;
this.setState({
'settings': settings
});
lbry.setSettings(settings);
},
onRunOnStartChange: function (event) {
this.storeSetting('run_on_startup', event.target.checked);
},
onShareDataChange: function (event) {
this.storeSetting('upload_log', event.target.checked);
},
onDownloadDirChange: function(event) {
this.storeSetting('default_download_directory', event.target.value);
},
onMaxUploadPrefChange: function(isLimited) {
if (!isLimited) {
this.storeSetting('max_upload', 0.0);
}
this.setState({
isMaxUpload: isLimited
});
},
onMaxUploadFieldChange: function(event) {
this.storeSetting('max_upload', Number(event.target.value));
},
onMaxDownloadPrefChange: function(isLimited) {
if (!isLimited) {
this.storeSetting('max_download', 0.0);
}
this.setState({
isMaxDownload: isLimited
});
},
onMaxDownloadFieldChange: function(event) {
this.storeSetting('max_download', Number(event.target.value));
},
getInitialState: function() {
return {
settings: null
}
},
componentWillMount: function() {
lbry.getSettings(function(settings) {
this.setState({
settings: settings,
isMaxUpload: settings.max_upload != 0,
isMaxDownload: settings.max_download != 0
});
}.bind(this));
},
render: function() {
if (!this.state.settings) { // If the settings aren't loaded yet, don't render anything.
return null;
}
return (
<main>
<h1>Settings</h1>
<section>
<h4>Run on startup</h4>
<label style={settingsCheckBoxOptionStyles}>
<input type="checkbox" onChange={this.onRunOnStartChange} defaultChecked={this.state.settings.run_on_startup} /> Run LBRY automatically when I start my computer
</label>
</section>
<section>
<h4>Download directory</h4>
<div className="help">Where would you like the files you download from LBRY to be saved?</div>
<input style={downloadDirectoryFieldStyles} type="text" name="default_download_directory" defaultValue={this.state.settings.default_download_directory} onChange={this.onDownloadDirChange}/>
</section>
<section>
<h4>Max Upload</h4>
<label style={settingsRadioOptionStyles}>
<input type="radio" name="max_upload_pref" onChange={this.onMaxUploadPrefChange.bind(this, false)} defaultChecked={!this.state.isMaxUpload}/> Unlimited
</label>
<label style={settingsRadioOptionStyles}>
<input type="radio" name="max_upload_pref" onChange={this.onMaxUploadPrefChange.bind(this, true)} defaultChecked={this.state.isMaxUpload}/> { this.state.isMaxUpload ? 'Up to' : 'Choose limit...' }
<span className={ this.state.isMaxUpload ? '' : 'hidden'}> <input type="number" min="0" step=".5" defaultValue={this.state.settings.max_upload} style={settingsNumberFieldStyles} onChange={this.onMaxUploadFieldChange}/> MB/s</span>
</label>
</section>
<section>
<h4>Max Download</h4>
<label style={settingsRadioOptionStyles}>
<input type="radio" name="max_download_pref" onChange={this.onMaxDownloadPrefChange.bind(this, false)} defaultChecked={!this.state.isMaxDownload}/> Unlimited
</label>
<label style={settingsRadioOptionStyles}>
<input type="radio" name="max_download_pref" onChange={this.onMaxDownloadPrefChange.bind(this, true)} defaultChecked={this.state.isMaxDownload}/> { this.state.isMaxDownload ? 'Up to' : 'Choose limit...' }
<span className={ this.state.isMaxDownload ? '' : 'hidden'}> <input type="number" min="0" step=".5" defaultValue={this.state.settings.max_download} style={settingsNumberFieldStyles} onChange={this.onMaxDownloadFieldChange}/> MB/s</span>
</label>
</section>
<section>
<h4>Share diagnostic data</h4>
<label style={settingsCheckBoxOptionStyles}>
<input type="checkbox" onChange={this.onShareDataChange} defaultChecked={this.state.settings.upload_log} /> Help make LBRY better by contributing diagnostic data about my usage
</label>
</section>
<section>
<Link href="/" label="<< Return"/>
</section>
</main>
);
}
});

3
scss/_global.scss
View file

@ -5,10 +5,11 @@ $spacing-vertical: 24px;
$color-primary: #155B4A;
$color-light-alt: hsl(hue($color-primary), 15, 85);
$color-text-dark: #000;
$color-help: #666;
$color-money: #216C2A;
$color-meta-light: #505050;
$font-size: 18px;
$font-size: 16px;
$mobile-width-threshold: 801px;
$max-content-width: 1000px;

42
scss/_gui.scss
View file

@ -13,7 +13,16 @@ body
position: relative;
}
h1 { font-size: 2.0em; }
section
{
margin-bottom: $spacing-vertical;
&:last-child
{
margin-bottom: 0;
}
}
h1 { font-size: 2.0em; margin-bottom: $spacing-vertical / 2; margin-top: $spacing-vertical * 1.5; }
h2 { font-size: 1.75em; }
h3 { font-size: 1.4em; }
h4 { font-size: 1.2em; }
@ -24,13 +33,15 @@ sup, sub {
}
sup { top: -0.4em; }
sub { top: 0.4em; }
label { cursor: pointer; }
.fade-in-link {
opacity: 0.55;
transition: opacity .225s ease;
&:hover {
opacity: 1;
}
header
{
line-height: $spacing-vertical;
}
.hidden {
display: none;
}
input[type="search"]
@ -102,4 +113,21 @@ input[type="search"]
{
color: $color-primary;
text-decoration: underline;
&:hover
{
opacity: 0.70;
transition: opacity .225s ease;
}
}
.fade-in-link {
&:hover {
opacity: 1;
}
}
.help
{
color: $color-help;
}