barebones sidebar + light component refactor
This commit is contained in:
Jeremy Kauffman
Alex Liebowitz
parent
24a7d5588e
commit
45f14598b9
21 changed files with 515 additions and 466 deletions
5
dist/index.html
vendored
5
dist/index.html
vendored
|
|
@ -27,6 +27,11 @@
|
|||
<script src="./js/mediaelement/mediaelement-and-player.min.js"></script>
|
||||
<script src="./js/lbry.js"></script>
|
||||
<script src="./js/component/common.js"></script>
|
||||
<script src="./js/component/form.js"></script>
|
||||
<script src="./js/component/link.js"></script>
|
||||
<script src="./js/component/menu.js"></script>
|
||||
<script src="./js/component/header.js"></script>
|
||||
<script src="./js/component/drawer.js"></script>
|
||||
<script src="./js/component/splash.js"></script>
|
||||
<script src="./js/page/home.js"></script>
|
||||
<script src="./js/page/settings.js"></script>
|
||||
|
|
|
|||
62
js/app.js
62
js/app.js
|
|
@ -1,7 +1,9 @@
|
|||
var App = React.createClass({
|
||||
getInitialState: function() {
|
||||
// For now, routes are in format ?page or ?page=args
|
||||
var match, param, val, viewingPage;
|
||||
var match, param, val, viewingPage,
|
||||
drawerOpenRaw = sessionStorage.getItem('drawerOpen');
|
||||
|
||||
[match, param, val] = window.location.search.match(/\??([^=]*)(?:=(.*))?/);
|
||||
|
||||
if (param && ['settings', 'help', 'start', 'watch', 'report', 'files', 'claim', 'show', 'wallet', 'publish'].indexOf(param) != -1) {
|
||||
|
|
@ -10,6 +12,7 @@ var App = React.createClass({
|
|||
|
||||
return {
|
||||
viewingPage: viewingPage ? viewingPage : 'home',
|
||||
drawerOpen: drawerOpenRaw !== null ? JSON.parse(drawerOpenRaw) : true,
|
||||
pageArgs: val,
|
||||
};
|
||||
},
|
||||
|
|
@ -44,31 +47,40 @@ var App = React.createClass({
|
|||
});
|
||||
});
|
||||
},
|
||||
openDrawer: function() {
|
||||
sessionStorage.setItem('drawerOpen', true);
|
||||
this.setState({ drawerOpen: true });
|
||||
},
|
||||
closeDrawer: function() {
|
||||
sessionStorage.setItem('drawerOpen', false);
|
||||
this.setState({ drawerOpen: false });
|
||||
},
|
||||
render: function() {
|
||||
if (this.state.viewingPage == 'home') {
|
||||
return <HomePage />;
|
||||
} else if (this.state.viewingPage == 'settings') {
|
||||
return <SettingsPage />;
|
||||
} else if (this.state.viewingPage == 'help') {
|
||||
return <HelpPage />;
|
||||
} else if (this.state.viewingPage == 'watch') {
|
||||
return <WatchPage name={this.state.pageArgs}/>;
|
||||
} else if (this.state.viewingPage == 'report') {
|
||||
return <ReportPage />;
|
||||
} else if (this.state.viewingPage == 'files') {
|
||||
return <MyFilesPage />;
|
||||
} else if (this.state.viewingPage == 'start') {
|
||||
return <StartPage />;
|
||||
} else if (this.state.viewingPage == 'claim') {
|
||||
return <ClaimCodePage />;
|
||||
} else if (this.state.viewingPage == 'wallet') {
|
||||
return <WalletPage />;
|
||||
} else if (this.state.viewingPage == 'show') {
|
||||
return <DetailPage name={this.state.pageArgs}/>;
|
||||
} else if (this.state.viewingPage == 'wallet') {
|
||||
return <WalletPage />;
|
||||
} else if (this.state.viewingPage == 'publish') {
|
||||
return <PublishPage />;
|
||||
console.log(this.state);
|
||||
return (
|
||||
<div id="window" className={ this.state.drawerOpen ? 'drawer-open' : 'drawer-closed' }>
|
||||
<Drawer onCloseDrawer={this.closeDrawer} />
|
||||
<div id="main-content">
|
||||
<Header onOpenDrawer={this.openDrawer} />
|
||||
{(() => {
|
||||
switch(this.state.viewingPage)
|
||||
{
|
||||
case 'home': return <HomePage />;
|
||||
case 'settings': return <SettingsPage />;
|
||||
case 'help': return <HelpPage />;
|
||||
case 'watch': return <WatchPage name={this.state.pageArgs}/>;
|
||||
case 'report': return <ReportPage />;
|
||||
case 'files': return <MyFilesPage />;
|
||||
case 'start': return <StartPage />;
|
||||
case 'claim': return <ClaimCodePage />;
|
||||
case 'wallet': return <WalletPage />;
|
||||
case 'show': return <DetailPage name={this.state.pageArgs}/>;
|
||||
case 'wallet': return <WalletPage />;
|
||||
case 'publish': return <PublishPage />;
|
||||
}
|
||||
})()}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
|
@ -52,298 +52,6 @@ var ToolTip = React.createClass({
|
|||
}
|
||||
});
|
||||
|
||||
var linkContainerStyle = {
|
||||
position: 'relative',
|
||||
};
|
||||
|
||||
var Link = React.createClass({
|
||||
getInitialState: function() {
|
||||
return {
|
||||
showTooltip: false,
|
||||
};
|
||||
},
|
||||
handleClick: function() {
|
||||
if (this.props.tooltip) {
|
||||
this.setState({
|
||||
showTooltip: !this.state.showTooltip,
|
||||
});
|
||||
}
|
||||
if (this.props.onClick) {
|
||||
this.props.onClick();
|
||||
}
|
||||
},
|
||||
handleTooltipMouseOut: function() {
|
||||
this.setState({
|
||||
showTooltip: false,
|
||||
});
|
||||
},
|
||||
render: function() {
|
||||
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.hidden ? ' hidden' : '') + (this.props.disabled ? ' disabled' : '');
|
||||
|
||||
|
||||
return (
|
||||
<span style={linkContainerStyle}>
|
||||
<a className={className} href={href} style={this.props.style ? this.props.style : {}}
|
||||
title={this.props.title} onClick={this.handleClick}>
|
||||
{this.props.icon ? icon : '' }
|
||||
{this.props.label}
|
||||
</a>
|
||||
{(!this.props.tooltip ? null :
|
||||
<ToolTip open={this.state.showTooltip} onMouseOut={this.handleTooltipMouseOut}>
|
||||
{this.props.tooltip}
|
||||
</ToolTip>
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var ReturnLink = React.createClass({
|
||||
render: function() {
|
||||
return <div style={ { padding: '24px 0' } }><Link
|
||||
href={this.props.href ? this.props.href : '/'}
|
||||
icon="icon-chevron-left"
|
||||
label={this.props.label ? this.props.label : 'Return'}
|
||||
/></div>;
|
||||
}
|
||||
});
|
||||
|
||||
var DownloadLink = React.createClass({
|
||||
propTypes: {
|
||||
type: React.PropTypes.string,
|
||||
streamName: React.PropTypes.string,
|
||||
label: React.PropTypes.string,
|
||||
downloadingLabel: React.PropTypes.string,
|
||||
button: React.PropTypes.string,
|
||||
style: React.PropTypes.object,
|
||||
hidden: React.PropTypes.bool,
|
||||
},
|
||||
getDefaultProps: function() {
|
||||
return {
|
||||
icon: 'icon-download',
|
||||
label: 'Download',
|
||||
downloadingLabel: 'Downloading...',
|
||||
}
|
||||
},
|
||||
getInitialState: function() {
|
||||
return {
|
||||
downloading: false,
|
||||
}
|
||||
},
|
||||
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.");
|
||||
} else {
|
||||
this.startDownload();
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
startDownload: function() {
|
||||
if (!this.state.downloading) { //@TODO: Continually update this.state.downloading based on actual status of file
|
||||
this.setState({
|
||||
downloading: true
|
||||
});
|
||||
|
||||
lbry.getStream(this.props.streamName, (streamInfo) => {
|
||||
alert('Downloading to ' + streamInfo.path);
|
||||
console.log(streamInfo);
|
||||
});
|
||||
}
|
||||
},
|
||||
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} />;
|
||||
}
|
||||
});
|
||||
|
||||
var WatchLink = React.createClass({
|
||||
propTypes: {
|
||||
type: React.PropTypes.string,
|
||||
streamName: React.PropTypes.string,
|
||||
label: React.PropTypes.string,
|
||||
button: React.PropTypes.string,
|
||||
style: React.PropTypes.object,
|
||||
hidden: React.PropTypes.bool,
|
||||
},
|
||||
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.");
|
||||
} else {
|
||||
window.location = '?watch=' + this.props.streamName;
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
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} />;
|
||||
}
|
||||
});
|
||||
|
||||
var requiredFieldWarningStyle = {
|
||||
color: '#cc0000',
|
||||
transition: 'opacity 400ms ease-in',
|
||||
};
|
||||
var FormField = React.createClass({
|
||||
_type: null,
|
||||
_element: null,
|
||||
|
||||
propTypes: {
|
||||
type: React.PropTypes.string.isRequired,
|
||||
hidden: React.PropTypes.bool,
|
||||
},
|
||||
getInitialState: function() {
|
||||
return {
|
||||
warningState: 'hidden',
|
||||
}
|
||||
},
|
||||
componentWillMount: function() {
|
||||
if (['text', 'radio', 'checkbox', 'file'].indexOf(this.props.type) != -1) {
|
||||
this._element = 'input';
|
||||
this._type = this.props.type;
|
||||
} else {
|
||||
// Non <input> field, e.g. <select>, <textarea>
|
||||
this._element = this.props.type;
|
||||
}
|
||||
},
|
||||
warnRequired: function() {
|
||||
this.setState({
|
||||
warningState: 'shown',
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
this.setState({
|
||||
warningState: 'fading',
|
||||
});
|
||||
setTimeout(() => {
|
||||
this.setState({
|
||||
warningState: 'hidden',
|
||||
});
|
||||
}, 450);
|
||||
}, 5000);
|
||||
},
|
||||
focus: function() {
|
||||
this.refs.field.focus();
|
||||
},
|
||||
getValue: function() {
|
||||
if (this.props.type == 'checkbox') {
|
||||
return this.refs.field.checked;
|
||||
} else {
|
||||
return this.refs.field.value;
|
||||
}
|
||||
},
|
||||
render: function() {
|
||||
var warningStyle = Object.assign({}, requiredFieldWarningStyle);
|
||||
if (this.state.warningState == 'fading') {
|
||||
warningStyle.opacity = '0';
|
||||
}
|
||||
|
||||
// Pass all unhandled props to the field element
|
||||
var otherProps = Object.assign({}, this.props);
|
||||
delete otherProps.type;
|
||||
delete otherProps.hidden;
|
||||
|
||||
return (
|
||||
<span className={this.props.hidden ? 'hidden' : ''}>
|
||||
<this._element type={this._type} name={this.props.name} ref="field" placeholder={this.props.placeholder}
|
||||
{...otherProps}>
|
||||
{this.props.children}
|
||||
</this._element>
|
||||
<span className={this.state.warningState == 'hidden' ? 'hidden' : ''} style={warningStyle}> This field is required</span>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
// Generic menu styles
|
||||
var menuStyle = {
|
||||
border: '1px solid #aaa',
|
||||
padding: '4px',
|
||||
whiteSpace: 'nowrap',
|
||||
};
|
||||
|
||||
var Menu = React.createClass({
|
||||
handleWindowClick: function(e) {
|
||||
if (this.props.toggleButton && ReactDOM.findDOMNode(this.props.toggleButton).contains(e.target)) {
|
||||
// Toggle button was clicked
|
||||
this.setState({
|
||||
open: !this.state.open
|
||||
});
|
||||
} else if (this.state.open && !this.refs.div.contains(e.target)) {
|
||||
// Menu is open and user clicked outside of it
|
||||
this.setState({
|
||||
open: false
|
||||
});
|
||||
}
|
||||
},
|
||||
propTypes: {
|
||||
openButton: React.PropTypes.element,
|
||||
},
|
||||
getInitialState: function() {
|
||||
return {
|
||||
open: false,
|
||||
};
|
||||
},
|
||||
componentDidMount: function() {
|
||||
window.addEventListener('click', this.handleWindowClick, false);
|
||||
},
|
||||
componentWillUnmount: function() {
|
||||
window.removeEventListener('click', this.handleWindowClick, false);
|
||||
},
|
||||
render: function() {
|
||||
return (
|
||||
<div ref='div' style={menuStyle} className={this.state.open ? '' : 'hidden'}>
|
||||
{this.props.children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var menuItemStyle = {
|
||||
display: 'block',
|
||||
};
|
||||
var MenuItem = React.createClass({
|
||||
propTypes: {
|
||||
href: React.PropTypes.string,
|
||||
label: React.PropTypes.string,
|
||||
icon: React.PropTypes.string,
|
||||
onClick: React.PropTypes.func,
|
||||
},
|
||||
getDefaultProps: function() {
|
||||
return {
|
||||
iconPosition: 'left',
|
||||
}
|
||||
},
|
||||
render: function() {
|
||||
var icon = (this.props.icon ? <Icon icon={this.props.icon} fixed /> : null);
|
||||
|
||||
return (
|
||||
<a style={menuItemStyle} className="button-text no-underline" onClick={this.props.onClick}
|
||||
href={this.props.href || 'javascript:'} label={this.props.label}>
|
||||
{this.props.iconPosition == 'left' ? icon : null}
|
||||
{this.props.label}
|
||||
{this.props.iconPosition == 'left' ? null : icon}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var creditAmountStyle = {
|
||||
color: '#216C2A',
|
||||
fontWeight: 'bold',
|
||||
|
|
@ -367,15 +75,3 @@ var CreditAmount = React.createClass({
|
|||
);
|
||||
}
|
||||
});
|
||||
|
||||
var subPageLogoStyle = {
|
||||
maxWidth: '150px',
|
||||
display: 'block',
|
||||
marginTop: '36px',
|
||||
};
|
||||
|
||||
var SubPageLogo = React.createClass({
|
||||
render: function() {
|
||||
return <a href="/"><img src="img/lbry-dark-1600x528.png" style={subPageLogoStyle} /></a>;
|
||||
}
|
||||
});
|
||||
31
js/component/drawer.js
Normal file
31
js/component/drawer.js
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
var Drawer = React.createClass({
|
||||
getInitialState: function() {
|
||||
return {
|
||||
balance: 0,
|
||||
};
|
||||
},
|
||||
componentDidMount: function() {
|
||||
lbry.getBalance(function(balance) {
|
||||
this.setState({
|
||||
balance: balance
|
||||
});
|
||||
}.bind(this));
|
||||
},
|
||||
render: function() {
|
||||
var isLinux = /linux/i.test(navigator.userAgent); // @TODO: find a way to use getVersionInfo() here without messy state management
|
||||
return (
|
||||
<nav id="drawer">
|
||||
<div id="drawer-handle">
|
||||
<Link title="Close" onClick={this.props.onCloseDrawer} icon="icon-bars" />
|
||||
</div>
|
||||
<Link href='/?home' label="Discover" icon="icon-search" />
|
||||
<Link icon="icon-bank" href="/?wallet" label={<CreditAmount amount={this.state.balance}/>} />
|
||||
<Link href='/?publish' label="Publish" icon="icon-upload" />
|
||||
<Link href='/?files' label="My Files" icon='icon-cloud-download' />
|
||||
<Link href='/?settings' label="Settings" icon='icon-gear' />
|
||||
<Link href='/?help' label="Help" icon='icon-question-circle' />
|
||||
{isLinux ? <Link href="/?start" label="Exit LBRY" icon="icon-close" /> : null}
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
});
|
||||
75
js/component/form.js
Normal file
75
js/component/form.js
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
var requiredFieldWarningStyle = {
|
||||
color: '#cc0000',
|
||||
transition: 'opacity 400ms ease-in',
|
||||
};
|
||||
|
||||
var FormField = React.createClass({
|
||||
_type: null,
|
||||
_element: null,
|
||||
|
||||
propTypes: {
|
||||
type: React.PropTypes.string.isRequired,
|
||||
hidden: React.PropTypes.bool,
|
||||
},
|
||||
getInitialState: function() {
|
||||
return {
|
||||
warningState: 'hidden',
|
||||
}
|
||||
},
|
||||
componentWillMount: function() {
|
||||
if (['text', 'radio', 'checkbox', 'file'].indexOf(this.props.type) != -1) {
|
||||
this._element = 'input';
|
||||
this._type = this.props.type;
|
||||
} else {
|
||||
// Non <input> field, e.g. <select>, <textarea>
|
||||
this._element = this.props.type;
|
||||
}
|
||||
},
|
||||
warnRequired: function() {
|
||||
this.setState({
|
||||
warningState: 'shown',
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
this.setState({
|
||||
warningState: 'fading',
|
||||
});
|
||||
setTimeout(() => {
|
||||
this.setState({
|
||||
warningState: 'hidden',
|
||||
});
|
||||
}, 450);
|
||||
}, 5000);
|
||||
},
|
||||
focus: function() {
|
||||
this.refs.field.focus();
|
||||
},
|
||||
getValue: function() {
|
||||
if (this.props.type == 'checkbox') {
|
||||
return this.refs.field.checked;
|
||||
} else {
|
||||
return this.refs.field.value;
|
||||
}
|
||||
},
|
||||
render: function() {
|
||||
var warningStyle = Object.assign({}, requiredFieldWarningStyle);
|
||||
if (this.state.warningState == 'fading') {
|
||||
warningStyle.opacity = '0';
|
||||
}
|
||||
|
||||
// Pass all unhandled props to the field element
|
||||
var otherProps = Object.assign({}, this.props);
|
||||
delete otherProps.type;
|
||||
delete otherProps.hidden;
|
||||
|
||||
return (
|
||||
<span className={this.props.hidden ? 'hidden' : ''}>
|
||||
<this._element type={this._type} name={this.props.name} ref="field" placeholder={this.props.placeholder}
|
||||
{...otherProps}>
|
||||
{this.props.children}
|
||||
</this._element>
|
||||
<span className={this.state.warningState == 'hidden' ? 'hidden' : ''} style={warningStyle}> This field is required</span>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
});
|
||||
84
js/component/header.js
Normal file
84
js/component/header.js
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
var topBarStyle = {
|
||||
'float': 'right',
|
||||
'position': 'absolute',
|
||||
'right': 0,
|
||||
'top': 0
|
||||
},
|
||||
balanceStyle = {
|
||||
'marginRight': '5px',
|
||||
'position': 'relative',
|
||||
'top': '1px',
|
||||
},
|
||||
menuDropdownStyle = {
|
||||
position: 'absolute',
|
||||
top: '26px',
|
||||
right: '0px',
|
||||
};
|
||||
|
||||
var TopBar = React.createClass({
|
||||
getInitialState: function() {
|
||||
return {
|
||||
balance: 0,
|
||||
};
|
||||
},
|
||||
componentDidMount: function() {
|
||||
lbry.getBalance(function(balance) {
|
||||
this.setState({
|
||||
balance: balance
|
||||
});
|
||||
}.bind(this));
|
||||
},
|
||||
onClose: function() {
|
||||
window.location.href = "?start";
|
||||
},
|
||||
render: function() {
|
||||
var isLinux = /linux/i.test(navigator.userAgent); // @TODO: find a way to use getVersionInfo() here without messy state management
|
||||
return (
|
||||
<span className='top-bar' style={topBarStyle}>
|
||||
<Link icon="icon-bank" href="/?wallet" label={<CreditAmount amount={this.state.balance}/>} style={balanceStyle} />
|
||||
<Link href='/?publish' label="Publish" icon="icon-upload" button="text" />
|
||||
<Link ref="menuButton" title="LBRY Menu" icon="icon-bars" />
|
||||
<div style={menuDropdownStyle}>
|
||||
<Menu toggleButton={this.refs.menuButton} >
|
||||
<MenuItem href='/?files' label="My Files" icon='icon-cloud-download' />
|
||||
<MenuItem href='/?settings' label="Settings" icon='icon-gear' />
|
||||
<MenuItem href='/?help' label="Help" icon='icon-question-circle' />
|
||||
{isLinux ? <MenuItem href="/?start" label="Exit LBRY" icon="icon-close" />
|
||||
: null}
|
||||
</Menu>
|
||||
</div>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var subPageLogoStyle = {
|
||||
maxWidth: '150px',
|
||||
display: 'block',
|
||||
marginTop: '36px',
|
||||
};
|
||||
|
||||
var SubPageLogo = React.createClass({
|
||||
render: function() {
|
||||
return <a href="/"><img src="img/lbry-dark-1600x528.png" style={subPageLogoStyle} /></a>;
|
||||
}
|
||||
});
|
||||
|
||||
var headerStyle = {
|
||||
padding: '12px 12px 36px',
|
||||
position: 'relative'
|
||||
},
|
||||
headerImageStyle = { //@TODO: remove this, img should be properly scaled once size is settled
|
||||
height: '48px'
|
||||
};
|
||||
|
||||
var Header = React.createClass({
|
||||
render: function() {
|
||||
return (
|
||||
<header style={headerStyle}>
|
||||
<Link onClick={this.props.onOpenDrawer} icon="icon-bars" className="open-drawer-link" />
|
||||
<a href="/"><img src="./img/lbry-dark-1600x528.png" style={headerImageStyle}/></a>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
});
|
||||
143
js/component/link.js
Normal file
143
js/component/link.js
Normal file
|
|
@ -0,0 +1,143 @@
|
|||
var linkContainerStyle = {
|
||||
position: 'relative',
|
||||
};
|
||||
|
||||
var Link = React.createClass({
|
||||
getInitialState: function() {
|
||||
return {
|
||||
showTooltip: false,
|
||||
};
|
||||
},
|
||||
handleClick: function() {
|
||||
if (this.props.tooltip) {
|
||||
this.setState({
|
||||
showTooltip: !this.state.showTooltip,
|
||||
});
|
||||
}
|
||||
if (this.props.onClick) {
|
||||
this.props.onClick();
|
||||
}
|
||||
},
|
||||
handleTooltipMouseOut: function() {
|
||||
this.setState({
|
||||
showTooltip: false,
|
||||
});
|
||||
},
|
||||
render: function() {
|
||||
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.hidden ? ' hidden' : '') + (this.props.disabled ? ' disabled' : '') + ' ' + this.props.className;
|
||||
|
||||
|
||||
return (
|
||||
<span style={linkContainerStyle}>
|
||||
<a className={className} href={href} style={this.props.style ? this.props.style : {}}
|
||||
title={this.props.title} onClick={this.handleClick}>
|
||||
{this.props.icon ? icon : '' }
|
||||
{this.props.label}
|
||||
</a>
|
||||
{(!this.props.tooltip ? null :
|
||||
<ToolTip open={this.state.showTooltip} onMouseOut={this.handleTooltipMouseOut}>
|
||||
{this.props.tooltip}
|
||||
</ToolTip>
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var ReturnLink = React.createClass({
|
||||
render: function() {
|
||||
return <div style={ { padding: '24px 0' } }><Link
|
||||
href={this.props.href ? this.props.href : '/'}
|
||||
icon="icon-chevron-left"
|
||||
label={this.props.label ? this.props.label : 'Return'}
|
||||
/></div>;
|
||||
}
|
||||
});
|
||||
|
||||
var DownloadLink = React.createClass({
|
||||
propTypes: {
|
||||
type: React.PropTypes.string,
|
||||
streamName: React.PropTypes.string,
|
||||
label: React.PropTypes.string,
|
||||
downloadingLabel: React.PropTypes.string,
|
||||
button: React.PropTypes.string,
|
||||
style: React.PropTypes.object,
|
||||
hidden: React.PropTypes.bool,
|
||||
},
|
||||
getDefaultProps: function() {
|
||||
return {
|
||||
icon: 'icon-download',
|
||||
label: 'Download',
|
||||
downloadingLabel: 'Downloading...',
|
||||
}
|
||||
},
|
||||
getInitialState: function() {
|
||||
return {
|
||||
downloading: false,
|
||||
}
|
||||
},
|
||||
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.");
|
||||
} else {
|
||||
this.startDownload();
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
startDownload: function() {
|
||||
if (!this.state.downloading) { //@TODO: Continually update this.state.downloading based on actual status of file
|
||||
this.setState({
|
||||
downloading: true
|
||||
});
|
||||
|
||||
lbry.getStream(this.props.streamName, (streamInfo) => {
|
||||
alert('Downloading to ' + streamInfo.path);
|
||||
console.log(streamInfo);
|
||||
});
|
||||
}
|
||||
},
|
||||
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} />;
|
||||
}
|
||||
});
|
||||
|
||||
var WatchLink = React.createClass({
|
||||
propTypes: {
|
||||
type: React.PropTypes.string,
|
||||
streamName: React.PropTypes.string,
|
||||
label: React.PropTypes.string,
|
||||
button: React.PropTypes.string,
|
||||
style: React.PropTypes.object,
|
||||
hidden: React.PropTypes.bool,
|
||||
},
|
||||
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.");
|
||||
} else {
|
||||
window.location = '?watch=' + this.props.streamName;
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
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} />;
|
||||
}
|
||||
});
|
||||
72
js/component/menu.js
Normal file
72
js/component/menu.js
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
// Generic menu styles
|
||||
var menuStyle = {
|
||||
border: '1px solid #aaa',
|
||||
padding: '4px',
|
||||
whiteSpace: 'nowrap',
|
||||
};
|
||||
|
||||
var Menu = React.createClass({
|
||||
handleWindowClick: function(e) {
|
||||
if (this.props.toggleButton && ReactDOM.findDOMNode(this.props.toggleButton).contains(e.target)) {
|
||||
// Toggle button was clicked
|
||||
this.setState({
|
||||
open: !this.state.open
|
||||
});
|
||||
} else if (this.state.open && !this.refs.div.contains(e.target)) {
|
||||
// Menu is open and user clicked outside of it
|
||||
this.setState({
|
||||
open: false
|
||||
});
|
||||
}
|
||||
},
|
||||
propTypes: {
|
||||
openButton: React.PropTypes.element,
|
||||
},
|
||||
getInitialState: function() {
|
||||
return {
|
||||
open: false,
|
||||
};
|
||||
},
|
||||
componentDidMount: function() {
|
||||
window.addEventListener('click', this.handleWindowClick, false);
|
||||
},
|
||||
componentWillUnmount: function() {
|
||||
window.removeEventListener('click', this.handleWindowClick, false);
|
||||
},
|
||||
render: function() {
|
||||
return (
|
||||
<div ref='div' style={menuStyle} className={this.state.open ? '' : 'hidden'}>
|
||||
{this.props.children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var menuItemStyle = {
|
||||
display: 'block',
|
||||
};
|
||||
var MenuItem = React.createClass({
|
||||
propTypes: {
|
||||
href: React.PropTypes.string,
|
||||
label: React.PropTypes.string,
|
||||
icon: React.PropTypes.string,
|
||||
onClick: React.PropTypes.func,
|
||||
},
|
||||
getDefaultProps: function() {
|
||||
return {
|
||||
iconPosition: 'left',
|
||||
}
|
||||
},
|
||||
render: function() {
|
||||
var icon = (this.props.icon ? <Icon icon={this.props.icon} fixed /> : null);
|
||||
|
||||
return (
|
||||
<a style={menuItemStyle} className="button-text no-underline" onClick={this.props.onClick}
|
||||
href={this.props.href || 'javascript:'} label={this.props.label}>
|
||||
{this.props.iconPosition == 'left' ? icon : null}
|
||||
{this.props.label}
|
||||
{this.props.iconPosition == 'left' ? null : icon}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
|
@ -4,7 +4,6 @@ var HelpPage = React.createClass({
|
|||
render: function() {
|
||||
return (
|
||||
<main className="page">
|
||||
<SubPageLogo />
|
||||
<h1>Troubleshooting</h1>
|
||||
<p>Here are the most commonly encountered problems and what to try doing about them.</p>
|
||||
|
||||
|
|
|
|||
|
|
@ -332,94 +332,6 @@ var Discover = React.createClass({
|
|||
}
|
||||
});
|
||||
|
||||
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 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',
|
||||
'position': 'relative',
|
||||
'height': '26px',
|
||||
},
|
||||
balanceStyle = {
|
||||
'marginRight': '5px',
|
||||
'position': 'relative',
|
||||
'top': '1px',
|
||||
};
|
||||
|
||||
var mainMenuStyle = {
|
||||
position: 'absolute',
|
||||
top: '26px',
|
||||
right: '0px',
|
||||
};
|
||||
|
||||
var MainMenu = React.createClass({
|
||||
render: function() {
|
||||
var isLinux = /linux/i.test(navigator.userAgent); // @TODO: find a way to use getVersionInfo() here without messy state management
|
||||
|
||||
return (
|
||||
<div style={mainMenuStyle}>
|
||||
<Menu {...this.props}>
|
||||
<MenuItem href='/?files' label="My Files" icon='icon-cloud-download' />
|
||||
<MenuItem href='/?wallet' label="My Wallet" icon='icon-bank' />
|
||||
<MenuItem href='/?publish' label="Publish" icon='icon-upload' />
|
||||
<MenuItem href='/?settings' label="Settings" icon='icon-gear' />
|
||||
<MenuItem href='/?help' label="Help" icon='icon-question-circle' />
|
||||
{isLinux ? <MenuItem href="/?start" label="Exit LBRY" icon="icon-close" />
|
||||
: null}
|
||||
</Menu>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var TopBar = React.createClass({
|
||||
getInitialState: function() {
|
||||
return {
|
||||
balance: 0,
|
||||
};
|
||||
},
|
||||
componentDidMount: function() {
|
||||
lbry.getBalance(function(balance) {
|
||||
this.setState({
|
||||
balance: balance
|
||||
});
|
||||
}.bind(this));
|
||||
},
|
||||
onClose: function() {
|
||||
window.location.href = "?start";
|
||||
},
|
||||
render: function() {
|
||||
return (
|
||||
<span className='top-bar' style={topBarStyle}>
|
||||
<span style={balanceStyle}>
|
||||
<CreditAmount amount={this.state.balance}/>
|
||||
</span>
|
||||
<Link ref="menuButton" title="LBRY Menu" icon="icon-bars" />
|
||||
<MainMenu toggleButton={this.refs.menuButton} />
|
||||
</span>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var HomePage = React.createClass({
|
||||
componentDidMount: function() {
|
||||
lbry.getStartNotice(function(notice) {
|
||||
|
|
@ -430,10 +342,7 @@ var HomePage = React.createClass({
|
|||
},
|
||||
render: function() {
|
||||
return (
|
||||
<div className="page">
|
||||
<Header />
|
||||
<Discover />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -185,7 +185,6 @@ var MyFilesPage = React.createClass({
|
|||
}
|
||||
return (
|
||||
<main className="page">
|
||||
<SubPageLogo />
|
||||
<h1>My Files</h1>
|
||||
<section>
|
||||
{content}
|
||||
|
|
|
|||
|
|
@ -261,7 +261,6 @@ var PublishPage = React.createClass({
|
|||
render: function() {
|
||||
return (
|
||||
<main className="page" ref="page">
|
||||
<SubPageLogo />
|
||||
<h1>Publish Content</h1>
|
||||
<section className="section-block">
|
||||
<h4>LBRY Name</h4>
|
||||
|
|
|
|||
|
|
@ -21,7 +21,6 @@ var ReportPage = React.createClass({
|
|||
render: function() {
|
||||
return (
|
||||
<main className="page">
|
||||
<SubPageLogo />
|
||||
<h1>Report an Issue</h1>
|
||||
<section>
|
||||
<p>Please describe the problem you experienced and any information you think might be useful to us. Links to screenshots are great!</p>
|
||||
|
|
|
|||
|
|
@ -74,7 +74,6 @@ var SettingsPage = React.createClass({
|
|||
|
||||
return (
|
||||
<main className="page">
|
||||
<SubPageLogo />
|
||||
<h1>Settings</h1>
|
||||
<section>
|
||||
<h4>Run on startup</h4>
|
||||
|
|
|
|||
|
|
@ -141,7 +141,6 @@ var DetailPage = React.createClass({
|
|||
|
||||
return (
|
||||
<main className="page">
|
||||
<SubPageLogo />
|
||||
<FormatsSection name={name} claimInfo={claimInfo} amount={amount} />
|
||||
<section>
|
||||
<ReturnLink />
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@ var StartPage = React.createClass({
|
|||
render: function() {
|
||||
return (
|
||||
<main className="page">
|
||||
<SubPageLogo />
|
||||
<h1>LBRY has closed</h1>
|
||||
<Link href="lbry://lbry" label="Click here to start LBRY" />
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -101,7 +101,6 @@ var WalletPage = React.createClass({
|
|||
render: function() {
|
||||
return (
|
||||
<main className="page">
|
||||
<SubPageLogo />
|
||||
<NewAddressSection />
|
||||
<SendToAddressSection />
|
||||
<section>
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@ var WatchPage = React.createClass({
|
|||
},
|
||||
render: function() {
|
||||
return (
|
||||
<main className="page full-screen">
|
||||
<main className="full-screen">
|
||||
<div className={this.state.readyToPlay ? 'hidden' : ''}>
|
||||
<h3>Loading lbry://{this.props.name}</h3>
|
||||
{this.state.loadStatusMessage}...
|
||||
|
|
|
|||
54
scss/_canvas.scss
Normal file
54
scss/_canvas.scss
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
@import "global";
|
||||
|
||||
html
|
||||
{
|
||||
height: 100%;
|
||||
font-size: $font-size;
|
||||
}
|
||||
body
|
||||
{
|
||||
font-family: 'Source Sans Pro', sans-serif;
|
||||
line-height: 1.3333;
|
||||
min-height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#window
|
||||
{
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#drawer
|
||||
{
|
||||
width: 240px;
|
||||
position: absolute;
|
||||
min-height: 100vh;
|
||||
left: 0;
|
||||
top: 0;
|
||||
.button-text
|
||||
{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
#window.drawer-closed
|
||||
{
|
||||
#drawer { display: none }
|
||||
}
|
||||
#window.drawer-open
|
||||
{
|
||||
#main-content { margin-left: 240px; }
|
||||
.open-drawer-link { display: none; }
|
||||
}
|
||||
|
||||
.page {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 800px;
|
||||
padding-bottom: $spacing-vertical*3;
|
||||
}
|
||||
.full-screen
|
||||
{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -1,30 +1,5 @@
|
|||
@import "global";
|
||||
|
||||
html
|
||||
{
|
||||
height: 100%;
|
||||
font-size: $font-size;
|
||||
}
|
||||
body
|
||||
{
|
||||
font-family: 'Source Sans Pro', sans-serif;
|
||||
line-height: 1.3333;
|
||||
min-height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.page {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 800px;
|
||||
padding-bottom: $spacing-vertical*3;
|
||||
|
||||
&.full-screen {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-fixed-width {
|
||||
/* This borrowed is from a component of Font Awesome we're not using, maybe add it? */
|
||||
width: (18em / 14);
|
||||
|
|
|
|||
|
|
@ -2,4 +2,5 @@
|
|||
@import "_grid";
|
||||
@import "_icons";
|
||||
@import "_mediaelement";
|
||||
@import "_canvas";
|
||||
@import "_gui";
|
||||
Loading…
Reference in a new issue