Merge branch 'master' into featured-content-support
This commit is contained in:
Alex Liebowitz
commit
909685a70e
13 changed files with 185 additions and 60 deletions
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -5,3 +5,4 @@ dist/js/*
|
|||
node_modules
|
||||
.sass-cache
|
||||
.idea
|
||||
.DS_Store
|
||||
|
|
|
|||
BIN
dist.zip
BIN
dist.zip
Binary file not shown.
BIN
js/.DS_Store
vendored
BIN
js/.DS_Store
vendored
Binary file not shown.
24
js/app.js
24
js/app.js
|
|
@ -1,8 +1,3 @@
|
|||
var appStyles = {
|
||||
width: '800px',
|
||||
marginLeft: 'auto',
|
||||
marginRight: 'auto',
|
||||
};
|
||||
var App = React.createClass({
|
||||
getInitialState: function() {
|
||||
// For now, routes are in format ?page or ?page=args
|
||||
|
|
@ -46,24 +41,19 @@ var App = React.createClass({
|
|||
},
|
||||
render: function() {
|
||||
if (this.state.viewingPage == 'home') {
|
||||
var content = <HomePage />;
|
||||
return <HomePage />;
|
||||
} else if (this.state.viewingPage == 'settings') {
|
||||
var content = <SettingsPage />;
|
||||
return <SettingsPage />;
|
||||
} else if (this.state.viewingPage == 'help') {
|
||||
var content = <HelpPage />;
|
||||
return <HelpPage />;
|
||||
} else if (this.state.viewingPage == 'watch') {
|
||||
var content = <WatchPage name={this.state.pageArgs}/>;
|
||||
return <WatchPage name={this.state.pageArgs}/>;
|
||||
} else if (this.state.viewingPage == 'report') {
|
||||
var content = <ReportPage />;
|
||||
return <ReportPage />;
|
||||
} else if (this.state.viewingPage == 'files') {
|
||||
var content = <MyFilesPage />;
|
||||
return <MyFilesPage />;
|
||||
} else if (this.state.viewingPage == 'start') {
|
||||
var content = <StartPage />;
|
||||
return <StartPage />;
|
||||
}
|
||||
return (
|
||||
<div style={appStyles}>
|
||||
{content}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
|
@ -3,9 +3,10 @@
|
|||
var Icon = React.createClass({
|
||||
propTypes: {
|
||||
style: React.PropTypes.object,
|
||||
fixed: React.PropTypes.boolean,
|
||||
},
|
||||
render: function() {
|
||||
var className = 'icon ' + this.props.icon;
|
||||
var className = 'icon ' + ('fixed' in this.props ? 'icon-fixed-width ' : '') + this.props.icon;
|
||||
return <span className={className} style={this.props.style}></span>
|
||||
}
|
||||
});
|
||||
|
|
@ -92,12 +93,85 @@ var WatchLink = React.createClass({
|
|||
} else {
|
||||
var uri = 'lbry://' + this.props.streamName;
|
||||
}
|
||||
|
||||
return <Link button={this.props.button} hidden={this.props.hidden} style={this.props.style}
|
||||
href={uri} label={this.props.label} icon={this.props.icon} onClick={this.onClick} />;
|
||||
}
|
||||
});
|
||||
|
||||
// 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() {
|
||||
console.log('menuStyle is', menuStyle);
|
||||
return (
|
||||
<div ref='div' style={menuStyle} className={this.state.open ? 'thediv' : '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.function,
|
||||
},
|
||||
getDefaultProps: function() {
|
||||
return {
|
||||
iconPosition: 'left',
|
||||
}
|
||||
},
|
||||
render: function() {
|
||||
var icon = (this.props.icon ? <Icon icon={this.props.icon} fixed /> : null);
|
||||
|
||||
return (
|
||||
<a style={menuItemStyle} href={this.props.href} label={this.props.label} title={this.props.label}
|
||||
className="button-text no-underline">
|
||||
{this.props.iconPosition == 'left' ? icon : null}
|
||||
{this.props.label}
|
||||
{this.props.iconPosition == 'left' ? null : icon}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var creditAmountStyle = {
|
||||
color: '#216C2A',
|
||||
fontWeight: 'bold',
|
||||
|
|
@ -120,4 +194,16 @@ var CreditAmount = React.createClass({
|
|||
</span>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var subPageLogoStyle = {
|
||||
maxWidth: '150px',
|
||||
display: 'block',
|
||||
marginTop: '36px',
|
||||
};
|
||||
|
||||
var SubPageLogo = React.createClass({
|
||||
render: function() {
|
||||
return <img src="img/lbry-dark-1600x528.png" style={subPageLogoStyle} />;
|
||||
}
|
||||
});
|
||||
|
|
@ -3,26 +3,27 @@
|
|||
var HelpPage = React.createClass({
|
||||
render: function() {
|
||||
return (
|
||||
<main>
|
||||
<main className="page">
|
||||
<SubPageLogo />
|
||||
<h1>Troubleshooting</h1>
|
||||
<p>Here are the most commonly encountered problems and what to try doing about them</p>
|
||||
<p>Here are the most commonly encountered problems and what to try doing about them.</p>
|
||||
|
||||
<h3>Nothing seems to start downloading</h3>
|
||||
<p>Not all content that you find in the search window is necessarily hosted; LBRY is still young. However, 'wonderfullife' should assuredly be accessible. If you can't download it, and you're not experiencing the below problem, try forwarding ports 4444 and 3333 on your firewall or router.</p>
|
||||
<h3>Nothing seems to start downloading.</h3>
|
||||
<p>If you can't download anything, including 'wonderfullife', try forwarding ports 4444 and 3333 on your firewall or router. If you can access 'wonderfullife' but not other content, it's possible the content is not longer hosted on the network.</p>
|
||||
|
||||
<h3>Videos have trouble playing</h3>
|
||||
<p>This is caused by your video player trying to start the file while it's still empty. Try reloading the page after a few seconds, it should work. You should also see the file appear in the downloads folder configured in your LBRY settings, which is the gear icon at the top of the main menu.</p>
|
||||
<h3>Videos have trouble playing.</h3>
|
||||
<p>Sometimes your video player will start the file while it's still empty. Try reloading the page after a few seconds and it may work. You should also see the file appear in your downloads folder (configured in <a href="/?settings">settings</a>).</p>
|
||||
|
||||
<p>A real fix for this is underway!</p>
|
||||
|
||||
<h3>How do I turn LBRY off?</h3>
|
||||
<p>If you're on OS X you can find the app running in the notification area at the top right of your screen; simply click the LBRY icon and choose "Quit."</p>
|
||||
<p>If you're on OS X you can find the app running in the notification area at the top right of your screen. Click the LBRY icon and choose <code>Quit</code>.</p>
|
||||
|
||||
<p>On Linux, you'll find a Close button in the menu at the top right of LBRY.</p>
|
||||
<p>On Linux, you'll find a close button in the menu at the top right of LBRY.</p>
|
||||
|
||||
<p>If you're running LBRY from the command line, you may also close the app with the command "stop-lbrynet-daemon."</p>
|
||||
<p>If you're running LBRY from the command line, you may also close the app with the command <code>stop-lbrynet-daemon</code></p>
|
||||
|
||||
<h3>None of this applies to me, or it didn't work</h3>
|
||||
<h3>None of this applies to me, or it didn't work.</h3>
|
||||
<p>Please <Link href="/?report" label="send us a bug report" />. Thanks!</p>
|
||||
<section>
|
||||
<Link href="/" label="<< Return" />
|
||||
|
|
@ -30,4 +31,4 @@ var HelpPage = React.createClass({
|
|||
</main>
|
||||
);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -297,26 +297,41 @@ var Header = React.createClass({
|
|||
});
|
||||
|
||||
var topBarStyle = {
|
||||
'float': 'right'
|
||||
},
|
||||
menuStyle = {
|
||||
'fontSize': '1.1em',
|
||||
'float': 'right',
|
||||
'position': 'relative',
|
||||
'height': '26px',
|
||||
},
|
||||
balanceStyle = {
|
||||
'marginRight': '5px'
|
||||
},
|
||||
closeIconStyle = {
|
||||
'color': '#ff5155'
|
||||
};
|
||||
|
||||
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='/?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({
|
||||
onClose: function() {
|
||||
window.location.href = "?start";
|
||||
},
|
||||
getInitialState: function() {
|
||||
return {
|
||||
balance: 0,
|
||||
showClose: /linux/i.test(navigator.userAgent) // @TODO: find a way to use getVersionInfo() here without messy state management
|
||||
};
|
||||
},
|
||||
componentDidMount: function() {
|
||||
|
|
@ -326,20 +341,17 @@ var TopBar = React.createClass({
|
|||
});
|
||||
}.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>
|
||||
<span style={menuStyle}>
|
||||
<Link href='/?files' title="My Files" icon='icon-cloud-download' />
|
||||
<Link href='/?settings' title="Settings" icon='icon-gear' />
|
||||
<Link href='/?help' title="Help" icon='icon-question-circle' />
|
||||
<Link href="/?start" title="Start" onClick={this.onClose} icon="icon-close"
|
||||
style={closeIconStyle} hidden={!this.state.showClose} />
|
||||
</span>
|
||||
<Link ref="menuButton" title="LBRY Menu" icon="icon-bars" />
|
||||
<MainMenu toggleButton={this.refs.menuButton} />
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
|
@ -355,7 +367,7 @@ var HomePage = React.createClass({
|
|||
},
|
||||
render: function() {
|
||||
return (
|
||||
<div>
|
||||
<div className="page">
|
||||
<Header />
|
||||
<Discover />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -119,7 +119,8 @@ var MyFilesPage = React.createClass({
|
|||
}
|
||||
}
|
||||
return (
|
||||
<main>
|
||||
<main className="page">
|
||||
<SubPageLogo />
|
||||
<h1>My files</h1>
|
||||
<section>
|
||||
{content}
|
||||
|
|
|
|||
|
|
@ -20,7 +20,8 @@ var ReportPage = React.createClass({
|
|||
},
|
||||
render: function() {
|
||||
return (
|
||||
<main>
|
||||
<main className="page">
|
||||
<SubPageLogo />
|
||||
<h1>Report a bug</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>
|
||||
|
|
|
|||
|
|
@ -73,7 +73,8 @@ var SettingsPage = React.createClass({
|
|||
}
|
||||
|
||||
return (
|
||||
<main>
|
||||
<main className="page">
|
||||
<SubPageLogo />
|
||||
<h1>Settings</h1>
|
||||
<section>
|
||||
<h4>Run on startup</h4>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,8 @@ var StartPage = React.createClass({
|
|||
},
|
||||
render: function() {
|
||||
return (
|
||||
<main>
|
||||
<main className="page">
|
||||
<SubPageLogo />
|
||||
<h1>LBRY has closed</h1>
|
||||
<Link href="lbry://lbry" label="Click here to start LBRY" />
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
var videoStyle = {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
// height: '100%',
|
||||
backgroundColor: '#000'
|
||||
};
|
||||
|
||||
|
|
@ -39,7 +39,7 @@ var WatchPage = React.createClass({
|
|||
},
|
||||
render: function() {
|
||||
return (
|
||||
<main>
|
||||
<main className="page full-width">
|
||||
<div className={this.state.readyToPlay ? 'hidden' : ''}>
|
||||
<h3>Loading lbry://{this.props.name}</h3>
|
||||
{this.state.loadStatusMessage}...
|
||||
|
|
|
|||
|
|
@ -13,6 +13,22 @@ body
|
|||
position: relative;
|
||||
}
|
||||
|
||||
.page {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 800px;
|
||||
|
||||
&.full-width {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-fixed-width {
|
||||
/* This borrowed is from a component of Font Awesome we're not using, maybe add it? */
|
||||
width: (18em / 14);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
section
|
||||
{
|
||||
margin-bottom: $spacing-vertical;
|
||||
|
|
@ -22,7 +38,7 @@ section
|
|||
}
|
||||
}
|
||||
|
||||
h1 { font-size: 2.0em; margin-bottom: $spacing-vertical / 2; margin-top: $spacing-vertical * 1.5; }
|
||||
h1 { font-size: 2.0em; margin-bottom: $spacing-vertical / 2; margin-top: $spacing-vertical; }
|
||||
h2 { font-size: 1.75em; }
|
||||
h3 { font-size: 1.4em; }
|
||||
h4 { font-size: 1.2em; }
|
||||
|
|
@ -127,15 +143,30 @@ input[type="search"]
|
|||
.button-text
|
||||
{
|
||||
color: $color-primary;
|
||||
text-decoration: underline;
|
||||
.icon:first-child
|
||||
.icon
|
||||
{
|
||||
padding-right: 5px;
|
||||
&:first-child {
|
||||
padding-right: 5px;
|
||||
}
|
||||
&:last-child:not(:only-child) {
|
||||
padding-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.no-underline) {
|
||||
text-decoration: underline;
|
||||
.icon {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
&:hover
|
||||
{
|
||||
opacity: 0.70;
|
||||
transition: opacity .225s ease;
|
||||
text-decoration: underline;
|
||||
.icon {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue