lbry-desktop/ui/js/page/help.js

122 lines
4 KiB
JavaScript
Raw Normal View History

//@TODO: Customize advice based on OS
2016-11-22 21:19:08 +01:00
//@TODO: Customize advice based on OS
import React from 'react';
import lbry from '../lbry.js';
import {Link} from '../component/link.js';
2017-04-27 15:17:18 +02:00
import {SettingsNav} from './settings.js';
2017-02-24 05:36:19 +01:00
import {version as uiVersion} from 'json!../../package.json';
2016-04-20 12:28:13 +02:00
var HelpPage = React.createClass({
getInitialState: function() {
return {
versionInfo: null,
lbryId: null,
};
},
componentWillMount: function() {
lbry.getVersionInfo((info) => {
this.setState({
versionInfo: info,
});
});
lbry.getSessionInfo((info) => {
this.setState({
lbryId: info.lbry_id,
});
});
},
2016-04-20 12:28:13 +02:00
render: function() {
2017-02-24 05:36:19 +01:00
let ver, osName, platform, newVerLink;
if (this.state.versionInfo) {
ver = this.state.versionInfo;
if (ver.os_system == 'Darwin') {
osName = (parseInt(ver.os_release.match(/^\d+/)) < 16 ? 'Mac OS X' : 'Mac OS');
platform = `${osName} ${ver.os_release}`
newVerLink = 'https://lbry.io/get/lbry.dmg';
} else if (ver.os_system == 'Linux') {
platform = `Linux (${ver.platform})`;
newVerLink = 'https://lbry.io/get/lbry.deb';
} else {
platform = `Windows (${ver.platform})`;
newVerLink = 'https://lbry.io/get/lbry.msi';
2016-08-27 00:06:22 +02:00
}
} else {
ver = null;
}
2016-08-27 00:06:22 +02:00
2016-04-20 12:28:13 +02:00
return (
<main className="main--single-column">
2017-04-27 15:17:18 +02:00
<SettingsNav viewingPage="help" />
2016-08-08 00:45:26 +02:00
<section className="card">
2017-04-11 18:03:56 +02:00
<div className="card__title-primary">
<h3>Read the FAQ</h3>
</div>
<div className="card__content">
<p>Our FAQ answers many common questions.</p>
<p><Link href="https://lbry.io/faq" label="Read the FAQ" icon="icon-question" button="alt"/></p>
</div>
2016-08-08 00:45:26 +02:00
</section>
<section className="card">
2017-04-11 18:03:56 +02:00
<div className="card__title-primary">
<h3>Get Live Help</h3>
</div>
<div className="card__content">
<p>
Live help is available most hours in the <strong>#help</strong> channel of our Slack chat room.
</p>
<p>
<Link button="alt" label="Join Our Slack" icon="icon-slack" href="https://slack.lbry.io" />
</p>
</div>
2016-08-08 00:45:26 +02:00
</section>
<section className="card">
2017-04-11 18:03:56 +02:00
<div className="card__title-primary"><h3>Report a Bug</h3></div>
<div className="card__content">
<p>Did you find something wrong?</p>
<p><Link href="?report" label="Submit a Bug Report" icon="icon-bug" button="alt" /></p>
<div className="meta">Thanks! LBRY is made by its users.</div>
</div>
2016-04-20 12:28:13 +02:00
</section>
2016-08-27 00:06:22 +02:00
{!ver ? null :
<section className="card">
2017-04-11 18:03:56 +02:00
<div className="card__title-primary"><h3>About</h3></div>
<div className="card__content">
{ver.lbrynet_update_available || ver.lbryum_update_available ?
<p>A newer version of LBRY is available. <Link href={newVerLink} label={`Download LBRY ${ver.remote_lbrynet} now!`} /></p>
: <p>Your copy of LBRY is up to date.</p>
}
<table className="table-standard">
<tbody>
<tr>
<th>daemon (lbrynet)</th>
<td>{ver.lbrynet_version}</td>
</tr>
<tr>
<th>wallet (lbryum)</th>
<td>{ver.lbryum_version}</td>
</tr>
<tr>
<th>interface</th>
<td>{uiVersion}</td>
</tr>
<tr>
<th>Platform</th>
<td>{platform}</td>
</tr>
<tr>
<th>Installation ID</th>
<td>{this.state.lbryId}</td>
</tr>
</tbody>
</table>
</div>
</section>
}
2016-04-20 12:28:13 +02:00
</main>
);
}
2016-05-20 17:54:53 +02:00
});
2016-11-22 21:19:08 +01:00
export default HelpPage;